【Python/Django】Herokuにデプロイしたアプリに、画像と動画をアップロード、表示するために、Cloudinaryを使った【初心者】

Djangoで作成したアプリを公開する為にHerokuにアップした際に、画像、動画のアップロードができないことを知った。調べたところCloudinaryを使うと解決できるらしい。想定していた機能までは実装できたのと、日本語の記事も少なく、いくつか嵌ったところもあったので、残しておく。

【参考にさせていただいた記事】

① 【記録用】cloudinaryを使ってherokuでDjangoアプリの画像投稿を可能にする
② herokuで、cloudinaryを利用した画像アップロード（python+django）
③ Cloudinaryを使って画像の変換をやってみる

▼Cloudinaryとは

画像を管理するクラウドサービスで、画像の保存、変換、配信が簡単に実装できる。無料でも利用可能（StarterPlan）でも、30万ファイル、10ギガのストレージが利用可能。Djangoだけでなく、様々なSDKが用意されており、個人利用やプロトタイプ程度であれば、十分使えるのではないか。こちらからサインアップ頂くと、少しボーナスもらえるようなので、これから登録される方は是非利用いただきたい。

今回は、CloudinaryとDjangoを利用して、
①画像、動画のアップロード
②アップロードした画像、動画の閲覧
を行うために実施したことを記載していく。

▼Herokuとの連携

HerokuのOverviewから、add-onでCloudinaryを追加する。各設定を行い、ダッシュボードが見られるようになる。

Cloudinaryのインストール
開発している仮想環境で、コンソールからインストールを行う。

$ pip install django-cloudinary-storage
$ pip install Pillow
$ pip freeze > requirements.txt

▼Djangoへの導入方法：settings.py

settings.py へ追記
INSTALLED_APPSの最下部に追加する。
DEFAULT_FILE_STORAGEも設定しておくと、ImageFieldやFileFieldと自動的に連携してくれる模様。

# settings.py

INSTALLED_APPS = [
    ・・・・・・・・・・
    'cloudinary', #追加
    'cloudinary_storage',　#追加
]

DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

cloudinaryアカウントとの紐付けも、同様にsettings.pyに記入。
アカウント情報は、cloudinaryのダッシュボードの最上部にある。

# settings.py

CLOUDINARY_STORAGE = {
    'CLOUD_NAME': 'your_cloud_name',
    'API_KEY': 'your_api_key',
    'API_SECRET': 'your_api_secret'
}

▼Djangoへの導入方法：models.py / forms.py

models.py の設定
ローカルなどで開発したモデルを必要に応じて修正する必要。imageFieldでも設定次第で対応してくれるようだが、後述するoptionsや画像の加工などを行いたかったので、CloudinaryFieldに修正した。

# models.py

from cloudinary.models import CloudinaryField　＃追加

class Model_name(models.Model):
    image = CloudinaryField('image', blank=True, null=True,)
    video = CloudinaryField("video", blank=True, null=True,)

forms.pyの設定
Fieldに関する詳細な設定はforms.pyにて行う。

# forms.py

from cloudinary.forms import CloudinaryFileField　＃追加

class ModelnameCreateForm(forms.ModelForm):
    class Meta:
        model = Model_name
        fields = ('image', 'video',)
    image = CloudinaryFileField(
            options={'folder': 'media/Model_image', 'tags': 'Model_name'})
    movie = CloudinaryFileField(
            options={'folder': 'media/Model_movie', 'tags': 'Model_name',
                     'resource_type': 'video'})

注意：CloudinaryFileField は、class Meta: の外に設定する。
optionsの設定は任意だが、動画をアップロードするときには、
'resource_type': 'video' を設定する必要がある。
他、options の詳細については公式ドキュメントを参照のこと。

▼Djangoへの導入方法：Templates

templateでの設定は下記の通り。

＃ index.html 一覧を作成する画面で画像を表示する
{% load cloudinary %}

{% for post in object_list %}
　 {% cloudinary post.image.url width=300 height=150 %}
{% endfor %}

上記で実際に表示されるhtmlはこちら
 
<img height="150" src="https://res.cloudinary.com/＜username＞/image/upload/v12345678/xxxxxxxxxxxxx.jpg" width="300"/>

cloudoinary url を使うときには、{% load cloudinary %}を最初に設置する。

# detail.html 詳細画面で動画を表示する

<video width='640' height= '480' controls>
　<source src="{{ object.video.url }}">
</video>

普通に、video.urlでも表示できた。

＜実装できておらず調査中の点＞

{% cloudinary "sample.jpg" width=100 height=150 crop="fill" %}

公式ドキュメントにあるような、cropの設定を上記のようなテンプレートタグにて行ったところ、実際の画面に反映されなかった。（cropを変更しても画像の表示のされ方が変わらない。）

原因、解決方法や実装できた方がいらっしゃったら、是非コメントなどで教えていただきたい。解決次第、追記、修正していく。

>>その後、開発を進める過程で解決したので、別記事にて追記していく。