「デジタルメディアの配信、変換、最適化するCloudinaryの最新情報」セッションレポート #devio2022

DevelopersIO 2022

"DevelopersIO 2022"は2022年7月19日から9日間にわたっって行われた技術カンファレンスです。

DevelopersIO 2022は、業務や学びを通して得た知識や経験をシェアし、技術を楽しむオンライン型のイベントです。AWS、機械学習、OMOなどの技術から、働き方まで27のライブセッションを用意しました。7/19からは毎日YouTube上で、合計90本以上の技術セッションを公開していきます。
出典:DeveropersIO2022とは

ということで今回は公開されたセッションの中から「デジタルメディアの配信、変換、最適化するCloudinaryの最新情報」についてのレポート記事になります。

この他にも様々なセッションが用意されていますのでぜひ下記からご覧ください。

セッション概要

スピーカー

Timothy Tran : Cloudinary Ltd. Solutions Engineer

本セッションで学べる事

本セッションを視聴すると、メディア体験プラットフォームで数々のマイクロサービスを提供するCloudinaryについてをその最新機能とともに学ぶことができます。

対象者

• Cloudinaryについて知りたい方
• メディアサイエンスの最新技術について知りたい方
• ARや3Dの技術に興味がある方
• 画像や動画の加工方法について知りたい方

Cloudinaryとは

Cloudinaryはメディア体験型プラットフォームで、開発者がデジタルアセットのメディアライフサイクルをフルに生かせるようにするための数々のマイクロサービスを提供しているとTrain氏は語る。

Cloudinaryを使うことで上記スライドのように、デジタルアセットのプログラムによる調達から配信までのすべてを行うことが可能になる。

基本的な対応機能は以下の通りである。

• マイクロサービスの利用
  • REST API
  • SDK
  • widgets
  • add-on
  • テンプレート
  • 他製品との統合
• 対応フォーマット
  • 画像
  • 動画
  • Photoshopファイル
  • InDesignファイル
  • 音声ファイル
  • 3D
  • ARやVR
  • 360度メディア
• MLT CDNを使うことでCloudinaryはデジタルメディアをあらゆる端末やスクリーンなどの場所に配信することが可能

優秀な動画機能

Shoppable Video

動画に登場する商品を定義し、動画と一緒に商品バーの中に商品画像を表示するという機能。 この機能を通して、ユーザーは動画からワンクリックで買い物をしたり、商品の詳細について知ることが可能になる。 Cloudinary動画プレイヤーーのソースにShoppableパラメータを挿入することでShoppableバー（商品バー）を追加することが可能となる。 shoppableパラメーターの中には商品オブジェクトとしてproduct配列があり、ここではShoppableバー内の商品に対してユーザーによるインタラクションがあった際のイベントやアクションを指定することができる。

Demo

セッション内では例として、ユーザーが動画横に表示されるShoppableバー内のサングラスうをクリックすると、サングラスが出てくるところまで動画が飛ぶように指定をしている。 また、同じようにドレスやバックの場合は、商品表示ページや商品一覧ページにユーザーをリダイレクトするといったような指定も可能だ。

Shoppable Videoに関してのリファレンスドキュメントには様々な構成に使える関数が載っている。

• hoverイベント
• on-clickイベント
• 各clickイベントに対して引数を渡す
• 商品バーの最小化/最大化するタイミングのコントロール
• 動画再生時の動作の指定

上記のように様々な構成をとることができる。

Interactive Video Zoom In

Cloudinary Labsが開発した Cloudinaryの新しいコンセプトであり、動画との新たなインタラクションの形を提供する。

Cloudinary Labsは、デジタルメディア体験の実験やその限界への挑戦に重点をおいているCloudinaryの下部組織である。

Demo

例として示されている動画を再生すると、ズームインできるゾーンが表示されるようになる。
モデルの靴や着ているトップス、ヘアスタイルなどをズームしてみることが可能だ。

ズームだけではなくユーザーが特定の領域をクリックした場合に発生するイベントを指定することも可能である。

Cloudinaryの変換エンジンを使うことでソース動画をもとに少し異なる動画を作成し、ユーザーが特定の領域をクリックした際にその動画を再生させることなどが可能である。

Cloudinaryを使い、

• 動画のリサイズ
• リフレーミング　

なども可能である。

Video Color Mapping

Cloudinaryには以前より画像内の色を置き換える機能がある。

Demo

上記画像のように、車の色を簡単に青から黄色に置き換えることが可能。

