Tweet
Tweet

Slide 1

Slide 1 text

Extra 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

質問&ライブ投票参加 はこちら slido.com #dojo629 質問タブで質問⼊⼒ ⾃分も知りたい質問には 「いいね」をプッシュ! Extra Dojo #5 AI(Watson API) アプリ開発+ App on OpenShift https://app.sli.do/event/ti8ona9z スマホまたはPCでアクセスして ぜひ参加お願いします︕

Slide 4

Slide 4 text

本⽇のタイムテーブル 14:00-14:05 (5min) オープニング 資料ダウンロード,出席登録など 14:05-15:00 (55min) AI (Watson API) <座学+DEMO> 15:00-15:15 (15min) 課題の説明とQ&A Q

Slide 5

Slide 5 text

本⽇の資料 本⽇の資料は以下のリンクにあります。こちらから PCにダウンロードお願いします。URLをクリックしたり、 コマンドをコピペしたりできますので、サイトでみるのではな く、ダウンロードをお勧めします。(connpassの資料にもリン クあり) http://ibm.biz/dojo20200629doc

Slide 6

Slide 6 text

出席登録 こちらのURLにアクセスして、IBM Cloudにログイン お願いします。 https://ibm.biz/dojo0629 アカウント未登録の⽅も こちらから登録お願いします。

Slide 7

Slide 7 text

新しい取り組み“バッジ取得プログラム”のご案内 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 ）

Slide 8

Slide 8 text

ハンズオン事前準備 https://ibm.box.com/v/dojoprep20200610 1. IBM Cloudアカウントの取得 2. IBM Cloud CLIのインストール 3. Node.jsのインストール 4. Gitのインストール 5. VS Codeなどコードエディタ 詳細は

Slide 9

Slide 9 text

学習の⽬的とゴール ⽬的 WatsonとWatson APIの概要について理解する (OpenShiftの詳細はここでは説明しません) ゴール Watson APIを利⽤したアプリケーションを作成できる このコースを学ぶ⽅の想定スキル 何かしらのプログラミング経験があり、Watson APIを初めて 利⽤する⽅

Slide 10

Slide 10 text

本⽇の説明内容 1. AI & IBM Watson 2. Watson API 3. Watson APIの使い⽅ (課題DEMO) 4. まとめ 5. 課題

Slide 11

Slide 11 text

1. AI & IBM Watson

Slide 12

Slide 12 text

⼈⼯知能(AI)は ⼈間の知能のはたらきを模倣し, 機械(技術)で実現した能⼒です。 12

Slide 13

Slide 13 text

⼈間の知能の例 Human Intelligence 13 計画 学習 創造性 問題解決 推論 知覚 操作

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 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 16

Slide 16 text

Cloud上で使えるAIサービス ・・・ Internet PC Azure AWS GCP IBM Cloud Smart Phone Server 各社クラウド Direct Link

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形式のインターフェイス • REpresentational State Transferの略。Web APIを実装する際 の代表的なアーキテクチャの⼀つ。 • Java, Python, Node.jsなどに対応した APIライブラリ(SDK) • https://github.com/watson-developer-cloud

Slide 19

Slide 19 text

19 Watson API REST形式のインターフェース ・・・ HTTP Request GET POST PC HTTP Response JSON JSON Azure AWS GCP IBM Cloud Smart Phone Server 各社クラウド

Slide 20

Slide 20 text

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 } ①リクエスト 送信 ③レスポンス 送信

Slide 21

Slide 21 text

21 Watson APIの特徴 • ネットワーク経由でアクセス • REST形式のインターフェイス • Java, Python, Node.jsなどに対応した APIライブラリ(SDK) • https://github.com/watson-developer-cloud

Slide 22

Slide 22 text

2. Watson API

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Watson Assistant 24 ü チャットボットのような対 話アプリケーションの開発 に最適 ü 会話フローをグラフィカル に開発できるツールを提供 ü 作成した会話フローをAPIで 呼び出し Watson: こんにち はシステムサポー トです。何かお困 りですか︖ User: 交通費精算シ ステムだよ。 エンティティー: システム Value: 交通費精算システム Watson: 何のシス テムにログインで きないのですか︖ User: ログインでき ないよ 意図: ログイン不可 Watson:交通費精 算システムにログ インできない場合 のチェック項⽬の URLを送ります http://xxx 交通費精算システムのログイ ン不可にに関する情報を検索 色々な言い回し “ログインエラーになる” “ログインが失敗するけど” 色々な言い回し “交通費のやつ” “精算システム” Webツールで インテント、 エンティ ティー、 会話フロー を作成可能 https://www.ibm.com/watson/jp- ja/developercloud/conversation.html

