Cloudinaryで画像変換を試してみた

はじめに

清水です。画像、動画といったデジタルメディア管理、変換サービスのCloudinaryを試す機会がありました。本エントリではこのCloudinaryの概要ならびにアカウントの作成、そして簡単な画像変換を試してみたのでまとめてみます。

Cloudinaryとは

「The Media Full Stack」、「Heavy Durty Image and Video Platform」とホームページ上に記載があります。具体的には、メディアファイルのアップロードならびにクラウド上のストレージへの保管にはじまり、メディアファイルのコンテンツ資産管理（Digital Asset Management:DAM）、ファイルの変換そして高速配信までができるサービスとなります。 https://cloudinary.com/より

またWebインターフェイスであるCloudinary Manaement Consoleからの操作のほか、URLベースでのメディア変換、またRuby on RailsやPHP、Node.jsなどなど多様なフレームワークと連携が可能なことも特長です。

興味深い点としてはAWSとの連携面が挙げられます。バックアップなどでAmazon S3と連携できる他、ドキュメントのService architectureを見るとCloudinary自体がAWS上で構築されているようですね。

https://cloudinary.com/documentation/solution_overviewより

その他、多様なAdd-onsの連携としてAWSサービス（Amazon Rekognitionなど）の他、Googleなどのクラウドサービスとも連携可能のようです。

アカウントの作成

それでは実際にアカウントを作成して、画像変換を試してみます。まずはアカウントの作成からです。Cloudinaryは有料プランもありますが、Freeプランでもいくつかの機能が使えます。まず試してみるにはFreeプランからはじるのが良さそうです。（なお、簡単な機能の確認はアカウントを作成せずともトップページ、デモページから行えます。）

トップページの[SIGN UP FOR FREE]からアカウント作成に進みましょう。

名前、E-mailアドレスの他必要事項を記入します。Assigned cloud nameについては、メディア変換後の配信用URLの一部になります。とりあえずはデフォルトのランダムな英数字でも構いません（あとから変更可能です）、または自分の好きな名称に変更しておきましょう。

アカウントが作成されると、Welcome to Cloudinaryの画面に遷移します。これと合わせて、Verificationのメールが登録したEメールアドレス先に届きます。こちらを忘れないうちに確認、クリックして認証を済ませておきましょう。

画像をアップロードして変換を試してみる

アカウントが作成できたので、さっそく自前の画像をアップロードしてCloudinaryでの画像変換を試してみます。Cloudinary Management Console画面上部のメニューからMedia Libraryを選択します。そのままファイルをアップロードすることもできますが、フォルダを作成して改装管理もできます。今回はフォルダ作成からはじめてみます。

"Home"と表示されている右側のフォルダマーク、もしくは左側中央に表示されているフォルダマークの[Add]のリンクからフォルダを作成します。Add Foldoerのダイアログが表示されるのでフォルダ名を入力して[Save]ボタンでフォルダを作成します。

フォルダを作成すると以下のような画面に遷移します。そのままドラッグアンドドロップでファイルアップロードができます。またメッセージにある通り、右上の[Upload]ボタンからもファイルのアップロードが可能です。

ファイルアップロード後、画像サムネイルを選択しEditメニューから画像の編集画面に遷移します。まずこの画面で、右下に表示されているURLからアップロードした画像を参照可能です。以下のような形式のURLとなります。（ランダムな英数字はバージョン管理のためのタイムスタンプ値とのことです。）

• http://res.cloudinary.com/[Cloudinary cloud name]/image/upload/[ランダムな英数字]/[フォルダ名]/[画像ファイル名].jpg

Cloudinaryでリサイズしてみる

アップロードした画像はデジカメで撮影した4608x3456の解像度のものです。例えばこれをWebサイトで表示する場合、（用途にもよりますが）大きすぎる解像度ですよね。画像ファイル容量も大きいかと思いますので、リサイズが必要になります。画面左側のコントロールメニューのResize & cropのWidthの値を800としてみましょう。自動的にHeightの値も変更されアスペクト比が保持されます。また右側のプレビュー画面は[Refresh Preview]の表示となります。クリックすると画像が更新されます。

ここで注目なのが右下のURLです。先ほどから少し変わり、以下の形式になっています。

• http://res.cloudinary.com/[Cloudinary cloud name]/image/upload/c_scale,w_800/[ランダムな英数字]/[フォルダ名]/[画像ファイル名].jpg

c_scale,w_800の箇所が増えていますね。このURLで画像を取得すると、先ほど指定したWidth: 800pxの画像が得られます。こちらはChromeで画像のURLから直接表示した例ですが、800x600の解像度に変換されて配信されていることがわかります。

さて、ここでもう少し大きくした/小さくした画像を取得したい、というような場合があったとします。一部分を書き換えたURLにリクエストを投げるだけでこれが取得できます。例えば、先ほどはWidthの値を800としましたが、これを1280としたものを用意したい場合、URLのc_scale,w_800をc_scale,w_1280と書き換えれば良いことになります。以下のように1280x960の画像が取得できました。（Chromeのタブ部分の解像度表示にご注目ください。）

つまり、オリジナル画像をクラウド上に保管しておき、使用したいサイズで画像をリクエスト、変換したものが配信されることとなります。

Cloudinaryで画像にエフェクトをかけてみる

続いて同じ編集画面のLook & feelのEffect欄に注目してみます。こちらを操作することで画像にエフェクトをかけたものがリクエストに対して配信されます。EffectでArtistic Filterを、さらにその右側に表示される項目で「Audrey」というものを選んでみました。[Refresh Preveiw]ボタンで更新すると、こちらのように白黒画像のようにエフェクトがかかった画像が表示されます。

そしてリサイズのときと同様に、右下のURLにも注目してみましょう。以下の形式になっています。

• http://res.cloudinary.com/[Cloudinary cloud name]/image/upload/c_scale,e_art:audrey,w_800/[ランダムな英数字]/[フォルダ名]/[画像ファイル名].jpg

uploadに続く部分がc_scale,e_art:audrey,w_800となっていますね。他の種類のエフェクトに切り替える場合はaudreyの部分を別名に書き換え得たURLにアクセスすればよく、また別のファイルをCloudinaryにアップロードして、同様のエフェクトを得たい場合は[フォルダ名]/[画像ファイル名]を書き換えれば良いことになります。またリサイズについてw_800とWidth 800で指定していますが、サイズを変更したい場合は先ほど同様にこちらを書き換えたURLにアクセスすれば異なる解像度の画像が取得できます。

まとめ

画像、動画の向けメディア管理、変換サービスであるCloudinaryについて、アカウントの作成から簡単な画像変換についてまとめてみました。ドキュメントやデモ画面を見る限り、本エントリで試してみた画像変換の他にも様々な機能があるようです。引き続き、Cloudinaryの各機能を試していきたいと思います。