こんにちは！SaaS大好きMizutani(@sirycity)です。自力で作れる部分もSaaSがあればそっち使いたい。

今日は画像処理のSaaS、Cloudinaryをしばらく使ってみての反省というか、ここ最初から知っときたかったなーって部分についてです。なるべく既存の記事と被らない内容を書きます！

Cloudinaryの簡単な説明

画像とか動画を上げれるサービスです。以上。Googleフォトみたいなもん。…と書くと語弊がありますね。あんまそういう使い方はしないです。多分。

画像をアップロードしてURLが割り振られる…まではGoogleフォトと同じなんですが、CloudinaryはURLにいろいろ追加することでそれに応じて画像を変化させられるんです。これが真骨頂。

結果として、CloudinaryはOGPを動的に生成する時によく使われます。うん。僕の知る限りでは。

知っておきたかったこと

まだ使い始めて1ヶ月たってないくらいだけど今の時点での感想です↓

よく使う項目について

そこそこ項目の種類ありますが、こいつらを特によく使いました。

• MediaLibraryは写真一覧。
• Transformationsは機能の設定みたいな感じ。
  • Cookbookはこんな機能あるよって紹介ページ。
  • NamedTransformationsはこんな風に画像を変化させるよって定義の一覧。
  • DynamicTransformationsはこんな画像が生成されたよって結果の一覧。

namedの画面仕様がちょっと分かりにくく、変化を定義した後にその定義した変化を大量の画像に適用しても表示は1つのままです(日本語が難しい)。

画像1つ1つにパブリックIDが付く

ようはユニークIDみたいなやつです。画像1つ1つにユニークなURLが付くってのはまあ当たり前だけど、それとは別にIDが1つ1つに付きます。主に画像の中に別の画像を入れる時とかに使うみたい。

パブリックIDは基本的にはファイル名から拡張子を抜いたものになるみたいで、MediaLibraryの画面に表示されてるのがそれです。詳しくは不明。

カンマ区切りのパラメータは順不同

こっから動的URLの話です。画像の中にさらに文字とか他の画像とか入れる時にそいつのパラメータをカンマ区切りで設定するんですが、このパラメータは順不同です。

オブジェクトは複数個設置可能

画像内のオブジェクトは/object1みたいな感じで定義しますが/object1/object2みたいにパスを追加していくことでいくらでも追加できます。言い方を変えると1つの階層で1つのオブジェクトを表しているみたいな感じ。これを使えば文字列とか画像内に画像とかも複数個設置できます。

日本語が普通に使える

さわらび系のフォントが普通に使えました。あと自分でフォントをアップロードして使うこともできるみたい。

座標はデフォルトが中央

webは左上寄せがデフォルトですが、Cloudinaryのオブジェクトは上下左右中央がデフォルトです。設定で左上寄せにもできるけどね。ちなみに文章も中央寄せがデフォルトです。

外部の画像も使える

画像の中に画像を入れる時には中に入れる側の画像はCloudinaryの外でも大丈夫なようです。URLをエンコードして指定するみたい。

さいごに

便利すぎます。動的OGPの申し子。従来はバックエンド側で頑張って作るしかなかった動的OGPがこんな簡単に作れるとは…ありがたい。以上。