Downloaded 18 times
![APIからの出⼒を表⽰（1）
fileTransfer.upload(photoFileUri, url, function(r) {
//顔認識APIからのレスポンスを処理
var response = JSON.parse(r.response);
var image = response.images[0];
var text = '';
//recognize...部分を書き換え
var message = document.getElementById('message');
message.innerHTML = text;
}, function(error) {
alert(error.code);
}, options, true);
書籍：P199
ここに次スライドの
コードが⼊ります
Android4.xの⽅は重要！](https://image.slidesharecdn.com/watsonmonacahandsondist-161115020800/85/Watson-26-320.jpg)
![APIからの出⼒を表⽰（2）
if ('faces' in image) {
if (image.faces.length > 0) {
//顔認識ができた場合
var face = image.faces[0];
//年齢
text += 'Age: ';
if ('max' in face.age && 'min' in face.age) {
//年齢の上限と下限が認識された場合
text += face.age.min + ' - ' + face.age.max + ' (' + face.age.score + ')<br>';
}
} else {
//顔認識ができなかった場合
text += 'not found!';
}
} else if ('error' in image) {
//その他のエラーがあった場合
text += image.error.description;
}
書籍：P199
書籍のコードより、
⼀部省略しています。](https://image.slidesharecdn.com/watsonmonacahandsondist-161115020800/85/Watson-27-320.jpg)
Uploaded byKenichi Inoue
「初めてのWatson」ハンズオン
2016年11月7日／14日に行った「初めてのWatson」ハンズオンの資料です。 2016年10月下旬刊行の「初めてのWatson」（井上研一＝著・リックテレコム＝刊）の書籍と連動したハンズオンで、第6章の顔認識アプリの開発をベースにしています。BluemixとMonacaのアカウントが必要です。 ハンズオンを進めるためのMonacaプロジェクトのアーカイブは資料内のURLでダウンロード可能です。（完成版のMonacaプロジェクトのアーカイブは書籍をご購入の上、書籍に記載のダウンロードサイトから入手できます。）
![やっちゃえkntone developer[公開用]](https://cdn.slidesharecdn.com/ss_thumbnails/kintonefornigata-160208012436-thumbnail.jpg?width=640&height=640&fit=bounds)
「初めてのWatson」ハンズオン
- 1.
- 2. 確認 • Bluemixのアカウントは作成しましたか？ • 地域「⽶国南部」で組織とスペースを作成していますか？ •Monacaのアカウントは作成しましたか？ • PC/MacにChrome、スマートフォン（Android/iPhone）に Monacaデバッガーはインストールしてありますか？
- 3. ⾃⼰紹介 • 井上 研⼀ •ITエンジニア • ITCA認定 ITコーディネータ（経済産業省推進資格） • アルティザンエッジ合同会社 代表社員・CEO • Tech Garden School 講師（CakePHP等） • こどもプログラミング 中野まなびじゅく 講師（Scratch/Arduino） • 2000年より某SIerで業務向けWebシステム等の開発に携わる • 2013年7⽉にアルティザンエッジ合同会社を創業 • @IT「JobSchedulerをNagiosと連携して⾃動化！」（2014/1） • 第1回Cordova勉強会「Cordovaで業務アプリを作る」（2014/11）
- 4. ⼈⼯知能の研究者ではありません • 書籍にも書いたことですが･･･ （「おわりに」など） •Watsonの導⼊プロジェクト（2案件）や、機械学習の活⽤など を「開発のお仕事の⼀環として」やっています。 • あくまで現場⽬線で「初めてのWatson」や2冊⽬となる⼈⼯知 能系の書籍の執筆を⾏っています。 • 今⽇のハンズオンをきっかけにして、Watsonはもちろん、そ の他の⼈⼯知能も試してみてください。実際のプロジェクトに 活⽤してみてください！（ Watsonは特に簡単です！！） • きっと損はしません！！！
- 5. 書籍「初めてのWatson」 著者：井上研⼀ 出版：リックテレコム B5変型版 224ページ 定価：2,200円＋税2016年10⽉下旬刊⾏ ISBN：978-4-86594-052-7 https://www.amazon.co.jp/dp/4865940529 本書は「Watsonを使ってみたい」という⽅向けの解説書で す。「Watsonとは何か？」からスタートし、クラウドサー ビスIBM Bluemixの無料枠を使ってWatsonを動かしたり、 簡単なボットアプリや画像認識アプリを作ります。ITエン ジニアに限らず、JavaScriptが書ける⽅なら、⼀般ビジネ スマンや学⽣さんでも、余さず本書を活⽤できるでしょう。
- 6. 「初めてのWatson」⽬次 1. Watsonを知るための6つの 質問 2. ⼈⼯知能とは何か？ 3.とにかくWatsonを体験して みよう 4. Watsonでできること 5. Node-REDでTwitter Botを 作ろう 6. 画像認識アプリを作ろう 7. Watsonの可能性 ハンズオンの対象
- 7. 今⽇のハンズオンは･･･ • 書籍「初めてのWatson」の第6章にある顔認識アプリを作って みます。 • ⼈⼯知能（機械学習）の醍醐味は、⾃分で準備したデータで学 習モデルを作ったり、その精度を⾼めたりする「学習フェー ズ」にあると思います･･･。 •しかし、データの準備が⼤変ですし、Watsonが学習に要する 時間が読めないということもあり、ハンズオンには不向きなの です･･･。 • なので、Watsonに実装済みの学習モデル（顔認識）を使った ハンズオンとなることをご了承ください。
- 8.
- 9.
- 10. Visual Recognitionの有効化 • Bluemixダッシュボード＞カタログ＞Watson＞Visual Recognition •画⾯最下部の「作成」 ※既にVisual Recognitionのインスタンスがある⽅は、それを 使っていただいても構いません。 書籍：P127
- 12.
- 13.
- 14.
- 15. プロジェクトのインポート • Monacaの演習が⽬的ではないので、既にできあがったプロ ジェクトをインポートして、⾃分の環境のVisual Recognition インスタンスを使うようにコードを記述していきます。 •画⾯遷移と撮影機能は実装済みです。 ダウンロードURL http://bit.ly/2dXBIGU
- 16.
- 17.
- 18.
- 19.
- 20. アプリの概要 撮影画⾯ (page1) • Cameraボタン FaceDetectボタン 結果表⽰画⾯ (page2) Watson Visual Recognition
- 21.
- 22.
- 23. Visual Recognitionでできること • Classifyan image（画像の分類） • デフォルトの学習モデル • 独⾃の学習モデル • Detect faces（顔の認識） • Collections (Similarity Search：類似画像の検索） • 2016/9/8 Beta版リリース • Text Recognition（画像内の⽂字列の認識） • 2016/9/8 Beta版クローズ
- 24.
- 25. Visual Recognition APIの呼び出し //画像ファイルのアップロード（顔認識APIの呼び出し） varurl = 'https://gateway-a.watsonplatform.net/visual- recognition/api/v3/detect_faces?api_key=' + apiKey + '&version=2016-05-20'; var options = new FileUploadOptions(); options.fileKey = 'images_file'; options.fileName = 'uploadfile.jpg'; options.mimeType = 'image/jpeg'; var fileTransfer = new FileTransfer(); 書籍：P199
- 26. APIからの出⼒を表⽰（1） fileTransfer.upload(photoFileUri, url, function(r){ //顔認識APIからのレスポンスを処理 var response = JSON.parse(r.response); var image = response.images[0]; var text = ''; //recognize...部分を書き換え var message = document.getElementById('message'); message.innerHTML = text; }, function(error) { alert(error.code); }, options, true); 書籍：P199 ここに次スライドの コードが⼊ります Android4.xの⽅は重要！
- 27. APIからの出⼒を表⽰（2） if ('faces' inimage) { if (image.faces.length > 0) { //顔認識ができた場合 var face = image.faces[0]; //年齢 text += 'Age: '; if ('max' in face.age && 'min' in face.age) { //年齢の上限と下限が認識された場合 text += face.age.min + ' - ' + face.age.max + ' (' + face.age.score + ')<br>'; } } else { //顔認識ができなかった場合 text += 'not found!'; } } else if ('error' in image) { //その他のエラーがあった場合 text += image.error.description; } 書籍：P199 書籍のコードより、 ⼀部省略しています。
- 28. Watsonからのレスポンス //顔認識APIからのレスポンスを処理 console.log(r.response); var response =JSON.parse(r.response); • 年齢の上限または下限だけが結果になった場合にも対応しま しょう。 • 性別の表⽰もしてみましょう。 この⾏を追加 書籍：P199
- 29.
- 30.
- 31.