• Cloudinaryが画像内に存在する色を認識し、多く使われている色を特定する。
• 置き換えたい色のカラーコードを推測する必要がない。

この機能を動画にも適用したのがVideo Color Mappingである。 しかし、これにはかなり複雑な計算タスクを要することが想像できる。 Cloudinaryはタスクを分解し、以下の3つの動画属性に焦点を当てることでこの問題を解決した。

• Context
  • Cloudinaryが入力された色に基づいて動画にマスクを作成する。
  • マスクが動画の各フレームに適用され、これによってフィルタリングが行われる
  • 色を更新するオブジェクトの分離
• Brightness & Saturation
  • オブジェクトの色値をRGBからHSVに変換することで、色の明度や彩度も考慮され、ディテールや照明の状態を維持することができる

これによってVideo Color Mappingの機能では動画内の自然な色の置き換えが可能になっている。セッション内では実際の色の置き換えを行った動画の紹介もされていて、ベルトの光沢など従来難しいとされていた部分の色の置き換えも自然に行うことが可能である。

動画AIについて

AIを組み込んだメディア機能についての紹介があった。

AI Content-Aware Cropping

Croppingは1つの動画やソース画像から画像を切り抜きリサイズすることで、あらゆるデバイス用に最適化をすることができる機能である。

Demo

動画内ではデモとしてバイクの走行映像のリサイズの例が出されていた。 うまくバイク（主として見せたい映像）部分を切り出しリサイズできていることが分かる。

• CloudinaryではAIか機械学習を用いて動画内のオブジェクトを本質的に検出
• gravity order機能が動画のフレームワークを再配置し、うまく動画をリサイズする
• activity heat mapsでCloudinaryが決定した重心を置くべき箇所が表示される（今回の例の場合はバイク）

A Background Removal

ここでは背景除去でのAI活用についての紹介がされていた。 Cloudinaryの背景除去は深層学習のアルゴリズムを使い、写真内の前景オブジェクトを認識し、数秒で正確に背景の除去を行うことができる。

AIをソリューションの一部として利用する場合、人工知能自体の信頼性が常に問題になると、Train氏は語る。 Cloudinary Media APIは背景除去機能が行われるたびに、背景除去の信頼度スコアを提供している。

信頼度スコアが十分であれば（0.8以上）背景の除去が成功したとみなすことができる。逆にスコアが不十分な場合には対処が必要になる。その場合は手動での調整や処理を行う必要がある。

Demo

本セッションでは画像を背景から除去し、信頼度スコアを受け取った例を紹介している。

• コードエディタ内にシンプルなNode.jsスクリプトがあることを想定し、アップロードAPIを使い、画像をCloudinaryにアップロードする（詳しいくは動画をご参照下さい）
• 前提条件としてWebhook.siteを使うことでCloudinaryがブロードキャスト下通知イベントの結果を見ることができる。
• アップロードの構成から背景除去を指定し、前景オブジェクトにperson（人物オブジェクト）を使用するようにCloudinary AIに指示。
• ターミナルから、upload.jpスクリプトを実行。
• うまくいったことを確認した後に、Webhook.siteに移動すると2つのリクエストが届いていることが分かる。
• 最初のPOSTレスポンスがアップロードイベントでCloudinaryがオブジェクトを行った部分となる。
• アップロードと同時に画像へのタグ付けも行われる。
• 2つ目のレスポンスが背景除去を実行した際のものである。
• 中身を確認すると、Cloudinary AIがタスクを完了し、信頼度スコアが出ている（この例ではスコアは0.806なので背景の除去は成功)

• Cloudinaryコンソールに戻りリフレッシュすると、背景除去された状態で画像がアップロードされていることが確認できる。
• 新しいタブで画像を開き背景色を指定することですぐにテストをすることが可能。

3D動画の簡略化

Cloudinaryの3DとARの領域についても紹介されていた。 顧客に対して3DやAR体験を提供することで、消費者と新たな没入型のインタラクションを生み出し、エンゲージメントの向上につなげることができるとTrain氏は言う。

Eコマースやカメラアプリ、ゲームやMAP機能などでデジタル3Dビジュアルの活用が増えたとともにその価値が証明されている。3Dや各超現実メディアは今後、デジタルメディアの一般的な形になっていくことが予測される。

Cloudinaryは3Dの簡素化に注力している。 2Dメディアのしくみを3Dメディアに適用することで以下を提供している。 本セッションでは下記の機能についてのライブデモが公開されている。

