[レポート] 自動化とAIを使ったスケールするメディア利用 #Cloudinary #ImageCon2020

Cloudinary ImageCon 2020 の "Handling Media at Scale Using Automation and AI" のセッションレポートです。Cloudinaryの自動化やAIに関する機能を活用し、メディア管理をスケールさせるための導入セッションです。

#画像認識

#レポート

#SaaS

#AI

#動画配信

Ito ma

2020.08.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Guten Tag! ベルリンの伊藤です。

Cloudinary の ImageCon 2020 が開催されており、誰でも無料で登録し、オンライン配信を視聴することができます。本稿では、私が試聴したセッション「Handling Media at Scale Using Automation and AI」のレポートを行います。

概要

スピーカー

Yaron Reichert (Cloudinary / Technical Content Team Leader)
Jackie Rosenzveig (Cloudinary / Director of Product)

セッション: Handling Media at Scale Using Automation and AI

https://www.imagecon.com/agenda/session/276192

Digital media is booming all over the world, across every medium and format. So how do you manage and automate all of this rich media effectively? This session will dive into how to automate media handling tasks using AI with Cloudinary.

豊富なメディアを効率的に自動化して管理するにはどうすれば良いか、Cloudinary のAI技術に関するする導入セッションです。

レポート

メディアのライフサイクル

一般的なライフサイクルは、アップロード、管理（フォルダに入れるなど）、検索&共有、サイズや内容を編集、最適化&配信、分析（エンゲージメントなど） のステップ
このうち、部分的なステップに使えるツールは数多くあるが、全体を網羅したエンドツーエンドのソリューションはCloudinaryだけ
最初の3つのステップにはいくらか手動の作業（人による意思決定）が必要かもしれないが、後半の3つのステップは自動化処理がないと負荷が高く、スケールすることはできない

本セッションでは、以下のようなテーマでスケールさせる方法について触れていく：

SNSの動画作成
ユーザ生成のコンテンツ
動画の最適化
メディア管理の自動化

ソーシャルメディアの動画をスケールさせる

動画はカスタマーエンゲージメントやコンバージョンに対して大きな効果があり、顧客はより多くの動画コンテンツを期待する
一方、動画作成・配信は技術、クリエイティブ、マーケティング、IT、ビジネスラインにおいて大変な作業で膨大な時間を消費する
統計データ（ソース: Forbes, Google, Hubspot）
- 90% の顧客が製品映像を購入の決め手とする
- ランディングページに動画があるとコンバージョン率が 80% 上がる
- 時間とリソースの障壁を超えられるなら、83% の企業がもっと動画を使いたいと思っている

動画の要素

動画作成では、以下のような要素を含めるべき：

アスペクト比：SNSごとの厳しい比率の要件に沿う必要がある
タイトルとキャプション：多くの動画はミュートで再生されるので注目を集めるには大事
ブランディング：コンテンツを一貫させ、見つけやすくするためにロゴやフォント、カラーを統一する
進捗バー：動画のおおよその時間の長さを示すことで、ユーザは時間がかかりすぎないことが分かり、エンゲージメントに繋がる

例えば、Instagram のストーリーにベトナム旅行の動画を上げる場合、Cloudinaryを使って次のように進める。

#1 動画を用意

横向きのオリジナル動画で、パソコンには最適だがスマホでは見づらい:

https://res.cloudinary.com/cloud-name/video/upload/
vietnam.mp4

#2 スマホに合うよう切り抜き

中央で切り抜くと、映像内の船が部分的に切り落とされる:

https://res.cloudinary.com/cloud-name/video/upload/
ar_9:16,c_fill,w_400/
vietnam.mp4

AIによるコンテンツに合わせた切り抜きで、動画の中で最も主な対象物を検知し、そこに焦点を当てる。g_autoパラメータを追加し、今回の場合、船を追うように動的に切り抜き:

https://res.cloudinary.com/cloud-name/video/upload/
ar_9:16,c_fill,g_auto,w_400/
vietnam.mp4

#3 キャプション、タイトル、ロゴを追加

統一したフォントや色を使ったテキストオーバーレイで行き先を示すキャプションを加え、画像オーバーレイでロゴを配置する:

https://res.cloudinary.com/cloud-name/video/upload/
ar_9:16,c_fill,g_auto,w_400/
l_text:heebo_44_bold:Visit%20Vietnam!,g_south,y_40,co_rgb:FFFFFF/
l_ctravel,g_north_east,w_60,x_10,y_10/
vietnam.mp4

#4 進捗バーを追加

e_progressbarパラメータを追加し、フレームの左下から画面を囲むようにバーが進む:

https://res.cloudinary.com/cloud-name/video/upload/
ar_9:16,c_fill,g_auto,w_400/
l_text:heebo_44_bold:Visit%20Vietnam!,g_south,y_40,co_rgb:FFFFFF/
l_ctravel,g_north_east,w_60,x_10,y_10/
e_progressbar:frame:white:8/
vietnam.mp4

ImageCon2020 transform social videos

これらのパラメータの組み合わせをテンプレートとし、ファイル名を書き換えるだけで同様の変換が可能なので、色やサイズを多少調整した同様のパラメータの組み合わせを使い回すことで、一貫した変換を行うことができる。

ユーザ生成コンテンツで体験を最大化

各業界で、ユーザ生成コンテンツ (UGC) はものすごいコンバージョン率（全体平均で約160%）に増加させる
ユーザによる個人的な経験の共有は、信頼できる情報として他のユーザの関心を集める
ただし、そのコンテンツが自社のデザインに合っているか、プライバシー水準を満たすか、その上で、そのユーザに高いユーザエクスペリエンスを提供しているか、といった観点で、考えることがたくさん

UGCに対するCloudinaryの機能

・承認とフィードバック - 分析を行い、基準に合わないファイルはアップロードを拒否したり、ユーザに警告したりする

アップロード時、品質が適切か、アクセシビリティが適切か（色盲に優しい色合いか）、マルウェア検出、モデレーションできているか（ヌードなど基準に違反していないか）、といった情報を判定できる。閾値を指定し、それを超える場合には特定の処理を行うようにする。

※品質、アクセシビリティは現時点ではBeta版の拡張オプションのため、使用するにはサポートに連絡すること

・プライバシー - 顔や文字を検知し、モザイクやぼかしを入れる

e_blur_faces / e_pixelate_faces パラメータを加えることで、顔が映っている画像の場合、顔部分にモザイクやぼかしを加えることができる。アドオンを使って、車のナンバープレート、クレジットカードの番号などを同様に文字認識で隠すことも。

・メタデータと検索 - フォームデータを保管し、検索機能強化のため自動タグ付けする

使うタグ付けエンジン（Amazon, Google, Imagga）を選択し、ユーザのファイルアップロード時に自動で関連するタグを付与するよう設定できる。また、顧客がフォーム入力した情報や、ファイルそのものに含まれるデータをメタデータとしてアセットに紐づけて格納しておくことができる。そして、これらの情報を使ってアセットを検索することが可能。

・自動切り抜き - 1つの画像/映像を複数の目的に活用する

先ほどの動画の切り抜きと同様、g_autoで画像でも主な対象物に焦点が当たるよう自動で切り抜きできる。対象物が既に明らかなケースでは、さらなる指定が可能。例えば、顧客が電子レンジを販売したく、キッチンの画像をアップロードしている場合、サムネイル用に次のようなパラメータを加えることで、microwave (電子レンジ) に焦点を当てた変換画像を自動で生成できる。同じキッチンの写真から、パラメータによりシンクや冷蔵庫を自動で切り抜くことも。

g_auto:microwave,c_thumb,w_600,ar_1

さらに、fl_getinfo パラメータを付与するとJSON情報を返却するので、アプリケーションに活用することができる。例えば、この対象物の座標情報を使えば、アプリ内で切り抜き機能を提供する場合にデフォルトの切り抜き範囲としたり、オーバーレイをする場合にこの対象物を避けるように重ねたりする。

Make it Fun! - おしゃれフィルタやエフェクトを付ける

ユーザがファイルをアップロードする際、エフェクトのオプションがあるに越したことはないはず。一から開発するのはかなりの手間だが、Cloudinaryのオプションで簡単にエフェクトを適用させることができる。例えば、e_cartoonify（アニメ調）、e_art:sizzle（Instagramっぽいフィルター）など様々。また、自動背景除去のアドオンもあり、別の背景画像と組み合わせることも。

