サーバーレスな画像の最適化を実現する Serverless Image Handler を試してみる
稲葉 智子
AWS ウェブサイトでは AWS ソリューションというページがあり、AWS サービスを使用して構築された 60 を超える多数のソリューションが公開されています。今回は、このソリューションの中から、サーバーレスアーキテクチャで構成された「Serverless Image Handler」ソリューションをご紹介します。
この ソリューションのランディングページでは次のものが提供されています。
概要とよくある質問
アーキテクチャ図
ソースコード (GitHub)
AWS CloudFormation テンプレート (自動デプロイ用)
実装ガイド (PDF)
ソリューションに関するリソースが 1 か所にまとめられているので、必要なものがすぐ揃うようにページが構成されています。このページの下部にはみなさんにこのソリューションを評価していただけるよう、「はい / いいえ」で回答できるボタンもあります。是非、皆様のフィードバックをお寄せください。
それでは、「Serverless Image Handler」がどんなソリューションなのか見ていきましょう。
ご注意
本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。
この記事のデモを無料でお試しいただけます »
毎月提供されるデベロッパー向けアップデート情報とともに、クレジットコードを受け取ることができます。
「Serverless Image Handler」ソリューションとは ?
「Serverless Image Handler」ソリューションは、AWS クラウド上で AWS サービスを使用して構築された可用性の高いサーバレスアーキテクチャと低レイテンシーのウェブサイトレスポンスを提供します。このソリューションはコスト効率にも優れており、オープンソースの Sharp (イメージを処理するソフトウエア) を使用してイメージを処理し、動的にイメージを操作することにも最適化されています。
他にも、Amazon Rekognition を使用した コンテンツモデレーション (不適切な画像の検出) やスマートクロッピングなどの機能があり、このソリューションで提供しているデモ用のユーザーインターフェイス (UI) でそれらの機能の動作確認ができるようになっています。
クリックすると再生します
このソリューションは、次のような場合にご活用いただけます。
<使用例>
ウェブサイトやモバイルアプリケーションで大容量のイメージファイルを含むウェブサイトを運営しており、イメージ処理を自動化したい場合
使用している AWS サービスは ?
「Serverless Image Handler」ソリューションは、主に次の AWS サービスを組み合わせて構築されています。(この記事の公開時点で、次のサービスは東京リージョンでご利用可能です)
＜Serverless Image Handler のデモ用の UI (ウェブベース)＞
サービス名 |
用途 |
Amazon CloudFront |
デモ用のコンテンツ (UI) を配信します。 |
Amazon Simple Storage Service |
Amazon S3 バケットにデモ用の UI のコンテンツを格納しホストします。 |
＜Serverless Image Handler の機能＞
サービス名 |
用途 |
Amazon API Gateway |
エンドポイントリソースを提供し、AWS Lambda 関数を呼び出します。 |
AWS Lambda |
Amazon S3 バケットからイメージを取得して、Sharp を使用してイメージを変更し、変更されたイメージを Amazon API Gateway に返します。 |
Amazon CloudFront |
イメージの処理コストとその後の画像配信のレイテンシーを削減するためのキャッシングレイヤーを提供します。 |
Amazon Simple Storage Service |
イメージを格納します。 |
AWS Secrets Manager |
イメージの URL 署名機能を有効にすると、AWS Lambda 関数が既存の AWS Secrets Manager のシークレットからシークレット値を取得して、署名を検証します。 |
Amazon Rekognition |
AWS Lambda 関数が Amazon Rekognition のスマートクロッピングとコンテンツモデレーションの機能を呼び出してイメージを分析し、その結果を返します。 |
このソリューションでは、スタックの作成時に Amazon CloudFront のドメイン名も生成されます。このドメインをエンドポイントとして、image handler API を介してオリジナルのイメージと編集済みのイメージの両方にアクセスできるようになっています。
注意 : このソリューションの実行中に使用した AWS サービスのコストは、お客様の負担となります。ご自身でデプロイされる場合は、ご了承のうえ、ご利用ください。コストに関する詳細は、上記 AWS サービスの製品ページにある各「料金」ページでご確認いただくか、実装ガイドの「コスト」セクションをご参照ください。
AWS CloudFormation テンプレートの入手
このソリューションは、テンプレート (serverless-image-handler.template) により約 15 分程度でお客様の AWS アカウントにデプロイ可能です。このテンプレートは、次の 2 つの方法で入手できます。
＜ランディングページから入手してデプロイする場合＞
ランディングページ内には右図の情報が記載されています。「CloudFormation テンプレート」、「AWS コンソールで起動する」、「AWS IQ エキスパートでデプロイする」からお好きなデプロイ方法を選択できます。
ランディングページから入手してデプロイする場合は、「CloudFormation テンプレート」または「AWS コンソールで起動する」をご選択ください。
<実装ガイドから入手してデプロイする場合>
実装ガイド内の「スタックを起動する」セクションにある「ソリューションの起動」ボタンからテンプレートを起動できます。
上記の方法を使用する場合は、事前に AWS アカウントにログインしておくと、AWS CloudFormation コンソールのスタック作成用の画面が自動で開くので便利です。テンプレートをお手元にダウンロードした場合は、手動で AWS CloudFormation コンソールからスタックの作成を行い、ダウンロードしたテンプレートを指定してください。
AWS CloudFormation テンプレートで自動デプロイ
前述のいずれかの方法でテンプレートを入手したら、AWS CloudFormation でスタックを作成します。スタックの作成画面に表示される設定項目の詳細な説明は実装ガイドに記載されていますので、ご自身でこのソリューションをデプロイする場合は、実装ガイドを参照しながら設定してください。また、「Serverless Image Handler」ソリューションでは次の項目が入力必須のため、事前に入力内容を準備しておくと良いです。
スタックの名前 |
ご自身が後で判別つきやすい、任意の名前を設定できます |
SourceBuckets |
イメージファイルを保管する Amazon S3 バケット名を指定します。複数の Amazon S3 バケット名を指定したい場合は、カンマ区切りで記入します 注意 : ここで指定する Amazon S3 バケット名は、このソリューションをデプロイする前に、ご自身の AWS アカウントの Amazon S3 に事前に用意しておく必要があります。Amazon S3 上に存在しないバケット名を指定すると、スタックの作成時にエラーになりデプロイに失敗するのでご注意ください。 |
上記以外の項目をデフォルト設定のままでスタックを作成すると、約 15 分程度でデプロイが完了します。
デフォルト設定では、下記機能が無効になっています。これらの機能を使用したい場合は、スタックの作成時に選択肢を「Yes」に変更してください。(カッコ内は、AWS CloudFormation テンプレートのパラメータ名)
- Cross-Origin Resource Sharing (CORS) 機能 (CorsEnabled)
- イメージのURL署名機能 (EnableSignature)
- フォールバックイメージ機能 (EnableDefaultFallbackImage)
- webp フォーマットの自動受け入れ機能 (AutoWebP)
デプロイ完了後は、AWS CloudFormation コンソールの「スタック」一覧で、このソリューションのスタック名をクリックすると次の詳細画面が表示されます。
クリックすると拡大します
この詳細画面は、7 つのタブ (スタックの情報、イベント、リソース、出力、パラメータ、テンプレート、変更セット) に情報が分けられています。このソリューションでデプロイした設定情報をそれぞれのタブで確認していただけるようになっています。
補足: AWS CloudFormation テンプレートを使用してデプロイしているので、このソリューションが不要になった場合は、AWS CloudFormation コンソールで該当スタックを削除するだけで、このソリューションで使用している全てのリソースを削除できます。ただし、このソリューションのデプロイ時に「SourceBuckets」で指定した Amazon S3 バケット内にイメージファイルが存在しているとスタックの削除に失敗するので、Amazon S3 バケット内を空にしてから AWS CloudFormation でスタックの削除を行うようにしてください。
デモ用の UI で動作確認をしよう !
このソリューションでは、デモ用の UI が用意されています。AWS CloudFormation でスタックの作成が完了したら、このソリューション用スタックの詳細ページにある「出力」タブの一覧に「DemoUrl」と表記されているキー項目の右横に URL が値として表示されます。その URL をクリックして、こちらの画面を表示します。(デモ用の UI は英語版のみです。テキスト欄には入力例が表示されています)
クリックすると拡大します
デモ用の UI には、下記の機能が用意されています。
Image Source (元画像) |
Bucket name |
AWS CloudFormation テンプレートの SourceBuckets パラメータで指定した Amazon S3 バケットの名前を入力します。 |
Image key |
上記で入力した Amazon S3 バケットにアップロードしたイメージのファイル名を入力します。(例: XXXXX.jpg) |
|
Import |
インポートボタン。このボタンをクリックすると、上記で指定したオリジナルのイメージを読み込みます。 |
|
Original Image |
「Image Source」 で読み込んだオリジナル画像をプレビュー表示します。 |
|
Editor |
イメージのサイズ、色彩、向きなどが調整でき、Amazon Rekognition を使用したスマートクロッピングもできます。(詳細は後続の記載をご参照ください) |
|
Reset |
リセットボタン。このボタンをクリックすると、変更した値を初期値に戻します。 |
|
Preview |
プレビューボタン。このボタンをクリックすると、指定した設定値でイメージを表示します。 |
|
Preview |
「Editor」 で設定を変更したイメージをプレビュー表示し、JSON のリクエストボディ部分のコードとエンコード済みの URL を表示します。 |
|
「Image Source」機能で、実際に Amazon S3 バケット名とイメージのファイル名を入力し、「Import」ボタンをクリックすると、次の図のように指定したイメージの元画像が表示されます。
クリックすると拡大します
では次に、読み込んだ画像を「Editor」機能を使用して編集してみましょう !
「Editor」機能には、次の編集機能があります。
サイズ調整と表示スタイル |
Height |
縦幅のサイズを指定できます |
Width |
横幅のサイズを指定できます |
|
Resize Mode |
表示スタイルを 6 つの選択肢 (Disabled, cover, contain, fill, inside, outside) から指定できます |
|
カラー |
Fill Color |
Resize Mode で 「Contain」を選択したときに表示される色を指定できます |
Background Color |
透明の背景を持つロゴ画像などの場合に背景色を指定できます |
|
その他の |
Grayscale |
イメージがグレーのコントラスト表示になります (RGB を指定してもグレースケールが優先されます) |
Flip |
イメージを左右に反転させます |
|
Flop |
イメージを上下に反転させます |
|
Negative |
イメージの色を反転させます (RGB を指定していると、RGB の設定値が優先されます) |
|
Flatten |
イメージを一次元化 (平坦化) させます |
|
Normalize |
イメージのスケールを揃える正規化をします |
|
RGB |
イメージ自体の色を RGB レベルで指定できます |
上記の「Editor」機能を使用して、イメージを次図のように設定に変更してみました。(図中の赤枠部分)
クリックすると拡大します
この設定で「Preview」ボタンをクリックすると、こちらの図のように画面右横にある「Preview」部分にイメージが表示されます。
クリックすると拡大します
ここには「Editor」機能で設定した内容で表示されるイメージ以外に、編集に合わせて変更された JSON コードを「Request Body」で確認できます。(図参照)
クリックすると拡大します
また、「Encoded URL」には、編集後のイメージの URL が表示されるので、ウェブブラウザ上で表示させて、編集後のイメージを確認することもできます。赤枠のドメイン部分は、このソリューションのデプロイ時に生成されたドメイン名です。AWS CloudFormation のスタックの出力タブに表示されている「ApiEndpoint」キーの値になります。
クリックすると拡大します
Amazon Rekognition を使ったスマートクロッピング機能
このデモ用の UI では、スマートクロッピング機能がすぐに利用できるように設定されています。「Image Source」機能で Amazon S3 バケット名とイメージのファイル名を指定しインポートしてから、「Smart Cropping」にチェックを入れて「Preview」ボタンをクリックするだけで、自動でオリジナルイメージから顔部分をクロップしてくれます。(図参照)
補足: Amazon Rekognition で顔の検出ができなかった場合は、オリジナルイメージと同じ画像が画面右のプレビュー部分に表示されるようになっています。
クリックすると拡大します
スマートクロッピングには、下記の 2 つのオプションがあります。
Focus Index |
スマートクロッピングが有効になっているときに検出された面を切り替えます。 最初に検出された顔の Focus Index は常に「0」で、その後に検出された顔には段階的にインデックスが付けられます。 Amazon Rekognition は、デフォルトで最初の顔を自動的に返します。 |
Crop Padding |
スマートクロッピングされたイメージにすばやく均一なパディングを適用します。 指定する値が高すぎると ImageOutOfBounds エラーが返されるため、より詳細にパディングを操作したい場合は、SharpAPIを使用して直接行う必要があります。 |
この「Crop Padding」を指定していない場合は、上図のように顔まわりをギリギリでクロップされてしまいますが、下図のように高すぎない値で指定すると、クロップしたい範囲を少し広げることができます。
クリックすると拡大します
ソリューションの削除
このソリューションが不要になり、アンインストールしたい場合は、AWS CloudFormation コンソールからこのソリューションのスタックを削除するだけで、簡単に削除できます。(ただし、このソリューションのデプロイ時に「SourceBuckets」で指定した Amazon S3 バケット内にイメージファイルが存在しているとスタックの削除に失敗するので、Amazon S3 バケット内を空にしてから AWS CloudFormation でスタックの削除を行うようにしてください)
削除を行った後は、スタックの「イベント」タブに表示されるステータスに「DELETE_COMPLETE」が表示されていることを確認してください。アンインストールの詳細については、このソリューションの実装ガイドもあわせてご覧ください。
以上がこのソリューションで提供されている機能になります。
まとめ
「Serverless Image Handler」ソリューション、いかがでしたか ?
どんな機能を持つソリューションなのかを、デモ用の UI を通して簡単にご理解いただけたのではないかと思います。実装ガイドには、実際にご利用いただける JSON のサンプルコードも提供していますので、そちらもあわせてご覧ください。これをきっかけに、このソリューションに少しでもご興味を持っていただけますと幸いです。
前述にあるようにこのソリューションをご自身の AWS アカウントにデプロイされる場合は、実装ガイドに記載の注意事項を必ずご一読していただき、ご納得のうえ、ご利用ください。このソリューションの実行中に使用された AWS サービスのコストはお客様負担になりますので、ご利用の際はご注意ください。
筆者紹介
稲葉 智子
アマゾン ウェブ サービス ジャパン合同会社
技術統括部 テクニカルライター
AWS クラウドのサービスに関しては入社と同時に勉強開始。好きな AWS サービスは、ローカリゼーションも担当しているので、Amazon Translate。AWS DeepRacer や AWS DeepComposer にも興味があります。趣味は習い事のハープとカフェ巡り。AWS では猫好きが多いのですが、私は犬好きで、ウェルシュ・コーギー・ペンブローク Lover です。
AWS のベストプラクティスを毎月無料でお試しいただけます
さらに最新記事・デベロッパー向けイベントを検索
AWS を無料でお試しいただけます