Contentfulの画像配信をリッチに疎結合化する（Cloudinary）
はじめに
ヘッドレスCMSのContentfulでは、投稿された画像などのメディアはContentfulの配信サーバー ctfassets.net から配信されています。
Contentfulでは画像や記事投稿などは全てレコードとして管理するのでシンプルな反面、早めに課金タイミングが来てしまったり、WEBメディアなどでは画像管理を切り離して、より厳密に行いたいなどのケースがあると思います。
今回Cloudinaryを使って画像配信をContentfulから切り離してみたいと思います。
Cloudinaryとは
メディアの管理、変換、配信をやってくれるサービスです。
Cloudianry側で画像のリサイズ、圧縮、エフェクト、果ては顔の自動切り抜きなどもやってくれる超万能なSaaSで、アプリ側で画像配信周りの実装が必要なくなるため、ヘッドレスCMSでコンテンツ管理を疎結合にする考え方にマッチするサービスだと思います。
前提
- Contentfulのアカウントを持っている
- Cloudinaryのアカウントを持っている
Contentful, Cloudinaryのいずれも無料プランでOKです。
Contentful側の準備
ContentfulがCloudinaryとの連携プラグインを提供しているのでインストールしてみます。
https://www.contentful.com/marketplace/app/cloudinary/ にアクセスして「Install」をクリックするとContentfulが開く（ログインが必要）ので、
「Space」と「Environment」で連携したいアプリを選択し、「Continue」をクリックして、次のページで「Install」をクリック。
確認ページに遷移するので、「Authorize access」をクリックします。
するとCloudinary情報を入力するページに遷移します。 Cloudname, API keyはCloudinary > Settings > Securityから確認します。
これで準備は完了です。
Contentfulでコンテンツフィールドの作成
ContentfulでCloudinaryに画像をアップロードするフィールドを作ります。
Contentfulでは記事に追加する要素は全てこの「コンテンツフィールド」で作成します。 （Wordpressをよく使っている人には、記事の全ての項目がカスタムフィールドになっているイメージです）
記事に画像を追加するための「Media」というコンテンツフィールドが既にあるのですが、Cloudinary経由でメディアをアップロードするには「JSON field」でコンテンツフィールドを作成します。
Configureする際に、「Appearance」で「Cloudinary」が選択できるはずです。
これで「SAVE」すればいよいよ準備完了です。
Contentfulで記事を作ってみる
では記事を作ってみます。
Cloudinaryへのメディアアップロードフィールドが確認できると思います。
Cloudinaryコンソールを開いてみます。
ちなみに、Cloudinaryにログインしていない場合、コンソールを開く際にログインが求められます。僕はログイン処理後にタイムアウトしてしまったのですが、Contentful側では認証済みとなっていて特に問題なかったです。
試しにCloudinaryから画像をアップしてみます。
Contentfulと連携したGatsbyアプリをブラウザで立ち上げてみます（ローカルでOK）。
成功しました！
画像も無事表示され、URLもCloudinary経由になっているのが確認できました。
最後に
Contentfulの課金は記事やメディアなど含めたレコード単位でも行われるので、Cloudinaryを併用することで、レコードボリュームを圧迫せずに済みます。無料利用できる延命措置ができる点でもメリットがあります。
クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。
参考URL
https://www.contentful.com/marketplace/app/cloudinary/
