Django+Reactで学ぶプログラミング基礎(14): Djangoチュートリアル(投票アプリその6)

[前回] Django+Reactで学ぶプログラミング基礎(13): Djangoチュートリアル(投票アプリその5-4)

はじめに

Django公式チュートリアル、その6です。
前回は、Django自動テストをしめくくりました。
今回は、アプリ構造をカスタマイズします。

Djangoアプリ作成(その6): 投票(poll)アプリ

今回の内容

• Djangoの静的(static)ファイル
• アプリ構造のカスタマイズ
• 背景画像を追加

Djangoの静的(static)ファイル

• 静的(static)ファイルとは

  • Webページのレンダリングに必要なファイル
    • HTML
    • 画像
    • JavaScript
    • CSS

• 複数アプリからなる大きなプロジェクトの場合

  • 各アプリが持っている静的ファイルの集まりを複数扱うのは煩雑な作業
  • 解決法: django.contrib.staticfiles
    • 静的ファイルを各アプリから(アプリ以外の場所からでもOK)、一つの場所に集め、運用環境で公開しやすくする

アプリの構造をカスタマイズする手順

• 最初に、pollsディレクトリに、staticディレクトリを作成
  • Djangoはここから静的ファイルを探す
  • DjangoのSTATICFILES_FINDERS
    • さまざまなソースから静的ファイルを検索してくれるファインダーのリスト
    • AppDirectoriesFinderは、デフォルトのファイダーの一つ
      • settings.pyのINSTALLED_APPSに書かれた各アプリに対し、staticサブディレクトリを検索してくれる
        
      • 管理サイトの静的ファイルも、同じディレクトリ構造
• staticディレクトリにpollsという名前のディレクトリを作成
  • その中にstyle.cssファイルを作成
    • スタイルシートの場所はpolls/static/polls/style.css
    • AppDirectoriesFinderのスタティックファイルファインダー機能により、polls/style.cssとして参照可能

polls/static/polls/style.css

li a {
    color: green;
}

• 作成したスタイルシートへのリンクをHTMLの上部に追加
  • {% static %}テンプレートタグは、静的ファイルの完全URLを生成

polls/templates/polls/index.html

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">

• VS Codeからサーバーを起動(すでに起動済みの場合は再起動)

C:\kanban\pollsite>..\venv\.venv\Scripts\activate
(venv) C:\kanban\pollsite>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
June 10, 2022 - 07:43:53
Django version 4.0.5, using settings 'pollsite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

• ブラウザで、http://localhost:8000/polls/にアクセス
  • 質問のリンクが緑色(Djangoのスタイル！)になる
    • スタイルシートが適切に読み込まれた証拠
      

静的ファイルの名前空間

• Djangoは最初に見つけた静的ファイルの中から名前が一致するものを選ぶ
  • 複数アプリが存在する場合、Djangoに正しいものを指し示す必要あり
• 解決法: 名前空間を使用
  • 静的ファイルをアプリ自身の名前を付けたディレクトリの中に置く
    • pollsサブディレクトリを作って配置する
    • 静的ファイルを直接polls/staticに置かない

背景画像を追加

• 画像を配置するサブディレクトリを作成
  • polls/static/polls/ディレクトリの中に、imagesサブディレクトリを作成
  • imagesディレクトリに、background.pngという名前の画像を配置
    • 画像のパスは、polls/static/polls/images/background.png

• スタイルシートで背景画像を指定

polls/static/polls/style.css

body {
    background: white url("images/background.png") no-repeat;
}

• ブラウザで、http://localhost:8000/polls/をリロード(F5)
  • 背景画像が読み込まれ、画面に表示される

注意事項

• 静的ファイルのリンクは、常に相対パスを使う
  • こうすることで、staticテンプレートタグがURL生成で使用するSTATIC_URLを自由に変更できる
• Djangoから生成されていない静的ファイルでは、テンプレートタグ{% static %}を使えない
  • 例えば、スタイルシート(上記style.cssコードでも使用できず)

おわりに

Webページをレンダリングする静的ファイルをカスタマイズしました。
次回も続きます。お楽しみに。

[次回] Django+Reactで学ぶプログラミング基礎(15): Djangoチュートリアル(投票アプリその7-1)