Slide 25

Slide 25 text

DEMO 25 DOC ID / Month XX, 2018 / © 2018 IBM Corporation Watsonを使⽤したLINE chat bot

Slide 26

Slide 26 text

参考情報 Watson Assistant⼊⾨ https://cloud.ibm.com/docs/services/assistant?topic=a ssistant-getting-started&locale=ja 26

Slide 27

Slide 27 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 28

Slide 28 text

28 DEMO https://natural-language-understanding-demo.ng.bluemix.net/ 今⽇のニュースからメタデータを抽出してみます

Slide 29

Slide 29 text

üWatsonを利⽤した⽂書検索 エンジン ü膨⼤なテキストデータを取 り込み、NLUで解析、検索に 利⽤ ü⾃然⾔語でも検索できる (またはDiscovery Query Language(DQL)) Discovery https://www.ibm.com/watson/jp-ja/developercloud/discovery.html

Slide 30

Slide 30 text

Discovery News üDiscoveryのインスタンスを作成すると、世界各地のニュー ス記事を保持している、事前作成済み読み取り専⽤コレク ション Discovery News がすぐに使える状態になります。 ・データ登録の必要なしにすぐに使える ・IBM選定の10万のニュースソース ・1⽇当たり30万件以上の記事(⽇本語記事は１⽇あたり17,000件)

Slide 31

Slide 31 text

DEMO 31 気になるニュースを検索してみましょう︕ https://discovery-news-demo.ng.bluemix.net/

Slide 32

Slide 32 text

32 Visual Recognition • 画像認識「⼀般種別」(General Tagging): • 事前学習済みの分類器の出⼒を返します • 画像認識「カスタム」: • 識別を⾏いたいクラスのイメージを事前学習させ、その 分類器の出⼒を返します。 事前学習 不要 事前学習 必要 https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html

Slide 33

Slide 33 text

DEMO 33 後ほどの「課題」で実際に作成できます

Slide 34

Slide 34 text

Text to Speech テキスト⽂章を⾳声に変換する https://text-to-speech-demo.ng.bluemix.net DEMO

Slide 35

Slide 35 text

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 36

Slide 36 text

36 Personality Insights テキストから筆者の性格を推定する https://www.ibm.com/watson/jp-ja/developercloud/personality-insights.html DEMO https://personality-insights-demo.ng.bluemix.net/

Slide 37

Slide 37 text

37 Tone Analyzer(⽇本語未対応) テキストから筆者の感情、社交性、⽂体を 解析する https://tone-analyzer-demo.ng.bluemix.net/

Slide 38

Slide 38 text

3. Watson APIの使い⽅ (課題DEMO) ここから課題のDEMOになります。 事前準備がお済みの⽅は⼀緒にやってみましょう︕ ここにバッジの取得できるスクショあり

Slide 39

Slide 39 text

Watson APIの使い⽅の基本 39 1. IBM Cloudにログインして必要なサービスを作成 今回はLanguage Translator を使います。 2. 作成したサービスの資格情報である API KEY(API鍵)、URLを取得 3. 取得したAPI KEY、URLを指定してAPIを呼び出す APIの詳細はこちらから確認 https://cloud.ibm.com/apidocs

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

• IBM Cloud ログイン アカウントをすでにお持ちの⽅は、 IBMidを⼊⼒してこちらからログインしてください 1. IBM Cloudにログイン︕ https://cloud.ibm.com/loginにアクセスしてログインします。 • IBM Cloud ライトアカウント作成 アカウントをお持ちでない⽅は、 ご登録をお願いします 41

Slide 42

Slide 42 text

42 2. 「カタログ」をクリック

Slide 43

Slide 43 text

43 3.左側のメニューから 「サービス」→カテゴリ「AI」 をクリック

Slide 44

Slide 44 text

44 3. スクロールして使いたいWatsonサービスを クリック 今回はLanguage Translatorをクリックしてください。

Slide 45

Slide 45 text

