1. 始める前に
商品画像検索の学習パスウェイの前のステップでは、Vision API Product Search で構築された商品検索バックエンドを呼び出して、商品カタログから視覚的に類似した商品を検索する方法を学習しました。
この Codelab では、同様のバックエンドをプロダクト カタログで構築する方法を学びます。
学習内容
- Vision API Product Search で商品検索バックエンドを構築する方法
- モバイルアプリから Vision API にアクセスするための API キーの設定方法
必要なもの
- 課金が有効になっている Google Cloud アカウント（無料トライアル アカウントでも可）
2. Vision API Product Search について
Vision API Product Search は、小売業者が商品を作成し、いくつかの視点から商品を視覚的に記述する参照画像を作成できる Google Cloud の機能です。小売業者はこれらの商品を商品セットに追加できます。現在 Vision API Product Search では、ホームグッズ、アパレル、玩具、パッケージ商品、総合の商品カテゴリをサポートしています。
ユーザーが独自の画像で商品セットに対してクエリを実行すると、Vision API Product Search は ML を適用してユーザーの画像内の商品と小売業者の商品セット内の画像を比較し、視覚的および意味的に類似した結果をランク付きリストとして返します。
3. Google Cloud でバックエンドを構築する
商品画像検索の学習パスウェイの前回のステップでは、Vision API Product Search で構築されたデモ商品検索バックエンドを使用しました。このチュートリアルに沿って、Google Cloud アカウントに同じバックエンドを構築します。
チュートリアルを完了したら、次の手順に進んで、モバイルアプリからバックエンドを呼び出すための API キーを設定します。
4. API キーを設定する
Vision API Product Search のクイックスタートでは、クエリ画像を処理して視覚的に類似した商品を返すことができる商品検索バックエンドを構築しました。モバイルアプリから商品検索 API を呼び出すには、API キーを設定し、不正使用を避けるために、API キーのアクセスを独自のモバイルアプリに制限する必要があります。
API キーを作成する
- Cloud コンソール > [API とサービス] > [認証情報] に移動します。この URL をクリックして、Product Search クイックスタートで使用したプロジェクトを選択することもできます。
- [認証情報を作成] > [API キー] を選択します。API キーが正常に作成されると、次のダイアログが表示されます。
この API キーをメモしておきます。これは、この Codelab の後半で使用します。
API キーへのアクセスを制限する
上記のメッセージが表示されたら、[キーを制限] を選択します。
画面上の手順に沿って、次の制限を適用します。
- [アプリケーションの制限] > [Android アプリ]
- [API の制限] > [キーを制限] > [Cloud Vision API]
5. モバイルアプリをダウンロードして実行する
以前に作成したデモの商品検索バックエンドを使用する Android アプリをダウンロードし、作成した新しいバックエンドを使用するように変更できます。
コードをダウンロードする
次のリンクをクリックして、この Codelab のコードをすべてダウンロードします。
ダウンロードした zip ファイルを解凍すると、これにより、必要なすべてのリソースを含むルートフォルダ（odml-pathway-codelabs）が展開されます。この Codelab では、product-search/codelab2/android/final サブディレクトリのソースのみが必要です。
このアプリは、ML Kit オブジェクトの検出とトラッキング API と、Vision API Product Search で構築されたデモ商品検索バックエンドを使用しています。これにより、ユーザーは写真を撮って、デモ商品カタログで視覚的に類似した商品を検索できます。
Android Studio にアプリをインポートする
まず、スターター アプリを Android Studio にインポートします。
Android Studio に移動し、[Import Project (Gradle, Eclipse ADT, etc.)] を選択して、先ほどダウンロードしたソースコードから product-search/codelab2/android/final フォルダを選択します。
スターター アプリを実行する
Android Studio にプロジェクトをインポートしたので、アプリを初めて実行する準備ができました。
USB 経由で Android デバイスをホストに接続するか、Android Studio エミュレータを起動して、Android Studio ツールバーの [実行]（
）をクリックします。
（このボタンが無効になっている場合は、リポジトリ全体ではなく、final/app/build.gradle のみをインポートしていることを確認してください）。
Android デバイスでアプリが起動します。すでに機能していますが、Google がデプロイしたデモの商品検索バックエンドを使用しています。
次に、この Codelab の前半で作成したバックエンドを使用するようにアプリを更新します。
6. API エンドポイントを更新する
API 構成を変更する
ProductSearchAPIClient クラスに移動すると、商品検索バックエンドの構成がすでに定義されていることがわかります。デモ バックエンドの構成をコメントアウトします。
// Define the product search backend
// Option 1: Use the demo project that we have already deployed for you
// const val VISION_API_URL =
"https://us-central1-odml-codelabs.cloudfunctions.net/productSearch"
// const val VISION_API_KEY = ""
// const val VISION_API_PROJECT_ID = "odml-codelabs"
// const val VISION_API_LOCATION_ID = "us-east1"
// const val VISION_API_PRODUCT_SET_ID = "product_set0"
次に、構成に置き換えます。
// Option 2: Go through the Vision API Product Search quickstart and deploy to your project.
// Fill in the const below with your project info.
const val VISION_API_URL = "https://vision.googleapis.com/v1"
const val VISION_API_KEY = "YOUR_API_KEY"
const val VISION_API_PROJECT_ID = "YOUR_PROJECT_ID"
const val VISION_API_LOCATION_ID = "YOUR_LOCATION_ID"
const val VISION_API_PRODUCT_SET_ID = "YOUR_PRODUCT_SET_ID"
- VISION_API_URL は、Cloud Vision API の API エンドポイントです。
- VISION_API_KEY は、この Codelab で作成した API キーです。
- VISION_API_PROJECT_ID、VISION_API_LOCATION_ID、VISION_API_PRODUCT_SET_ID は、この Codelab の Vision API Product Search クイックスタートで前に使用した値です。
実行する
Android Studio のツールバーで [実行]（）をクリックします。アプリが読み込まれたら、プリセット画像のいずれかをタップし、検出されたオブジェクトを選択して、[検索] ボタンをタップすると、検索結果が表示されます。これで、作成した商品検索バックエンドがアプリで使用されるようになりました。
7. 完了
Vision API Product Search を使用して商品検索バックエンドを構築する方法を学習しました。
これで、起動して実行できるようになります。
学習した内容
- 商品カタログと Vision API Product Search を使用して商品検索バックエンドを作成する方法
- モバイルアプリから商品検索バックエンドを呼び出すための API キーを設定する方法
- モバイルアプリからバックエンドを呼び出す方法
次のステップ
- Vision API Product Search を使用してスマート クローゼットを構築する方法については、こちらの動画をご覧ください。
- 商品検索のオンデバイス ML 学習パスウェイで、商品検索の構築に必要なすべての手順を確認する
- 学習した内容を独自のアプリに応用する