【第6回】Responderを使ってDjangoチュートリアルをやってみた【静的ファイル管理編】
2021.12.20
第6回～Responderを使ってDjangoチュートリアルをやってみた～
前回の記事の「【第5回】Responderを使ってDjangoチュートリアルをやってみた【自動テスト導入編】」の続きです。
今回も、Responder（レスポンダー）を使って「Djangoのチュートリアル」をやってみたいと思います。
Django のチュートリアル「はじめての Django アプリ作成」を、Responderで追う形になりますので、多少内容が異なる部分がありますが、成果物はできるだけ同じモノになるよう作る予定です。
【はじめての Django アプリ作成】
https://docs.djangoproject.com/ja/2.2/intro/
第1回はこちら
静的ファイルの管理
回を重ねるごとに、アプリケーションが完成してきました。
今回の第6回では、今までと少し色合いが変わり、静的ファイルの管理についての内容になります。
今まで作ってきたビューは、サーバーが自動的にHTMLを生成したものが主でした。
しかし、一般的にWebアプリケーションは、CSSやJavascript、画像などの静的(static)ファイルが必要不可欠です。
本記事では、Responderにおける静的ファイル管理の仕方について学んでいきたいと思います。
アプリの構造をカスタマイズする
まず、アプリケーションのディレクトリ内に「static」という名前のディレクトリがなければ作成しましょう。
Responderにおいても、Djangoと同じように静的ファイルは全てこのディレクトリで管理ができます。
では、試しに以下のCSSファイルを作成してみましょう。
1 2 3 | a:link{color: orange;} a:visited{color: orange} a:hover{color: coral} |
そして、テンプレートの元となるレイアウトに、今作ったファイルをスタイルシートとして追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!-- templates/layout.html --> <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- New --> <link rel="stylesheet" href="/static/style.css"> <meta charset="UTF-8"> <title>Sample Polls Application</title> </head> <body style="background-color: #eeeeee"> <div class="container"> {% block content %} <!-- メインコンテンツ --> {% endblock %} </div> </body> </html> |
すると、どうでしょう？
リンクがオレンジ色になり、スタイルシートが適切に読み込まれました！（本ブログのスタイルですね！）
もっとスマートに書くためには
Djangoでは静的ディレクトリは、テンプレートファイルで {% static 'style.css'%} のように解決することが可能です。
先ほどのような "/static/style.css" といった書き方は、あまりスマートとは言えません。
もしかしたら今後、静的ディレクトリの名前が変更になったとき（あまりないかもしれませんが）、関係する部分全てを書き換えるのはちょっと面倒です。
Jinja2のフィルタを使う場合
そこで、Jinja2のfilter(フィルタ)という機能が使えそうです。
filterについての挙動を理解するには、使ったほうが早いので、実際にやってみましょう。
まず、ResponderにおいてJinja2の環境設定は、 responder.API クラスのメンバ変数である jinja_env で管理しているようです。
これはJinja2における、 Environment クラスのインスタンスなので、Jinja2の環境設定と同様に扱えます。
(何を言っているかさっぱり、という方はスルーして下さい。笑)
Jinja2におけるfilterの登録は、 filters という辞書型変数に登録すれば良いだけです。
そのため、urls.pyの冒頭に以下を加筆してみます。
urls.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | # ~~~ 省略 ~~~ # from models import User, Question, Choice import db api = responder.API() # New!! ここから # staticをjinja2で解決するためにstaticフィルタを定義 def static_filter(path): return '/static/' + path # staticをフィルタに追加 api.jinja_env.filters['static'] = static_filter # ここまで @api.route('/') class Index: # ~~~ 省略 ~~~ # |
これで、テンプレートで static というフィルタが追加され使用できるようになりました。
すると、
1 | <link rel="stylesheet" href="/static/style.css"> |
は
1 | <link rel="stylesheet" href="{{ 'style.css' | static }}"> |
のように、変数とパイプで繋げて書くことができます。
Jinja2のグローバル変数を使う場合
もう１つの方法として、Jinja2のグローバル変数として静的ディレクトリを登録する方法があります。
やり方は、先ほどのフィルタと似ていて、 globals という辞書型変数に登録するだけです。
したがって、以下の一行で行うことができます。
1 | api.jinja_env.globals['static'] = '/static/' |
スタイルシートを読み込むときは、
1 | <link rel="stylesheet" href="{{ static + 'style.css' }}"> |
とします。
結果はフィルタを使う場合と同じです。
このようなやり方で、フィルタやグローバル変数は他にも追加できます。
「 static_css のようなCSSのディレクトリを解決するフィルタを作る」もよし、「 static_img のように画像ディレクトリを解決するフィルタを作る」のも良いでしょう。
ただし、元から登録されている名前を汚染しないように気をつけましょう！
Djangoと同じ書式で書きたい場合
もちろん、 {% static 'style.css' %} のように書けるようにすることもできます。
しかし、これはテンプレートタグのカスタムという作業が必要で、Responderで実現するには複雑そうです。
ここでは、本質的な話ではないので割愛します。
Responderにおける静的ビュー
今紹介した「静的ファイル管理」は、あまりResponderの恩恵を感じることができませんでした。
もし、テンプレートを使わない単一のビューページ（いわゆるシングルビューアプリケーション）を使いたい時には、staticディレクトリに配置し、それにルーティングすることが可能です。
本アプリケーションでは、そのようなページは必要ありませんが、せっかくなのでご紹介しておきます。
Responderでは、基本的に、静的ファイルの管理するディレクトリは「static」となっていますが、 responder.API() を定義する際に、引数として responder.API(static_dir='huge_hoge') のように記述することで変更が可能です。
また、ルーティングの際には、 @api.route('/', static=True) とすることで、静的ファイル管理ディレクトリのindex.htmlがビューとして表示されるようになります。
第7回へつづく！
今回は、静的ファイルの管理について解説しました。
途中、Jinja2 の解説っぽくなった部分もありましたが、Jinja2 は Django や Responder、Flask をはじめ多くのWebアプリケーションフレームワークで用いられています。
そのため、仕様を覚えておいて損はないと思うので、是非頭の中に入れておきましょう。
さて、次回は最後のチュートリアルになります。
最後は、よりアプリケーションを使いやすくするために管理者(admin)ページの改装をしていきたいと思います。
第7回の記事はこちら
【全編まとめ】Responderを使ってDjangoチュートリアルをやってみた
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
