Cloudinary の新しい変換生成ツール Transformation Builder が利用可能になりました
最近、Cloudinary のコンソールで変換パラメータのURLを生成するツールが新しくなりました！
本機能は昨年7月にベータ版が限定公開されていましたが、変換に関する機能セットのコンソール画面がまるっと一新され、まとめて先月に一般公開されたようです。（リリースブログ）
基本操作
左側のメニューで Transformation Builder をクリックします。
すると、 以下のように新しいエディタでサンプル画像の変換画面が開きます。
＊リリースされたばかりの機能で、このブログを書いている間にもデザインが少し変わったので、また変更があるかもしれません。
プレビューの画像にはCloudinaryの用意したサンプル画像が並んでいますが、自分の好きな画像を使うには、一番右の Add your image を選択し、次のようにパブリックIDで指定します。
変換を試してみた
先日こちらのブログで Media Library から旧エディタを使ってオーバーレイを2つ重ねる方法をご紹介しましたが、同じことを新エディタでやってみました。
- ベースの画像への変換： q_auto と横幅サイズ 800px
- オーバーレイ 1：横幅300px、Gravityで右上に配置、 XとYで右上の角からの距離、Opacityで透明度70%
- オーバーレイ 2：横幅300px、Gravityで下に配置
アクションで変換を指定していく
まずはベース画像の変換から。アクションの一覧より Scale を選択し、横幅「800」を指定し、Apply をクリック。
その後、左セクションで Add Action をクリックし、今度はアクションに Quality を選択、Levelに「Auto」を指定し、Apply 。
ここまでで c_scale,w_800/q_auto が出来上がりました。
同様にして、オーバーレイのアクションを追加していきます。
オーバーレイは「Image Layer」というアクションを選択し、下図のようにパブリックIDや配置位置、そして XY 座標の指定ができます。これで l_cm_logo_black_600/fl_layer_apply,g_north_east,x_10,y_10が指定されました。
さらに、Image Layer 配下のレイヤーアクションを追加して Scale (横幅300px) と透明度を指定すると、上のようなパラメータが完成します。
（オーバーレイで複数レイヤーに分ける場合に必要な fl_layer_apply も自動的に付与されます）
あとは Add Action で同様にもう一つのオーバーレイを追加するだけです。
アクション一覧にない変換を指定する
現時点で透明度はアクションのリストに登録されていないようなので、この場合は Additional Transformations を選択して「o_70」と手動でパラメータを指定します。
また、前回のブログの後半でやった、ベース画像の相対サイズを指定する方法も、Builderの設定には導入されていないので、Additional Transformations にて「w_0.25,fl_relative」のように登録する必要があります。
（＊fl_relative は単体で登録しても効果がありません）
公式ドキュメントではまだ詳しい操作方法が載っていませんので、もちろん今後変わる可能性があります。
変換パラメータを直接指定する
一つ一つアクションを追加する代わりに、右上の「Quick Edit」のオプションからURL内の変換パラメータを直接編集することもできます。
既に変換パラメータのセットがまるごと手元にあってまるごと貼り付けたい場合や、アクションから作りかけのURLに手動で手を加えたい場合に便利ですね。
次のブログでその方法を使って編集しています。
変換を Named Transformation として保存する方法もここで紹介しています。
新エディタをデフォルトで使うには
現時点のデフォルトでは Media Library のアセットから編集に進むと、旧エディタである Transformation Editor が開きます。
恐らく旧エディタは近いうちに廃止され、いずれにせよ新エディタがデフォルトになるとは思いますが、もう移行してしまいたい場合には次の設定で Media Library からも Transformation Builder で編集できるようになります。
- 左端のオレンジのアイコン（Digital Asset Management）をクリック
- Preferences を選択
- 一番下の設定項目にチェックを入れて保存
これ以降、Media Library でアセットのメニューをクリックすると、「Advanced Edit」という項目が表示され、新エディタで編集できるようになります。
まとめ
新しくなったエディタ Transformations Builder、以下のような点が旧エディタから改善されました！
| 旧エディタ | 新エディタ |
|---|---|
| レイヤーごとのセクション分けですべての設定が表示されており、複数レイヤーの場合はスクロールが必要 | 画面左に変換アクションのリストがコンパクトにまとまり、適用する変換が多くても分かりやすい |
| 1レイヤー内で複数の変換設定ができ、組み合わせによってはエラーが発生 | アクションごとにレイヤー（スラッシュ）が分かれるので、そのような問題が起きない |
| プレビューは、多くの変換はあくまで参考レベル | より正確なプレビューが表示される |
| 一部の変換パラメータは、設定一覧に表示されず使えない | Additional Transformations でどんな変換も適用できる |
| オーバーレイ等の配置位置はプルダウンで north (上)、north east (右上) 等を選択 | 配置位置を9つのドットから選び、視覚的に分かりやすい |
| Named Transformation への登録は別画面 | 同じ画面で Named Transformation として保存 |
| ベース画像を変える場合は、Media Library で探し直して編集 | Builder の画面内で別のベース画像に切り替え可能（※ただしパブリックIDを覚えている必要がある） |
圧倒的に使いやすく、そしてかっこよくなりました！
最後の※のところが、エクスプローラーから選べるようになるとさらに非エンジニアに向けてもユーザフレンドリーになるので、さらなる改良を期待しています :)
ぜひ、使ってみてくださいね！
クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。
