More than 5 years have passed since last update.

django-jet を試してみる

Last updated at 2018-01-14Posted at 2018-01-14

「改良された機能を備えたDjango管理インターフェース用の現代的な応答テンプレート」（Google翻訳）
Django Packages の管理サイトインターフェース部門で人気もありそうで、機能比較表で✓も多かったので試してみることに。
ドキュメントに従って設定。

使用した環境

Windows10
Python 3.5.4
Django 1.11.8
django-jet-1.0.7

インストール

> pip install django-jet

設定

settings.py

INSTALLED_APPS に jet を追加。

INSTALLED_APPS = [
    # TODO: for jet
    'jet',
    'django.contrib.admin',
    ...
]

TEMPLATES にコンテキストプロセッサを追加。デフォルトで入ってますが、なければ追加。

TEMPLATES = [
    {
        ...
        'OPTIONS': {
            'context_processors': [
                ...
                'django.template.context_processors.request',
                ...
            ],
        },
    },
]

urls.py

urlパターンを追加。このurlは関連検索やオートコンプリートに使用するらしい。adminサイトのurlは変わりません。

urlpatterns = [
    # TODO: for jet
    url(r'^jet/', include('jet.urls', 'jet')),  # Django JET URLS
    url(r'^admin/', admin.site.urls),
]

jet の DBテーブルを作成

Djangoプロジェクトのディレクトリに移動し jet のモデルをマイグレート。

> cd project_directory
> python manage.py migrate jet

collectstaticコマンド実行

今回はローカル環境だけなのでこれは不要。

管理サイトを起動

デフォルトの管理サイト(Home)

比較のため django-jet 適用前のデフォルトの管理サイト

django-jet 適用後の管理サイト(Home)

良い。先日試した django-grappelli と比べると随分今風。使えそう。

Dashbordを設定

settings.py

INSTALLED_APPS に以下の順番で jet.dashboard を追加。

INSTALLED_APPS = [
    # TODO: for jet
    'jet.dashboard',
    'jet',
    'django.contrib.admin',

jet の DBテーブルを作成

Djangoプロジェクトのディレクトリで dashboard のモデルをマイグレート。

> cd project_directory
> python manage.py migrate dashboard

collectstaticコマンド実行

今回はローカル環境だけなのでこれは不要。

管理サイトを起動 (Dashboard適用後)

カスタマイズ未のDashboard。

スマホから。

冒頭の「…現代的な応答テンプレート」である。

良い感じなので少し弄ってみる

dashboardカスタマイズのドキュメント。

Google Analytics Widgets

Google Analytics Widgets なるものがあったので、これを弄ってみる。

google-api-python-client をインストール

pip install google-api-python-client

settings.py

GoogleAPI の認証情報ファイル (client_secrets.jsonの取得方法) のパスを設定

# TODO: for jet google_analytics
JET_MODULE_GOOGLE_ANALYTICS_CLIENT_SECRETS_FILE = os.path.join(BASE_DIR, 'client_secrets.json')

urls.py

urls.pyに以下の行を追加。

# TODO: for jet google_analytics
from jet.dashboard.dashboard_modules import google_analytics_views

dashboard.py

プロジェクト直下に以下の内容で dashboard.py というファイルを作成。

from django.utils.translation import ugettext_lazy as _
from jet.dashboard.dashboard import Dashboard, AppIndexDashboard
from jet.dashboard.dashboard_modules import google_analytics

class CustomIndexDashboard(Dashboard):
    columns = 3

    def init_with_context(self, context):
        self.available_children.append(
            google_analytics.GoogleAnalyticsVisitorsTotals)
        self.available_children.append(
            google_analytics.GoogleAnalyticsVisitorsChart)
        self.available_children.append(
            google_analytics.GoogleAnalyticsPeriodVisitors)

再び settings.py

上記の dashboard.py のクラスを使用する旨を settings.py に追加。

# TODO: for jet google_analytics
JET_INDEX_DASHBOARD = 'dashboard.CustomIndexDashboard'

ここで管理サイトを起動して Google Analytics Widgets を試してみようとすると、

Uncaught TypeError: django.jQuery is not a function

js エラー発生。ガーン。https://github.com/geex-arts/django-jet/issues/161 に回避策があった。長いやりとりなので回避策部分だけ以下に抜粋。

Add to folder : jet/static/jet/js/build/ file jquery.init.js with a code:

/*global django:true, jQuery:false*/
/* Puts the included jQuery into our own namespace using noConflict and passing
 * it 'true'. This ensures that the included jQuery doesn't pollute the global
 * namespace (i.e. this preserves pre-existing values for both window.$ and
 * window.jQuery).
 */

var django = django || {};
django.jQuery = jQuery.noConflict(true);

next in file: jet/templates/admin/base.html add 2 lines in the head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="{% static "jet/js/build/jquery.init.js" as url %}{{ url|jet_append_version }}"></script>