Cloudinary ストレージプロバイダー
ドキュメント

Cloudinary ストレージプロバイダー

Cloudinaryとは

「また別の ストレージプロバイダーか……なぜもう一つ必要なんだ？」と、そう思われているかもしれません。しかし、Cloudinaryはただの ストレージプロバイダーではありません。確かに、Amazon S3やAzure File Storageプロバイダーと同じように、 すべてのファイルを「クラウド」に保存することは可能です。しかし、Cloudinaryの 真の特長は、ファイルをアップロードする際に、そのファイルを変換できる点にあります。興味が湧いてきましたか…… それでは、ぜひ読み進めてください！

Cloudinaryは画像の扱いで真価を発揮します。一度 Cloudinaryに画像をアップロードすれば、何百もの さまざまなフィルターや加工機能を使ってその画像を呼び出すことができます。例えば、次のようなことが可能です：

  • 画像のサイズを変更する
  • カラーフィルターを適用する
  • 画像を圧縮しましょう（非常に几帳面な人でない限り、ウェブサイトに掲載するファイルのほとんどは、画質を損なうことなく最大60％まで圧縮できます）。
  • 画像にぼかしをかける
  • サムネイルを作成する
  • 回転／反転
  • テキストの重ね書き
  • その他にも、まだまだたくさん……

とはいえ、言葉だけでは物足りないでしょう。詳細は、彼らのデモ サイトをご覧ください： https://demo.cloudinary.com/?mode=default

また、無料アカウントを作成することもでき、 これにより、75,000個のファイルを保存し、月に7,500回の変換処理を行うことができます。

でも、それだけではありません！ Cloudinaryは画像だけでなく、 ファイルを使ってさまざまな便利な機能も提供しています。例えば、PDFファイルから 画像のサムネイルを作成することも可能です。

この魔法のような作業を少しでも簡単にするために、 変形処理を簡略化する「Lava」フィルターセットも用意しました。これについては 後ほど詳しくご紹介します！

セットアップと設定

Cloudinary アカウントの設定

対象となる非営利団体は、 すべてのCloudinaryプランを大幅な割引価格でご利用いただけます。詳細については、 https://cloudinary.com/solutions/industries/cloudinary-for-nonprofitsをご覧ください 。すでにCloudinaryをご利用のお客様が 割引を受けるには、https://support.cloudinary.com/hc/en-us/requests/newからCloudinaryサポートに連絡し、「Cloud Name」欄を空白のままにしておくのが最善の方法です。

ストレージプロバイダーの設定

このパッケージをインストールすると、「管理ツール > システム設定 > ファイルストレージプロバイダ」の下に、 「Cloudinary Blob Storage」という新しいストレージプロバイダが表示されます。この新しいプロバイダは、 追加の設定が必要なため、現在は無効になっています。

このプロバイダーを設定するには、Cloudinaryアカウントから 「クラウド名」、「APIキー」、「APIシークレット」の3つの設定情報が必要です。これらは Cloudinaryアカウントの「設定 > セキュリティ」で確認できます。確認できたら、 「Cloudinary Blob Storage」プロバイダーの設定画面にこれらの情報を入力してください。

バイナリファイル形式の設定

ストレージプロバイダーの設定が完了したので、 次に、それを使用するファイルタイプを設定できます。新しいファイルタイプを設定するには、「管理 ツール > 一般設定 > ファイルタイプ」に移動してください。新しいファイルタイプを追加する際は、 3つの新しい設定項目に注意する必要があります。

  1. ストレージの種類：「Cloudinary Storage」に設定してください。
  2. フォルダ名：使用したいフォルダ名。
  3. 「名前付き変換のアップロード」：アップロードされたすべてのファイルに適用する名前付き変換です。変更を加えずに元のファイルを保存する場合は、空欄のままにしてください。名前付き変換は、Cloudinary 管理サイト内で定義できます。

ファイルタイプを設定したら、あとは 他のストレージプロバイダと同様に、それらを使用するための属性を 設定する準備が整いました。

Cloudinary アカウントの設定

ファイルの種類に応じてフォルダにファイルを保存できると、 まるで整理の達人になったような気分になります。残念ながら、デフォルトでは、 アカウントで「フォルダの自動作成」オプションを有効にしない限り、 アップロードする前にCloudinaryで手動でフォルダを作成する必要があります。この設定は 「設定 > アップロード」から行えます。 この機能を有効にすると、Rockで設定したフォルダが Cloudinaryに自動的に作成されます（すごく便利なので、なぜこれが デフォルトになっていないのか不思議に思うほどです）。

