IBM Dojo 30分で作る翻訳アプリ Node-RED & IBM Noriko Kato 2021/04/28 #IBMDojo

⾃⼰紹介 2 加藤典子(Noriko Kato) カスタマー・サクセス・マネージャー Federated Developer Advocate IBM @noricokt お気軽にフォローください！

学習の⽬的とゴール ⽬的 IBM Cloudでビジュアルプログラミングを実践する ゴール IBM CloudでNode-REDアプリケーションを構築できる クラウドAIサービスを組み込むことができる このコースを学ぶ⽅の想定スキル PCの基本操作が可能な⽅ 3

⽬次 ハンズオン準備 Node-RED Appのセットアップ Node-REDでビジュアルプログラミング 各機能の説明 ハンズオン 翻訳アプリの作成 4

アカウントの登録 アカウントの登録 登録にはe-Mail アドレスが必要です。 使⽤するアカウントはライトアカウントです。 ハンズオンで次のサービスを利⽤します。 Cloud Foundry アプリSDK for Node.js™ Continuous Delivery, Toolchain 既に作成ずみのアプリがあり削除できない⽅は 新しいアカウントを取得してください。 次のサービスも利⽤します。作成済みの⽅は再利⽤ができます。 Speech to Text,Language Translator,Text to Speech 5 こちらのURLからアクセスをお願いします。 https://ibm.biz/Bdff4t

ハンズオン準備 Node-RED Appを起動 6 ＊事前チェック リソース使⽤状況を確認 不要なものは削除する ①IBM Cloudの検索 “ Node-RED” と検索する カタログの Node-RED App を クリック

3. Node-REDでビジュアルプログラミング アプリケーションの起動 7 ①NodeーREDス App起動、 始めにをクリック ②アプリ名を適宜修正 （Uniqueである必要がある) ③作成ボタンをクリック ロケーションは任意で変更

ハンズオン準備 サービスの作成 8 ①サービスの作成をクリック ② AIを選択し、次へをクリック

ハンズオン準備 サービスの作成 9 ①対象にサービスを選択し 次へをクリック ② リージョンを任意で修正し 次へをクリック Speech to Text Language Translator Text to Speech （サービスの作成から3回繰り返す）

ハンズオン準備 アプリケーションのデプロイ 10 ①アプリのデプロイを クリック

ハンズオン準備 アプリケーションの起動 11 ①デプロイメント⾃動化で Cloud Foundry を選択 IBM Cloud API鍵の 新規をクリック ②ポップアップが表⽰され たらOKをクリック ③インスタンスの数、メモ リは初期値のまま リージョンを確認、ホスト 名のチェックが完了したら 次へをクリック

ハンズオン準備 デプロイメント待機（準備は①まで） 12 ①Delivery Pipeline が表⽰ ステージは進⾏中になる ②Statusがグリーンになる まで15分くらいかかる

Node-REDでビジュアルプログラミング Node-REDの紹介 IBM 英国Hursley研究所のEmerging Technology Team で開発されたソフトウエア 2013年の社内ハッカソンでMQTTプロトコルを可視化するためのツールとして作成さ れ⼀位を獲得、GitHubにソースを公開、翌年QConで発表、2016年よりオープンソー スプロジェクトとして始動 13

Node-REDでビジュアルプログラミング Node-REDの特徴 14 機能をNodeにカプセル化して利⽤ ブラウザUIでフローをつないでコントロール • 各種APIが呼び出せる • Node.js ベースで軽量 • 3000を超える豊富なNode • Nodeの⾃作も可能 IBM Cloud

Node-REDでビジュアルプログラミング ノードの追加とコードの読み込み 15 ① フローエディタ右「ハン バーガーメニュー」より パレットの管理をクリック ②ノードを追加タブを選択 検索キーワードを⼊⼒し該当 ノードで「ノードを追加」 ③ノードの情報を参照、確認 して追加をクリック

Node-REDでビジュアルプログラミング Nodeの分類（⼀部のみ） 16 Nodeカテゴリ 機能 共通 インジェクトやデバックなど 入力 イベントの起動条件の設定 出力 外部アプリへの送信 機能 分岐、受信データの変換、一時停止機能など ストレージ データ保存、検索 IBM Watson IBM Cloud のAI機能など コネクタが右にある →イベントの起動 コネクタが左右にある →データの分岐や変換 コネクタが右にある →データ保存や外部アプリの起動