ちなみに、写真と美術品を組み合わせて、その画家により写真が描かれたようなエフェクトに仕上げる美術品スタイル変換もぜひデモを試してほしい。例えば、モナリザの絵と自分の写真を組み合わせて、モナリザの絵のタッチで描かれた自分の画像を生成することができる。

動画の最適化

動画は読み込みが速くスムーズに再生された上で、見栄えが良いのが理想
実際には、多くの場合ネットワークに制限があり、品質vsサイズvsスピード/コストの間で選択が迫られる
ゴールは、可能な限り圧縮しつつ、コンテンツと要件を元にちょうど良い落としどこにすること

なお、デスクトップ、タブレット、スマホなど様々な端末で、異なるOS、ブラウザ、アプリケーションを使用し、それぞれでサポートされるフォーマットを使う必要がある。

Cloudinaryのf_autoとq_auto

Cloudinaryでは、f_autoを付与することでブラウザごとに最適なフォーマットを自動選択し、配信することができる。

また、q_autoを適用すると、映像の内容に応じた最善の品質で配信する。

デモサイトでこれらのパラメータを付与した前後を比較することができ、多くの場合、見栄えを変えずに大きく（例の場合、70%減）ファイルサイズを減らすことができる。

参考資料

Cloudinanry CLI

一括操作などをプログラムで行うには、API/サーバサイドSDKを使うことができるが、クライアントがアプリを持ってなかったり、普段使うプログラムはいじらずに、ちょっとしたリクエストを実行したいという場合に、最近CloudinaryでリリースされたCLIがとっても便利。CLIをインストール、環境変数を定義するだけで、コマンド実行が始められる。

例えば以下のようなコマンドが実行できる：

Migrate：外部のファイル一覧をあらかじめ定義し、その通りにマッピングしてCloudinaryへ移行
Upload_dir：指定したローカルディレクトリから、フォルダ構成をそのままにアップロード
Sync：ローカルフォルダとCloudinaryフォルダを同期させ、ローカルに追加したファイルを自動的にアップロードさせられる
Make：アップロードウィジェットや動画プレイヤーなどのウィジェットを使用する場合のテンプレートコードを生成する

CLI のデモ

プリセット（アップロードに適用させる設定のテンプレートのようなもの）を作成し、プリセットには画像の背景を除去すること、ファイル名を使ってアップロード、同じファイル名なら上書きすること、を定義する。

$ cld admin create_upload_preset name="bgd_remove6" backgroud_removal="cloudinary_ai" overwrite=true use_filename=true unique_filename=false type=upload

作成したプリセットを使ってローカルのフォルダからファイルをアップロードする。

$ cld upload_dir -f imagecon/no_bgd_products -p bgd_remove6 documents/cloudinary/imagecon/winter_clothes

コンソールから対象のパス（-fで指定した"imagecon/no_bgd_products"）を確認すると、画像が背景除去されており、ローカルと同様にサブフォルダがある形でアップロードされたことを確認できる。

ImageCon2020 コンソール画面でアップロードの確認

参考資料

おわり

1時間のセッション映像ですが、導入セッションといってもかなり広い範囲のテーマで非常に濃い内容でした！Cloudinaryの機能では多岐にわたってAIや自動化が取り入れられており、これらの機能を活用することで、コストもリソースも削減してサービスをスケールさせられることが学べました。

ImageCon 2020 は10月23日までオンデマンドでいつでも試聴可能です。

クラスメソッドでは、Cloudinary のパートナーとして導入サポートを行なっています。お気軽にこちらからお問い合わせください。

[レポート] 自動化とAIを使ったスケールするメディア利用 #Cloudinary #ImageCon2020

概要

レポート

メディアのライフサイクル

ソーシャルメディアの動画をスケールさせる

動画の要素

#1 動画を用意

#2 スマホに合うよう切り抜き

#3 キャプション、タイトル、ロゴを追加

#4 進捗バーを追加

ユーザ生成コンテンツで体験を最大化

UGCに対するCloudinaryの機能

動画の最適化

人気の動画フォーマット/コーデック

Cloudinaryのf_autoとq_auto

参考資料

Cloudinanry CLI

CLI のデモ

参考資料

おわり

関連記事

主なカテゴリ

AWS

おすすめ

プロダクト

コンテンツ

お問い合わせ

運営会社