Abend、ベルリンから伊藤です。画像や動画の最適化SaaSのCloudinaryで使用する画像変換パラメータについてまとめています。前回はフォーマット、品質、そしてリサイズに関するものを説明しました。今回はその続編で形やスタイルについて。今回もCloudinaryのドキュメントに沿ってまとめていきます。【今回】形とスタイルオーバーレイ・アンダーレイエフェクトCloudinaryの配信URL(おさらい)詳しくは前回のブログにありますが、Cloudinaryを使った画像や動画の最適化・変換は、そのURL内のパラメータによって、動的に行うことができます。中で、カンマ区切りで順不同でパラメータを指定でき、スラッシュ区切りで連続の変換を行うことができます。(※ただし、同じパラメータの組み合わせでも順序を変更して異なるパスとなると、異なるリクエストとしてCDNキャッシュからの配信がされません。角丸・円形化(radius)元の四角い画像を丸くするのはSNSアイコンなどでも人気で、CSSなどで適用させることも可能ですが、そういったプログラムの使用できないメールやPDFに埋め込むような場合にも、あらかじめ加工した画像が配信できるのは便利です。始まり、以下のいずれかで指定できます。すると、左上から時計回りで順に角の丸みが深くなります。左上から右回りに角の丸みの深度が大きくなっています。角の余白部分の背景は白です。https://res.cloudinary.com/CLOUD-NAME/image/upload/h_200,w_200,c_fill,r_10:20:30:40/ito-test/Reichstag.jpg※これはイメージで、影は実際には付与されません。ように透過をサポートするフォーマットを指定すれば透明にすることができます。次の図でいろいろな例を示します。適用して真円となっています。適用して楕円となっています。指定することで必要に応じて圧縮効率の高いフォーマット(Webpなど)に変換されます。(※フォーマット変換については前回の記事から。darkorangeを指定しています。RGBにより背景色を指定しています。使って、画像の形を歪めることができます。これは、例えばスマートフォンの画面、DVDのカバー写真などをオーバーレイであてはめるようなケースで便利です。詳細はこちらのCloudinaryの記事で紹介されています。指定は以下の2つの方法があります。加えてそれぞれの方法で歪み効果を適用しています。続けて角度の数値を指定します。数を増やすと時計回り、マイナスで指定すると反時計回りとなります。90度の倍数ではない斜め角度の場合には余白を埋める四角の境界が追加されます。前項と同様、余白は、デフォルトでは白背景、サポートするフォーマットなら透過されます。注意すべきは、下記の2つで異なる変換になるということです。https://res.cloudinary.com/demo/image/upload/w_150,h_100,c_fill,a_45/sample.jpghttps://res.cloudinary.com/demo/image/upload/w_150,h_100,c_fill/a_45/sample.jpg冒頭でも触れた通り、カンマ区切りで複数の変換パラメータを同時に適用させることができますが、スラッシュ区切りでは変換後にさらに変換を組み合わせる動きとなります。以下の例で違いを確認してください。■他の回転オプション他に、a_に続けて以下のような回転オプションを指定できます。これらに加えてさらに角度を回転させる場合は、続けて.と角度の数値を指定することができます。特定のアスペクト比に合わせて表示しなければならない時に便利です。有効となり時計回りに回転しています。場合には横長のため回転は行われません。透過(opacity)o_に続けて0(完全透過)から100(完全不透過)で圧縮レベルを指定します。画像フォーマットがJPGなど透過をサポートしない場合、デフォルトの白背景をベースに透過されます。透過はウォーターマークなど、画像をオーバーレイで重ねる場合に便利です。サポートされており、破線などその他のスタイルは使用不可。色には以下2つの指定方法があります。6桁または3桁のRGBで、#は省略(bo_5px_solid_rgb:ee82eeなど)こちらも画像を重ねる時に便利です。まとめいかがでしたでしょうか?Cloudinaryの画像変換パラメータでは、様々な種類のパラメータで動的に画像の変換を行うことができます。今回は形とスタイルに関するまとめでした。クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。〜ITエンジニアのお仕事とホンネ〜2月19日に新卒向けの会社説明会〜ITエンジニアのお仕事とホンネ〜を開催します。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。カフェ店長のオカノです。使いたいときの注意点を書きました。EC2)環境において、不要な踏み台サーバをなくすことができる便利なアップデートです。環境をDockerで構築してみました。臼田佳祐295ワークフロー自動化OSSのn8nをAWS環境で建てて検証してみました。非常に期待できるサービスです。Fargateの勉強をしています。使ってみたい方は参考にしてください。洋介252SnowflakeがAWSの東京リージョン上で稼働するようになりました。データを日本に置けます。芳賀健231こんにちは!猫様の忠実なるしもべ、芳賀健です。Tokyoで開催されました。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。