【第6回】Responderを使ってDjangoチュートリアルをやってみた【静的ファイル管理編】

メディアチーム

【第6回】Responderを使ってDjangoチュートリアルをやってみた【静的ファイル管理編】

メディアチーム

2019.08.20

IT技術

Django Python Responder

前回の記事の「【第5回】Responderを使ってDjangoチュートリアルをやってみた【自動テスト導入編】」の続きです。

今回も、Responder（レスポンダー）を使って「Djangoのチュートリアル」をやってみたいと思います。

Django のチュートリアル「はじめての Django アプリ作成」を、Responderで追う形になりますので、多少内容が異なる部分がありますが、成果物はできるだけ同じモノになるよう作る予定です。

【はじめての Django アプリ作成】
https://docs.djangoproject.com/ja/2.2/intro/

第1回はこちら

2019.08.20【第1回】Responderを使ってDjangoチュートリアルをやってみた【プロジェクト作成編】第１回～Responderを使ってDjangoチュートリアルをやってみた～初期セットアップが、まだお済みでない方は前回...

静的ファイルの管理

回を重ねるごとに、アプリケーションが完成してきました。

今回の第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)ページの改装をしていきたいと思います。

ライトコードでは、エンジニアを積極採用中！

ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

採用情報へ

メディアチーム

「好きを仕事にするエンジニア集団」の（株）ライトコードです！ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。システム開発依頼・お見積もり大歓迎！また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！インターンや新卒採用も行っております。以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit