fbpx
  1. HOME
  2. ブログ
  3. IT技術
  4. 【Python】[第6回] Responderを使ってDjangoチュートリアルをやってみた【静的ファイル管理編】

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

Responderを使ってDjangoチュートリアルをやってみた~第6回~

前回の記事の「【第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ファイルを作成してみましょう。

そして、テンプレートの元となるレイアウトに、今作ったファイルをスタイルシートとして追加します。

すると、どうでしょう?

リンクがオレンジ色になり、スタイルシートが適切に読み込まれました!(本ブログのスタイルですね!)

もっとスマートに書くためには

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

これで、テンプレートで static というフィルタが追加され使用できるようになりました。

すると、

のように、変数とパイプで繋げて書くことができます。

Jinja2のグローバル変数を使う場合

もう1つの方法として、Jinja2のグローバル変数として静的ディレクトリを登録する方法があります。

やり方は、先ほどのフィルタと似ていて、 globals という辞書型変数に登録するだけです。

したがって、以下の一行で行うことができます。

スタイルシートを読み込むときは、

とします。

結果はフィルタを使う場合と同じです。

このようなやり方で、フィルタグローバル変数は他にも追加できます。

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がビューとして表示されるようになります。

おわりに【第6回】

今回は、静的ファイルの管理について解説しました。

途中、Jinja2 の解説っぽくなった部分もありましたが、Jinja2 は Django や Responder、Flask をはじめ多くのWebアプリケーションフレームワークで用いられています

そのため、仕様を覚えておいて損はないと思うので、是非頭の中に入れておきましょう。

さて、次回は最後のチュートリアルになります。

最後は、よりアプリケーションを使いやすくするために管理者(admin)ページの改装をしていきたいと思います。

第7回に続く

第7回はこちらになります。

関連記事

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事