Djangoで始めるブログ作成講座②：アイキャッチ画像を導入しよう！

2023年5月15日
2023年5月19日
Django
Django, Python

Django

「Djangoで始めるブログ作成講座」の第二回です。
前回はブログの基本的な内容を実装するにとどまりました。

Djangoで始めるブログ作成講座①：ブログを作ろう！

「Djangoで始めるブログ作成講座」の第一回です。今回は第一歩として、いきなりブログを作成します。細かい部分の実装は次回以降に回しますが、基本的な部分をさっくりと作り上げていきましょう！この記事を読んで取り組むことで、[…]

このままでもブログとして機能はしますが、ここから機能を拡張していきましょう。
今回は拡張の第一歩として、よくあるアイキャッチ画像を表示する機能を追加します。

Djangoでの画像ファイルの扱いなども分かりやすく説明するので、しっかりと理解しつつ実際にアイキャッチ画像機能を実装してみましょう！

この記事を読んで取り組むことで、Djangoの基本的な要素である以下を習得することができます。

DjangoでのImageFieldの使い方
Djangoでの画像の表示方法

1 Djangoで始めるブログ作成講座②：アイキャッチ画像を導入しよう！
2 おわりに

Djangoで始めるブログ作成講座②：アイキャッチ画像を導入しよう！

Djangoで画像を扱うために、Pillowを導入する

Djangoで画像を扱う際に、Pillowというものを導入します。
PillowはPythonで画像処理をするためのライブラリで、以下の手順でインストールできます。

1.pipを最新の状態に更新するため、以下のコマンドを実行します。

pip install –upgrade pip

2.Pillowをインストールするため、以下のコマンドを実行します。

pip install Pillow

エラーが出なければ正常にインストールできています。
Pillowは今回のみならず、さまざまな画像を使用する場面で使うので名前を覚えておくと良いでしょう。

Djangoプロジェクトに画像設定を追加する

Djangoで画像を使用するには、Djangoプロジェクトのurls.pyとsettings.pyに設定を記載する必要があります。

settings.py

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# メディアファイルを格納するディレクトリのパス
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

# Build paths inside the project like this: BASE_DIR / 'subdir'.

BASE_DIR = Path(__file__).resolve().parent.parent

# メディアファイルを格納するディレクトリのパス

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = '/media/'

BASE_DIRは構築の仕方によっては記載が異なるかも知れません。
MEDIA_ROOTはディレクトリ構造、MEDIA_URLはURLを表しますが、同じものと考えても問題ありません。

「media」はアイキャッチ画像の格納先フォルダ名ですが、好きに変更しても構いません。
その場合はMEDIA_ROOTとMEDIA_URLの「media」も変更してください。

urls.py

-- 省略 --
from django.conf import settings
from django.conf.urls.static import static
 