Cloudinary の使用

Cloudinaryのトランスフォームの適用

これで、画像やドキュメントをアップロードし、 それらに変換を適用する準備が整いました。 変換は、画像を取得する際のURLに 短いコマンドを指定することで適用します。このプロセスを簡略化するために いくつかのLavaフィルターを用意していますが、変換コードはご自身で指定する必要があります。これを行う最善の方法は、 Cloudinaryアカウント内の「トランスフォームエクスプローラー」を利用することです。「メディアライブラリ」内の画像で 「編集」をクリックし、適用したい変換を選択するだけです。

変換を適用すると、URLが更新され、 変換コードが含まれるようになります。この変換コードはLavaで使用できます。

さて、変換コードができたところで、これを Lavaでどのように活用できるか見てみましょう。そのために、コンテンツチャンネルから 画像を表示するための基本的なLavaテンプレートを見てみましょう。

まず、Web広告コンテンツチャネルからの掲載画像に よく使われる「Lava」について見てみましょう。

{% for item in Items %}
    {{ item | Attribute: 'Image' }}
{% endfor %}

Image 属性のフォーマット済み値がHTMLの画像タグであることは、お気づきでしょう。しかし、画像の URLを少し変更する必要があるため、これではうまくいきません。そこで、代わりに次のようにします。

{% for item in Items %}
    <img src="{{ item | Attribute: 'Image','Object' | CloudinaryTransform: 'c_scale,h_200,q_100,r_15' }}" />
{% endfor %}

ここで注目すべきは、Image 属性のオブジェクト値を取得し、それを変換コードとともに「CloudinaryTransform」というLavaフィルターに 渡している点です。このLavaフィルターについて、いくつか詳しく説明します：

  • （前述のように）BinaryFile オブジェクト全体を指定することも、単に BinaryFile オブジェクトの Path プロパティを指定することもできます。どちらでも問題ありません。
  • 一部の画像がCloudinaryにアップロードされていないチャンネルアイテムのコレクションを反復処理する必要がある場合があります。ご安心ください！「CloudinaryTransform」フィルターは、他のストレージプロバイダー経由でアップロードされたファイルでも問題なく動作しますが、変換処理は適用されません。

ドキュメントのサムネイルを表示する

Cloudinaryのストレージプロバイダーを利用すれば、 ドキュメントからサムネイルを作成することも可能です（注：Cloudinaryのドキュメントで 追加料金なしでサポートされているファイル形式をご確認ください。サポートされているのはPDFのみです）。

たとえば、PDFファイルをアップロードして、その サムネイルを表示したい場合、次のようにすれば簡単にできます：

{% assign document = item | Attribute: 'Document','Object' %}
<img src="{{ document | CloudinaryDocumentConvert: 'jpg' }}" />

結果

（画像変換用の「Lava」フィルターとは異なり、CloudinaryDocumentConvert では完全なBinaryFileオブジェクトが必要です）

なるほど、それはいいけど、画像がかなり大きいですね。でも 大丈夫… 変換処理に、次のように 変換コードを渡すことができます：

{% assign document = item | Attribute: 'Document','Object' %}
<img src="{{ document | CloudinaryDocumentConvert:'jpg','w_200' }}" />

結果

よし！これで順調に進み始めましたね！でも、もし PDFの全ページのサムネイルが欲しいという場合はどうでしょうか。その場合も大丈夫です。PDF ファイルがアップロードされると、Cloudinaryはそのページ数を返します。私たちはその情報を 保存しておくので、次のような処理を行うことができます：

{% assign document = item | Attribute: 'Document','Object' %}
{% assign pageCount = document | CloudinaryDocumentPageCount %}
{% for i in (1..pageCount) %}
    <a href="{{ document.Path }}">
         <img src="{{ document | CloudinaryDocumentConvert:'jpg','w_200', i}}" style="border: 1px solid
             #ddd; margin-right: 6px;" />
     </a>
{% endfor %}

結果

知っておくべき注意事項

以下、知っておくべき点がいくつかあります：

  • 前述したように、PDFをアップロードすると、Cloudinaryはページ数を返します。しかし、他のドキュメント形式ではそうではありません。
  • Cloudinaryは、ユーザーの変換リクエストを受信すると、画像をリアルタイムで処理し、その結果をファイルにキャッシュします。これにより、次回同じパラメータでリクエストを行った際には、キャッシュされた画像が返されます。