• 3Dオブジェクト管理
• フォーマットのトランスコード
• 3D⇔2Dの変換
• Material/Textureのサポート
• メッシュの最適化
• 拡張現実のサポート

3D Model Configurator

Edit materials

Cloudinaryメディアライブラリに3Ｄモデルを読み込むと、3Dオブジェクトとして操作が可能になる。 簡単にビューボードの調整やズームの調整ができ、好きなメッシュを選択るだけで3Dモデルのハイライト下部分に対して別のテクスチャやディフューズマップ（カラーマップ）を指定することができる。

Optimize

3Dモデルの最適化についてのデモでは、ある画像の3Dモデルを40％最適化していた。40％オプティマイズされた画像でも3Dモデルとして十分使えることが分かる。 また、それぞれにどのような違いがあるかは3D model object viewerで簡単に確認することができる。オブジェクトのワイヤーフレームを表示することでトライアングル数や、複雑さの軽減のために削除されたトライアングルも確認することができる。

3D Viewer

3D Viewerのデモではキツネのモデルを使い、3Dオブジェクトをどのように動かすことができるかについて説明していた。 3Dオブジェクト内では埋め込みアニメーションを再生することも可能ということだった。 キツネを歩かせたり、画像に公園や屋外をイメージした明るい照明を適用することなどができる。skyboxを適用すると背景が追加されより没入型の視聴体験となる。 このARデモはオンラインで誰でも試すことが可能である。 セッション内ではモバイルでこの体験ができるようなQRコードが紹介されていた。実際に私も使ってみたが、簡単に3Dモデルをカメラを通して空間に映し出すことができ、リサイズなども可能だった。

Image Modeling with Texture Mapping

Texture Mappingを用いた画像モデリングも使うことができる。 例えばユーザーが自分のTシャツのデザインをアップロードさせる場合、アップロードされたデザインに適切な照明と彩度を適用することでよりリアルなTシャツデザインを表現することが可能である。 デモでは実際にTシャツのデザインに関しての実例を紹介している。 Tシャツのデザイン画像は下記のような複数のアセットで構成されている。

• Tシャツだけの画像
• Tシャツを人が着ている画像（腕や首の入った画像）
• テクスチャマップ
• ディスプレイメントマップ

これらの要素すべてを組み合わせ、デザインをTシャツのテクスチャと形状に合わせリアルに変異させた画像が出来上がる。 Cloudinary Media InspectorというGoogle Chromeように無料提供されているツールを使い出来上がった画像について細かく見ていく。 Cloudinary Media Inspectorは、カラーの解析を行うと同時に閲覧したメディアに関する重要な情報を迅速かつ正確に提供する。この機能はCloudinary Transformationsで作業する際にも非常に有効である。

デモでは変換をデバックし、「Tシャツだけの画像」がTシャツデザインのイメージ画像になるまでを確認していく。

• Tシャツのロゴの位置を決める
• Tシャツの上にカスタムグラフィックとしてロゴを適用
• テキストの適用（この時点でロゴ＆テキストはフラットな状態）
• ロゴ＆テキストをディスプレイメントマップに沿った形にする。
• 「Tシャツだけの画像」をアンダーレイヤーとして追加
• 色置換機能を適用（白から薄いグレーに置換）
• 「Tシャツを人が着ている画像」を入れ込む
• テクスチャマップを追加し透明度を出す

こうして画像のような「Tシャツデザインのイメージ画像」となる。 例えばここからロゴを下の方に移動すると、ディスプレイメントマップ美従いロゴに化kる部分のしわや影が調整される。

まとめ

Cloudinaryは最新のデジタルメディアのトレンドとイノベーションをインテリジェンスとオートメーションを使うことで簡素化し複雑なメディア配信を可能にするとTrain氏は語る。

• Intelligence and automation（高度な自動化）
• Media sience　
• Agility（機敏性）
• Extensibirity（拡張性）

Cloudinaryは上記の4つに重点を置き、実現に取り組んでいるとのことであった。

セッション視聴を終えて

実は私自身メディアサイエンスの部分に関してはそこまで詳しくはなかったのですが、本セッションは必ず分かりやすいデモとともに説明をしてくれるため非常にわかりやすかったです。 本セッションはデモが多いためこちらのブログだけではなくぜひ動画の視聴をお勧めしたいセッションの一つになっています。 メディアサイエンスの最新技術に興味がある方にとてもおすすめのセッションになっていますので、ぜひご覧ください！