4. 地域とプランを選んだら「作成」をクリック 45

Slide 46

Slide 46 text

46 5. 下記のような画⾯に変わったら作成完了!

Slide 47

Slide 47 text

Watson APIの使い⽅の基本 47 1. IBM Cloudにログインして必要なサービスを作成 今回はLanguage Translator を使います。 2. 作成したサービスの資格情報である API KEY(API鍵)、URLを取得 3. 取得したAPI KEY、URLを指定してAPIを呼び出す APIの詳細はこちらから確認 https://cloud.ibm.com/apidocs

Slide 48

Slide 48 text

48 1. 左側のメニューから「管理」をクリック

Slide 49

Slide 49 text

49 資格情報にあるAPI KEYとURLをテキストファイルなどにコピーします。 このアイコンで コピーできます ２. API鍵(＝API KEY), URLをコピー バッジプログラム申請 キャプチャー画⾯

Slide 50

Slide 50 text

50 1 HINT: よくわからない画⾯になった場合 IBM Cloud→すべて表⽰→Services→表⽰させたいサービス名 2 3 4

Slide 51

Slide 51 text

Watson APIの使い⽅の基本 51 1. IBM Cloudにログインして必要なサービスを作成 今回はLanguage Translator を使います。 2. 作成したサービスの資格情報である API KEY(API鍵)、URLを取得 3. 取得したAPI KEY、URLを指定してAPIを呼び出す APIの詳細はこちらから確認 https://cloud.ibm.com/apidocs

Slide 52

Slide 52 text

52 APIの詳細はこちらからhttps://cloud.ibm.com/apidocs 1. まずはAPIの使い⽅を確認 クリック

Slide 53

Slide 53 text

53 2. 今回はNodeを使うのでNodeのタブを確認 他の⾔語の SDKから使 う場合は対 応する⾔語 をクリック します

Slide 54

Slide 54 text

54 3. Translateの使い⽅を確認

Slide 55

Slide 55 text

55 4-1: ターミナル または コマンドウィンドウを開きます。 4-2: 以下のコマンドでディレクトリを作成し、作成したディ レクトリに移動します。($は⼊⼒しないでください) 4. サンプルコード実⾏ $ mkdir translate $ cd translate 4-3:ターミナル または コマンドウィンドウはそのままにして、 エディター(VSCode, メモ帳(windows), vi(Mac)など)を開き ます。

Slide 56

Slide 56 text

56 4-4: APIドキュメントにあるExample requestのコードをコ ピーします。 url: https://cloud.ibm.com/apidocs/language-translator?code=node#translate 4. サンプルコード実⾏ このアイコンを クリックして コピーできます

Slide 57

Slide 57 text

57 4-5: コピーしたコードを開いているエディターにペーストし ます。 4. サンプルコードの実⾏

Slide 58

Slide 58 text

58 4-6: 7⾏⽬: {apikey}を2でコピーしたAPI鍵で置き換えます。 4. サンプルコードの実⾏ 4-7: 9⾏⽬: {url}を2でコピーしたURLで置き換えます。

Slide 59

Slide 59 text

59 4-8: 14⾏⽬: 'en-es'を'en-it'で置き換えます。 4. サンプルコードの実⾏

Slide 60

Slide 60 text

60 4-9: 4-2で作成したディレクトリに translate.js という名前で保存します。 4. サンプルコードの実⾏

Slide 61

Slide 61 text

61 4-9: APIドキュメントにあるInstallationのコードをコピーしま す。 url: https://cloud.ibm.com/apidocs/language-translator?code=node#introduction 4. サンプルコードの実⾏ このアイコン をクリック してコピー できます

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

63 4-12: 実⾏結果は確認できましたか︖ 英語のHelloがイタリア語のCiaoに変換されています。 4. サンプルコードの実⾏ サンプルコード 結果

Slide 64

Slide 64 text

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 以下をのコマンドを実⾏

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の使⽤

Slide 66

Slide 66 text

66 4B-1: この資料の46ページ、 44­15ページを参照して、 Language Translationサービス の管理画⾯を表⽰します。 資格情報の「ダウンロード」をク リックし、4-2で作成したディレ クトリにibm-credentials.env と いうファイルを保存します。 4. [オプション]サンプルコードの実⾏ B. Credentials fileの使⽤

Slide 67

Slide 67 text

