APIを使うと個人や一企業で開発する以上の機能やデータが簡単に手に入ります。APIとして公開するものもあります。Servicesを利用してアプリを作成します。APIをMonacaと組み合わせてみたいと思います。作るのはディープラーニングのサンプルとしてよく見られる、写真に写っているものを判別するアプリです。今回作成するアプリまずは動作を紹介します。最初はこのように何も表示されていません。そこで写真を撮影またはフォトライブラリから任意の写真を選択します。APIにアップロードされます。その結果、タグや写真の説明、顔が認識されればその部分が赤枠で表示されます。それでは作っていきましょう。サイトでアカウントを作成します。試用版も利用可能です。試用版のアカウントを作成すると、以下の画面が表示されます。値は後ほど利用します。Minimumを使っています。jQueryとJavaScript-Load-ImageをJS/CSSの追加と削除から登録しています。JavaScript-Load-Imageは後述する、写真を正しく表示するためのライブラリです。検索して追加してください。HTMLについて今回のHTMLは写真のプレビュー、ファイル選択そして読み取った情報を一覧表示する部分で構成されています。id="info"></div></ons-list></p></ons-page>JavaScriptについて次にJavaScriptの実装です。今回のアプリでは大きく分けて以下の処理があります。処理はこの中に記述していきます});1~4の処理は、画像ファイルを選択したタイミングで実行します。処理はこの中に記述していきます});});変数の定義、初期化まず変数を定義、初期化します。それぞれ差し替えてください。次に取得したファイルオブジェクト(f)を使ってCanvasタグ内に画像を描画します。今回はJavaScript-Load-Imageというライブラリを使います。このライブラリを使うと画像の回転(Orientation)を読み込んで画像を正しく表示できるようになります。こちらは画像ではなくArrayBufferとしてデータを取得します。visualFeaturesパラメータでは取得したい内容を指定できます。Referenceを参考にしてください。言語は現在のところenまたはzh(簡体中国語)にのみ対応しています。最後に処理結果がうまくいった場合です。顔データがあれば、そのデータを使ってCanvasタグ内に枠線を引きます。後は取得できるメタデータの一部を画面上に描画します。")}</ons-list-item><ons-list-header>状況</ons-list-header><ons-list-item>${data.description.captions[0].text}</ons-list-item>`);他にも年齢や性別などたくさんのデータが取得できますので、レスポンスデータを確認してみてください。ここまでの処理で写真を判別して情報を表示するアプリが作成できました。APIを使うことで難しそうに見える処理もごく簡単に実装できます。APIを公開、提供しています。使い方を覚えてアプリを一層魅力的なものにしてください。今回のコードはmoongift/monaca-computer-visionにアップロードしてあります。実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。Monacaでマッシュアップ。今すぐ泊まれる場所は?Monacaで楽天トラベルAPIを試す関連記事2018年1月11日Androidアプリのセキュリティリスクを検査しよう。