Cloudinary は、画像や動画、その他のデジタルアセットを管理、変換・最適化、そして配信まですべてできる SaaS です。
先日のブログで、複数のオーバーレイを重ねて、ロゴ入り合成写真を作り出しました。
このオーバーレイの変換パラメータでは、ベース画像のサイズに比例してサイズを決めるよう指定しているので、他のベース画像にも簡単に流用できます。
https://res.cloudinary.com/CLOUD-NAME/image/upload/{ベース画像の変換}/c_scale,l_cm_logo_black_600,**w_0.37,fl_relative**/o_70/g_north_east,**x_0.01,y_0.01,fl_relative**,fl_layer_apply/c_scale,l_test:hoya_s,**w_0.37,fl_relative**/g_south,fl_layer_apply/l_test:paw,a_-140/**w_0.25,fl_relative**/g_south_east,**x_0.05,y_0.01,fl_relative**,fl_layer_apply/v1600331668/{ベース画像のパス}
それにしても、変換パラメータが長すぎてややこしい…ということで、今回はこれを名前で登録して、他のベース画像にも適用して量産するまでの方法をご紹介します。
流れ
Named Transformation とは？
変換パラメータの組み合わせに名前を付けて登録できる仕組みです。
例えば、c_scale,g_south_east,l_logo,o_70,w_100,x_10,y_10 のような長い変換パラメータに「logo」という名前を付けて登録すれば、長いパラメータの代わりにt_logoだけで同じ変換が適用できます。
登録はアカウント単位なので、登録した Named Transformation はアカウント内のどの画像にも同様に適用することができ、ウォーターマークなど同じ変換を複数の画像に適用させたい場合に便利です。
変換パラメータを登録
Cloudinary コンソールから Named Transformation を登録します。
先日 Transformations の機能セットが一新され、 Named Transformation もこの一部となり操作画面が進化しています。APIでの方法は以前のブログより。
Add New をクリックしたら、Transformation Builder が起動します。
本来はここで変換を一つずつ設定してパラメータセットを作っていけばいいのですが、今回はもう変換パラメータが分かっているので、画面右の Quick Edit をクリックします。
適用するパラメータセットをダイアログに貼り付け、Apply 。
すると、プレビューのサンプル画像にきちんとオーバーレイが追加されていますね。ここで、画面右上の Save as Named Transformation をクリックします。
変換に関連のある分かりやすい名前を付けましょう。名前にはスラッシュ(/)、ダブルコロン(:)、アスタリスク(*)、ハッシュ(#)など使えない記号があります。
保存をクリックしたら、これで登録完了です！
いろんな画像に適用
では、登録した変換をいろいろ適用してみましょう。
https://res.cloudinary.com/CLOUD-NAME/image/upload/c_scale,q_auto,w_500/t_multi-overlays/v1686667393/abs2023/rotes_rathaus.jpg
https://res.cloudinary.com/CLOUD-NAME/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/t_multi-overlays/v1686667393/abs2023/conference_hall.jpg
https://res.cloudinary.com/CLOUD-NAME/image/upload/e_improve,w_300,h_500,c_thumb,g_auto/t_multi-overlays/v1686667393/abs2023/hall.jpg
登録した変換パラメータを付与するだけで同様の画像が量産できますね！
備考
複数の Named Transformation で適用することも可能
先ではすべてまとめて “t_multi-overlays” としましたが、オーバーレイを分けて登録しておき、URLに複数の登録済み変換パラメータを適用することももちろん可能です。
例）以下でそれぞれ登録し、続く通りにURLを指定
- t_logo-overlay:
c_scale,l_cm_logo_black_600,w_0.37,fl_relative/o_70/g_north_east,x_0.01,y_0.01,fl_relative,fl_layer_apply/ - t_hoya-boya-overlay:
c_scale,l_test:hoya_s,w_0.37,fl_relative/g_south,fl_layer_apply/l_test:paw,a_-140/w_0.25,fl_relative/g_south_east,x_0.05,y_0.01,fl_relative,fl_layer_apply
https://res.cloudinary.com/CLOUD-NAME/image/upload/c_scale,q_auto,w_800/t_logo-overlay/t_hoya-boya-overlay/v1600331668/test/hamburg.jpg
この場合、”t_multi-overlays” と “t_logo-overlay/t_hoya-boya-overlay” は全く同一の変換です。
Named Transformation は、あくまで分かりやすくするために本来の変換パラメータの組み合わせを名前付きのものに置き換えているだけと考えればOKです。
画像ソース
もっと詳しく
オーバーレイの配置などの基礎知識について：
複数のオーバーレイを重ねる方法（前回のブログ）：
Named Transformation について：
以上、Cloudinaryでのオーバーレイの量産をご紹介しました。ご参考になれば幸いです！
クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。
2
