![Contentfulの画像配信をリッチに疎結合化する(Cloudinary)](https://devio2023-media.developers.io/wp-content/uploads/2020/09/open_graph.png)
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が開く(ログインが必要)ので、
![](https://xxbxxqxx.com/wp-content/uploads/2020/09/Screenshot-2020-09-12-at-13.05.21.png)
「Space」と「Environment」で連携したいアプリを選択し、「Continue」をクリックして、次のページで「Install」をクリック。
確認ページに遷移するので、「Authorize access」をクリックします。
![](https://xxbxxqxx.com/wp-content/uploads/2020/09/scr_2020-09-12_22.png)
するとCloudinary情報を入力するページに遷移します。 Cloudname, API keyはCloudinary > Settings > Securityから確認します。
![](https://xxbxxqxx.com/wp-content/uploads/2020/09/Untitled-1.jpg)
これで準備は完了です。
Contentfulでコンテンツフィールドの作成
ContentfulでCloudinaryに画像をアップロードするフィールドを作ります。
Contentfulでは記事に追加する要素は全てこの「コンテンツフィールド」で作成します。 (Wordpressをよく使っている人には、記事の全ての項目がカスタムフィールドになっているイメージです)
記事に画像を追加するための「Media」というコンテンツフィールドが既にあるのですが、Cloudinary経由でメディアをアップロードするには「JSON field」でコンテンツフィールドを作成します。
![](https://xxbxxqxx.com/wp-content/uploads/2020/09/Untitled-1-copy.jpg)
Configureする際に、「Appearance」で「Cloudinary」が選択できるはずです。
![](https://xxbxxqxx.com/wp-content/uploads/2020/09/Screenshot-2020-09-12-at-13.28.08.png)
これで「SAVE」すればいよいよ準備完了です。
Contentfulで記事を作ってみる
では記事を作ってみます。
Cloudinaryへのメディアアップロードフィールドが確認できると思います。
![](https://xxbxxqxx.com/wp-content/uploads/2020/09/Untitled-1-copy-2.jpg)
Cloudinaryコンソールを開いてみます。
![](https://xxbxxqxx.com/wp-content/uploads/2020/09/Untitled-3.jpg)
ちなみに、Cloudinaryにログインしていない場合、コンソールを開く際にログインが求められます。僕はログイン処理後にタイムアウトしてしまったのですが、Contentful側では認証済みとなっていて特に問題なかったです。
試しにCloudinaryから画像をアップしてみます。
![](https://xxbxxqxx.com/wp-content/uploads/2020/09/Screenshot-2020-09-12-at-13.37.27.png)
Contentfulと連携したGatsbyアプリをブラウザで立ち上げてみます(ローカルでOK)。
成功しました!
![](https://xxbxxqxx.com/wp-content/uploads/2020/09/Untitled-31.jpg)
画像も無事表示され、URLもCloudinary経由になっているのが確認できました。
最後に
Contentfulの課金は記事やメディアなど含めたレコード単位でも行われるので、Cloudinaryを併用することで、レコードボリュームを圧迫せずに済みます。無料利用できる延命措置ができる点でもメリットがあります。
クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。
参考URL
https://www.contentful.com/marketplace/app/cloudinary/