Node-REDでビジュアルプログラミング 利⽤するNode 17 Node 機能 Inject 定期起動、ノードのクリック →現在時刻や文字列を渡す Debug フローで受け取った情報を表示 Switch 条件に応じてフローを分岐させる Delay フローを待機させる microphone マイクからの入力値を取得する 追加Node Play audio データを音声出力する 追加Node

Node-REDでビジュアルプログラミング アプリケーションの起動（準備の続き） 18 ①Delivery Pipeline が表⽰ されたらクリック ②Statusがグリーンになる まで待つ（15分くらい） デプロイされたら、コン ソールを表⽰をクリック

Node-REDでビジュアルプログラミング Node-REDの起動 19 ①NodeーREDのアプリURL をクリック ②パスワードの設定をする、 他のパネルは次へをクリック ②NodeーREDのフローエ ディタをクリック

Node-REDでビジュアルプログラミング ノードの追加とコードの読み込み 20 ① フローエディタ右「ハン バーガーメニュー」より パレットの管理をクリック ②ノードを追加タブを選択 検索キーワードを⼊⼒し該当 ノードで「ノードを追加」 ③ノードの情報を参照、確認 して追加をクリック

Node-REDでビジュアルプログラミング Node-REDを実⾏してみよう 21 ①デバックタブに切り替える ②左側のボタンをクリック ③実⾏結果の確認

Node-REDでビジュアルプログラミング 接続が⾜りない場合の処理︓Watson APIの接続 22 ①カタログ / サービス AIから3サービスを⽴ち上げ Speech to Text Language Translator, Text to Speech

Node-REDでビジュアルプログラミング 接続が⾜りない場合の処理︓ Watson APIの接続 23 ①リソースからNode-REDア プリケーション/接続より 接続の作成をクリック ②サービスをひとつづつ選択、 Nextをクリック、毎回「再ス テージの確認」が出るが、途 中はキャンセル、最後の１回 のみ再ステージする

Node-REDでビジュアルプログラミング ノードの追加の読み込み 24 ① フローエディタ右「ハン バーガーメニュー」より パレットの管理をクリック ②ノードを追加タブを選択 検索キーワードを⼊⼒し該当 ノードで「ノードを追加」 ③ノードの情報を参照、確認 して追加をクリック 追加するノード node-red-contrib-browser-utils node-red-contrib-play-audio

Node-REDでビジュアルプログラミング コードの読み込み GitHubに公開されているJSONファイルをコピーし、インポートします。 https://github.com/johnwalicki/NodeRED-Starter-Universal-Translator/blob/master/flows/NodeRED-UniversalTranslator-flow.json リンク先”NodeRED-UniversalTranslator -flow.json”の全⽂を選択しクリップボードに コピーします。 25

Node-REDでビジュアルプログラミング コードの読み込み 26 ① フローエディタ右「ハン バーガーメニュー」より 読み込みをクリック ②クリップボードからJSON 形式のフローデータをはりつ けます。 ③読み込みをクリック ＊読み込み先は任意で選択

Node-REDでビジュアルプログラミング デプロイして試しましょう microphone をクリックすると録⾳開始、再度クリックするとフローが実⾏されます。 27

作成したアプリケーションの削除⽅法 リソースリスト 現在利⽤しているサービスが確認できます。 各サービス右側の（・・・）から削除ができます。 28 クリックすると、以下の メニューが表⽰され編集 や削除ができます サービスの状況が確認で きます

資料紹介 ⼊⾨ 多⾔語会議や1on1にNodeーRED翻訳機能をこっそり仕込もう https://qiita.com/norikokt/items/ae46b26ba4d57d89e27a 中級者向け Webアプリケーション構築でNode-REDを初めてみよう https://speakerdeck.com/taijihagino/start-node-red-with- web-app 29

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

アンケート 募集案内 アンケートのお願い Customer Success Manager 募集中 https://www.sli.do/ #dojo0428pm