この写真に写っている商品はなに?NTTドコモの画像認識APIを使ってみる。ーモナカプレス技術情報この写真に写っている商品はなに?NTTドコモの画像認識APIを使ってみる。この写真に写っている商品はなに?NTTドコモの画像認識APIを使ってみる。APIにはテキストベースのものが多いですが、中には写真や音声、動画などのバイナリデータを扱うものもあります。写真はスマートフォンとの相性も良いので、アイディア次第で様々なアプリに活用できるでしょう。APIの一つ、NTTドコモの提供する画像認識APIとMonacaアプリを組み合わせてみます。画面はとてもシンプルです。最初はファイル選択ボックスだけが配置してあります。写真が選択されたら、自動的に画像データを画像認識API(商品認識)に送ります。結果として商品名や購入ページのURLなどが送られてきますので、それを画面上に表示します。NTTドコモにてユーザ登録とアプリケーション登録を行ってください。後ほど必要になります。以下はbodyタグの内容です。id="productCategory"></strong>です。id="productTitle"></strong></a>で購入できるようです。ライブラリにjQueryを使っています。処理概要は次のようになります。ファイル選択時の処理ファイルの読み込み画像認識APIの呼び出し結果の表示では順番に紹介していきます。keyと、画像認識APIのURLを定数として定義しています。`https://api.apigw.smt.docomo.ne.jp/imageRecognition/v1/recognize?APIKEY=${apiKey}&recog=product-all&numOfCandidates=1`;今回は認識対象を商品全般(recog=product-all)としていますが、画像認識のカテゴリ一覧を参考に商品カテゴリを指定することもできます。認識精度を上げたい場合は、商品カテゴリを絞り込んでおくと良いでしょう。取得する検索結果数(numOfCandidates)には1を指定しています。内にアプリの初期処理を記述します。最初は結果を表示する要素を非表示にしています。イベントが発生します。APIを使って、選択された画像ファイルの読み込みを行います。イベントが呼ばれます。イベントの引数には画像ファイルのバイナリデータ(ArrayBuffer)が渡されますので、それを画像認識APIに送ります。画像認識APIの仕様を見ると分かりますが、リクエストボディに画像ファイルのバイナリデータを埋め込んで送信するようになっています。メソッドに返ってきます。結果が返ってきたら、それを画面上に表示します。レスポンスの内容については画像認識APIの仕様書を参考にしてください。最後に結果を表示します$('#productResult').show();JavaScript全体像ソースコード全文は次のようになります。ファイルの読み込みを開始しますreader.readAsArrayBuffer(e.target.files[0]);});});今回のプロジェクトはこちらのURLを使ってダイレクトインポートできます。ソースコードはgoofmint/Monaca_Docomo_Image_Recognize_Demoにアップロードしてありますので実装時の参考にしてください。APIは異なる方法になっています。このような方法も覚えておくと、役立つ場面がありそうです。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。