67 4B-2: translate.jsを修正し、 IamAuthenticatorの定義をしている2⾏⽬と、APIKEYとURL を指定している6⾏⽬から9⾏⽬部分を//でコメントアウトし、保存します。 4. [オプション]サンプルコードの実⾏ B. Credentials fileの使⽤ 修正前: 修正後:

Slide 68

Slide 68 text

68 実⾏します。 4. [オプション]サンプルコードの実⾏ B. Credentials fileの使⽤ 4B-3: 以下のコマンドでtranslation.jsを 実⾏します。 $ node translation.js ソースでAPIKEY、URLしてしなくとも、 ibm-credentials.env から読み込まれ正しく実⾏できることを確認します。

Slide 69

Slide 69 text

4. まとめ 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

Slide 71

Slide 71 text

5. 課題

Slide 72

Slide 72 text

課題1. 1. 事前準備を完了しましょう http://ibm.biz/dojo20200629doc この資料: 2. 先ほど実施の「 3. Watson APIの使い⽅ 」を完了しましょう https://ibm.box.com/v/dojoprep20200610

Slide 73

Slide 73 text

バッジプログラム申請 課題のご案内 AIの参加課題は課題1の Language Translatorの管理画⾯（アカウント名表⽰あり） です。 アカウント名表示が途中で省 略されていてもOKです。

Slide 74

Slide 74 text

IBM Watson Visual Recognitionを使った node.jsの画像認識Webアプリ https://github.com/kyokonishito/watson-vr-node をOpenShiftで動かしてみよう! • 課題1を完了していなくとも実施可能(ただしバッジプログラムのスク ショはこの課題では撮れません) 課題2: OpenShift

Slide 75

Slide 75 text

操作の流れ 1. IBM DemosでOpenShift環境の準備 2. IBM Cloud Shellの準備 3. Visual Recognitionサービスの作成 4. 資格情報のダウンロード 5. 資格情報のアップロード 6. OpenShiftアプリの作成 注意事項 • ブラウザはFirefoxまたはChromeをご利⽤ください。 • 同時最⼤使⽤⼈数に限りがありますので、IBM DemosのLabにアクセスできない場合は時間をおいて試して みてください。

Slide 76

Slide 76 text

https://www.ibm.com/demos/ 1.デモサイトの準備 1. IBM DemosでOpenShift環境の準備 1.1: 下記URLにFirefoxまたはChromeブラウザでアクセスする

Slide 77

Slide 77 text

1.2: 下にスクロールして 「Red Hat OpenShift on IBM Cloud」をクリック

Slide 78

Slide 78 text

1.3: 下にスクロールして 「Hands on Labs for RedHat OpenShift on IBM Cloud」をクリック

Slide 79

Slide 79 text

1.4:「 Lab1: Red Hat OpenShift on IBM Cloud 4.3 」の 「Launch Lab」をクリック

Slide 80

Slide 80 text

1.5: 「Sign in」をクリックし、IBM CloudのIDでログイン (既に同じブラウザーでIBM Cloudログイン済みの場合は、IDの⼊ ⼒画⾯は表⽰されません)

Slide 81

Slide 81 text

1.6: 下記の様な画⾯が開きます 右側のコマンド画⾯でOpenShiftの操作ができます(今回は使⽤しません)。

Slide 82

Slide 82 text

1.7: 左側のメニューから「Exercise1」→ 「Red Hat OpenShift on IBM Cloud Basics」をクリック

Slide 83

Slide 83 text

1.8: 「Launch the IBM Cloud portal: 」に記載されたURL をクリック

Slide 84

Slide 84 text

1.9: 新しいタブにIBM Cloudのクラスター概要画⾯が開きま す。右上の「OpenShift Webコンソール」をクリックします。

Slide 85

Slide 85 text

1.10: 新しいタブにOpenShift Webコンソール画⾯が開きます。 右上のアカウント情報の隣の ▼ をクリックし [Copy Login Command]をクリックする

Slide 86

Slide 86 text

1.11: 新しいタブに表⽰された[Display Token] をクリックし、 [Log in with this token ]の下のコマンドをコピーする マウスで選択して クリップボードに コピー

Slide 87

Slide 87 text

2. IBM Cloud Shellの準備 2.1: 1.9で開いていたIBM Cloudのクラスターの概要が表⽰さ れているタブをクリックする タブが⾒つからない場 合は cloud.ibm.com にアクセス

