Slide 1
Slide 1 text
冬のIBM Dojo #5
AI(Watson API) アプリ開発+ App on OpenShift
Kyoko Nishito
Developer Advocate
Tokyo City Team
Slide 2
Slide 2 text
Kyoko Nishito
IBM Developer Advocate
2
KyokoNishito
Slide 3
Slide 3 text
本⽇のタイムテーブル
14:00-14:05
(5min)
オープニング
資料ダウンロード,出席登録など
14:05-15:00
(55min)
AI (Watson API)
<座学+DEMO>
15:00-16:30
(90min)
AI (Watson API) + App on OpenShift
コードチャレンジ
<ワークショップ>
16:30-17:00
(30min)
クローズ
Slide 4
Slide 4 text
本⽇の資料
本⽇の資料はこちらからPCにダウンロードお願いし
ます。URLをクリックしたり、コマンドをコピペしたりでき
ますので、サイトでみるのではなく、ダウンロードをお勧めし
ます。(connpassの資料にもリンクあり)
http://ibm.biz/dojo20200212doc
Slide 5
Slide 5 text
出席登録
こちらのURLにアクセスして、IBM Cloudにログイン
お願いします。
アカウント未登録の⽅もこちらから登録お願いします。
https://ibm.biz/dojo0212
Slide 6
Slide 6 text
ハンズオン事前準備
https://ibm.box.com/v/20200212DojoPrep
1. IBM Cloudアカウントの取得
2. IBM Cloud CLIのインストール
3. Node.jsのインストール
4. Gitのインストール
5. VS Codeなどコードエディタ
詳細は
Slide 7
Slide 7 text
学習の⽬的とゴール
⽬的
WatsonとWatson APIの概要について理解する
ゴール
Watson APIを利⽤したアプリケーションを作成できる
このコースを学ぶ⽅の想定スキル
何かしらのプログラミング経験があり、Watson APIを初めて
利⽤する⽅
Slide 8
Slide 8 text
本⽇の説明内容
1. AI & IBM Watson
2. Watson API
3. Watson APIの使い⽅ (DEMO)
4. まとめ
5. コードチャレンジ
Slide 9
Slide 9 text
1. AI & IBM Watson
Slide 10
Slide 10 text
⼈⼯知能(AI)は
⼈間の知能のはたらきを模倣し,
機械(技術)で実現した能⼒です。
10
Slide 11
Slide 11 text
⼈間の知能の例 Human Intelligence
11
計画 学習
創造性
問題解決
推論
知覚
操作
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Watson APIサービス⼀覧
2019年3⽉現在
Watson Assistant
アプリケーションに⾃然⾔語インターフェースを追加して
エンドユーザとのやり取りを⾃動化
Text to Speech
テキスト⽂章を⾳声に変換する
Speech to Text
⾳声をテキスト⽂章に変換する
Visual Recognition
画像コンテンツに含まれる意味を検出する
Discovery
先進的な洞察エンジンを利⽤して、デー
タの隠れた価値を解明し、回答やトレン
ドを発⾒する
Discovery News
Discovery上に実装され、エンリッチ情報
も付加されたニュースに関する公開デー
タセット
Personality Insights
テキストから筆者の性格を推定する
Language Translator
テキストを他⾔語へ翻訳を⾏う
Natural Language Understanding
⾃然⾔語処理を通じてキーワード抽出、エン
ティティー抽出、概念タグ付け、関係抽出な
どを⾏う
Natural Language Classifier
テキスト⽂章の分類を⾏う(質問の意図推定など)
Tone Analyzer(⽇本語未対応)
テキストから筆者の感情、社交性、⽂体を解析
Knowledge Studio
コーディングなしに、業務知識から⽣成した
機械学習モデルで、⾮構造テキストデータか
ら洞察を取得(学習⽀援ツール)
⼼理系
⾔語系
照会応答系
知識探索系
⾳声系
画像系
https://www.ibm.com/watson/jp-ja/developercloud/services-catalog.html
Slide 14
Slide 14 text
• データにラベルをつけたりDeep Learningのモデルを⼤量データで学習させるのは
⾮常に労⼒がかかります。企業は⼤量のデータを持つがラベル付けされているデー
タは多くはなく、また学習のための仕組みを持っていません。
• すでに多くの企業がWatsonを業務に活⽤しており、顧客体験の向上や専⾨家の
ワークの効率化や新しいビジネスモデルや戦略の開発を実現しています。
• 社内の様々なシステムと連携しフルトランザクションに対応
• 顧客が選べるよう複数チャネルを展開
• 双⽅向のデジタルコミュニケーション
• 少ないデータでも効率的に学習できるというWatsonのアドバンテージ
• ①ラベルのないデータからの学習
• ②コンセプトからの学習
• ③誤りからの学習
• ④学習の仕⽅についての学習
• Watsonはテクノロジーをシンプルなものとして企業にお届けし、AIを企業全体に
スケールして活⽤することを⽀援します
Trends & Directions:
Put AI to Work @think2019
Slide 15
Slide 15 text
Cloud上で使えるAIサービス
・・・
Internet
PC Azure
AWS
GCP
IBM Cloud
Smart Phone
Server
各社クラウド
Direct Link
Slide 16
Slide 16 text
16
Watson APIの特徴
• ネットワーク経由でアクセス
• REST形式のインターフェイス
• Java, Python, Node.jsなどに対応した
APIライブラリ(SDK)
• https://github.com/watson-developer-cloud
Slide 17
Slide 17 text
17
Watson APIの特徴
• ネットワーク経由でアクセス
• REST形式のインターフェイス
• Java, Python, Node.jsなどに対応した
APIライブラリ(SDK)
• https://github.com/watson-developer-cloud
Slide 18
Slide 18 text
18
Watson API REST形式のインターフェース
・・・
HTTP Request
GET
POST
PC
HTTP Response
JSON
JSON
Azure
AWS
GCP
IBM Cloud
Smart Phone
Server
各社クラウド
Slide 19
Slide 19 text
RESTインターフェースの例
19
クライアント
https://gateway.watsonplatform.net
/language-
translator/api/v3/translate
URL: https://gateway.watsonplatform.net/
language-translator/api/v3/translate
メソッド: POST
{"text":["Hello"],
"model_id":"en-ja"}
{"text":["Hello"],
"model_id":"en-ja"}
JSON
②対応する
処理
APIサービス
{"text":["Hello"],
"model_id":"en-ja"}
JSON
{
"translations" : [ {
"translation" : "ハロー"
} ],
"word_count" : 1,
"character_count" : 5
}
①リクエスト
送信
③レスポンス
送信
Slide 20
Slide 20 text
20
Watson APIの特徴
• ネットワーク経由でアクセス
• REST形式のインターフェイス
• Java, Python, Node.jsなどに対応した
APIライブラリ(SDK)
• https://github.com/watson-developer-cloud
Slide 21
Slide 21 text
IBM の データ & AI プラットフォーム
インフラ
ストラクチャー
インダストリー
プラット
フォーム
Security
Services
Any
SaaS
Insurance Industrial
Public &
Comms
Any AI
Watson OpenScale
Block-
chain
IoT
Watson
Studio
Watson
Machine
Learning
Watson
Knowledge
Catalog
Watson
API
RedHat OpenShift
Any Cloud
AWS, Azure…
Cloud
Integration SW(Cloud Pak)
Banking
& Financial
Markets
Any
Hardware
IBM Systems
Z, P IBM Cloud
VMware SAP Cloud Native
Distribution
Cloud Pak for Data
Any
Tool
ハイブリッド、マルチクラウドに対応し、オープンなAI活⽤を実現
Slide 22
Slide 22 text
2. Watson API
Slide 23
Slide 23 text
Watson APIサービス一覧
2019年3⽉現在
Watson Assistant
アプリケーションに⾃然⾔語インターフェースを追加して
エンドユーザとのやり取りを⾃動化
Text to Speech
テキスト⽂章を⾳声に変換する
Speech to Text
⾳声をテキスト⽂章に変換する
Visual Recognition
画像コンテンツに含まれる意味を検出する
Discovery
先進的な洞察エンジンを利⽤して、デー
タの隠れた価値を解明し、回答やトレン
ドを発⾒する
Discovery News
Discovery上に実装され、エンリッチ情報
も付加されたニュースに関する公開デー
タセット
Personality Insights
テキストから筆者の性格を推定する
Language Translator
テキストを他⾔語へ翻訳を⾏う
Natural Language Understanding
⾃然⾔語処理を通じてキーワード抽出、エン
ティティー抽出、概念タグ付け、関係抽出な
どを⾏う
Natural Language Classifier
テキスト⽂章の分類を⾏う(質問の意図推定など)
Tone Analyzer(⽇本語未対応)
テキストから筆者の感情、社交性、⽂体を解析
Knowledge Studio
コーディングなしに、業務知識から⽣成した
機械学習モデルで、⾮構造テキストデータか
ら洞察を取得(学習⽀援ツール)
⼼理系
⾔語系
照会応答系
知識探索系
⾳声系
画像系
https://www.ibm.com/watson/jp-ja/developercloud/services-catalog.html
Slide 24
Slide 24 text
Watson APIサービス一覧
2019年3⽉現在
Watson Assistant
アプリケーションに⾃然⾔語インターフェースを追加して
エンドユーザとのやり取りを⾃動化
Text to Speech
テキスト⽂章を⾳声に変換する
Speech to Text
⾳声をテキスト⽂章に変換する
Visual Recognition
画像コンテンツに含まれる意味を検出する
Discovery
先進的な洞察エンジンを利⽤して、デー
タの隠れた価値を解明し、回答やトレン
ドを発⾒する
Discovery News
Discovery上に実装され、エンリッチ情報
も付加されたニュースに関する公開デー
タセット
Personality Insights
テキストから筆者の性格を推定する
Language Translator
テキストを他⾔語へ翻訳を⾏う
Natural Language Understanding
⾃然⾔語処理を通じてキーワード抽出、エン
ティティー抽出、概念タグ付け、関係抽出な
どを⾏う
Natural Language Classifier
テキスト⽂章の分類を⾏う(質問の意図推定など)
Tone Analyzer(⽇本語未対応)
テキストから筆者の感情、社交性、⽂体を解析
Knowledge Studio
コーディングなしに、業務知識から⽣成した
機械学習モデルで、⾮構造テキストデータか
ら洞察を取得(学習⽀援ツール)
⼼理系
⾔語系
照会応答系
知識探索系
⾳声系
画像系
https://www.ibm.com/watson/jp-ja/developercloud/services-catalog.html
Slide 25
Slide 25 text
Watson Assistant
25
ü チャットボットのような対
話アプリケーションの開発
に最適
ü 会話フローをグラフィカル
に開発できるツールを提供
ü 作成した会話フローをAPIで
呼び出し
Watson: こんにち
はシステムサポー
トです。何かお困
りですか︖
User: 交通費精算シ
ステムだよ。
エンティティー: システム
Value: 交通費精算システム
Watson: 何のシス
テムにログインで
きないのですか︖
User: ログインでき
ないよ
意図: ログイン不可
Watson:交通費精
算システムにログ
インできない場合
のチェック項⽬の
URLを送ります
http://xxx
交通費精算システムのログイ
ン不可にに関する情報を検索
色々な言い回し
“ログインエラーになる”
“ログインが失敗するけど”
色々な言い回し
“交通費のやつ”
“精算システム”
Webツールで
インテント、
エンティ
ティー、
会話フロー
を作成可能
https://www.ibm.com/watson/jp-
ja/developercloud/conversation.html
Slide 26
Slide 26 text
DEMO
26
DOC ID / Month XX, 2018 / © 2018 IBM Corporation
Watsonを使⽤したLINE chat bot
Slide 27
Slide 27 text
参考情報
27
LINEチャットボットとWatsonを連携する
https://medium.com/@taiponrock/line%E3%83
%81%E3%83%A3%E3%83%83%E3%83%88%
E3%83%9C%E3%83%83%E3%83%88%E3%81
%A8watson%E3%82%92%E9%80%A3%E6%90
%BA%E3%81%99%E3%82%8B-8a7d89a49e57
10分で解説︕ Watson Assistantでチャットボットを開発する
https://www.youtube.com/watch?v=ZRwsu4OXLeE
Slide 28
Slide 28 text
Natural Language Understanding
(NLU)
üテキストを分析し、概念、エンティ
ティー、キーワード、カテゴリー、
感情、関係、意味役割などのメタ
データを抽出※
ü事前学習済みであり、学習なしで解
析結果を取得
抽出できるもの
• エンティティ(Entities)
• 関係(Relations)
• 概念(Concepts)
• キーワード(Keywords)
• 評判 (Sentiment)
• 感情 (Emotion) ※
• カテゴリー(Categories)
• 構⽂解析(Semantic Roles)
※ 感情分析(Emotion)は⽇本語には対応していません
https://www.ibm.com/watson/services/natural-language-
understanding/
Slide 29
Slide 29 text
DEMO
29
https://dte-nlu-demo.mybluemix.net/self-service/home
今⽇のニュースからメタデータを抽出してみます
Slide 30
Slide 30 text
üWatsonを利⽤した⽂書検索
エンジン
ü膨⼤なテキストデータを取
り込み、NLUで解析、検索に
利⽤
ü⾃然⾔語でも検索できる
(またはDiscovery Query Language(DQL))
Discovery
https://www.ibm.com/watson/jp-ja/developercloud/discovery.html
Slide 31
Slide 31 text
Discovery News
üDiscoveryのインスタンスを作成すると、世界各地のニュー
ス記事を保持している、事前作成済み読み取り専⽤コレク
ション Discovery News がすぐに使える状態になります。
・データ登録の必要なしにすぐに使える
・IBM選定の10万のニュースソース
・1⽇当たり30万件以上の記事(⽇本語記事は１⽇あたり17,000件)
Slide 32
Slide 32 text
DEMO
32
気になるニュースを検索してみましょう︕
https://discovery-news-demo.ng.bluemix.net/
Slide 33
Slide 33 text
33
Visual Recognition
• 画像認識「⼀般種別」(General Tagging):
• 事前学習済みの分類器の出⼒を返します
• 画像認識「カスタム」:
• 識別を⾏いたいクラスのイメージを事前学習させ、その
分類器の出⼒を返します。
事前学習
不要
事前学習
必要
https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html
Slide 34
Slide 34 text
DEMO
34
後ほどの「コードチャレンジ」で実際に作成できます
Slide 35
Slide 35 text
DOC ID / Month XX, 2018 / © 2018 IBM Corporation
Text to Speech
テキスト⽂章を⾳声に変換する
https://text-to-speech-demo.ng.bluemix.net
DEMO
Slide 36
Slide 36 text
DOC ID / Month XX, 2018 / © 2018 IBM Corporation
Speech to Text
⾳声をテキスト⽂章に変換する
https://www.ibm.com/watson/jp-ja/developercloud/speech-to-text.html
Language Translator
⾃然⾔語テキストについて他⾔語へ翻訳を⾏う
Natural Language Classifier
テキスト⽂章の分類を⾏う(質問の意図推定など)
https://www.ibm.com/watson/jp-ja/developercloud/language-translator.html
https://www.ibm.com/watson/jp-ja/developercloud/nl-classifier.html
Slide 37
Slide 37 text
37 © 2018 IBM Corporation
Personality Insights
テキストから筆者の性格を推定する
https://www.ibm.com/watson/jp-ja/developercloud/personality-insights.html
DEMO
https://personality-insights-demo.ng.bluemix.net/
Slide 38
Slide 38 text
38 © 2018 IBM Corporation
Tone Analyzer(⽇本語未対応)
テキストから筆者の感情、社交性、⽂体を
解析する
https://tone-analyzer-demo.ng.bluemix.net/
Slide 39
Slide 39 text
3. Watson APIの使い⽅ (DEMO)
ここからDEMOになります。
事前準備がお済みの⽅は⼀緒にやってみましょう︕
Slide 40
Slide 40 text
Watson APIの使い⽅の基本
40
1. IBM Cloudにログインして必要なサービスを作成
今回はLanguage Translator を使います。
2. 作成したサービスの資格情報である
API KEY(API鍵)、URLを取得
3. 取得したAPI KEY、URLを指定してAPIを呼び出す
APIの詳細はこちらから確認
https://cloud.ibm.com/apidocs
Slide 41
Slide 41 text
Watson APIの使い⽅の基本
41
1. IBM Cloudにログインして必要なサービスを作成
今回はLanguage Translator を使います。
2. 作成したサービスの資格情報である
API KEY(API鍵)、URLを取得
3. 取得したAPI KEY、URLを指定してAPIを呼び出す
APIの詳細はこちらから確認
https://cloud.ibm.com/apidocs
Slide 42
Slide 42 text
本イベントでは、
IBM Cloud へのアクセスは上記URLから行ってください
• IBM Cloud ログイン
アカウントをすでにお持ちの方は、
こちらからログインしてください
• IBM Cloud ライトアカウント作成
アカウントをお持ちでない方は、
ご登録をお願いします
【本⽇のお願い】
1. IBM Cloudにログイン︕ DEMO
本イベント以外では
https://cloud.ibm.com/login
からログイン可能です
https://ibm.biz/dojo0212
Slide 43
Slide 43 text
2. 「カタログ」をクリック
43
DEMO
Slide 44
Slide 44 text
44
3. 左側のメニューから
「AI」をクリック
DEMO
Slide 45
Slide 45 text
45
3. スクロールして使いたいWatsonサービスを
クリック
今回は
Language Translator
をクリックしてください。
DEMO
Slide 46
Slide 46 text
46
4. 地域とプランを選んだら「作成」をクリック
DEMO
Slide 47
Slide 47 text
47
5. 下記のような画⾯に変わったら作成完了!
DEMO
Slide 48
Slide 48 text
Watson APIの使い⽅の基本
48
1. IBM Cloudにログインして必要なサービスを作成
今回はLanguage Translator を使います。
2. 作成したサービスの資格情報である
API KEY(API鍵)、URLを取得
3. 取得したAPI KEY、URLを指定してAPIを呼び出す
APIの詳細はこちらから確認
https://cloud.ibm.com/apidocs
Slide 49
Slide 49 text
49
1. 左側のメニューから「管理」をクリック
DEMO
Slide 50
Slide 50 text
50
資格情報にあるAPI KEYとURLをテキストファイルなどにコピーします。
このアイコンで
コピーできます
２. API鍵(＝API KEY), URLをコピー
DEMO
Slide 51
Slide 51 text
51
1
HINT: よくわからない画⾯になった場合
IBM Cloud→リソースの表⽰→Services→表⽰させたいサービス名
2
3
4
Slide 52
Slide 52 text
Watson APIの使い⽅の基本
52
1. IBM Cloudにログインして必要なサービスを作成
今回はLanguage Translator を使います。
2. 作成したサービスの資格情報である
API KEY(API鍵)、URLを取得
3. 取得したAPI KEY、URLを指定してAPIを呼び出す
APIの詳細はこちらから確認
https://cloud.ibm.com/apidocs
Slide 53
Slide 53 text
53
APIの詳細はこちらから確認
https://cloud.ibm.com/apidocs
1. まずはAPIの使い⽅を確認
クリック
DEMO
Slide 54
Slide 54 text
54
2. 今回はNodeを使うのでNodeのタブを確認
他の⾔語の
SDKから使
う場合は対
応する⾔語
をクリック
します
DEMO
Slide 55
Slide 55 text
55
3. Translateの使い⽅を確認 DEMO
Slide 56
Slide 56 text
56
4-1: ターミナル または コマンドウィンドウを開きます。
4-2: 以下のコマンドでディレクトリを作成し、作成したディ
レクトリに移動します。($は⼊⼒しないでください)
4. サンプルコード実⾏ DEMO
$ mkdir translate
$ cd translate
4-3:ターミナル または コマンドウィンドウはそのままにして、
エディター(VSCode, メモ帳(windows), vi(Mac)など)を開き
ます。
Slide 57
Slide 57 text
57
4-4: APIドキュメントにあるExample requestのコードをコ
ピーします。
url: https://cloud.ibm.com/apidocs/language-translator?code=node#translate
4. サンプルコード実⾏ DEMO
Slide 58
Slide 58 text
58
4-5: コピーしたコードを開いているエディターにペーストし
ます。
4. サンプルコードの実⾏ DEMO
Slide 59
Slide 59 text
59
4-6: 7⾏⽬: {apikey}を2でコピーしたAPI鍵で置き換えます。
4. サンプルコードの実⾏ DEMO
4-7: 9⾏⽬: {url}を2でコピーしたURLで置き換えます。
Slide 60
Slide 60 text
60
4-8: 4-2で作成したディレクトリに
translate.js という名前で保存します。
4. サンプルコードの実⾏ DEMO
Slide 61
Slide 61 text
61
4-9: APIドキュメントIntroductionにあるInstallationのコード
をコピーします。
url: https://cloud.ibm.com/apidocs/language-translator?code=node#introduction
4. サンプルコードの実⾏ DEMO
このアイコン
でコピー
できます
Slide 62
Slide 62 text
62
4-10: 先ほど開いたターミナル または コマンドウィンドウに
戻り、コピーしたコマンドをペーストし実⾏します。
4. サンプルコードの実⾏ DEMO
$ npm install ibm-watson@^5.1.0
4-11: 以下のコマンドでtranslate.jsを 実⾏します。
$ node translate.js
Macで権限エラーが発⽣する場合は、先頭に sudo をつけて実⾏してください。
sudo npm install ibm-watson@^5.1.0
Slide 63
Slide 63 text
63
4-12: 実⾏結果は確認できましたか︖
英語のHelloがスペイン語のHolaに変換されています。
4. サンプルコードの実⾏ DEMO
サンプルコード 結果
Slide 64
Slide 64 text
64
translate.jsを修正し、13⾏⽬のtextを適当な⽇本語の⽂章に、
model_idを'ja-en'にして保存し、実⾏してみましょう。
4. [オプション]サンプルコードの実⾏
A. 翻訳⾔語の変更
DEMO
サンプルコード 結果
https://cloud.ibm.com/docs/services/language-translator?topic=language-translator-translation-models
使⽤可能なmodel_idはこちら:
$ node translate.js
以下をのコマンドを実⾏
Slide 65
Slide 65 text
65
サービスのAPI KEY, URLが取得できる管理画⾯から
ibm-credentials.env というAPI KEYとURLが⼊っているファ
イルがダウンロードできます。
これを以下のいずれかに置くと、コード内でAPI KEYとURLの
記述が不要です。
• 環境変数IBM_CREDENTIALS_FILEで指定したPATH
• システムのhome directory
• プログラムの実⾏directory(working directory)
4. [オプション]サンプルコードの実⾏
B. Credentials fileの使⽤
DEMO
Slide 66
Slide 66 text
66
4B-1: この資料の46ページ、
4415ページを参照して、
Language Translationサービス
の管理画⾯を表⽰します。
資格情報の「ダウンロード」をク
リックし、4-2で作成したディレ
クトリにibm-credentials.env と
いうファイルを保存します。
4. [オプション]サンプルコードの実⾏
B. Credentials fileの使⽤
DEMO
Slide 67
Slide 67 text
67
4B-2: translate.jsを修正し、 IamAuthenticatorの定義をしている2⾏⽬と、APIKEYとURL
を指定している6⾏⽬から9⾏⽬部分を//でコメントアウトし、保存します。
4. [オプション]サンプルコードの実⾏
B. Credentials fileの使⽤
DEMO
修正前:
修正後:
Slide 68
Slide 68 text
68
実⾏します。
4. [オプション]サンプルコードの実⾏
B. Credentials fileの使⽤
DEMO
4B-3: 以下のコマンドでtranslation.jsを 実⾏します。
$ node translation.js
ソースでAPIKEY、URLしてしなくとも、
ibm-credentials.env
から読み込まれ正しく実⾏できることを確認します。
Slide 69
Slide 69 text
まとめ
Watsonはビジネスで使いやすいAIサービス
いろいろなサービスがAPIで呼び出せる
SDKで簡単に実装可能
Slide 70
Slide 70 text
おすすめ情報
今すぐ使えるWatson API／サービス⼀覧
https://www.ibm.com/watson/jp-ja/developercloud/services-catalog.html
チュートリアル
Watson APIを使うための前準備: サービスの作成と資格情報の取得
https://qiita.com/nishikyon/items/9b8f697db7ad0a693839
Watson Visual Recognition カスタムクラスを作ろう!
https://qiita.com/nishikyon/items/7d1c07e2f50c1002e815
IBM Code Patterns - アプリ開発パターン集
http://ibm.biz/ibmcodejp
Slide 71
Slide 71 text
コードチャレンジ: AI (Watson API+Openshift)
Slide 72
Slide 72 text
ベーシックチャレンジ
1. 事前準備を完了しましょう
http://ibm.biz/dojo20200212doc
この資料:
https://ibm.box.com/v/20200212DojoPrep
2. 先ほど実施の「 3. Watson APIの使い⽅ 」を完了しましょう
Slide 73
Slide 73 text
IBM Watson Visual Recognitionを使った
node.jsの画像認識Webアプリの作成
https://github.com/kyokonishito/watson-vr-node
• IBM CloudのCloud Foundry環境にDeployします
• 「 2. Visual Recognition サービスの作成」の「6.(オプション) カスタ
ム分類クラスの作成」はオプションです。とりあえず⾶ばして実施し、
時間があればチャレンジしてみてください。
メインチャレンジ
Slide 74
Slide 74 text
IBM CloudのCloud Foundry アプリケーションはクレジットカードを登録したPAYGアカウントの場合、動かし
たまま1ヶ⽉経過すると課⾦対象になります。またライトアカウントの場合は最⼤256Mまでしかメモリが使⽤
できませんので、新しいアプリケーションを動かしたい場合は、使っていないアプリケーションを停⽌しないと
動かない場合があります。
必要に応じてアプリケーションを停⽌お願いします。
停⽌の⽅法はこちら: IBM Cloud: Cloud Foundry アプリケーションの停⽌・開始
https://qiita.com/nishikyon/items/3356db8bb4c1524517be
メインチャレンジ:補⾜
Slide 75
Slide 75 text
メインチャレンジ
IBM Watson Visual Recognitionを使った
node.jsの画像認識Webアプリ
https://github.com/kyokonishito/watson-vr-node
をOpenShiftで動かしてみよう!
• メインチャレンジを完了していなくとも実施可能
OpenShift チャレンジ
Slide 76
Slide 76 text
操作の流れ
1. ワークショップ⽤の環境へのIBM Cloud ID関連付け
2. OpenShiftをコマンド実⾏できる環境の準備
3. Visual Recognitionサービスの作成(メインチャレンジ未
実施の⽅のみ)
4. 資格情報のダウンロード
5. 資格情報のアップロード
6. 資格情報の編集
7. OpenShiftアプリの作成
Slide 77
Slide 77 text
1. ワークショップ⽤のIBM Cloud環境にご⾃⾝の
IBM Cloud IDを関連付ける
注意事項
・ブラウザはFirefoxをご利⽤ください
・本ワークショップ⽤のIBM Cloud環境はセミナー開催⽇を
含めて約3⽇間限定でお使いいただけます
・IBM Cloud上で継続的にOpenShiftを検証する環境が
必要な場合は、5-1. OpenShiftをご利⽤ください
・ローカルでOpenShiftを検証する環境を構築されたい場合は、
Appendix. Minishiftをご利⽤ください
Slide 78
Slide 78 text
1.1: 下記URLにFirefoxブラウザでアクセスする
https://ostokyo.mybluemix.net/
1.2: [Lab Key] 、[Your IBMid]にご⾃⾝のIDを
⼊⼒し、チェックボックスにチェックを⼊れて
[Submit]をクリックする
Lab Keyは
講師にお尋ねください
Slide 79
Slide 79 text
1.3: Congratulations! が表⽰されたら [1. Log in IBM Cloud]
リンクをクリックする
Slide 80
Slide 80 text
1.5: IBM Cloudダッシュボードの右上のアカウント情報の
右横の v をクリックする
1.6:[xxxxxxx – IBM] をクリックする
Slide 81
Slide 81 text
1.7: IBM Cloudダッシュボードの右上のアカウント情報が
変更されたことを確認し、[リソースの要約]の
[Clusters]をクリックする
Slide 82
Slide 82 text
1.8: Clustersの下の⾚枠部分(下図参照)をクリックする
※本ワークショップではこちらのクラスタを使⽤します
※名前は⾃動的に割り当てられます
Slide 83
Slide 83 text
1.9: [OpenShift Webコンソール]ボタンをクリックします。
Slide 84
Slide 84 text
1.10: [OpenShift Container Platform]画⾯が表⽰されたら
右上のアカウント情報の隣の v をクリックし、
[Copy Login Command]を選択する
※後ほど使⽤する為、必要に応じてメモしておいてください
Slide 85
Slide 85 text
2.2: メニューバーからIBM Cloud Shellのアイコンをクリック
2. OpenShiftをコマンド実⾏できる環境の準備
2.1: IBM Cloudのダッシュボードを表⽰
Slide 86
Slide 86 text
2.: しばらくするとターミナルが表⽰される
Slide 87
Slide 87 text
2.4: 前章1.10でコピーしたコマンドを⼊⼒し実⾏する
2.5: 「Welcome!」が表⽰されればログイン成功です
Slide 88
Slide 88 text
3. Visual Recognitionサービスの作成
Visual Recognitionを新規に作成する⽅は次のページに進んでください。
既に以前に作成済みの⽅は、作成済みのものが使⽤できます。
作成済みの⽅は以下の⼿順を参照しVisual Recognitionの管理の画⾯を表⽰後、
http://ibm.biz/watson-service-screen
当資料「4. Visual Recognitionサービスibm-credentials.env のダウンロード」まで進んでく
ださい。
ブラウザー上で、新しいタブを開きます。
https://cloud.ibm.com/ にアクセスして、ダッシュボードを開きます。
XXXXXXX – IBM ではなく⾃分のアカウントになっていることを確認し、異なっ
ている場合はクリックして変更します
Slide 89
Slide 89 text
3.1 上部のメニューにある「カタログ」をクリックします
Slide 90
Slide 90 text
3.2 Visual Recognitionサービスの選択
1. 左側のメニューから「AI」をクリック
2. 下にスクロールして表⽰された「Visual Recognition」をクリック
Slide 91
Slide 91 text
価格プランに「ライト」が選択されていることを確認して、
「作成」をクリック
3.3 Visual Recognitionサービスを作成する
Slide 92
Slide 92 text
3.4 Visual Recognitionサービスを作成確認、管理画⾯の表⽰
下の画⾯が出たら、作成完了です。
左のメニューから「管理」をクリックして管理画⾯を表⽰します
Slide 93
Slide 93 text
資格情報の「ダウンロード」を
クリックし、⾃分のPCに
ibm-credentials.env という
ファイルを保存します。
4. Visual Recognitionサービス
ibm-credentials.env のダウンロード
Slide 94
Slide 94 text
5. ibm-credentials.env のアップロード
5.1. ブラウザーのIBM Cloud Shell for Workshopのタブ
をクリックして表⽰します。
Slide 95
Slide 95 text
5. ibm-credentials.env のアップロード
5.2. メニューバーのアップロードアイコンをクリック、
ibm-credentials.envを指定してアップロード
Slide 96
Slide 96 text
5. ibm-credentials.env のアップロード
5.3 ファイルアップロードを確認
ls
ターミナルに下記コマンドを⼊⼒し、確認します。
出⼒例:
尚、今後のコマンドは以下からコピペできます
https://ibm.box.com/v/openshift-101-command
Slide 97
Slide 97 text
6.1. プロジェクトを作成する
oc new-project watson-vr --display-name="watson-vr" --
description="Sample Watson Visual Recognition Node.js app"
ターミナルに下記コマンドを⼊⼒し、新しいアプリケーション⽤に新しい
プロジェクトを作成します。
(コマンドは１⾏です。コマンドは以下からコピペできます。
https://ibm.box.com/v/openshift-101-command)
6. Openshift アプリの作成
出⼒例:
Slide 98
Slide 98 text
6.2. アプリケーションの作成
ターミナルに下記のコマンドを⼊⼒し、 githubのソースコードから、アプ
リケーションを作成します。
(コマンドは１⾏です)
oc new-app https://github.com/kyokonishito/watson-vr-node.git
--build-env-file=./ibm-credentials.env --build-env
CLASSIFIER_ID=food
6. OpenShiftアプリの作成
Slide 99
Slide 99 text
6.2. アプリケーションの作成
出⼒例:
6. OpenShiftアプリの作成
Slide 100
Slide 100 text
6.3 ビルドログを表⽰します
oc logs -f bc/watson-vr-node
ターミナルに下記のコマンドを⼊⼒しビルドログを表⽰し、
「 Push successful 」で終わるまで待ちます。
6.4 ロードバランサーのサービスを作成します
oc expose dc watson-vr-node --port=3000 --type=LoadBalancer --
name=watson-vr-node-ingress
ターミナルに下記のコマンドを⼊⼒し実⾏します。(コマンドは１⾏です)
6. OpenShiftアプリの作成
Slide 101
Slide 101 text
6.5. ロードバランサーのサービスを公開します
oc expose service watson-vr-node-ingress
ターミナルに下記のコマンドを⼊⼒し実⾏します。
6. OpenShiftアプリの作成
これで完了です!ターミナルに下記のコマンドを⼊⼒し実⾏し、その結果を
参照して、OpenShift で実⾏されているアプリケーションにアクセスでき
ます。
oc get route/watson-vr-node-ingress
NAME HOST/PORT PATH SERVICES PORT TERMINATION
WILDCARD
watson-vr-node-ingress watson-vr-node-ingress-watson-vr.openshifttokyo17-0e3e0ef4c9c6d831e8aa6fe01f33bfc4-0002.jp-
tok.containers.appdomain.cloud watson-vr-node-ingress 3000 None
以下のような出⼒があった場合は、
watson-vr-node-ingress-watson-vr.openshifttokyo17-0e3e0ef4c9c6d831e8aa6fe01f33bfc4-0002.jp-
tok.containers.appdomain.cloud にブラウザでアクセスします。
Slide 102
Slide 102 text
6.6 ブラウザーでアプリケーションにアクセスします
アプリケーションは表⽰できましたか?
ボタンを押して動作確認してみましょう!
「ファイルの選択」から写真を選んだ後、各⻘ボタンを
クリックして、Visual Recognitionの結果を確認します。
• Watsonで認識（Watson学習済みモデルを利⽤):
• Watsonが写真を認識した内容を表⽰します。
• Watsonで認識（カスタムモデルを利⽤):
• IBM提供の⾷品に特化したカスタムモデルFoodで認識し
たクラスを表⽰します。
※スマートフォンでの確認
⼀番下にQRコードが表⽰されているので、それをスマートフォ
ンのカメラで読んでアプリケーションのURLにアクセすると、ス
マートフォンでも結果を確認できます。
スマートフォンでは「ファイルの選択」ボタンでその場で撮った
写真も認識可能です。
Slide 103
Slide 103 text
[オプション] ブラウザーでOpenShift Web Consoleに
アクセスして作成したアプリを確認 1/2(1.10で開いたWeb画⾯
です)
←View Allをクリック
下にスクロールすると
watson-vr プロジェクト
があるので、クリックし
ます。
Slide 104
Slide 104 text
[オプション] ブラウザーでOpenShift Web Consoleに
アクセスして作成したアプリを確認 1/1
←このあたりをいろいろクリックすると情報が⾒れます
↑ここもクリックするといろいろ情報が⾒れます
Slide 105
Slide 105 text
IBM Code Patterns
https://ibm.biz/ibmcodejp
解説 + デモ動画 + ソースコードが揃ったアプリ開発パターン集
Slide 106
Slide 106 text
開発者向けサイト IBM Developer
ibm.biz/IBMDevJP
最新情報やスキルアップに役⽴つ6,000を超える技術記事を提供
Slide 107
Slide 107 text
Appendix: Minishift とは
• OpenShiftは、Kubernetesに、Red Hat社独⾃の拡張を加え、さらに、
Red Hatのソフトウェア保守とウェブや電話での問い合わせ対応
サービスを提供する企業向けKubernetesのプラットフォーム
• OpenShiftは、Red Hat社が提供する有償サービス(サブスクリプション)
のもとで利⽤できるソフトウェア
• OpenShiftの学習やローカルの開発環境⽤に無償で提供されるのが、
Minishift (OpenShift 3.11に相当)
「MiniShiftに関する疑問の整理、「 Dockerから⼊るKubernetes」執筆打明け話とか、OKDやCRCとの整理など」
https://qiita.com/MahoTakara/items/3c1c208640518e832660 より抜粋
Slide 108
Slide 108 text
Appendix: Minishift ワークショップ 101
(オプション)
Setup 1
「仮想化環境を構成する」の⽇本語版はこちら」
• Windows: ibm.biz/Bdz39H
• Mac: ibm.biz/Bdz39E
Setup 2
MinishiftのインストールおよびOpenShiftサーバーを開始し、
Lab1から順番に進める。
ibm.biz/openshift1
Slide 109
Slide 109 text
No content