Djangoの管理画面を比較してみた


`Friday I/O` でーす！
[株式会社ワムウ](http://wamw.jp)では、毎週金曜日は `興味がある事柄に取り組み、その成果を何らかの形でアウトプットする日` としております。


## はじめに

今回は数あるDjangoのadmin interface系ライブラリを見比べてみましたー。
[こちら](https://djangopackages.org/grids/g/admin-interface/) を見ると大量にライブラリがあるんですが、その中でも有名どころを4つピックアップして比較してみましたよ。

ソースコードは以下のリポジトリにあります。
管理画面毎にブランチ切っているので、切り替えて確認してみてくださいねー。

https://github.com/odoku/django-admins


## Django

デフォルトの管理画面で御座います。
[Django 1.9](https://docs.djangoproject.com/en/1.11/releases/1.9/#new-styling-for-contrib-admin)でデザインの刷新をしたので割とモダーンな作りにはなってます。
Admin拡張ライブラリはデフォルトの管理画面を基準に作られてるので、実は一番カスタマイズ性があったりします。
でもやぱっりちょっと色々と面倒なのは否めず。。

### Login

![01_login.png](https://qiita-image-store.s3.amazonaws.com/0/12537/4bd1818f-33d4-1acc-1252-25b196697369.png "01_login.png")

### Dashboard

![02_dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/12537/efa33b5f-699f-06e7-f692-c77f37a3073d.png "02_dashboard.png")

### List

![03_list.png](https://qiita-image-store.s3.amazonaws.com/0/12537/7ea97ced-ede6-ce84-7755-5c13d02c3a07.png "03_list.png")

### Edit

![04_edit.png](https://qiita-image-store.s3.amazonaws.com/0/12537/10d3fd42-9354-9cf3-92bc-93ceb15f2638.png "04_edit.png")


## django-jet

Github: https://github.com/geex-arts/django-jet
Document: http://jet.readthedocs.io/en/latest/
Demo: http://demo.jet.geex-arts.com/admin/login/?next=/admin/

今回最有力の管理画面で御座います！
見た目もわりと綺麗ですし、ダッシュボードもカスタマイズ出来るし、基本的にはコレ使っておけばおk感ある。

### Login

![01_login.png](https://qiita-image-store.s3.amazonaws.com/0/12537/0ebc63db-d4cd-d26d-a7dd-fb81b8c680f2.png "01_login.png")

### Dashboard

ウィジェットはドラッグで移動出来たりします。
クライアントのおじさん達にはかっこいいダッシュボード見せておけば大体喜んでくれるはず。

ちなみに、左メニュー下の `BOOKMARKS` には、任意のURLをブックマークとして保存出来ますよ。
よく編集するページとか、GoogleスプレッドシートのURLとか保存しておくと良いかも。
`追加のページを管理画面に作って` なんて要望も、とりあえずこれがあれば何とかごまかせそう。

![02_dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/12537/7c28ed8a-db97-c760-874d-8ea0392faf73.png "02_dashboard.png")

### List

一覧もすっきりキレイ。

![03_list.png](https://qiita-image-store.s3.amazonaws.com/0/12537/95248c77-76c8-1155-83fe-b1b7911d0019.png "03_list.png")

### Edit

要素のマージンとかが微妙だけど、まあまあキレイっちゃーキレイっす。

`ManyToManyField` の項目が自動的に `インクリメンタルサーチ` のwidgetになってるのがステキ。

![04_edit.png](https://qiita-image-store.s3.amazonaws.com/0/12537/7ac76a33-1bfc-9a35-d263-9948b1738f3e.png "04_edit.png")

`django-jet` はインラインの要素を勝手にタブにしてくれる様です！

![05_edit_inline.png](https://qiita-image-store.s3.amazonaws.com/0/12537/93088e63-0b5e-4f9f-5fc0-e44ebd2d3638.png "05_edit_inline.png")


## django-suit

Github: https://github.com/darklow/django-suit
Document: http://django-suit.readthedocs.io/en/develop/
Demo: http://djangosuit.com/admin/

こちらも中々美しげな見た目で御座います！
が！[商用利用の場合は有料](http://djangosuit.com/pricing/)なのでご注意下さいませ。
しかし、それに見合うだけのカスタマイズ性が御座いますよ。

### Login

![01_login.png](https://qiita-image-store.s3.amazonaws.com/0/12537/c95a0f0e-b8a0-c8b4-b891-bc64c4b30ba9.png "01_login.png")

### Dashboard

ダッシュボードのカスタマイズは出来ないご様子。。

![02_dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/12537/f95ffa3e-764f-883e-b8ea-e45b4a66fd0d.png "02_dashboard.png")

### List

今回は実装してませんが、[一覧ページで要素の並び替えが出来る機能](http://django-suit.readthedocs.io/en/develop/sortables.html)を持っています。
おじさん達並び替えるの大好きなので、これは中々ポイント高いと思います！

![03_list.png](https://qiita-image-store.s3.amazonaws.com/0/12537/b531ec35-fce0-0a5e-1787-d34da0c302ec.png "03_list.png")

### Edit

これも今回は実装してないですが、[任意の項目をタブページに切り出す機能](http://django-suit.readthedocs.io/en/develop/form_tabs.html)があります！

今気づきましたが、これ `保存` とかのボタンが表示されて無いですね。。
確認したら `Wysiwygエディタ` の横幅が固定値になっているのが原因だった様です。
普通に使う分にはちゃんと表示されるのでご安心ください！

![04_edit.png](https://qiita-image-store.s3.amazonaws.com/0/12537/82a31a5d-6bc3-6ca5-511c-775a0d9230d2.png "04_edit.png")


## django-grappelli

Github: https://github.com/sehmaschine/django-grappelli
Document: https://django-grappelli.readthedocs.io/en/latest/

見た目がちょっと古めかしい気もしますが、普通にキレイなUIの管理画面です。
grappelliも結構しっかりとカスタマイズ出来るので、自分でシコシコいじりたい人は良いかもしれません。
`django-suit` と違い無償で利用が出来ますよ！

### Login

![01_login.png](https://qiita-image-store.s3.amazonaws.com/0/12537/af8485b0-f5d0-c064-f6eb-28d9ba3c5b11.png "01_login.png")

### Dashboard

grappelliも[ダッシュボードのカスタマイズ機能](https://django-grappelli.readthedocs.io/en/latest/dashboard_setup.html)を持っているのですが、
こちらはウィジェットを追加する様な感じではなく、ゴリゴリ実装していくタイプの様ですね。

![02_dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/12537/bcd3edb1-a4a6-200a-8300-e7d516d99747.png "02_dashboard.png")

### List

一覧のカスタマイズは[あんまり出来なそう](https://django-grappelli.readthedocs.io/en/latest/customization.html#changelist-templates)。。

![03_list.png](https://qiita-image-store.s3.amazonaws.com/0/12537/2dfcd924-0066-e0d0-e762-0e1a8b26b9ec.png "03_list.png")

### Edit

[インライン要素の並び替え](https://django-grappelli.readthedocs.io/en/latest/customization.html#inline-sortables)や
[オートコンプリート](https://django-grappelli.readthedocs.io/en/latest/customization.html#autocomplete-lookups)など、
中々痒いところに手が届く感じになっています！！

![04_edit.png](https://qiita-image-store.s3.amazonaws.com/0/12537/42e9756a-c14c-8566-3be8-e6dd0ad65079.png "04_edit.png")


## django-material

Github: https://github.com/viewflow/django-material
Document: http://docs.viewflow.io/material_admin.html
Demo: http://demo.viewflow.io/admin/login/?next=/admin/

[Materialzie](http://materializecss.com)を利用して作成された管理画面の様です！
正直、拡張性がないどころか[機能制限される](http://docs.viewflow.io/admin_unsupported.html)んで微妙な所ではありますが、
Djangoの管理画面らしからぬ見た目になるので割と面白いです。

### Login

主張が強いw

![01_login.png](https://qiita-image-store.s3.amazonaws.com/0/12537/ce53569f-15d9-8932-2d97-cbcbcef62b19.png "01_login.png")

### Dashboard

なんか[アイコンつけられる](http://docs.viewflow.io/admin_customization.html)様ですよ！
これはちょっと良いなと思いました。

![02_dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/12537/0f762918-d851-b7f5-bf7b-6bfbe2f89f69.png "02_dashboard.png")

### List

Google感出てる。

![03_list.png](https://qiita-image-store.s3.amazonaws.com/0/12537/cf388c8d-723b-10d5-0dff-352df9b90e8d.png "03_list.png")

### Edit

残念ながら `Wysiwygエディタ` が動いておりません！！！！
なんか調整すればイケるのかも知れないですが、力尽きました。。
`StackedInline` が `3カラム` で並んでんのが良さげですが、横に長い要素の場合どうなるんだろうかとちょっと心配です。

![04_edit.png](https://qiita-image-store.s3.amazonaws.com/0/12537/4666b12e-adcf-04c5-210c-c297ae853f4e.png "04_edit.png")


## まとめ

いかがでしたか！
記事書いててスクリーンショットあんま意味ないなと思いましたが、雰囲気が伝われば良いかなと思いました。
個人的には、さっくり作るなら `django-jet` で、がっつりカスタマイズするなら `django-grappelli` かなという感じです。
ただ、色々と便利な `管理画面様ライブラリ` がDjangoにはあるのですが、それらがちゃんと動くかどうかも重要なので、
結局のところ無難なのは `デフォルトの管理画面` なのかも知れません。

なにはともあれ、Djangoの管理画面便利なので皆さんもイジイジして使いましょうー◎