スポンサードリンク



こんにちは。sinyです。

Djangoアプリを開発する際に苦労するのが画面のデザインですよね。

スキルがあるWEBデザイナーでもないかぎり、かっこいいデザインの画面を1から作るのはかなり学習コストも高くむずかしいと思います。

そこで、この記事では無料で公開されている管理画面用のテンプレートを使ってDjangoの画面をかっこよく、しかも短時間で開発する方法をご紹介します。

Bootstrap対応の管理画面のテンプレートを使おう

世の中には、無料で利用できてしかもデザインもかっこいい管理画面のテンプレートというものが存在しています。

試しに、「管理テンプレート bootstrap」といったキーワードでググってみてください。

無料で利用できるWEB管理画面のテンプレートがたくさん存在します。

その中で、今回は「AdminLTE」という無料で使えるテンプレートを使ってDjangoのWEB管理画面を開発する手順を説明します。

手順は比較的簡単なので、初心者でも見た目のかっこいい管理画面を作ることができますのでぜひ試してみてください。

 今回紹介するAdminLTEはMIT Licenseなので無料で利用できますが、中には有料のものも存在しますので注意しましょう

管理画面テンプレートを使ったDjangoアプリ画面の開発手順

それでは、AdminLTEを利用したDjangoアプリのWEB管理画面の開発手順を説明します。

AdminLTEテンプレートのダウンロード

以下のGitサイトからAdminLTEのテンプレートファイルをダウンロードします。

現時点で最新バージョンが「AdminLTE 2.4.10」なので上記Gitサイトのバージョン2.4.10の「Source code(zip)」をクリックしてダウンロードしましょう。

AdminLTE-2.4.10.zipというファイルがダウンロードできたら任意の場所に解凍しましょう。
AdminLTE-2.4.10」というフォルダが解凍されます。

Django環境の構築

まずは、Djangoの初期環境を構築していきます。

以下の作業を実施しましょう。

  1. 仮想環境作成(python -m venv site)とActivate
    ※この例ではsiteという仮想環境を作成
  2. Djangoのインストールpip install django)
  3. プロジェクト作成django-admin startproject admin)
    ※この例ではadminというDjangoプロジェクトを作成
  4. アプリケーション作成python manage.py startapp app
    ※この例ではappというアプリケーションを作成
  5. settings.pyのカスタマイズ

    ※INSTALLED_APPにアプリケーションを追加

    ※テンプレートファイルの場所を設定

    ※静的ファイルのパスを指定

    ※日本語化対応

  6. マイグレーション実行python manage.py migrate)
  7. 管理者ユーザ作成python manage.py createsuperuser
  8. 開発サーバ実行python manage.py runserver
    ※日本語のデフォルトページが表示されることを確認
  9. テンプレートフォルダを作成
    ※プロジェクトフォルダ(admin)直下にtemplates\appフォルダを作る。
  10. 静的ファイルの配置先フォルダを作成
    ※プロジェクトフォルダ(admin)直下にstatic_for_deployフォルダを作る。
  11. アプリケーションフォルダ(app)の直下にstaticフォルダを作り解凍したAdminLTE-2.4.10フォルダを丸ごと配置
  12. プロジェクト直下のurls.pyの設定

     

  13. アプリケーション(app)直下にurls.pyを作成
  14. views.pyの設定
  15. TOP画面テンプレートの準備
    admin\app\static\\AdminLTE-2.4.10\index.html\admin\templates\appフォルダ直下にコピーします。
  16. http://127.0.0.1:8000/app/index/ にアクセスします。
    ※現時点では以下のようなCSS等が未適用状態のWEB画面が表示されます。

  17. 静的ファイルの収集(python manage.py collectstatic)
    「7175 static files copied to 'C:\django\admin\static_for_deploy'」のように表示されて、先ほど作成したstatic_for_deployフォルダ配下に必要な静的ファイルが集約されます。

    ただし、まだこの状態ではAdminLTEのデザインはまだ適用されていません。

  18. AdminLTEのテンプレートを適用する

    templates\app\index.html内の<link>タグ<scripts>タグのパスをDjangoで定義した静的フォルダ(static_for_deploy)を参照するように以下の形式に修正します。

{% static '参照先のファイルパス' %}"

 

数が多いですが、頑張りましょう。

最後に、index.htmlの先頭に以下を追記します。

{% load staticfiles %}

http://127.0.0.1:8000/app/index/を更新すると以下のようにadminLTEデザインが適用されたWEBページが表示されます。

あとは必要に応じてAdminLTEのテンプレートをベースに不要なHTMLコードをそぎ落としたり、日本語化するなどすればOKです。

参考例ですが、ちょっとカスタマイズすると以下のようなWEB管理画面のデザインを簡単に作ることができます。

比較的簡単にデザインが整ったWEB管理画面を作ることができるので、皆さんもぜひ試してみてください。

以上、「管理画面テンプレートでDjangoアプリのデザインを良くする方法」でした。

おすすめの記事