前回の記事の「【第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ファイルを作成してみましょう。
1a:link{color: orange;}
2a:visited{color: orange}
3a:hover{color: coral}そして、テンプレートの元となるレイアウトに、今作ったファイルをスタイルシートとして追加します。
1<!-- templates/layout.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5 <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">
6
7 <!-- New -->
8 <link rel="stylesheet" href="/static/style.css">
9
10 <meta charset="UTF-8">
11 <title>Sample Polls Application</title>
12</head>
13<body style="background-color: #eeeeee">
14<div class="container">
15 {% block content %}
16 <!-- メインコンテンツ -->
17 {% endblock %}
18</div>
19</body>
20</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
3from models import User, Question, Choice
4import db
5
6
7api = responder.API()
8
9# New!! ここから
10# staticをjinja2で解決するためにstaticフィルタを定義
11def static_filter(path):
12 return '/static/' + path
13
14
15# staticをフィルタに追加
16api.jinja_env.filters['static'] = static_filter
17
18# ここまで
19
20@api.route('/')
21class Index:
22
23 # ~~~ 省略 ~~~ #これで、テンプレートで static というフィルタが追加され使用できるようになりました。
すると、
1<link rel="stylesheet" href="/static/style.css">は
1<link rel="stylesheet" href="{{ 'style.css' | static }}">のように、変数とパイプで繋げて書くことができます。
Jinja2のグローバル変数を使う場合
もう１つの方法として、Jinja2のグローバル変数として静的ディレクトリを登録する方法があります。
やり方は、先ほどのフィルタと似ていて、globals という辞書型変数に登録するだけです。
したがって、以下の一行で行うことができます。
1api.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チュートリアルをやってみた
こちらの記事もオススメ！
2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...
2020.07.30Python 特集実装編※最新記事順Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた！P...