urlpatterns = [
    -- 省略 --
    path('djangoblog/',include('djangoblog.urls')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

-- 省略 --

from django.conf import settings

from django.conf.urls.static import static

urlpatterns = [

-- 省略 --

path('djangoblog/',include('djangoblog.urls')),

]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

プロジェクトのurls.pyの末尾に1行加えます。
staticは固定のURLを設定する場合に使用する関数で、指定の仕方はpathと似ていてURL、ディレクトリの順です。

今回はsettings.pyに指定したURLにアクセス時に、mediaフォルダ内の画像を取得するようにしています。

ブログ記事のModelにアイキャッチ画像を追加する

修正後のmodel.pyは以下の通りです。

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=255)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    thumbnail = models.ImageField(upload_to='images/', null=True, blank=True) #追加

from django.db import models

class Post(models.Model):

title = models.CharField(max_length=255)

content = models.TextField()

created_at = models.DateTimeField(auto_now_add=True)

updated_at = models.DateTimeField(auto_now=True)

thumbnail = models.ImageField(upload_to='images/', null=True, blank=True) #追加

追加した項目thumbnailの説明は以下の通りです。

ImageField：画像を取り扱う専用のフィールドで、使用には先述のPillowが必要になります
upload_to：アイキャッチのアップロード先フォルダを指定します
null=True, blank=True：アイキャッチ画像を設定しない投稿もアリにしています

たった一行設定するだけで、アイキャッチ画像の機能が実装出来ました。
作成したらマイグレーションを行ってデータベースに反映させておきましょう。

ただこのままではアイキャッチ画像の設定はできないので、管理画面とブログ画面両方を少し修正する必要があります。

管理画面でアイキャッチ画像をアップロードできるか確認

管理画面の実装も簡単にできます。

class PostAdmin(admin.ModelAdmin):
    list_display = ('title', 'created_at', 'updated_at','thumbnail') #thumbnailを追加

1 2	class PostAdmin(admin.ModelAdmin): list_display = ('title', 'created_at', 'updated_at','thumbnail') #thumbnailを追加

これで投稿一覧画面でアイキャッチ画像が設定されているか否かが一覧で分かります。

また、データベースをマイグレーションした段階で、各記事にアイキャッチ画像を設定することもできるはずです。

よくあるアップロード機能ですね。実際に画像をアップロードして、動くか確認してください。
次に、アイキャッチ画像をブログ画面に表示していきましょう。

投稿一覧、および投稿詳細のTemplateを修正する

ブログ表示側の修正はテンプレートのみで大丈夫です。
post_list.htmlとpost_detail.htmlの2画面を修正しましょう。

post_list.html

{% extends 'blog_base.html' %}

{% block content %}
    {% for post in posts %}
        <div class="card mb-4">
            <!-- アイキャッチ画像を表示 -->
            {% if post.thumbnail %}
                <img class="card-img-top" src="{{ post.thumbnail.url }}" alt="{{ post.title }}">
            {% endif %}
        <div class="card-body">
            <h2 class="card-title">{{ post.title }}</h2>
            <p class="card-text">{{ post.content|truncatechars:80 | safe }}</p>
            <a href="{% url 'post_detail' pk=post.id %}" class="btn btn-primary">Read More &rarr;</a>
        </div>
        <div class="card-footer text-muted">
            Posted on {{ post.created_at }}
        </div>
        </div>
    {% endfor %}
{% endblock %}

{% extends 'blog_base.html' %}

{% block content %}

{% for post in posts %}

{% if post.thumbnail %}

{% endif %}

<h2 class="card-title">{{ post.title }}</h2>

<p class="card-text">{{ post.content|truncatechars:80 | safe }}</p>

</div>

Posted on {{ post.created_at }}

</div>

{% endfor %}

{% endblock %}

アイキャッチ画像を表示

アイキャッチ画像があるかどうかで分岐させています。
ある場合はimgタグを挿入する簡単な処理です。

画像URLには「post.thumbnail.url」でアクセス可能です。
alt属性にはタイトルを入れていますが、専用のフィールドをデータベースに持たせるのも良いでしょう。

同様に詳細画面にも適用させます。

post_detail.html

{% extends 'blog_base.html' %}

{% block content %}
<div class="container my-5">
    <div class="row">
      <div class="col-md-12">
        <h1>{{ post.title }}</h1>
        <!-- アイキャッチ画像を表示 -->
        {% if post.thumbnail %}
            <img src="{{ post.thumbnail.url }}" alt="{{ post.title }}" class="img-fluid rounded mx-auto d-block">
        {% endif %}
        <div class="row">
            {{ post.content | safe }}
            <p>Created: {{ post.created_at }}</p>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% extends 'blog_base.html' %}

{% block content %}

<h1>{{ post.title }}</h1>

{% if post.thumbnail %}

{% endif %}

<p>Created: {{ post.created_at }}</p>

</div>

{% endblock %}

これでアイキャッチ画像の設定は完了です。ブログを起動して、画像が表示されるか確認しましょう。

投稿一覧画面、および投稿詳細画面の両方でアイキャッチ画像が表示されました。
無事に成功です。

おわりに

今回修正したのはModelとテンプレートだけで、Viewは修正していないことにお気づきでしょうか？
Djangoは非常によくできたフレームワークでして、データベースに項目を追加して表示するだけならばViewを修正する必要はなかったりします。

ViewでModelを呼び出していますが、このModelがデータベースの全データを自動で取得してくれるからです。
コードの記載量が減るのはミスも作業量も減るので良い点ですね。

さて、ここまでのソースもGithubに掲載しておくので、もしも見返したい場合は確認してみてください。

Githubリンク（BLOGーアイキャッチ画像追加）

次の記事では、投稿詳細画面に閲覧者がコメントを残せる機能を実装していきましょう。

Djangoで始めるブログ作成講座③：コメント投稿機能を導入しよう！

「Djangoで始めるブログ作成講座」の第三回です。前回はDjangoで画像を扱い、ブログのアイキャッチ画像を定義しました。 [sitecard subtitle=関連記事 url=https://freemas.stepupka[…]

また、管理画面でのエディターをリッチにしてくれるCKEditorの導入方法も以下の記事で解説しています。
もしもDjangoで長い文章を書くようなアプリを作成したい場合は、こうした使いやすいエディターがあると便利ですので導入を検討してみてください。

【Django】CKEditorの使い方～管理画面を使いやすくカスタマイズ！～

Djangoにはデフォルトで管理画面が用意されていて、かなり使いやすい印象を受けます。一方でデータ管理画面の内、テキストエリアは実にシンプルです。 DjangoはWordPressのようにブログとしても使用することができるのですが[…]