📷

Djangoでアイコンを表示する

2 min read

この記事は、Djangoアドベントカレンダー5日目の記事です。前から書いてたネタがそのまま放置されていたので、アドベントカレンダーとして飛び込みで投稿します!

Djangoでブラウザのタブにアイコンを表示するときに結構詰まったのでメモ書き

staticディレクトリの作成

アプリケーションのプロジェクトディレクトリ内にstaticディレクトリとtemplatesディレクトリを作成します。

static/iconディレクトリにアイコン画像を置いておきます。

アイコンは何でもいいですが、今回はこちらのサイトから見つけたアイコンを使います。

アイコンを保存して以下のディレクトリ構造になっていれば大丈夫です。

.
├── app
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── static
│   └── icon
│       └── favicon.ico
└── templates

settings.pyの設定

はじめにsettings.pyにstaticディレクトリのパスを設定します。

import os
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

また、テンプレートファイルを読み込むためにTEMPLATESDIRSを設定します。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

テンプレートの設定

templates/index.htmlは以下のファイルを作成します。

{% load static %}
<html>
    <head>
        <link rel="icon" href="{% static '/icon/favicon.ico' %}">
    </head>

    <body>
        <h1>Hello</h1>
    </body>
</html>

HTMLを表示するための設定

HTMLの出力のためにアプリを作成します。

以下のコマンドでアプリを作成します。

python manage.py startapp hello

views.pyの設定

hello/views.pyに以下のコードを追加します。

from django.shortcuts import render

def index_template(request):
    return render(request, 'index.html')

urls.pyの設定

hello/urls.pyはないはずなので、以下のコードを新規で作成します。

from django.urls import path
from . import views

urlpatterns = [
    path('view/', views.index_template, name='index_template'),
]

新規でURLを設定するので、app/urls.pyには以下の修正のように修正します。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', include('hello.urls')),
]

動作確認

それでは一通り必要なファイルを用意したので、以下のコマンドでアプリを起動します。

python manage.py runserver

localhost:8000/hello/view/にアクセスして、以下のようにタブにアイコンが表示されればOKです。

まとめ

アイコンに限らず、staticファイルを扱うときには

  • STATICFILES_DIRSでstaticディレクトリのパスを設定する
  • staticファイルを読み込むHTML上で{% load static %}使いstaticディレクトリのパスを呼び出す
  • staticファイルを読み込むときには{% static 'ファイルパス' %}を使う

を守れば大体のファイルは読み込めるはずです。

Discussion

ログインするとコメントできます