6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Django REST Framework で画像を返す API を作成

Posted at

はじめに

Django REST Framework で API 作成で、データベースの情報を返す Web API を作成した。今回は、画像データを返すような API を作成する。Djangoで画像を配信できるwebAPIを作るを参考にした。

アプリの作成

アプリを作成して、画像処理ライブラリである pillow をインストールする。アプリの名前は app とした。

$ python manage.py startapp app
$ pip install pillow

モデルの定義

models.py にて、画像ファイルを扱うモデルを定義する。画像ファイルを扱うには ImageField というフィールド型を使用する。ImageField を使用する際に pillow が必要となる。
ここでは、タイトルと画像を持つ Image という単純なモデルを作成した。

models.py
from django.db import models

# Create your models here.
class Image(models.Model):
    title = models.CharField(max_length=200)
    image = models.ImageField(upload_to='images/')

    def __str__(self):
        return self.title

設定

settings.py にて MEDIA_ROOT と MEDIA_URL という項目を定義する。これらはそれぞれ以下のような意味合いを持つ。

  • MEDIA_ROOT : 管理画面からアップロードしたり、モデルを save した際にファイルが配置される配信先。デフォルトはベースディレクトリの直下。
  • MEDIA_URL : URL リクエストの起点となるアドレス。

ここでは、以下のように設定している。

config/settings.py
...
from pathlib import Path

...
INSTALLED_APPS = [
    ...
    'app.apps.AppConfig',
]

BASE_DIR = Path(__file__).resolve().parent.parent
MEDIA_URL = '/media/'
MEDIA_ROOT = os.join(BASE_DIR, 'media')

(作成したアプリをプロジェクトに含めるため INSTALLED_APPS に app.apps.AppConfig を追記することも忘れずに。)

URLConf の追加

上記で設定した静的ファイルを扱うために、以下のように config/urls.py に追記する。

config/urls.py
...
from django.conf import settings
from django.contrib.staticfiles.urls import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns = [
    ...
]

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

モデルの有効化

新しくモデルを定義したので、makemigrations および migrate を実行し、モデルを有効化する。

$ python manage.py makemigrations app
$ python manage.py migrate

動作確認

すべて設定できたため、動作確認を行う。まず MEDIA_ROOT と モデルの定義で指定したディレクトリ(本記事では /media/images に相当する)に画像を置く。次に、開発用サーバーを python manage.py runserver で立ち上げ、http://localhost:8000/media/images/example.png にアクセスすると、画像が表示されることが確認できる。

おわりに

画像を返す API を作成した。次の記事では React で作成したフロントエンド側から API をたたいて画像を取得し、表示させてみる。

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?