SAYAD'LOG

さやどろぐ。弱小webエンジニア。適当なことしか書きません。

DjangoAdminをオシャレにしようとしたら失敗した。 #vgadvent2014

※この記事は
VOYAGE GROUP エンジニアブログ : Advent Calendar 2014
の19日目の記事として書かれています。

こんにちは、 @sayadroid です。
Androidに親しみを持ってそうな名前ですが、
Android開発はあまり好きではありません(^・∞・^)ブヒ

今日の題材もAndroidのアの字も出てこないPythonの話をしようと思います。

Python使いならきっと誰もが知っているフルスタックフレームワークDjango


このフレームワーク本当に優秀で、
このDjango tutorialに則って手を動かしていくだけで、
あれよあれよとwebアプリケーションが出来上がります。

今回は中でも便利なadmin(管理画面)について。

コマンド一発でよしなに出来上がるDjango default adminですが、
ちょっと見た目が旧世代な感じ(小声)。

f:id:sayadroid:20141219125836p:plain

これをちょっとオシャレにカスタマイズしようという試みです。
何をやるかというとdefault adminに、
カスタムstaticファイルをオーバーライドしていくという感じです。


一番お手軽にちょっとシャレオツにカスタマイズ出来るのは、
やっぱりtwitter bootstrapかなあ。

ということで、Djangoにbootstrapを組み込む。

こちらの記事を参考にさせて頂きました。
django で twitter bootstrap を使う - Qiita

上記の記事がコード付の大変丁寧なものになっているので、
こちらでは概要だけ列挙します。

  • settings.pyにて、静的ファイルの置き場所(STATICFILES_DIRS)を指定
  • urls.py にて、静的フィァイルのルーティング設定
  • 指定したSTATICFILES_DIRS以下にDLしてきたbootstrapの中身(/css, /jsなど)を展開

これで準備は完了です。


あとはtemplateに、bootstrapのcssやjsを読み込んでみましょう。


今回はDjangoのdafault管理画面をカスタマイズすることが目的ですので、
Django本体のadmin templateをプロジェクト内にコピーしてきます。

Djangoチュートリアル中盤にもあるように、


admin アプリケーションのデフォルトのテンプレートはどれもオーバライド可能です。

テンプレートのオーバライド、
デフォルトのディレクトリからカスタム用に指定した、
STATICFILES_DIRSにコピーするだけで勝手にやってくれます。

デフォルトでは、
Django はテンプレートが見つからない場合
(STATICFILES_DIRSが指定されていない、あるいはファイルがない場合)、

自動的に各アプリケーションパッケージの
templates/ サブディレクトリ下を探してくれるようになっているのです、凄いですね。

そんなアプリケーションパッケージDjango本体のadmin templateはこの位置に入っています。

YOUR_PythonPATH/site-packages/django/contrib/admin/templates/admin/*.html

私はvirtualenvでPython2.7を使ってるのでこういうパスです。

.virtualenvs/sampleenv/lib/python2.7/site-packages/django/contrib/admin/templates/admin/*.html

今回は管理画面にcssとjsをいれこみたいので、
持って来るべきファイルはadmin/base.htmlになります。

cp django/contrib/admin/templates/admin/base.html ProjectRoot/DjangoBootstrap/static/templates/admin/.

そしてこんな感じでcss,jsをぐいっと突っ込みます。

admin/base.html

<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet" >
<script src="{{ STATIC_URL }}js/jquery-2.1.1.min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/custom.js"></script>

jqueryとかcustom.jsとかは用途に合わせて入れたり作ったりして下さい。
入れるディレクトリはSTATICFILES_DIRS以下です。

STATIC_URLをベタに書き込むのはちょっとナンセンスかもと思いつつ、
明示的にこれがカスタムしたものであるとわかりやすいので、このままにしました。



あとは随時、デフォルト管理画面のパーツを
アプリケーションパッケージからコピーしてきて編集します。

templates/admin/index.html
addlinkボタンのclassに、bootstrapのbtnクラスをつけてみたり、


static/css/admin/base.css のカラー指定や幅指定を適当にカスタマイズするだけで、
だいぶbootstrapらしさが出てきます。

また、jsも同じように動かせるので、今回はサンプルとして
bootstrapのpopoverアクションをボタンにつけてみました。

こんな感じで悪趣味極まりない管理画面が仕上がります。

オシャレにするはずだったのに失敗しました。我ながら気持ち悪い出来栄えです。


f:id:sayadroid:20141219125839p:plain

何の役にも立たなそうなコードは一応ココにおいてあります。

sayadroid/DjangoBootstrap · GitHub



なお、Djangoの静的ファイルは、
ローカル開発が終わってWebサーバにデプロイする段階で、


settings.pyの
STATIC_ROOT に含まれるファイルが
STATIC_URL の場所で公開されるように Web サーバ側で設定しなければいけない
のでご注意下さい。

webサーバ上でcollectstaticコマンドを実行することで、
静的ファイルのストレージを漁って、
見つけたファイルを STATIC_ROOT で与えられたディレクトリにコピーします。

collectstaticの存在価値は、
複数のアプリケーションを1つのDjangoプロジェクト内で立ち上げていた場合に、
1つの公開ディレクトリに収集してくれることにあります。
アプリケーションが数十あった時に、すべてのアプリケーション配下のstaticファイルに
webサーバの公開設定を向けるのが良くないからですね。

逆に言うと、特定のアプリケーション指定でcollectstaticコマンド実行してyesすると、
STATIC_ROOT内でパスがバッティングした場合、
既存の別プロジェクトのSTATIC_ROOT内ファイルが存在した場合でも、
問答無用で上書きコピーしてしまうので、ディレクトリ構成には気をつけましょう。

以上。


明日の担当は、
日々お世話になりっぱなしのスーパーインフラエンジニア @kenichikat さんです!おたのしみに!

introduction

Saya Tsutsumi

@sayadroid というアカウントでネット上に居ます。

 

2014.12.12までwebエンジニア兼謎解きアイドルでした。

(誤字みたいな存在定義ですが、そんな毎日が本当にありました)

f:id:sayadroid:20141215133909j:plain

 

  

1つの物語を、沢山の人への感謝とともに終えることが出来たので、
このタイミングでブログを新しくすることにしました。

 

 

私は今までもこれからもwebエンジニアです。

 

 

一昨日までの自分に情けない姿を見せないように、
凡人なりに手探りで、夢の続きを、描いていきたいと思います。

 

2014.12.15

 

f:id:sayadroid:20141215133145j:plain