Visual Recognitonを利用する最初のレシピ

文章が分かりづらかったので、再構築（2018/6/5)

# このページについて
このページはハッカソンを迅速にお楽しみいただくために開発した開発レシピ集です。レシピのまとめページは[IBM Cloudのビギナー開発者向け「最初のレシピ」集](https://qiita.com/yutaka-maruoka/items/5e38bed6d130eb427e2c)になります。

あくまで個人の活動として掲載しているので、[IBM ソーシャル・コンピューティング・ガイドライン](https://www.ibm.com/blogs/think/jp-ja/social-computing-guideline/)に則っています。

すなわち、このサイトの掲載内容は私自身の見解であり、必ずしもIBMの立場、戦略、意見を代表するものではありません。

# はじめに
IBM CloudとはIBM社が提供するクラウドサービスです。

クラウドとは・・・と紙で理解するよりは、実際に使って理解したほうが早いです。

そのため、ここでは画像認識サービスであるVisual Recognitionについてレシピとしてまとめます。

# Visual Recognitionを試す
「AIとは・・・」とか「この製品とは・・」とか、細かい話の前に使ってみましょう！

# Visual Recognitonのデモサイトを触ってみる。
デモサイトでは、IBM社が収集した画像データに基づいて、学習データを準備しなくても画像認識できる機能があるので、何も準備しなくてもお試しができます。

Visual Recognitionのサイトトップはこちら。
https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html

こんな画面が出るはずです。
さっそく「デモを試す」をクリックしましょう。

![スクリーンショット 2018-06-05 7.53.37.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/622c9b22-de18-fec1-1239-82ea1a124d45.jpeg)


さっそく「デモを試す」という場所に移動したはずです。
ここの「画像認識Visual Recognitionを試してみる（英語）」を選んでください。

下記の画像の赤線参照。
![スクリーンショット 2018-06-05 7.47.11.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/a14f1eaa-b32f-3f6a-60d6-d327a638112f.jpeg)


デモサイトに来ました。実は下にスクロールできます。
下にスクロールしましょう。
![スクリーンショット 2018-06-05 7.56.14.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/ebc3e695-5e46-0a5e-8c22-33d4246391d8.jpeg)

こんな画像が出るはずです。
右上のような「青色の吹き出し（マニュアル）」が出たら「☓ボタン」を押してください。
（我々にはこのサイトがあるので、読まなくてよいです）

![スクリーンショット 2018-06-05 7.58.14.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/e67f8cc2-a455-0c7f-450d-6d30d9b3be26.jpeg)

とりあえず、動かしてみましょう。
画面下の画像をクリックしてみてください。

![スクリーンショット 2018-06-05 8.07.07.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/e15434ba-d4a7-bf2b-8322-eb68ae5c4a4e.jpeg)

そうすると、右側の文字列が変わるはずです。
[electrical device]とか[memory device]とか書いていますね。
これが、画像認識した結果、Visual Recognitionが認識した結果です。

なお、0.69とか書いているのは、Socreといって、認識の確信度みたいなものです。
よく使うパターンとしては１００掛けて、69%と表現したりします。

![スクリーンショット 2018-06-05 8.08.19.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/604202ac-7bb3-5f21-76bd-5c14c713ed73.jpeg)

次に、女性を選んでみましょう。
![スクリーンショット 2018-06-05 8.11.13.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/8016923e-fbee-1d6d-52a0-e43b9f829d63.jpeg)

先ほどと同じように、右側の文字が変わりましたね。[person]とか。

ここで、その下にある「Face Model　＋」の「＋」をクリックしてみましょう。
![スクリーンショット 2018-06-05 8.12.19.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/f0bb007b-f466-fdca-9209-f3a61f77042a.jpeg)

なんとAge、FEMALE・・・年齢と性別が出ています！
![スクリーンショット 2018-06-05 8.14.30.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b0b44aab-68a3-6c34-0c43-50b3647be0ab.jpeg)

これらはIBMさんが夜なべして画像認識の学習データを取り込んで、何の準備もなくても、これらの機能が使えるように準備してくれていたのです。すごい！

さて、ここで信じられないという人がいるでしょう。
「予め認識しやすい画像だからでしょ！？」

そんな人のために、画像をアップロードしてテストすることが可能です。
画面のカメラマークをクリックしてみてください。
![スクリーンショット 2018-06-05 8.18.44.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/92d8667e-a1b4-d9c3-69f6-213f73abd1ad.jpeg)

画像のアップロード方法が出てくるので、適宜選んでください。
さすがにこれ以上の説明は割愛します。
![スクリーンショット 2018-06-05 8.19.41.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/a8ed3408-30e7-8ad1-59ef-a6986e8aef19.jpeg)




# Visual Recognition を作ってみる。

「「All, Right!」「わかったわかった！」、デモサイトは完成しているからね。でも、作るの大変なんでしょう？」という方のために、自作の方法を伝授します！

# IBM Cloud環境を準備する
IBM Cloudを無料で使うライト・アカウントを作成未済であれば、以下のサイトで登録ください。

- [IBM Cloudライトアカウント登録＆初期設定確認](https://qiita.com/yutaka-maruoka/items/982d648cb7a7196a02e5)

# IBM Cloud基本的な使い方

何も購入していないと、こんな感じになりますが、何かを購入すると画像は変わってきます。
![スクリーンショット 2018-06-05 8.35.43.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b3331c8d-93e6-f318-df8e-dcfa8468ad0f.jpeg)

# Visual Recognitionを導入する
ではさっそく、Visual Recognition（無料）を購入しに行きましょう。

右上の「リソース設定」をクリックします。
![スクリーンショット 2018-06-05 8.36.55.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/c6ef37ed-b049-732a-d489-9ae61e627ebf.jpeg)

リソース設定の画面が出ましたね。
実は、IBM Cloudはネットショッピングの如く、「ショッピング・カート機能」のようなものです。
ではさっそく、検索バーに「Visual」と入力して、Visual Recognitionと追記しましょう。
そうすると、特にボタンを幼くても、「Watson]「Visual Recognition」と出るはずです。
この「Visual Recoginition」をクリックします。
![スクリーンショット 2018-06-05 8.44.42.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/4e774fcf-8bc9-4822-e315-b28288431df7.jpeg)

Visual Recognitionの説明画面が出ましたね。
ここをスクロールしてみましょう。
![スクリーンショット 2018-06-05 8.47.17.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/a7d2cc93-d765-6559-eff0-90734fc5dd98.jpeg)

ショッピングカートのごとく、購入する商品が見れます。
今回は「ライト」無料が選ばれていることを確認して、「作成」ボタンを押しましょう。
![スクリーンショット 2018-06-05 8.48.38.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/99ebb4e5-65ab-8909-3d05-a732c40b3a55.jpeg)

# Visual Recognitionのツール起動のための画面の開き方
Visual Recognition作成されるとこんな画面が出ます。
でも、次からはログインしてこの画面を出さないといけないので、ここで画面の出し方を試しておきましょう。

左上のハンバーガーをクリックします。
![スクリーンショット 2018-06-05 8.56.00.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/c9bbc708-9004-3e8e-ba4d-572d972e7a0f.jpeg)

ダッシュボードをクリックします。
![スクリーンショット 2018-06-05 8.57.21.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/0cbcc5e8-b5fd-10b8-98cd-fb6eb34a7c6f.jpeg)

ダッシュボード画面が出ました。
さきほどと画面の内容が違うと思います。
画面に迷った方は、このダッシュボード画面を起点に操作してください。

このVisual Recognitionの箇所をクリックすると、次の画面に移動できます。
![スクリーンショット 2018-06-05 8.58.13.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/2519d46d-e89d-3a6d-0bf2-f93032d146cb.jpeg)

# Visual Recognitionツールを使う

まずは「ツールを起動」ボタンをクリックします。
![スクリーンショット 2018-06-05 8.54.04.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b461e6fd-a88e-7bb3-6d12-17ffb40a4a3a.jpeg)

何も気にせず「Continue」ボタンを押します。
![スクリーンショット 2018-06-05 9.01.10.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/72166f25-3cd4-65f7-a48e-cacef1badebe.jpeg)

「Done」と出ると成功です。
![スクリーンショット 2018-06-05 9.02.05.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/890b75f4-3dbb-429b-6092-5740abb89bf1.jpeg)

例によってマニュアルポップアップが出るので「☓」をクリックして閉じます。
![スクリーンショット 2018-06-05 9.03.40.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/4462b3c9-3b7f-6c4b-70b3-216052471754.jpeg)

メニューが立ち上がるので、少しテストをしてみましょう。

先程も説明したとおり、顔認識はIBM社が学習データを準備しているため、我々がデータを準備しなくても、すぐ実用化することができます。

今回は、その環境を利用してテストしてみましょう。

Facesの「Test」をクリックします。
![スクリーンショット 2018-06-05 9.04.44.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/ad92b82c-ce45-1a68-a4c7-0b053157e791.jpeg)

次に「テスト」タブをクリックします。
![スクリーンショット 2018-06-05 9.05.47.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b0c0298a-072b-ad9c-4ea5-7c00a69756df.jpeg)

右下に「Drag & Drop」という文字があると思います。
この辺のエリアに画像をDrag&Dropしてみましょう。
![スクリーンショット 2018-06-05 9.06.38.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/34a0e877-6890-1da7-ecf5-7620ae705d3b.jpeg)

こんな感じでできました。
![スクリーンショット 2018-06-05 9.08.12.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/e62d15ef-5b55-a400-f214-a3320bf7e123.jpeg)


はい、これでVisual Recognitionの

# スマホでも使える顔認識アプリを作ろう！
# アプリの環境構築

スマホでも使える顔画像認識アプリを作ります。


今回は、開発を簡単にするために、Node-REDボイラーテンプレート利用します。
まずは、ダッシュボード画面に移動します。

まずは、ハンバーガーをクリックしましょう。
![スクリーンショット 2018-06-05 9.11.06.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/6a7c3ef4-5def-7533-e15d-047979a78aaa.jpeg)

メニューのダッシュボードをクリックします。
![スクリーンショット 2018-06-05 9.12.19.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/57738ec4-8cf5-a8cf-84b4-314e012ddf76.jpeg)

ダッシュボード画面に戻りました。
「あれれ？」いつのまにか、Visual Recognitionとは別のもの（Knowledge CatalogとWatson Studio）が増えていますね。
でも、これは気にしなくていいです。
（説明すると長くなるので今回は割愛します）

気にせず、「リソースの作成」ボタンを押します。
![スクリーンショット 2018-06-05 9.13.15.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/ed0e6de2-24e4-518b-1340-38e23162552b.jpeg)

Visual Recognitionと同じようにソフトを購入します。
検索バーに「Node-RED」という文字を入力すると、ソフト一覧が変わると思います。
その中で、「Node-RED Starter」があると思うので、クリックしてください。
![スクリーンショット 2018-06-05 9.15.03.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/4c27db7e-c2ce-90c2-a56e-ed232a84e7ad.jpeg)

ロードが遅いとこんな画面が出ますが、操作せずにお待ち下さい。
![スクリーンショット 2018-06-05 9.17.07.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/952d192b-f5db-d15d-1982-4b7fef27e3fd.jpeg)

こんな画面になると思います。
![スクリーンショット 2018-06-05 9.17.37.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/aab09ce0-85ee-ff8b-ff70-75b74aea8888.jpeg)

アプリ名を入力してください。
ここでは「visual-recognition-test-00001」としていますが、ユニークな文字なら何でもいいです。アルファベットと'-'と数字の組み合わせであれば。

多くの方は「0001」を任意の数字にするといいかもしれません。
そうすると「作成ボタン」が押せるようになりますので、クリックしてください。

![スクリーンショット 2018-06-05 9.21.02.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/63e45f92-530e-e54b-03ba-1e316aaaf742.jpeg)


アプリケーションを動かす環境がセットアップするまで、しばらくお待ち下さい。
１分ぐらいですが、気分的にティータイム推奨。

![スクリーンショット 2018-06-05 9.23.11.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/011c0bd5-a87c-de0c-135a-a47a9c6451a0.jpeg)

# アプリを実装する
さっそく、アプリを実装しますが、道に迷わないようにダッシュボードからの移動方法を説明します。

ハンバーガーをクリックします。
![スクリーンショット 2018-06-05 9.30.35.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/6b1d1d04-52bd-e601-8489-123143976a06.jpeg)

「ダッシュボード」をクリックします。
![スクリーンショット 2018-06-05 9.31.59.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/35161b57-8f86-1833-5ef0-b72b809fbcd3.jpeg)

ダッシュボードには、先ほどつけた「visual-recognition-test-00001」という行が増えていると思います。
アプリを作るので、ここをクリックします。

![スクリーンショット 2018-06-05 9.33.41.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/59acdae3-e828-68f4-7f4a-45855d0db476.jpeg)

開かれたメニューをスクロールします。
![スクリーンショット 2018-06-05 11.07.23.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/df0b7e65-9f6e-8630-cf19-4807fad8f43f.jpeg)

「接続の作成」ボタンを押します。
![スクリーンショット 2018-06-05 11.08.17.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/3f62db05-9f13-ca5e-8c6a-f1cd3e7c0724.jpeg)

そうすると、先程購入したVisual Recognitionが出てきます。
ここにマウスカーソルをあてると・・・
![スクリーンショット 2018-06-05 11.09.22.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/d044f8a1-13e2-729f-217c-1c3afabe4b81.jpeg)

カーソルが当たると「Connect」というボタンが出るので、クリックしてください。

![スクリーンショット 2018-06-05 11.10.44.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/d46ecfc1-78ea-1c61-608e-53e51ee67a26.jpeg)

次の画面の「接続」ボタンを押します。
こうすることで、これから作るアプリの環境と、購入したVisual Recognitionが関連付けられます。
関連付けることで、アプリを作るとき、普段はプログラムしなくてはならないVisual Recognitionの細かい設定プログラムを一切考えなくても開発できるようになります。

![スクリーンショット 2018-06-05 11.13.03.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/c233e546-135c-d0a8-4ba1-daa524414c7d.jpeg)

関連付けを有効化するため、初期化処理を実行します。
色々記述がありますが、要は「再ステージ」は、「色々アップデートされたので、パソコンを再起動するイメージ」で考えておけばいいです。

![スクリーンショット 2018-06-05 11.14.18.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/481af116-7bcb-0629-d561-6e39e8ea07f6.jpeg)

「パソコンの再起動のイメージ」なので、少し時間がかかります。
クリックした後の画面を見ると、赤線の当たりが「再ステージング中」となっており、アイコンがぐーるぐーるしていると思います。

![スクリーンショット 2018-06-05 11.16.41.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/faf10e99-ee4b-39ff-355d-ed48f0842914.jpeg)

ぐーるぐーるが終わると、こんな感じになります。
ここで「経路」というボタンをクリックしてみてください。
![スクリーンショット 2018-06-05 11.18.12.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/1d6df25c-53e9-2e35-14e6-b53c634f259b.jpeg)


開かれたメニューのリンクをクリックします。
そうすると、別ウィンドウが開かれるはずです。

![スクリーンショット 2018-06-05 11.20.01.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/450c82b1-8fd6-6b62-ebf9-8b15274fefb4.jpeg)

別ウィンドウに出た画面を開くと、開発環境の初期設定画面が出ます。
（次からは出なくなるので、１回目だけの作業だと思って下さい）

さっそく「NEXT」を押してください。
![スクリーンショット 2018-06-05 11.21.02.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b128b76a-757e-3985-23b6-1cef3b74fc24.jpeg)

次にusernameとpasswordを入れる画面が出ます。

このusernameとpasswordは次回も使うので、メモしておいてください！！！！


これらの値は何でもいいですが、IBM CloudのログインID/パスワードだと覚えやすそうですね（責任は持ちませんが）。

usernameとpasswordを入力したら、「NEXT」ボタンを押してください。
![スクリーンショット 2018-06-05 11.22.17.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/24093f73-3344-0364-2d75-0cd135d64e96.jpeg)


次に色々説明する画面がありますが、特に気にせず「NEXT」ボタンを押してください。
![スクリーンショット 2018-06-05 11.25.11.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/2f2fb01f-96c0-8799-139b-68a68cf8c9c9.jpeg)

最後に「Finish」ボタンを押してください。
![スクリーンショット 2018-06-05 11.25.58.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/0c814b1b-7dcf-2ebc-6abb-612dc2c3e08f.jpeg)

これで環境ができました。
おつかれさまでした。

# アプリ開発画面のログインについて

先ほど流れで初期設定を終えたとき、あるいは、（補足）の画面で「経路」を選択したとき、このような画面になります。

これはアプリを開発する画面の初期画面になります。
さっそく、右側にある「Go to your Node-RED flow editor」をクリックしてみましょう。
![スクリーンショット 2018-06-05 11.27.08.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/9715c43b-2f51-5030-25c2-fb5583590d0f.jpeg)

＊補足
次からは、先程あった「経路」ボタンの「URL」をクリックしても同じ画面になります。
さっきのURLの画面は以下のやつ。困ったら、前の工程から同じ画面を探してみてください。
![スクリーンショット 2018-06-05 11.20.01.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/450c82b1-8fd6-6b62-ebf9-8b15274fefb4.jpeg)

ログイン画面が出ました。
先程、登録したusernameとpasswordを入力して、「ログイン」ボタンを押してみましょう。

![スクリーンショット 2018-06-05 11.30.17.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/e1577c78-dadf-44a1-607c-ea0f89647ad4.jpeg)


# アプリを開発する
ログインすると、こんな画面が出てきます。
これがアプリを開発する画面です。

さっそく、右上のハンバーガーを選んでみましょう。
![スクリーンショット 2018-06-05 11.33.21.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/0102c552-cd06-3df3-bd59-d254291d17e2.jpeg)

そうするとメニューが出てくるので、下記のようにマウスカーソルを合わせて、「クリップボード」をクリックしてください。

![スクリーンショット 2018-06-05 11.34.56.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/924fbae4-eed9-9fd0-7b22-38584ed41097.jpeg)

こんな画面が出てきました。

＊初期画面
![スクリーンショット 2018-06-05 11.36.22.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/e7036e92-46b2-1c71-aacf-03fdef2850d4.jpeg)

赤線の枠線に以下の文字列をコピーしてください。

```JSON.json
[{"id":"a9c22725.da4bc8","type":"tab","label":"画像認識サンプル","disabled":false,"info":""},{"id":"e3c35cdd.d33ce","type":"template","z":"a9c22725.da4bc8","name":"写真アップロード","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"ja\" class=\"no-js\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" />\n  <title>Watson Visual Recognition on Node-RED</title>\n  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\">\n</head>\n<body>\n<div class=\"container-fluid\">\n  <div class=\"col-sm-12\">\n    <p>Watson Visual Recognition on Node-RED</p>\n  </div>\n\n  <div class=\"panel panel-success col-sm-12\">\n    <div class=\"panel-heading\">\n      Select an image file\n    </div>\n\n    <div class=\"panel-body\" style=\"height:300px;\">\n      <div class=\"row\">\n        <form id=\"src_image\" action=\"\" method=\"post\" enctype=\"multipart/form-data\">\n          <input class=\"btn btn-info btn-ls\" type=\"file\" name=\"imagedata\" accept=\"image/*\"  />\n        </form>\n      </div>\n\n      <div class=\"row\">\n        <div class=\"btn btn-danger btn-ls\" onclick=\"callVisualRecognition()\"/>\n          Analyze\n        </div>\n      </div>\n\n      <div class=\"row\">\n        <div class=\"preview\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"panel-footer\" style=\"height:100px;\">\n      <div id=\"result\"></div>\n    </div>\n\n  </div>\n</div>\n\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js\"></script>\n\n<script type=\"text/javascript\">\n    // Node-REDのWeb API連携\n    var callVisualRecognition = function() {\n\n      // フォームデータを取得\n      var formdata = new FormData($('#src_image').get(0));\n\n      console.log(formdata);\n\n      // POSTでアップロード\n      $.ajax({\n          url  : \"./face1-post\",\n          type : \"POST\",\n          data : formdata,\n          cache       : false,\n          contentType : false,\n          processData : false,\n          dataType    : \"html\"\n      })\n      .done(function(data, textStatus, jqXHR) {\n        var result_element = document.getElementById('result');\n\n        var objResult = JSON.parse(data);\n\n        // 子ノードを全削除\n        if (result_element.hasChildNodes()){\n          for (var i=result_element.childNodes.length-1; i>=0; i--) {\n            result_element.removeChild(result_element.childNodes[i]);\n          }\n        }\n\n        // 年齢\n        var age;\n        age = document.createTextNode(\"age=\"+objResult.images[0].faces[0].age.min +\"~\"+objResult.images[0].faces[0].age.max+\"(\"+objResult.images[0].faces[0].age.score+\")\");\n        var ageBox = document.createElement('p');\n        ageBox.appendChild(age);\n        result_element.appendChild(ageBox);\n\n        // gender\n        gender = document.createTextNode(\"gender=\"+objResult.images[0].faces[0].gender.gender+\"(\"+objResult.images[0].faces[0].gender.score+\")\");\n        var genderBox = document.createElement('p');\n        genderBox.appendChild(gender);\n        result_element.appendChild(genderBox);\n\n        console.log(objResult);\n      })\n      .fail(function(jqXHR, textStatus, errorThrown) {\n          // 通信エラー\n          // do nothing\n          return;\n      })\n      .always(function(data) {\n        // do nothing\n      });\n    }\n</script>\n\n<script>\n$(function(){\n  //画像ファイルプレビュー表示のイベント追加 fileを選択時に発火するイベントを登録\n  $('form').on('change', 'input[type=\"file\"]', function(e) {\n    var file = e.target.files[0],\n        reader = new FileReader(),\n        $preview = $(\".preview\");\n        t = this;\n\n    // 画像ファイル以外の場合は何もしない\n    if(file.type.indexOf(\"image\") < 0){\n      return false;\n    }\n\n    // ファイル読み込みが完了した際のイベント登録\n    reader.onload = (function(file) {\n      return function(e) {\n        //既存のプレビューを削除\n        $preview.empty();\n        // .prevewの領域の中にロードした画像を表示するimageタグを追加\n        $preview.append($('<img>').attr({\n                  src: e.target.result,\n                  height: \"150px\",\n                  class: \"preview\",\n                  title: file.name\n              }));\n      };\n    })(file);\n\n    reader.readAsDataURL(file);\n  });\n});\n\n</script>\n</body>\n</html>\n","x":330,"y":80,"wires":[["9cb0b56a.e22928"]]},{"id":"cacbb4de.1cf6b8","type":"http in","z":"a9c22725.da4bc8","name":"[GET] /face1","url":"/face1","method":"get","upload":false,"swaggerDoc":"","x":130,"y":80,"wires":[["e3c35cdd.d33ce"]]},{"id":"9cb0b56a.e22928","type":"http response","z":"a9c22725.da4bc8","name":"http response","x":539.5,"y":80,"wires":[]},{"id":"3bf9c4b0.873fac","type":"function","z":"a9c22725.da4bc8","name":"jpeg抽出","func":"var buf = msg.req.body;\nvar SOI = new Buffer(\"FFD8\",\"hex\");\nvar EOI = new Buffer(\"FFD9\",\"hex\");\nvar iSOI = 0;\nvar file = \"\";\n\nfor (var i=0 ; i<=buf.length ; i++) {\n    if(SOI.equals(buf.slice(i,i+2))) {\n        iSOI = i;\n        }\n    if(EOI.equals(buf.slice(i,i+2))) {\n        file = buf.slice(iSOI,i+2);\n        break;\n        }\n    }\n\nmsg.file = file;\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":140,"wires":[["7f7844c9.9f5b0c"]]},{"id":"d88ef886.f00af8","type":"http in","z":"a9c22725.da4bc8","name":"[POST] /face1-post","url":"/face1-post","method":"post","upload":false,"swaggerDoc":"","x":125,"y":128,"wires":[["3bf9c4b0.873fac"]]},{"id":"7f7844c9.9f5b0c","type":"function","z":"a9c22725.da4bc8","name":"parse","func":"msg.payload = msg.file;\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":200,"wires":[["a04c732d.6fe69"]]},{"id":"39150e99.319ec2","type":"json","z":"a9c22725.da4bc8","name":"","property":"payload","action":"str","pretty":true,"x":490,"y":260,"wires":[["e6746519.664be8","7d7e65a4.d5d25c"]]},{"id":"39a7ec11.2b0d24","type":"debug","z":"a9c22725.da4bc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"result","x":570,"y":160,"wires":[]},{"id":"e6746519.664be8","type":"http response","z":"a9c22725.da4bc8","name":"http response","x":620,"y":280,"wires":[]},{"id":"7d7e65a4.d5d25c","type":"debug","z":"a9c22725.da4bc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":610,"y":220,"wires":[]},{"id":"480df1d.1309f1","type":"function","z":"a9c22725.da4bc8","name":"parse","func":"msg.payload = msg.result;\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":320,"wires":[["39150e99.319ec2"]]},{"id":"49251648.c24de8","type":"template","z":"a9c22725.da4bc8","name":"写真アップロード","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"ja\" class=\"no-js\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" />\n  <title>Watson Visual Recognition on Node-RED</title>\n  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\">\n</head>\n<body>\n<div class=\"container-fluid\">\n  <div class=\"col-sm-12\">\n    <p>Watson Visual Recognition on Node-RED</p>\n  </div>\n\n  <div class=\"panel panel-success col-sm-12\">\n    <div class=\"panel-heading\">\n      Select an image file\n    </div>\n\n    <div class=\"panel-body\" style=\"height:300px;\">\n      <div class=\"row\">\n        <form id=\"src_image\" action=\"\" method=\"post\" enctype=\"multipart/form-data\">\n          <input class=\"btn btn-info btn-ls\" type=\"file\" name=\"imagedata\" accept=\"image/*\"  />\n        </form>\n      </div>\n\n      <div class=\"row\">\n        <div class=\"btn btn-danger btn-ls\" onclick=\"callVisualRecognition()\"/>\n          Analyze\n        </div>\n      </div>\n\n      <div class=\"row\">\n        <div class=\"preview\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"panel-footer\" style=\"height:100px;\">\n      <div id=\"result\"></div>\n    </div>\n\n  </div>\n</div>\n\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>\n<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js\"></script>\n\n<script type=\"text/javascript\">\n    // Node-REDのWeb API連携\n    var callVisualRecognition = function() {\n\n      // フォームデータを取得\n      var formdata = new FormData($('#src_image').get(0));\n\n      console.log(formdata);\n\n      // POSTでアップロード\n      $.ajax({\n          url  : \"./cust1-post\",\n          type : \"POST\",\n          data : formdata,\n          cache       : false,\n          contentType : false,\n          processData : false,\n          dataType    : \"html\"\n      })\n      .done(function(data, textStatus, jqXHR) {\n        var result_element = document.getElementById('result');\n\n        var objResult = JSON.parse(data);\n        console.log(objResult);\n\n        // 子ノードを全削除\n        if (result_element.hasChildNodes()){\n          for (var i=result_element.childNodes.length-1; i>=0; i--) {\n            result_element.removeChild(result_element.childNodes[i]);\n          }\n        }\n\n        // classifierId+name\n        var classifier;\n        classifier = document.createTextNode(\"classifierId=\"+objResult.images[0].classifiers[0].classifier_id+\", classifierName=\"+objResult.images[0].classifiers[0].name);\n        var classifierBox = document.createElement('p');\n        classifierBox.appendChild(classifier);\n        result_element.appendChild(classifierBox);\n\n        // classes\n        var classes;\n        classes = document.createTextNode(\"className=\"+objResult.images[0].classifiers[0].classes[0].class +\", score=\"+objResult.images[0].classifiers[0].classes[0].score );\n        var classesBox = document.createElement('p');\n        classesBox.appendChild(classes);\n        result_element.appendChild(classesBox);\n      })\n      .fail(function(jqXHR, textStatus, errorThrown) {\n          // エラー\n          var error;\n          error = document.createTextNode(\"error=\"+data);\n          var errorBox = document.createElement('p');\n          errorBox.appendChild(error);\n          result_element.appendChild(errorBox);\n          return;\n      })\n      .always(function(data) {\n        // do nothing\n      });\n    }\n</script>\n\n<script>\n$(function(){\n  //画像ファイルプレビュー表示のイベント追加 fileを選択時に発火するイベントを登録\n  $('form').on('change', 'input[type=\"file\"]', function(e) {\n    var file = e.target.files[0],\n        reader = new FileReader(),\n        $preview = $(\".preview\");\n        t = this;\n\n    // 画像ファイル以外の場合は何もしない\n    if(file.type.indexOf(\"image\") < 0){\n      return false;\n    }\n\n    // ファイル読み込みが完了した際のイベント登録\n    reader.onload = (function(file) {\n      return function(e) {\n        //既存のプレビューを削除\n        $preview.empty();\n        // .prevewの領域の中にロードした画像を表示するimageタグを追加\n        $preview.append($('<img>').attr({\n                  src: e.target.result,\n                  height: \"150px\",\n                  class: \"preview\",\n                  title: file.name\n              }));\n      };\n    })(file);\n\n    reader.readAsDataURL(file);\n  });\n});\n\n</script>\n</body>\n</html>\n","x":330,"y":420,"wires":[["42ac763b.d26cc8"]]},{"id":"6c8788b1.6a9388","type":"http in","z":"a9c22725.da4bc8","name":"[GET] /cust1","url":"/cust1","method":"get","upload":false,"swaggerDoc":"","x":130,"y":420,"wires":[["49251648.c24de8"]]},{"id":"42ac763b.d26cc8","type":"http response","z":"a9c22725.da4bc8","name":"http response","x":539.5,"y":420,"wires":[]},{"id":"eb0058cc.eccc88","type":"function","z":"a9c22725.da4bc8","name":"jpeg抽出","func":"var buf = msg.req.body;\nvar SOI = new Buffer(\"FFD8\",\"hex\");\nvar EOI = new Buffer(\"FFD9\",\"hex\");\nvar iSOI = 0;\nvar file = \"\";\n\nfor (var i=0 ; i<=buf.length ; i++) {\n    if(SOI.equals(buf.slice(i,i+2))) {\n        iSOI = i;\n        }\n    if(EOI.equals(buf.slice(i,i+2))) {\n        file = buf.slice(iSOI,i+2);\n        break;\n        }\n    }\n\nmsg.file = file;\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":480,"wires":[["ec132d76.00162"]]},{"id":"2cb99d1b.d0c382","type":"http in","z":"a9c22725.da4bc8","name":"[POST] /cust1-post","url":"/cust1-post","method":"post","upload":false,"swaggerDoc":"","x":125,"y":468,"wires":[["eb0058cc.eccc88"]]},{"id":"ec132d76.00162","type":"function","z":"a9c22725.da4bc8","name":"parse","func":"msg.payload = msg.file;\nreturn msg;","outputs":1,"noerr":0,"x":250,"y":540,"wires":[["d77b5a8d.d821a8"]]},{"id":"8b72a21d.04572","type":"json","z":"a9c22725.da4bc8","name":"","property":"payload","action":"str","pretty":true,"x":490,"y":600,"wires":[["cb27a8df.97c158","4f41385b.c698c8"]]},{"id":"44ab232b.6cc57c","type":"debug","z":"a9c22725.da4bc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"result","x":570,"y":500,"wires":[]},{"id":"cb27a8df.97c158","type":"http response","z":"a9c22725.da4bc8","name":"http response","x":620,"y":620,"wires":[]},{"id":"4f41385b.c698c8","type":"debug","z":"a9c22725.da4bc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":610,"y":560,"wires":[]},{"id":"643f16c0.7ae348","type":"function","z":"a9c22725.da4bc8","name":"parse","func":"msg.payload = msg.result;\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":660,"wires":[["8b72a21d.04572"]]},{"id":"d77b5a8d.d821a8","type":"function","z":"a9c22725.da4bc8","name":"Visual Recognitionカスタム認識の設定","func":"msg.params = {};\nmsg.params.classifier_ids = \"DefaultCustomModel_1898051895\";\nmsg.params.threshold = \"0.2\";\nreturn msg;","outputs":1,"noerr":0,"x":230,"y":600,"wires":[["b4bbc2d6.cc09"]]},{"id":"b4bbc2d6.cc09","type":"visual-recognition-v3","z":"a9c22725.da4bc8","name":"Detect Custom","apikey":"","image-feature":"classifyImage","lang":"ja","x":280,"y":660,"wires":[["643f16c0.7ae348","44ab232b.6cc57c"]]},{"id":"a04c732d.6fe69","type":"visual-recognition-v3","z":"a9c22725.da4bc8","name":"","apikey":"","vr-service-endpoint":"https://gateway.watsonplatform.net/visual-recognition/api","image-feature":"detectFaces","lang":"","x":190,"y":280,"wires":[["480df1d.1309f1","39a7ec11.2b0d24"]]},{"id":"9327753a.fb1ab","type":"http in","z":"a9c22725.da4bc8","name":"","url":"/test","method":"get","upload":false,"swaggerDoc":"","x":140,"y":20,"wires":[["fd43d664.f36e48"]]},{"id":"fd43d664.f36e48","type":"template","z":"a9c22725.da4bc8","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"ホームページ出来た！","output":"str","x":300,"y":20,"wires":[["c6e31e84.746b28"]]},{"id":"c6e31e84.746b28","type":"http response","z":"a9c22725.da4bc8","name":"","statusCode":"","headers":{},"x":480,"y":20,"wires":[]}]
```

＊貼り付け後
![スクリーンショット 2018-06-05 11.40.21.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/077c78e6-945a-fe7b-3336-4d614bc0bb37.jpeg)

貼り付けたら、「読み込み」ボタンを押してください。
![スクリーンショット 2018-06-05 11.41.33.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/49ef887f-31bc-57db-af0e-57dc073b76eb.jpeg)

タブが増えました。
さっそく、追加された「画像認識サンプル」タブを押してみましょう。

![スクリーンショット 2018-06-05 11.43.10.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/1a5d11b2-82d9-e057-0619-a385d85c76b0.jpeg)

なんか、フロー図みたいなのができていますね。
赤枠線で囲っている範囲が、今回利用するアプリのプログラムです。

時代はもう、文字列を並べて作るだけがプログラムではないのです。
このプログラム環境を「Node-RED」というツールです。

> （余談）Node−REDはIBMさんだけのものではなく、みんなのもの（オープンソース）です。なので、中身は個人でも見たり、修正したりできます。
興味が出た方は「Node-RED User Group Japan」へ！
https://nodered.jp/

![スクリーンショット 2018-06-05 11.44.11.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/69e60e24-41f5-13fd-24bb-7437ec44af02.jpeg)

では、ベースができたところで、アプリを開発します。
「Visual Recognition」という部品をダブルクリックしてください。
![スクリーンショット 2018-06-05 12.18.29.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/9e38d028-500e-76ce-db7f-b74393a90443.jpeg)


すると右側になにか出てきましたね。
「Service Endpoint」というものをクリックしてください。
![スクリーンショット 2018-06-05 12.19.40.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/18e0d254-4d55-4f52-ad95-2d0360f54712.jpeg)

この中で、チェックの入っていない文字列を選択してください。
![スクリーンショット 2018-06-05 12.20.30.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/fbbc3927-3ac7-e629-2bc0-078fa0fae677.jpeg)

先程、空白になっていた「Service Endpoint」に文字が入っていることを確認してください。
(Service Endpontは、最近、設定不要になったみたいです。設定が出てこなければ何もしなくて良いです）
![スクリーンショット 2018-06-05 12.22.16.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/1559e0bb-0e68-0788-d59f-52dd2b86f412.jpeg)

確認したら、右上の「完了」ボタンを押してください。
![スクリーンショット 2018-06-05 12.23.16.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/9258f3d4-edd0-e008-3141-f7e59df62c17.jpeg)

さて、プログラムが出来たところで、プログラムをシステムに反映させましょう。
反映のことを「デプロイ（配置）」といいます。

「デプロイ」ボタンをクリックしてみてください。
![スクリーンショット 2018-06-05 11.48.48.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/211452e7-812a-8caa-cea2-562bef274537.jpeg)

ボタンの色がグレーになったら反映完了です。
![スクリーンショット 2018-06-05 11.50.15.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/2643fb77-0201-4129-f39f-025c02bc5a1d.jpeg)

これで開発は完了です。
おつかれさまでした。

# アプリを動かす
さっそくアプリを動かしてみましょう。
Webアプリなので、アドレス（URL）を指定すると、アプリを動かすことが出来ます。

URLですが、参考になるのは先程の開発環境です。
この赤線を引いたアドレス（URL）の部分を修正します。
アドレス（赤線）をコピーして、新規タブを作成するボタン（赤線で囲ったボタン）を押します。

![スクリーンショット 2018-06-05 12.00.53.png](https://qiita-image-store.s3.amazonaws.com/0/3168/79ee00c5-e50a-af2d-ebfd-1e2b72965d3c.png)

新しいタブに「（元々のアドレス）」を貼り付けます。
アドレスは、

> https://visual-recognition-test-00001.mybluemix.net/red/#flow/ほにゃほにゃ

です。


次に、
> https://visual-recognition-test-00001.mybluemix.net/

より右の文字を削除して、「test」と追記します。

こんな感じです。

> https://visual-recognition-test-00001.mybluemix.net/test

こんな感じになります。
入力が終わったら、キーボードの「エンター」キーを押して、画面を表示してみてください。

![スクリーンショット 2018-06-05 17.07.02.png](https://qiita-image-store.s3.amazonaws.com/0/3168/9eb65f9c-8749-40ec-8f11-95a052b467d6.png)

ホームページができました！


次に
> https://visual-recognition-test-00001.mybluemix.net/
より右の文字を削除して、「face1」と追記します。

こんな感じになります。
入力が終わったら、キーボードの「エンター」キーを押して、画面を表示してみてください。
![スクリーンショット 2018-06-05 12.04.07.png](https://qiita-image-store.s3.amazonaws.com/0/3168/cce7bd52-fdff-e0a4-b41a-d086dc906acd.png)

アプリ画面が出ました！
ここで、ファイルを選択するボタンを押してみましょう。

![スクリーンショット 2018-06-05 12.07.35.png](https://qiita-image-store.s3.amazonaws.com/0/3168/3705f687-099c-b4f5-b5c4-2d932cba25af.png)

ファイル選択画面。Windowsなら違うはずです。
この選択で、JPGのファイルを選択してください。
他の画像ではアプリは動きませんので注意してください！

![スクリーンショット 2018-06-05 12.09.09.png](https://qiita-image-store.s3.amazonaws.com/0/3168/9464abd3-31ac-803d-b3e1-8c4dc3eb8876.png)

画像がちゃんとロードできると、サムネイル画像が出ます。
![スクリーンショット 2018-06-05 12.13.13.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/435acfab-8fac-6153-1a9f-5c6533a62889.jpeg)

ロード出来ていることを確認して、「Analyze」ボタンを押します。
![スクリーンショット 2018-06-05 12.14.22.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/71792130-e625-4779-f78b-cee051c58e79.jpeg)

処理がうまくいくと、画面のグレー部分に、画像認識の結果が出ると思います。
![スクリーンショット 2018-06-05 12.59.42.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/105348dd-2115-c4fc-024d-22adfcbe87c5.jpeg)





# （応用編）Custom画像認識を作る

メニューのServiceを選び、Watson Serciceを選びます。
出てきたVisual RecognitionサービスのLaunch ボタンを押してください。

![スクリーンショット 2018-05-18 15.13.30.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/76beaec4-dd5b-6e14-2568-5b1256b9f766.jpeg)

プロジェクト作成がでてくるので、必要事項を入れてCreateします。
![スクリーンショット 2018-05-18 15.15.38.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/30c3a19d-0bb7-c58b-eb27-b758cbb81195.jpeg)

カスタムデータモデルを作るのですが、右側のZipファイルをアップロードする必要があります。
![スクリーンショット 2018-05-18 15.16.47.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/a39f9b34-a848-43fa-506c-d3e469f0af1b.jpeg)

テスト用ならGoogle先輩にライセンスフリーの画像を探してもらいましょう！
![スクリーンショット 2018-05-18 12.53.35.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b772ce27-1516-84f2-38a8-c462d577c8e7.jpeg)

Zipがアップできると、add-modelというのが出るので、それを追加します。
![スクリーンショット 2018-05-18 15.18.52.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/f346cc7b-2566-f45d-75e5-4f602594ce1d.jpeg)

登録できた画像を学習させるため、Trainボタンを押します。
画面は誤ってボタンをおした後の画面です。
![スクリーンショット 2018-05-18 16.38.56.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/37c962b2-a9f2-3149-33a6-47317b8e54c2.jpeg)

トレーニングが終わったら学習データのIDを控える
![スクリーンショット 2018-05-18 17.35.15.png](https://qiita-image-store.s3.amazonaws.com/0/3168/9235ee74-4a62-d243-dc5b-0b661d65915b.png)

# アプリを試す。
顔画像の認識に使った、Node-REDのフローに、今回用のフローがあります。

![スクリーンショット 2018-06-05 12.50.27.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/a7d09cf1-1f02-79a1-aa2d-a4f99628b43a.jpeg)

このなかで、「Visual Recognitionカスタム認識の設定」をダブルクリックします。
![スクリーンショット 2018-06-05 12.52.13.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/d48c4e40-cecd-0e82-1b4e-8b69d8d1d40f.jpeg)

カスタムで作成したクラスIDに修正し、「完了」ボタンを押します。
![スクリーンショット 2018-06-05 12.53.27.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/8857286d-d229-ef67-2455-df9d0d58fb1e.jpeg)

「デプロイボタン」を押します。
![スクリーンショット 2018-06-05 12.55.40.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/11094caf-b4fb-e325-a4e8-e6e9adae2571.jpeg)

処理が終わったら、完了です。

# 稼働確認する
顔画像認識アプリと同じですが、アドレス（URL）が違います。
URLの最後を[/cust1]に変更してアクセスしてみてください。

アプリは顔画像認識アプリと同じなので、操作説明は割愛します。
![スクリーンショット 2018-06-05 12.56.49.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/559ee45e-68a9-2448-f7cb-42bf4e0ed3a5.jpeg)


# （おまけ）画像へのURL指定で、画像認識を行う。
あまり使いませんが、画像へのURLを指定して、画像認識させるサンプルプログラムも掲載しておきます。
<img width="805" alt="スクリーンショット 2018-09-12 14.23.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/3168/27d450a1-4765-aa08-cb11-f75422f047fa.png">


```JSON
[{"id":"3e4c0e0e.1d0542","type":"tab","label":"画像認識サンプル（URL）","disabled":false,"info":""},{"id":"28864629.0d428a","type":"http in","z":"3e4c0e0e.1d0542","name":"","url":"/face_url","method":"get","upload":false,"swaggerDoc":"","x":90,"y":60,"wires":[["3db8b82a.44e688"]]},{"id":"3db8b82a.44e688","type":"change","z":"3e4c0e0e.1d0542","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.url","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":60,"wires":[["5bc91c85.e031e4"]]},{"id":"5bc91c85.e031e4","type":"visual-recognition-v3","z":"3e4c0e0e.1d0542","name":"","apikey":"","vr-service-endpoint":"https://gateway-a.watsonplatform.net/visual-recognition/api","image-feature":"detectFaces","lang":"en","x":390,"y":140,"wires":[["db4b187f.b63378","6264edb9.2baef4"]]},{"id":"db4b187f.b63378","type":"http response","z":"3e4c0e0e.1d0542","name":"","statusCode":"","headers":{},"x":550,"y":60,"wires":[]},{"id":"6264edb9.2baef4","type":"debug","z":"3e4c0e0e.1d0542","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"result","x":630,"y":160,"wires":[]},{"id":"93c6d1e9.77ed6","type":"http in","z":"3e4c0e0e.1d0542","name":"","url":"/general_url","method":"get","upload":false,"swaggerDoc":"","x":100,"y":220,"wires":[["fba9c35.38ff34"]]},{"id":"fba9c35.38ff34","type":"change","z":"3e4c0e0e.1d0542","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.url","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":200,"wires":[["8ee3aa49.914d48"]]},{"id":"dfbfab37.ea34a8","type":"visual-recognition-v3","z":"3e4c0e0e.1d0542","name":"","apikey":"","vr-service-endpoint":"https://gateway-a.watsonplatform.net/visual-recognition/api","image-feature":"classifyImage","lang":"en","x":310,"y":360,"wires":[["ab5d1a51.d6a5f8","5aac1ae8.536514"]]},{"id":"ab5d1a51.d6a5f8","type":"http response","z":"3e4c0e0e.1d0542","name":"","statusCode":"","headers":{},"x":550,"y":260,"wires":[]},{"id":"5aac1ae8.536514","type":"debug","z":"3e4c0e0e.1d0542","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"result","x":550,"y":360,"wires":[]},{"id":"8ee3aa49.914d48","type":"function","z":"3e4c0e0e.1d0542","name":"Visual Recognitionカスタム認識の設定","func":"msg.params = {};\nmsg.params.classifier_ids = \"default\";\nmsg.params.threshold = \"0.2\";\nreturn msg;","outputs":1,"noerr":0,"x":210,"y":280,"wires":[["dfbfab37.ea34a8"]]}]
```

それでは！