Slide 88

Slide 88 text

2.2: 上のメニューからIBM Cloudシェルのアイコン をクリック

Slide 89

Slide 89 text

2.3: ブラウザで新しいタブが開き、しばらく待つとIBM Cloud Shellのセッションが開始されます。

Slide 90

Slide 90 text

2.4: 前章1.11でコピーしたコマンドをペーストし実⾏する 2.5:「Using project "default". Welcome! See 'oc help' to get started. 」 が表⽰されれば OKです

Slide 91

Slide 91 text

3. Visual Recognitionサービスの作成 Visual Recognitionを新規に作成する⽅は次のページに進んでください。 既に以前に作成済みの⽅は、作成済みのものが使⽤できます。 作成済みの⽅は以下の⼿順を参照しVisual Recognitionの管理の画⾯を表⽰後、 http://ibm.biz/watson-service-screen 当資料「4. Visual Recognitionサービスibm-credentials.env のダウンロード」まで進んでく ださい。 ブラウザー上で、新しいタブを開きます。 https://cloud.ibm.com/ にアクセスして、ダッシュボードを開きます。 2029624 DTE Cloud Platform ではなく⾃分のアカウントになっていることを 確認し、異なっている場合はクリックして変更します

Slide 92

Slide 92 text

3.1 上部のメニューにある「カタログ」をクリックします 次に左側のメニューから“サービス”を洗濯してください。

Slide 93

Slide 93 text

3.2 Visual Recognitionサービスの選択 1. 左側のメニューから「AI」をクリック 2. 下にスクロールして表⽰された「Visual Recognition」をクリック

Slide 94

Slide 94 text

リージョンの選択は「ダラス」、価格プランに「ライト」が選択されていることを確認して、 「作成」をクリック 3.3 Visual Recognitionサービスを作成する

Slide 95

Slide 95 text

3.4 Visual Recognitionサービスを作成確認、管理画⾯の表⽰ 下の画⾯が出たら、作成完了です。 左のメニューから「管理」をクリックして次に進んでください。

Slide 96

Slide 96 text

資格情報の「ダウンロード」をクリックし、⾃分のPCにibm-credentials.env というファイルを保存します。 4. Visual Recognitionサービス ibm-credentials.env のダウンロード

Slide 97

Slide 97 text

5. ibm-credentials.env のアップロード 5.1. ブラウザーのIBM Cloud Shellのタブをクリックし て表⽰します。

Slide 98

Slide 98 text

5. ibm-credentials.env のアップロード 5.2. メニューバーのアップロードアイコンをクリック、 ibm-credentials.envを指定してアップロード

Slide 99

Slide 99 text

5. ibm-credentials.env のアップロード 5.3 Completedになったら、XをクリックしてTransferの ウィンドウを閉じる

Slide 100

Slide 100 text

5. ibm-credentials.env のアップロード 5.4 ファイルアップロードを確認 ls ターミナルに下記コマンドを⼊⼒し、確認します。 出⼒例: 尚、今後のコマンドは以下からコピペできます https://ibm.box.com/v/openshift-101-command

Slide 101

Slide 101 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 102

Slide 102 text

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アプリの作成

Slide 103

Slide 103 text

6.2. アプリケーションの作成 出⼒例: 6. OpenShiftアプリの作成

Slide 104

Slide 104 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 ターミナルに下記のコマンドを⼊⼒し実⾏します。 (コマンドは１⾏です。コマンドは以下からコピペできます。 https://ibm.box.com/v/openshift-101-command) 6. OpenShiftアプリの作成

Slide 105

Slide 105 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 106

Slide 106 text

6.6 ブラウザーでアプリケーションにアクセスします アプリケーションは表⽰できましたか? ボタンを押して動作確認してみましょう! 「ファイルの選択」から写真を選んだ後、各⻘ボタンを クリックして、Visual Recognitionの結果を確認します。 • Watsonで認識（Watson学習済みモデルを利⽤): • Watsonが写真を認識した内容を表⽰します。 • Watsonで認識（カスタムモデルを利⽤): • IBM提供の⾷品に特化したカスタムモデルFoodで認識し たクラスを表⽰します。 ※スマートフォンでの確認 ⼀番下にQRコードが表⽰されているので、それをスマートフォ ンのカメラで読んでアプリケーションのURLにアクセすると、ス マートフォンでも結果を確認できます。 スマートフォンでは「ファイルの選択」ボタンでその場で撮った 写真も認識可能です。

