IBM Dojo #5 AI (Watson API) アプリ開発 on OpenShift / IBM Dojo AI on OpenShift 20200610

2020年6月10日開催のIBM Dojo #5 AI (Watson API) アプリ開発 on OpenShiftの資料です。

Transcript

1. 初夏のIBM Dojo #5 AI(Watson API) アプリ開発+ App on OpenShift Kyoko Nishito Developer Advocate Tokyo City Team
2. Kyoko Nishito IBM Developer Advocate 2 KyokoNishito
3. 質問&ライブ投票参加 はこちら slido.com #dojo610 質問タブで質問⼊⼒ ⾃分も知りたい質問には 「いいね」をプッシュ! 絵⽂字は表⽰されません スマホでアクセスして ぜひ参加お願いします︕ 初夏のIBM Dojo #5 AI(Watson API) アプリ開発+ App on OpenShift
4. 本⽇のタイムテーブル 14:00-14:05 (5min) オープニング 資料ダウンロード,出席登録など 14:05-15:00 (55min) AI (Watson API) <座学+DEMO> 15:00-15:15 (15min) 課題の説明とQ&A Q
5. 本⽇の資料 本⽇の資料はこちらからPCにダウンロードお願いし ます。URLをクリックしたり、コマンドをコピペしたりでき ますので、サイトでみるのではなく、ダウンロードをお勧めし ます。(connpassの資料にもリンクあり) http://ibm.biz/dojo20200610doc
6. 出席登録 こちらのURLにアクセスして、IBM Cloudにログイン お願いします。 http://ibm.biz/dojo0610 アカウント未登録の⽅も こちらから登録お願いします。
7. 新しい取り組み“バッジ取得プログラム”のご案内 7 IBM Cloud & AI develop Basic Online Developer Dojo ” IBM Cloud & AI develop Basic Online Developer badge“について - 2020年6⽉1⽇より開始のIBM Developer Dojo 12回シリーズと同様の内容のIBM Developer Dojoのクラスが対象 https://www.ibm.com/jp-ja/partnerworld/events/developer-dojo - スキルアップのため全クラスの受講をお奨めします。 - 12回のクラスのうちPAYGアカウントまたはサブスクリプションが必要としない8つのクラスの課題を実施 - 8クラスのうち5クラスの課題について指定された結果を⾃分のアカウントが⾒えるようにスクリーンショットを撮影 - 5クラス分の課題のスクリーンショットをPDFにして以下の宛先に送付 - 提出した課題が承認されるとAcclaimからバッジが発⾏されます。 ※バッジ発⾏のためにこれ以外の処理が発⽣する場合、別途ご連絡させていただきます 2020年6⽉1⽇ お問い合わせは、Online Developer Dojo バッジ事務局 （ビジネス・パートナープログラム ヘルプデスク pprogram@jp.ibm.com ）
8. ハンズオン事前準備 https://ibm.box.com/v/dojoprep20200610 1. IBM Cloudアカウントの取得 2. IBM Cloud CLIのインストール 3. Node.jsのインストール 4. Gitのインストール 5. VS Codeなどコードエディタ 詳細は
9. 学習の⽬的とゴール ⽬的 WatsonとWatson APIの概要について理解する (OpenShiftの詳細はここでは説明しません) ゴール Watson APIを利⽤したアプリケーションを作成できる このコースを学ぶ⽅の想定スキル 何かしらのプログラミング経験があり、Watson APIを初めて 利⽤する⽅
10. 本⽇の説明内容 1. AI & IBM Watson 2. Watson API 3. Watson APIの使い⽅ (課題DEMO) 4. まとめ 5. 課題
11. 1. AI & IBM Watson
12. ⼈⼯知能(AI)は ⼈間の知能のはたらきを模倣し, 機械(技術)で実現した能⼒です。 12
13. ⼈間の知能の例 Human Intelligence 13 計画 学習 創造性 問題解決 推論 知覚 操作
15. 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
16. Cloud上で使えるAIサービス ・・・ Internet PC Azure AWS GCP IBM Cloud Smart Phone Server 各社クラウド Direct Link
17. 17 Watson APIの特徴 • ネットワーク経由でアクセス • REST形式のインターフェイス • Java, Python, Node.jsなどに対応した APIライブラリ(SDK) • https://github.com/watson-developer-cloud
18. 18 Watson APIの特徴 • ネットワーク経由でアクセス • REST形式のインターフェイス • Java, Python, Node.jsなどに対応した APIライブラリ(SDK) • https://github.com/watson-developer-cloud
19. 19 Watson API REST形式のインターフェース ・・・ HTTP Request GET POST PC HTTP Response JSON JSON Azure AWS GCP IBM Cloud Smart Phone Server 各社クラウド
20. RESTインターフェースの例 20 クライアント 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 } ①リクエスト 送信 ③レスポンス 送信
21. 21 Watson APIの特徴 • ネットワーク経由でアクセス • REST形式のインターフェイス • Java, Python, Node.jsなどに対応した APIライブラリ(SDK) • https://github.com/watson-developer-cloud
22. 2. Watson API
23. Watson APIサービス一覧 2020年4⽉現在 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(⽇本語未対応) テキストから筆者の感情、社交性、⽂体を解析 ⼼理系 ⾔語系 照会応答系 知識探索系 ⾳声系 画像系 https://www.ibm.com/watson/jp-ja/developercloud/services-catalog.html 23
24. Watson Assistant 24 ü チャットボットのような対 話アプリケーションの開発 に最適 ü 会話フローをグラフィカル に開発できるツールを提供 ü 作成した会話フローをAPIで 呼び出し Watson: こんにち はシステムサポー トです。何かお困 りですか︖ User: 交通費精算シ ステムだよ。 エンティティー: システム Value: 交通費精算システム Watson: 何のシス テムにログインで きないのですか︖ User: ログインでき ないよ 意図: ログイン不可 Watson:交通費精 算システムにログ インできない場合 のチェック項⽬の URLを送ります http://xxx 交通費精算システムのログイ ン不可にに関する情報を検索 色々な言い回し “ログインエラーになる” “ログインが失敗するけど” 色々な言い回し “交通費のやつ” “精算システム” Webツールで インテント、 エンティ ティー、 会話フロー を作成可能 https://www.ibm.com/watson/jp- ja/developercloud/conversation.html
25. DEMO 25 DOC ID / Month XX, 2018 / © 2018 IBM Corporation Watsonを使⽤したLINE chat bot
26. 参考情報 LINEチャットボットとWatsonを連携する https://ibm.biz/Bd2PEz Watson Assistant⼊⾨ https://cloud.ibm.com/docs/services/assistant?topic=a ssistant-getting-started&locale=ja 26
27. Natural Language Understanding (NLU) üテキストを分析し、概念、エンティ ティー、キーワード、カテゴリー、 感情、関係、意味役割などのメタ データを抽出※ ü事前学習済みであり、学習なしで解 析結果を取得 抽出できるもの • エンティティ(Entities) • 関係(Relations) • 概念(Concepts) • キーワード(Keywords) • 評判 (Sentiment) • 感情 (Emotion) ※ • カテゴリー(Categories) • 構⽂解析(Semantic Roles) ※ 感情分析(Emotion)は⽇本語には対応していません https://www.ibm.com/watson/services/natural-language- understanding/
28. 28 DEMO https://natural-language-understanding-demo.ng.bluemix.net/ 今⽇のニュースからメタデータを抽出してみます
29. üWatsonを利⽤した⽂書検索 エンジン ü膨⼤なテキストデータを取 り込み、NLUで解析、検索に 利⽤ ü⾃然⾔語でも検索できる (またはDiscovery Query Language(DQL)) Discovery https://www.ibm.com/watson/jp-ja/developercloud/discovery.html
30. Discovery News üDiscoveryのインスタンスを作成すると、世界各地のニュー ス記事を保持している、事前作成済み読み取り専⽤コレク ション Discovery News がすぐに使える状態になります。 ・データ登録の必要なしにすぐに使える ・IBM選定の10万のニュースソース ・1⽇当たり30万件以上の記事(⽇本語記事は１⽇あたり17,000件)
31. DEMO 31 気になるニュースを検索してみましょう︕ https://discovery-news-demo.ng.bluemix.net/
32. 32 Visual Recognition • 画像認識「⼀般種別」(General Tagging): • 事前学習済みの分類器の出⼒を返します • 画像認識「カスタム」: • 識別を⾏いたいクラスのイメージを事前学習させ、その 分類器の出⼒を返します。 事前学習 不要 事前学習 必要 https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html
33. DEMO 33 後ほどの「課題」で実際に作成できます
34. DOC ID / Month XX, 2018 / © 2018 IBM Corporation Text to Speech テキスト⽂章を⾳声に変換する https://text-to-speech-demo.ng.bluemix.net DEMO
35. 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
36. 36 © 2018 IBM Corporation Personality Insights テキストから筆者の性格を推定する https://www.ibm.com/watson/jp-ja/developercloud/personality-insights.html DEMO https://personality-insights-demo.ng.bluemix.net/
37. 37 © 2018 IBM Corporation Tone Analyzer(⽇本語未対応) テキストから筆者の感情、社交性、⽂体を 解析する https://tone-analyzer-demo.ng.bluemix.net/
38. 3. Watson APIの使い⽅ (課題DEMO) ここから課題のDEMOになります。 事前準備がお済みの⽅は⼀緒にやってみましょう︕ ここにバッジの取得できるスクショあり
39. Watson APIの使い⽅の基本 39 1. IBM Cloudにログインして必要なサービスを作成 今回はLanguage Translator を使います。 2. 作成したサービスの資格情報である API KEY(API鍵)、URLを取得 3. 取得したAPI KEY、URLを指定してAPIを呼び出す APIの詳細はこちらから確認 https://cloud.ibm.com/apidocs
40. Watson APIの使い⽅の基本 40 1. IBM Cloudにログインして必要なサービスを作成 今回はLanguage Translator を使います。 2. 作成したサービスの資格情報である API KEY(API鍵)、URLを取得 3. 取得したAPI KEY、URLを指定してAPIを呼び出す APIの詳細はこちらから確認 https://cloud.ibm.com/apidocs
41. • IBM Cloud ログイン アカウントをすでにお持ちの⽅は、 IBMidを⼊⼒してこちらからログインしてください 1. IBM Cloudにログイン︕ https://cloud.ibm.com/loginにアクセスしてログインします。 • IBM Cloud ライトアカウント作成 アカウントをお持ちでない⽅は、 ご登録をお願いします 41
42. 42 2. 「カタログ」をクリック
43. 43 3.左側のメニューから 「サービス」→カテゴリ「AI」 をクリック
44. 44 3. スクロールして使いたいWatsonサービスを クリック 今回はLanguage Translatorをクリックしてください。
45. 4. 地域とプランを選んだら「作成」をクリック 45
46. 46 5. 下記のような画⾯に変わったら作成完了!
47. Watson APIの使い⽅の基本 47 1. IBM Cloudにログインして必要なサービスを作成 今回はLanguage Translator を使います。 2. 作成したサービスの資格情報である API KEY(API鍵)、URLを取得 3. 取得したAPI KEY、URLを指定してAPIを呼び出す APIの詳細はこちらから確認 https://cloud.ibm.com/apidocs
48. 48 1. 左側のメニューから「管理」をクリック
49. 49 資格情報にあるAPI KEYとURLをテキストファイルなどにコピーします。 このアイコンで コピーできます ２. API鍵(＝API KEY), URLをコピー バッジプログラム申請 キャプチャー画⾯
50. 50 1 HINT: よくわからない画⾯になった場合 IBM Cloud→すべて表⽰→Services→表⽰させたいサービス名 2 3 4
51. Watson APIの使い⽅の基本 51 1. IBM Cloudにログインして必要なサービスを作成 今回はLanguage Translator を使います。 2. 作成したサービスの資格情報である API KEY(API鍵)、URLを取得 3. 取得したAPI KEY、URLを指定してAPIを呼び出す APIの詳細はこちらから確認 https://cloud.ibm.com/apidocs
52. 52 APIの詳細はこちらからhttps://cloud.ibm.com/apidocs 1. まずはAPIの使い⽅を確認 クリック
53. 53 2. 今回はNodeを使うのでNodeのタブを確認 他の⾔語の SDKから使 う場合は対 応する⾔語 をクリック します
54. 54 3. Translateの使い⽅を確認
55. 55 4-1: ターミナル または コマンドウィンドウを開きます。 4-2: 以下のコマンドでディレクトリを作成し、作成したディ レクトリに移動します。($は⼊⼒しないでください) 4. サンプルコード実⾏ $ mkdir translate $ cd translate 4-3:ターミナル または コマンドウィンドウはそのままにして、 エディター(VSCode, メモ帳(windows), vi(Mac)など)を開き ます。
56. 56 4-4: APIドキュメントにあるExample requestのコードをコ ピーします。 url: https://cloud.ibm.com/apidocs/language-translator?code=node#translate 4. サンプルコード実⾏ このアイコンを クリックして コピーできます
57. 57 4-5: コピーしたコードを開いているエディターにペーストし ます。 4. サンプルコードの実⾏
58. 58 4-6: 7⾏⽬: {apikey}を2でコピーしたAPI鍵で置き換えます。 4. サンプルコードの実⾏ 4-7: 9⾏⽬: {url}を2でコピーしたURLで置き換えます。
59. 59 4-8: 14⾏⽬: 'en-es'を'en-it'で置き換えます。 4. サンプルコードの実⾏
60. 60 4-9: 4-2で作成したディレクトリに translate.js という名前で保存します。 4. サンプルコードの実⾏
61. 61 4-9: APIドキュメントにあるInstallationのコードをコピーしま す。 url: https://cloud.ibm.com/apidocs/language-translator?code=node#introduction 4. サンプルコードの実⾏ このアイコン をクリック してコピー できます
62. 62 4-10: 先ほど開いたターミナル または コマンドウィンドウに 戻り、コピーしたコマンドをペーストし実⾏します。 4. サンプルコードの実⾏ $ npm install ibm-watson@^5.6.0 4-11: 以下のコマンドでtranslate.jsを 実⾏します。 $ node translate.js Macで権限エラーが発⽣する場合は、先頭に sudo をつけて実⾏してください。 sudo npm install ibm-watson@^5.4.0
63. 63 4-12: 実⾏結果は確認できましたか︖ 英語のHelloがイタリア語のCiaoに変換されています。 4. サンプルコードの実⾏ サンプルコード 結果
64. 64 translate.jsを修正し、13⾏⽬のtextを適当な⽇本語の⽂章に、 model_idを'ja-en'にして保存し、実⾏してみましょう。 4. [オプション]サンプルコードの実⾏ A. 翻訳⾔語の変更 サンプルコード 結果 https://cloud.ibm.com/docs/services/language-translator?topic=language-translator-translation-models 使⽤可能なmodel_idはこちら: $ node translate.js 以下をのコマンドを実⾏
65. 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の使⽤
66. 66 4B-1: この資料の46ページ、 44­15ページを参照して、 Language Translationサービス の管理画⾯を表⽰します。 資格情報の「ダウンロード」をク リックし、4-2で作成したディレ クトリにibm-credentials.env と いうファイルを保存します。 4. [オプション]サンプルコードの実⾏ B. Credentials fileの使⽤
67. 67 4B-2: translate.jsを修正し、 IamAuthenticatorの定義をしている2⾏⽬と、APIKEYとURL を指定している6⾏⽬から9⾏⽬部分を//でコメントアウトし、保存します。 4. [オプション]サンプルコードの実⾏ B. Credentials fileの使⽤ 修正前: 修正後:
68. 68 実⾏します。 4. [オプション]サンプルコードの実⾏ B. Credentials fileの使⽤ 4B-3: 以下のコマンドでtranslation.jsを 実⾏します。 $ node translation.js ソースでAPIKEY、URLしてしなくとも、 ibm-credentials.env から読み込まれ正しく実⾏できることを確認します。
69. 4. まとめ Watsonはビジネスで使いやすいAIサービス いろいろなサービスがAPIで呼び出せる SDKで簡単に実装可能
70. おすすめ情報 今すぐ使える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
71. 5. 課題
72. 課題1. 1. 事前準備を完了しましょう http://ibm.biz/dojo20200610doc この資料: https://ibm.box.com/v/20200212DojoPrep 2. 先ほど実施の「 3. Watson APIの使い⽅ 」を完了しましょう
73. バッジプログラム申請 課題のご案内 AIの参加課題は課題1の Language Translatorの管理画⾯（アカウント名表⽰あり） です。 アカウント名表示が途中で省 略されていてもOKです。
74. IBM Watson Visual Recognitionを使った node.jsの画像認識Webアプリ https://github.com/kyokonishito/watson-vr-node をOpenShiftで動かしてみよう! • 課題1を完了していなくとも実施可能(ただしバッジプログラムのスク ショはこの課題では撮れません) 課題2: OpenShift 本⽇中のみ実施可能
75. 質問&ライブ投票参加 はこちら slido.com #dojo610 質問タブで質問⼊⼒ ⾃分も知りたい質問には 「いいね」をプッシュ! 絵⽂字は表⽰されません 最後にDojoアンケートに 回答お願いします 初夏のIBM Dojo #5 AI(Watson API) アプリ開発+ App on OpenShift
76. 操作の流れ 1. ワークショップ⽤の環境へのIBM Cloud ID関連付け 2. IBM Cloud Shellの準備 3. Visual Recognitionサービスの作成 4. 資格情報のダウンロード 5. 資格情報のアップロード 6. OpenShiftアプリの作成
77. 1. ワークショップ⽤のIBM Cloud環境にご⾃⾝の IBM Cloud IDを関連付ける 注意事項 ・ブラウザはFirefoxをご利⽤ください ・本ワークショップ⽤のIBM Cloud環境はセミナー開催時から 24時間限定でお使いいただけます ・IBM Cloud上で継続的にOpenShiftを検証する環境が 必要な場合は、有料のOpenShiftをご利⽤ください
78. 1.1: 下記URLにFirefoxブラウザでアクセスする https://oswatson.mybluemix.net 1.2: [Lab Key] 、[Your IBMid]にご⾃⾝のIDを ⼊⼒し、チェックボックスにチェックを⼊れて [Submit]をクリックする Lab Keyは oslab です。
79. 1.3: Congratulations! が表⽰されたら [IBM Cloud account] リンクをクリックし、再度ログイン
80. 1.5: IBM Cloudダッシュボードの右上のアカウント情報の 右横の v をクリックする 1.6:[1840867– Advowork] をクリックする
81. 1.7: IBM Cloudダッシュボードの右上のアカウント情報が 変更されたことを確認し、[リソースの要約]の [Clusters]をクリックする
82. 1.8: Clustersの下のクラスター名をクリックする ※本ワークショップではこちらのクラスタを使⽤します ※クラスター名は⾃動的に割り当てられます
83. 1.9: [OpenShift Webコンソール]ボタンをクリックします。
84. 1.10: Securityの警告が表⽰された場合は、 [Advanced]→[Accept the Risk and Continue]を クリックします。 (⾃⼰証明書を使⽤しているため警告が出ます)
85. 1.11: [OpenShift Container Platform]画⾯が表⽰されたら 右上のアカウント情報の隣の ▼ をクリックし、 [Copy Login Command]を選択する
86. 1.12: [Display Token] をクリックし、 [Log in with this token ]の下のコマンドをコピーする マウスで選択して クリップボードに コピー
87. 2. IBM Cloud Shellの準備 2.1:ブラウザーで最初に開いていたIBM Cloudのクラスターの 概要が表⽰されているタブをクリックする タブが⾒つからない場合は cloud.ibm.comにアクセス
88. 2.2: 上のメニューからIBM Cloudシェルのアイコン をクリック
89. 2.3: ブラウザで新しいタブが開き、しばらく待つとIBM Cloud Shellのセッションが開始されます。
90. 2.4: 前章1.11でコピーしたコマンドをペーストし実⾏する 2.5:「Using project "default"」が表⽰されれば OKです
91. 3. Visual Recognitionサービスの作成 Visual Recognitionを新規に作成する⽅は次のページに進んでください。 既に以前に作成済みの⽅は、作成済みのものが使⽤できます。 作成済みの⽅は以下の⼿順を参照しVisual Recognitionの管理の画⾯を表⽰後、 http://ibm.biz/watson-service-screen 当資料「4. Visual Recognitionサービスibm-credentials.env のダウンロード」まで進んでく ださい。 ブラウザー上で、新しいタブを開きます。 https://cloud.ibm.com/ にアクセスして、ダッシュボードを開きます。 1840867– Advowork ではなく⾃分のアカウントになっていることを確認し、異 なっている場合はクリックして変更します
92. 3.1 上部のメニューにある「カタログ」をクリックします 次に左側のメニューから“サービス”を洗濯してください。
93. 3.2 Visual Recognitionサービスの選択 1. 左側のメニューから「AI」をクリック 2. 下にスクロールして表⽰された「Visual Recognition」をクリック
94. リージョンの選択は「ダラス」、価格プランに「ライト」が選択されていることを確認して、 「作成」をクリック 3.3 Visual Recognitionサービスを作成する
95. 3.4 Visual Recognitionサービスを作成確認、管理画⾯の表⽰ 下の画⾯が出たら、作成完了です。 左のメニューから「管理」をクリックして次に進んでください。
96. 資格情報の「ダウンロード」をクリックし、⾃分のPCにibm-credentials.env というファイルを保存します。 4. Visual Recognitionサービス ibm-credentials.env のダウンロード
97. 5. ibm-credentials.env のアップロード 5.1. ブラウザーのIBM Cloud Shellのタブをクリックし て表⽰します。
98. 5. ibm-credentials.env のアップロード 5.2. メニューバーのアップロードアイコンをクリック、 ibm-credentials.envを指定してアップロード
99. 5. ibm-credentials.env のアップロード 5.3 Completedになったら、XをクリックしてTransferの ウィンドウを閉じる
100. 5. ibm-credentials.env のアップロード 5.4 ファイルアップロードを確認 ls ターミナルに下記コマンドを⼊⼒し、確認します。 出⼒例: 尚、今後のコマンドは以下からコピペできます https://ibm.box.com/v/openshift-101-command
101. 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 アプリの作成 出⼒例:
102. 6.2. アプリケーションの作成 ターミナルに下記のコマンドを⼊⼒し、 githubのソースコードから、アプ リケーションを作成します。 (コマンドは１⾏です。コマンドは以下からコピペできます。 https://ibm.box.com/v/openshift-101-command) oc new-app https://github.com/kyokonishito/watson-vr-node.git --build-env-file=./ibm-credentials.env --build-env CLASSIFIER_ID=food 6. OpenShiftアプリの作成
103. 6.2. アプリケーションの作成 出⼒例: 6. OpenShiftアプリの作成
104. 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 ターミナルに下記のコマンドを⼊⼒し実⾏します。 (コマンドは１⾏です。コマンドは以下からコピペできます。 https://ibm.box.com/v/openshift-101-command) 6. OpenShiftアプリの作成
105. 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 にブラウザでアクセスします。
106. 6.6 ブラウザーでアプリケーションにアクセスします アプリケーションは表⽰できましたか? ボタンを押して動作確認してみましょう! 「ファイルの選択」から写真を選んだ後、各⻘ボタンを クリックして、Visual Recognitionの結果を確認します。 • Watsonで認識（Watson学習済みモデルを利⽤): • Watsonが写真を認識した内容を表⽰します。 • Watsonで認識（カスタムモデルを利⽤): • IBM提供の⾷品に特化したカスタムモデルFoodで認識し たクラスを表⽰します。 ※スマートフォンでの確認 ⼀番下にQRコードが表⽰されているので、それをスマートフォ ンのカメラで読んでアプリケーションのURLにアクセすると、ス マートフォンでも結果を確認できます。 スマートフォンでは「ファイルの選択」ボタンでその場で撮った 写真も認識可能です。
107. [オプション] ブラウザーでOpenShift Web Consoleに アクセスして作成したアプリを確認 1/2(1.10で開いたWeb画⾯ です) ←Projectsをクリック 下にスクロールすると watson-vr プロジェクト があるので、クリックし ます。
108. [オプション] ブラウザーでOpenShift Web Consoleに アクセスして作成したアプリを確認 2/2 ↑このあたりをクリックするといろいろ情報が⾒れます 下にスクロール
109. アプリケーション⼀式の削除 oc delete all -lapp=watson-vr-node ターミナルに下記のコマンドを⼊⼒し実⾏します。 プロジェクトの削除 oc delete project watson-vr ターミナルに下記のコマンドを⼊⼒し実⾏します。 [オプション]作成したアプリ・プロジェクトの削除 作成したものを削除したい場合のみ下記のコマンドを実⾏してください
110. IBM Watson Visual Recognitionを使った node.jsの画像認識Webアプリの作成 https://github.com/kyokonishito/watson-vr-node • IBM CloudのCloud Foundry環境にDeployします • 必ずクレジットカード登録のない「ライトアカウント」で実施してくだ さい(クレジットカード登録のあるPAYGアカウントでは課⾦が発⽣しま す）。 • 「 2. Visual Recognition サービスの作成」の「6.(オプション) カスタ ム分類クラスの作成」はオプションです。とりあえず⾶ばして実施し、 時間があればチャレンジしてみてください。 課題3 (オプション)
111. IBM CloudのCloud Foundry アプリケーションはクレジットカードを登録したPAYGアカウントの場合、課⾦対 象になります。またライトアカウントの場合は最⼤256Mまでしかメモリが使⽤できませんので、新しいアプリ ケーションを動かしたい場合は、使っていないアプリケーションを停⽌しないと動かない場合があります。 必要に応じてアプリケーションを停⽌お願いします。 停⽌の⽅法はこちら: IBM Cloud: Cloud Foundry アプリケーションの停⽌・開始 https://qiita.com/nishikyon/items/3356db8bb4c1524517be 課題3: オプション:補⾜
112. IBM Code Patterns https://ibm.biz/ibmcodejp 解説 + デモ動画 + ソースコードが揃ったアプリ開発パターン集
113. 開発者向けサイト IBM Developer https://ibm.biz/IBMDevJP 最新情報やスキルアップに役⽴つ6,000を超える技術記事を提供
114. #CallforCode
115. 2020 Call for Code グローバル・チャレンジ 今回のテーマは「気候変動」と「COVID-19」 • IBM Cloudを活⽤したアプリ開発コンテスト • 「⼀般向け*」と「IBMer向け」に開催 4/27 (⽉) ⼀般 COVID19 早期締切 3/22 (⽇) 応募受付 開始 審査期間 8〜9⽉ 10⽉ 最優秀賞 チーム発表 6/30 (⽕) IBMer 応募受付 最終締切 7/31 (⾦) ⼀般 応募受付 最終締切 * IBM Corporationとその法⼈、それらが所有する⼦会社の51％以上および、 Red Hat Inc.とそのすべての⼦会社は「⼀般向け」Call for Code 2020には 参加できませんのでご注意ください。IBM社員は詳しくは社内w3サイトで。 #CallforCode
116. callforcode.org ⽇本語情報 https://ibm.biz/c4cjapan ⽇本語 English #CallforCode オンライン説明会 4⽉17⽇(⾦) 12:15-13:00 19:15-20:00
117. 免責事項 117 IBM Developer Dojoは開発者の⽅を対象に、IBM Cloudを主とした技術情報をお伝えする⽬的で開催しています。 講師や運営スタッフにより、開催毎に最適と判断した内容でお届けしています。 現在、ハンズオンを伴う講義はお客様の費⽤負担がない環境と⼿順でご案内しています。講義終了後、不要に なりました制作物はお客様ご⾃⾝で削除をお願いいたします。クレジットカードの登録が伴わない場合、費⽤は ⼀切発⽣致しませんが、ご登録いただいたお客様はご注意ください。 講師陣はみなさまの利⽤状況を個別に確認することはできません。 ご理解とご協⼒をお願いいたします。 利⽤したサービスの削除⽅法については講義の中でご案内します。 ご不明な点がございましたら、当⽇確認をお願いいたします。 講義終了後、 IBM Developer Dojoに関するお問い合わせは「Slack」にお願いします。それ以外のIBM Cloudの お問い合わせにつきましては、弊社サポートセンターまで、次のいづれかの⽅法でお問い合わせください。 IBM Cloudダッシュボードの「サポート」メニューから「Case」を作成し、英語でご記⼊ください IBM Cloudサポートセンター「相談する」ボタンからチャットまたは電話でご連絡ください https://www.ibm.com/jp-ja/cloud/support ご参加ありがとうございました。