Django公式 チュートリアル その6
Djangoをマスターしたいので、
チュートリアルにて一連の作業を学びます。
関連記事
- Django 仮想環境からインストールまで
- Django 公式チュートリアル
- Django公式 チュートリアル その1
- Django公式 チュートリアル その2
- Django公式 チュートリアル その3
- Django公式 チュートリアル その4
- Django公式 チュートリアル その5
- Django公式 チュートリアル その6
(個人的な学習ノートです)
前回Djangoのインストールから仮想環境の設定を行いました。
そのままチュートリアルに進みます!
「はじめてのDjangoアプリ作成 その6」
学習環境
macOS Sierra 10.12
python3.6
Django1.11
XAMPP
MySQL(MariaDB10.1.21)
テキストエディッタ:ATOM
参考サイト
はじめての Django アプリ作成、その 6 | Django documentation | Django
上記サイトに沿って進めます。
頭の中身がごった煮・・・
ちょっとパニックw
後でじっくり読み返してみます。
サーバで生成するHTML以外に、Webアプリケーションは一般的に完全なWebページをレンダリングするために、画像、JavaScript、CSSなど必要なファイルを提供する必要がある。
Djangoでは、これらのファイルを 「静的 (static) ファイル」 と呼ぶ。
小さなプロジェクトではこのことは大きな問題になりません。
Web サーバが見つけられる場所で静的ファイルを単に管理することができるからです。
しかし、もっと大きな プロジェクトで、特に複数のアプリケーションからなる場合は、各アプリケーションが 持っている静的ファイルの集まりを複数扱うことになり、ややこしくなってきます。
django.contrib.staticfiles はまさにそのためにあります。
これは静的なファイ ルを各アプリケーションから (さらに指定した別の場所からも) 一つの場所に集め、運用環境で公開しやすくするものです。
アプリ の構造をカスタマイズする
最初に、 polls ディレクトリの中に、 static ディレクトリを作成します。Django はそこから静的ファイルを探します。
Django が polls/templates/ からテンプレートを探す方法と同様です。
Django のSTAICFILES_FINDERSは、さまざまなソースから静的ファイルを検索する方法を知っているファインダのリストです。
デフォルトのファイダの一つは AppDirectoriesFinder で、INSTALLD_APPSに書かれた各アプリケーションに対して、ちょうど今作った polls のような 「static」 サブディレクトリを検索してくれます。
管理サイトの静的ファイルにも、これと同じディレクトリ構造が使われます。
今作った static ディレクトリの中に、polls という名前の新しいディレクトリを作り、さらにその中に、style.css という名前のファイルを作成します。
つまり、このスタイルシートは polls/static/polls/style.css に保存します。AppDirectoriesFinder の動作のしくみのおかげで、Django では、ただ polls/style.css と書くだけでこの静的ファイルを参照することができます。
これは、テンプレートのパスを参照する時と同じです。
スタイルシートに次のコードを配置 (polls/static/polls/style.css):
li a { color: green; }
次に、polls/templates/polls/index.html の上部に追加:
{% static %} テンプレートタグは、静的ファイルの完全 URL を生成。
開発でするべきことはこれだけです。http://localhost:8000/polls/ をリロードすれば、質問のリンクが緑色 (Django のスタイル!) に変わる。
これで、スタイルシートがちゃんと読み込まれたことがわかりました。
背景画像を追加する
つぎに、画像のためのサブディレクトリを作る。
images サブディレクトリを polls/static/polls/ ディレクトリの中に作成。このディレクトリの中に、background.gif という名前の画像を置きます。つまり、画像は polls/static/polls/images/background.gif に置きます。
さらに、スタイルシート (polls/static/polls/style.css) に次のコードを追加します。
body { background: white url("images/background.gif") no-repeat right bottom; }
http://localhost:8000/polls/ をリロードすれば、画面の右下に、読み込まれた背景画像が表示される。
Djangoってこんな感じみたいです。
自分がやってみたいことのイメージが全く湧きませんw
奥が深いのね・・・。