HerokuにデプロイしたDjangoアプリで写真が使いたい

Herokuでは画像のアップロードが非対応なので、画像をGoogle Driveに投げてAWS S3等を使わずにお手軽に表示できるようにしよう！という記事です。

手順は、以下の３つです。
1. Google Cloud Platformから、認証JSONファイルの取得
2. ライブラリのインストール
3. Djangoの設定

参考文献
Django Google Drive Strage リファレンス
https://django-googledrive-storage.readthedocs.io/en/latest/

Google API

Google Drive APIの有効化

Google Cloud Platform (https://console.cloud.google.com/getting-started?hl=ja) にアクセス
検索バーの左側の「プロジェクトの選択」からプロジェクトを選択（もしくは"新しいプロジェクト"から作成）
上の検索バーに「Google Drive API」と入力し検索 -> 「有効にする」

APIキー(JSONファイル)の取得

ナビゲーションメニューの「APIとサービス」から「認証情報」を選択
「認証情報を作成」ボタンの中から「サービスアカウントキー」を選択
新しいサービスアカウントを作成から、サービスアカウントを作成する。
キーのタイプは「JSON」。役割は、写真のように選択する。

4.「作成」を押下するとJSONファイルがダウンロードされるので、保存する。

ライブラリのインストール

Djangoで必要になるライブラリをインストールします。

bash

$ pip install django-googledrive-storage

#忘れないうちに
$ pip freeze > requirements.txt

Djangoの設定

ダウンロードした~~~.jsonをmanage.pyと同じ階層に配置
setting.pyにINSTALLED_APPSと、googleアカウント、jsonファイルのパスを追記

setting.py


INSTALLED_APPS = (
    ...,
    'gdstorage' #追加
)

# Google Drive Storage Settings
#
GOOGLE_DRIVE_STORAGE_SERVICE_EMAIL = "[Googleアカウント]"
GOOGLE_DRIVE_STORAGE_JSON_KEY_FILE = os.path.join(BASE_DIR, "[発行されたJSONのファイル名(~.jsonまで)]")

models.pyでモジュールのインポートと、ImageFieldを使用していた部分に storage=gd_storage と追記

models.py

from gdstorage.storage import GoogleDriveStorage

# Define Google Drive Storage
gd_storage = GoogleDriveStorage()

#models.ImageFieldの引数に 「storage=gd_storage」を追加
image = models.ImageField(upload_to="your_file_dir/", storage=gd_storage)

ここまでできれば、画像のアップロードは無事できるはず。

テンプレートの変更

ここまでくると、Google Driveへの画像投稿ができるのですが、画像表示ができません。
そこで簡単なスクリプトを使用してURLのパスを作成します。

(注意) Google Driveのリンクをハードコードで拾ってきているので今後のGoogleの仕様変更で動かなくなる可能性もあります。

アプリのtemplatesと同じ階層にtemplatetagsというフォルダを作成します。
その中にdrivelink.pyという名前で以下のコードを入力します。

templatetags/drivelink.py

from django import template

register = template.Library()

@register.filter(name="convert_drivelink")
def convert_drivelink(url):
    return "http://drive.google.com/uc?export=view&id="+url.split("/")[5]

ここまで来たら、テンプレートファイルの中で{% load static %}と{% load drivelink %}をファイルの先頭に追加。以下のようにオブジェクトにフィルターを掛けてあげるだけ。

~~~.html

{% load static %}
{% load drivelink %}

<img src="{{[オブジェクト].url|convert_drivelink }}">

一回サーバを再起動しないと適用されないので、再起動をお忘れなく。

これで画像表示もできるはずです！

Django + Heroku + Google Driveで画像をアップロードする