Slide 107

Slide 107 text

[オプション] ブラウザーでOpenShift Web Consoleに アクセスして作成したアプリを確認 1/2(1.10で開いたWeb画⾯ です) ←Projectsをクリック 下にスクロールすると watson-vr プロジェクト があるので、クリックし ます。

Slide 108

Slide 108 text

[オプション] ブラウザーでOpenShift Web Consoleに アクセスして作成したアプリを確認 2/2 ↑このあたりをクリックするといろいろ情報が⾒れます 下にスクロール

Slide 109

Slide 109 text

アプリケーション⼀式の削除 oc delete all -lapp=watson-vr-node ターミナルに下記のコマンドを⼊⼒し実⾏します。 プロジェクトの削除 oc delete project watson-vr ターミナルに下記のコマンドを⼊⼒し実⾏します。 [オプション]作成したアプリ・プロジェクトの削除 作成したものを削除したい場合のみ下記のコマンドを実⾏してください

Slide 110

Slide 110 text

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 (オプション)

Slide 111

Slide 111 text

IBM CloudのCloud Foundry アプリケーションはクレジットカードを登録したPAYGアカウントの場合、課⾦対 象になります。またライトアカウントの場合は最⼤256Mまでしかメモリが使⽤できませんので、新しいアプリ ケーションを動かしたい場合は、使っていないアプリケーションを停⽌しないと動かない場合があります。 必要に応じてアプリケーションを停⽌お願いします。 停⽌の⽅法はこちら: IBM Cloud: Cloud Foundry アプリケーションの停⽌・開始 https://qiita.com/nishikyon/items/3356db8bb4c1524517be 課題3: オプション:補⾜

Slide 112

Slide 112 text

IBM Code Patterns https://ibm.biz/ibmcodejp 解説 + デモ動画 + ソースコードが揃ったアプリ開発パターン集

Slide 113

Slide 113 text

開発者向けサイト IBM Developer https://ibm.biz/IBMDevJP 最新情報やスキルアップに役⽴つ6,000を超える技術記事を提供

Slide 114

Slide 114 text

#CallforCode

Slide 115

Slide 115 text

callforcode.org ⽇本語情報 https://ibm.biz/c4cjapan ⽇本語 English #CallforCode

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

質問&ライブ投票参加 はこちら slido.com #dojo629 質問タブで質問⼊⼒ ⾃分も知りたい質問には 「いいね」をプッシュ! Extra Dojo #5 AI(Watson API) アプリ開発+ App on OpenShift https://app.sli.do/event/ti8ona9z 最後にDojoアンケートの回答を スマホまたはPCでアクセスして ぜひ参加お願いします︕

Slide 118

Slide 118 text

免責事項 118 IBM Developer Dojoは開発者の⽅を対象に、IBM Cloudを主とした技術情報をお伝えする⽬的で開催しています。 講師や運営スタッフにより、開催毎に最適と判断した内容でお届けしています。 現在、ハンズオンを伴う講義はお客様の費⽤負担がない環境と⼿順でご案内しています。講義終了後、不要に なりました制作物はお客様ご⾃⾝で削除をお願いいたします。クレジットカードの登録が伴わない場合、費⽤は ⼀切発⽣致しませんが、ご登録いただいたお客様はご注意ください。 講師陣はみなさまの利⽤状況を個別に確認することはできません。 ご理解とご協⼒をお願いいたします。 利⽤したサービスの削除⽅法については講義の中でご案内します。 ご不明な点がございましたら、当⽇確認をお願いいたします。 講義終了後、 IBM Developer Dojoに関するお問い合わせは「Slack」にお願いします。それ以外のIBM Cloudの お問い合わせにつきましては、弊社サポートセンターまで、次のいづれかの⽅法でお問い合わせください。 IBM Cloudダッシュボードの「サポート」メニューから「Case」を作成し、英語でご記⼊ください IBM Cloudサポートセンター「相談する」ボタンからチャットまたは電話でご連絡ください https://www.ibm.com/jp-ja/cloud/support ご参加ありがとうございました。

Slide 119

Slide 119 text

No content