Node-REDで翻訳アプリを作ろう

Node-REDにJSONファイルを読み込み、翻訳アプリを作ります。

Transcript

1. アカウントの登録 アカウントの登録 登録にはe-Mail アドレスが必要です。 使⽤するアカウントはライトアカウントです。 ハンズオンで次のサービスを利⽤します。 Cloud Foundry アプリSDK for Node.js™ Continuous Delivery, Toolchain 既に作成ずみのアプリがあり削除できない⽅は 新しいアカウントを取得してください。 次のサービスも利⽤します。作成済みの⽅は再利⽤ができます。 Speech to Text,Language Translator,Text to Speech 1 こちらのURLからアクセスをお願いします。 https://ibm.biz/BdqucH
2. このセッションではSli.doによるライブ投票を⾏います。 2
3. IBM Dojo IoT/Node-RED入門：翻訳アプリを作ろう Noriko Kato Developer Advocate Tokyo City Team 2020/10/14 #StaySafe #IBMOnlineDojo #NodeRED #IBMだ
4. Group Name / DOC ID / Month XX, 2018 / © 2018 IBM Corporation 4
5. クラウドを選ぶメリット 5 いつでも どこにいても インターネットがあれば }ü 開発できる ü リリースできる ü 試せる
6. 学習の⽬的とゴール ⽬的 IBM Cloudでビジュアルプログラミングを実践する ゴール IBM CloudでNode-REDアプリケーションを構築できる クラウドAIサービスを組み込むことができる このコースを学ぶ⽅の想定スキル PCの基本操作が可能な⽅ IoTに関⼼がある⽅ 6
7. ⽬次 1.ハンズオン準備 Node-RED Appのセットアップ 2.Internet of Things Platform デバイスの設定⽅法の紹介 3.Node-REDでビジュアルプログラミング 各機能の説明 4.ハンズオン 翻訳アプリの作成 7
8. ウェアラブル端末が ヒトの自己管理をサポートして もっと健康的な日常生活 自動運転がより安全に 進化して誰もが自由に活動できる 農業や配送も便利で効率的に メンテナンスをサポートして 便利で安全な社会 スマートシティが 進んでロスのない安全な街 IBM Cloud で実現するIoT IoTを活⽤することで安全で住みやすくなる未来 8
9. 1.ハンズオン準備 アカウントの登録＆ログイン 登録にはe-Mail アドレスが必要です。 使⽤するアカウントはライトアカウントです。 ハンズオンで次のサービスを利⽤します。 Cloud Foundry アプリSDK for Node.js™ Continuous Delivery, Toolchain 既に作成ずみのアプリがあり削除できない⽅は 新しいアカウントを取得してください。 次のサービスも利⽤します。作成済みの⽅は再利⽤ができます。 Speech to Text,Language Translator,Text to Speech 9 こちらのURLからアクセスをお願いします。 https://ibm.biz/BdqucH
10. 1. ハンズオン準備 Node-RED Appを起動 10 ＊事前チェック リソース使⽤状況を確認 不要なものは削除する ①IBM Cloudの検索 “ Node-RED” と検索する カタログの Node-RED App を クリック
11. 3. Node-REDでビジュアルプログラミング アプリケーションの起動 11 ①NodeーREDス App起動、 始めにをクリック ②アプリ名を適宜修正 （Uniqueである必要がある) ③作成ボタンをクリック ロケーションは任意で変更
12. 1. ハンズオン準備 サービスの作成 12 ①サービスの作成をクリック ② AIを選択し、次へをクリック
13. 1. ハンズオン準備 サービスの作成 13 ①対象にサービスを選択し 次へをクリック ② リージョンを任意で修正し 次へをクリック Speech to Text Language Translator Text to Speech （サービスの作成から3回繰り返す）
14. 1. ハンズオン準備 アプリケーションのデプロイ 14 ①アプリのデプロイを クリック
15. 1. ハンズオン準備 アプリケーションの起動 15 ①デプロイメント⾃動化で Cloud Foundry を選択 IBM Cloud API鍵の 新規をクリック ②ポップアップが表⽰され たらOKをクリック ③インスタンスの数、メモ リは初期値のまま リージョンを確認、ホスト 名のチェックが完了したら 次へをクリック
16. 1. ハンズオン準備 デプロイメント待機（準備は①まで） 16 ①Delivery Pipeline が表⽰ ステージは進⾏中になる ②Statusがグリーンになる まで15分くらいかかる
17. 2.Internet of Things Platform IoT活⽤に⽋かせないデバイスの管理プラットフォームです。 17 ü 使⽤状況が確認できる ü デバイスの登録、管理ができる ü アクセス許可メンバーとロールの管理ができる ü アプリケーション接続キーの管理ができる ü セキュリティー定義や設定の確認ができる
18. 2.Internet of Things Platform IoT活⽤に⽋かせないデバイスの管理プラットフォームです。 18 IBM Watson™ IoT Platform は、IoTデバイスから 簡単に価値を引き出せるようにするフルマネージドの クラウド・ホスティング・サービス、MQTTプロトコル を使⽤してデータ送信することができます。
19. にゅう IBM Cloud で実現するIoT Watson IoT Platformの活⽤ 19 Watson IoT Platform デバイス管理 メッセージ転送 死活管理 アプリケーション運用 データ管理 分析 可視化 予測分析 事業戦略
20. 2.Internet of Things Platform IoTデータの収集、視覚化 IBM Cloud資料 / ソリューションチュートリアルより 20 プラットフォームへの登録 と接続動作確認までをStep by Stepでご紹介
21. 2.Internet of Things Platform リソースの確認 ハンズオンの対象ではありませんが、この⼿順を実施される場合、Internet of Things Platform サービスとCloud Foundry アプリケーションが作成されます。ライトアカウントで試す場合は、 作成済みのアプリケーションを削除するなど事前に必要な環境を整えてください。 21
22. 2.Internet of Things Platform Internet of Things Platformの作成 22 ③Internet of Things Platform をクリックする ②検索窓でIoTのキーワードで 検索 ①メニューのカタログを開く
23. 2.Internet of Things Platform Internet of Things Platformの作成 23 ②リソース名を適宜変更する （Uniqueである必要がある） ①プランを確認する ③作成ボタンをクリックする
24. 2.Internet of Things Platform Watson Iot Platformを起動 24 ①起動をクリックする
25. 2.Internet of Things Platform セキュリティーポリシーの設定 25 ①セキュリティーメニューより セキュリティー接続を編集 ②デフォルトの規制よりセキュ リティーレベルをTLSとトーク ン認証を選択し保存する
26. 2.Internet of Things Platform デバイスタイプの登録 26 ⑤次へをクリック ②デバイスタイプのタブを選択 ③デバイスを選択 ④登録するデバイス種類の総称 となる名前を⼊⼒ ①デバイスメニューより
27. 2.Internet of Things Platform デバイスタイプの登録 27 ①終了をクリック Option デバイスタイプの詳細を⼊⼒
28. 2.Internet of Things Platform デバイスタイプの登録 28 ①終了をクリック Option デバイスタイプの詳細を⼊⼒
29. 2.Internet of Things Platform デバイスの登録 29 ①デバイスメニューより ②デバイスを作成します。 をクリックする
30. 2.Internet of Things Platform デバイスの追加 30 ①デバイスタイプに登録した デバイスタイプを選択 ②デバイスIDを⼊⼒ ③次へをクリック
31. 2.Internet of Things Platform デバイスの追加 31 ①認証トークンを⼊⼒ ②次へをクリック
32. 2.Internet of Things Platform デバイスのドリルダウン 32 ①登録情報の確認
33. 2.Internet of Things Platform IBM Cloud Shellを起動 33 ①IBM Cloud画⾯に戻り IBM Cloud Shell (ベータ版)を起動
34. 2.Internet of Things Platform Gitリポジトリを複製してアプリケーションを作成する 34 ① git リポジトリをクローンする git clone https://github.com/IBM-Cloud/iot- device-phone-simulator cd iot-device-phone-simulator ② IBM Cloudにログインする ibmcloud login >e-Mailアドレスの⼊⼒ >Passwordの⼊⼒
35. 2.Internet of Things Platform アプリケーション作成 35 ① 以下のコマンドを実⾏する ibmcloud target --cf ibmcloud cf push ② 追加のインストールが必要なら適宜対応 ③ IoT Solution Tutorial の Status が Startedになっていたら作成完了
36. 2.Internet of Things Platform アプリケーションを起動 36 ① IBM Cloud リソースリストに戻り Cloud Foundryアプリに 「iot-solution-tutorial」が作成されていること を確認 アプリケーションを開く ②iot-solution-tutorial より アプリケーションURL を開く
37. 2.Internet of Things Platform デバイス情報を登録 37 ②スマホで4項⽬を⼊⼒ 情報はデバイスのWatson Iot Platform デバイスメニューのドリルダウン画⾯に表⽰ ①スマホからアプリケーションのURLにアクセス （QRコードに変更すると便利）
38. 2.Internet of Things Platform スマートフォンの傾きを計測 38
39. 2.Internet of Things Platform Watson Iot Platformで状況の確認 39 ①Watson Iot Platform よりデバイスメニュー デバイスの参照、登録したスマートフォンが接 続⾓になっていることを確認 ②アプリから送信された情報を確認 接続済みデバイス情報をクリック 最近のイベント情報が確認でいる イベントを展開すると、スマートフォンアプリ で測定した傾きの値が記録されている
40. 2.Internet of Things Platform Watson Iot Platformのデータを確認 40
41. 2.Internet of Things Platform 今回のチュートリアルデータご紹介 IoT データの収集、視覚化、分析、および異常の検出 41
42. 3. Node-REDでビジュアルプログラミング Node-REDの紹介 IBM 英国Hursley研究所のEmerging Technology Team で開発されたソフトウエア 2013年の社内ハッカソンでMQTTプロトコルを可視化するためのツールとして作成さ れ⼀位を獲得、GitHubにソースを公開、翌年QConで発表、2016年よりオープンソー スプロジェクトとして始動 42
43. 3. Node-REDでビジュアルプログラミング Node-REDの特徴 43 機能をNodeにカプセル化して利⽤ ブラウザUIでフローをつないでコントロール • 各種APIが呼び出せる • Node.js ベースで軽量 • 2500を超える豊富なNode • Nodeの⾃作も可能 IBM Cloud
44. 3.Node-REDでビジュアルプログラミング ノードの追加とコードの読み込み 44 ① フローエディタ右「ハン バーガーメニュー」より パレットの管理をクリック ②ノードを追加タブを選択 検索キーワードを⼊⼒し該当 ノードで「ノードを追加」 ③ノードの情報を参照、確認 して追加をクリック
45. 3. Node-REDでビジュアルプログラミング Nodeの分類（⼀部のみ） 45 Nodeカテゴリ 機能 共通 インジェクトやデバックなど 入力 イベントの起動条件の設定 出力 外部アプリへの送信 機能 分岐、受信データの変換、一時停止機能など ストレージ データ保存、検索 IBM Watson IBM Cloud のAI機能など コネクタが右にある →イベントの起動 コネクタが左右にある →データの分岐や変換 コネクタが右にある →データ保存や外部アプリの起動
46. 3. Node-REDでビジュアルプログラミング 利⽤するNode 46 Node 機能 Inject 定期起動、ノードのクリック →現在時刻や文字列を渡す Debug フローで受け取った情報を表示 Switch 条件に応じてフローを分岐させる Delay フローを待機させる microphone マイクからの入力値を取得する 追加Node Play audio データを音声出力する 追加Node
47. 3. Node-REDでビジュアルプログラミング アプリケーションの起動（準備の続き） 47 ①Delivery Pipeline が表⽰ されたらクリック ②Statusがグリーンになる まで待つ（15分くらい） デプロイされたら、コン ソールを表⽰をクリック
48. 3. Node-REDでビジュアルプログラミング Node-REDの起動 48 ①NodeーREDのアプリURL をクリック ②パスワードの設定をする、 他のパネルは次へをクリック ②NodeーREDのフローエ ディタをクリック
49. 3.Node-REDでビジュアルプログラミング ノードの追加とコードの読み込み 49 ① フローエディタ右「ハン バーガーメニュー」より パレットの管理をクリック ②ノードを追加タブを選択 検索キーワードを⼊⼒し該当 ノードで「ノードを追加」 ③ノードの情報を参照、確認 して追加をクリック
50. 3.Node-REDでビジュアルプログラミング Node-REDを実⾏してみよう 50 ①デバックタブに切り替える ②左側のボタンをクリック ③実⾏結果の確認
51. 3.Node-REDでビジュアルプログラミング 接続が⾜りない場合の処理︓Watson APIの接続 51 ①カタログ / サービス AIから3サービスを⽴ち上げ Speech to Text Language Translator, Text to Speech
52. 3.Node-REDでビジュアルプログラミング 接続が⾜りない場合の処理︓ Watson APIの接続 52 ①リソースからNode-REDア プリケーション/接続より 接続の作成をクリック ②サービスをひとつづつ選択、 Nextをクリック、毎回「再ス テージの確認」が出るが、途 中はキャンセル、最後の１回 のみ再ステージする
53. 3.Node-REDでビジュアルプログラミング ノードの追加の読み込み 53 ① フローエディタ右「ハン バーガーメニュー」より パレットの管理をクリック ②ノードを追加タブを選択 検索キーワードを⼊⼒し該当 ノードで「ノードを追加」 ③ノードの情報を参照、確認 して追加をクリック 追加するノード node-red-contrib-browser-utils node-red-contrib-play-audio
54. 3.Node-REDでビジュアルプログラミング コードの読み込み GitHubに公開されているJSONファイルをコピーし、インポートします。 https://github.com/johnwalicki/NodeRED-Starter-Universal-Translator/blob/master/flows/NodeRED-UniversalTranslator-flow.json リンク先”NodeRED-UniversalTranslator -flow.json”の全⽂を選択しクリップボードに コピーします。 54
55. 3.Node-REDでビジュアルプログラミング コードの読み込み 55 ① フローエディタ右「ハン バーガーメニュー」より 読み込みをクリック ②クリップボードからJSON 形式のフローデータをはりつ けます。 ③読み込みをクリック ＊読み込み先は任意で選択
56. 3.Node-REDでビジュアルプログラミング デプロイして試しましょう microphone をクリックすると録⾳開始、再度クリックするとフローが実⾏されます。 56
57. 作成したアプリケーションの削除⽅法 リソースリスト 現在利⽤しているサービスが確認できます。 各サービス右側の（・・・）から削除ができます。 57 クリックすると、以下の メニューが表⽰され編集 や削除ができます サービスの状況が確認で きます
58. 4.ハンズオン 1) 多⾔語会議や1on1にNodeーRED翻訳機能をこっそり仕込もう https://qiita.com/norikokt/items/ae46b26ba4d57d89e27a 2） IoT データの収集、視覚化、分析、および異常の検出 https://cloud.ibm.com/docs/solution- tutorials?topic=solution-tutorials-gather-visualize- analyze-iot-data&locale=ja 58
59. 免責事項 59 IBM Developer Dojoは開発者の⽅を対象に、IBM Cloudを主とした技術情報をお伝えする⽬的で開催しています。 講師や運営スタッフにより、開催毎に最適と判断した内容でお届けしています。 現在、ハンズオンを伴う講義はお客様の費⽤負担がない環境と⼿順でご案内しています。講義終了後、不要に なりました制作物はお客様ご⾃⾝で削除をお願いいたします。クレジットカードの登録が伴わない場合、費⽤は ⼀切発⽣致しませんが、ご登録いただいたお客様はご注意ください。 講師陣はみなさまの利⽤状況を個別に確認することはできません。 ご理解とご協⼒をお願いいたします。 利⽤したサービスの削除⽅法については講義の中でご案内します。 ご不明な点がございましたら、当⽇確認をお願いいたします。 講義終了後、 IBM Developer Dojoに関するお問い合わせは「Slack」にお願いします。それ以外のIBM Cloudの お問い合わせにつきましては、弊社サポートセンターまで、次のいづれかの⽅法でお問い合わせください。 IBM Cloudダッシュボードの「サポート」メニューから「Case」を作成し、英語でご記⼊ください IBM Cloudサポートセンター「相談する」ボタンからチャットまたは電話でご連絡ください https://www.ibm.com/jp-ja/cloud/support ご参加ありがとうございました。
60. おすすめ情報 –開発者向けサイトIBM Developer 60 ibm.biz/IBMDevJP 最新情報やスキルアップに役⽴つ6,000を超える技術記事を提供
61. おすすめ情報 –IBM CODE Patterns 61 https://ibm.biz/ibmcodejp 解説 + デモ動画 + ソースコードが揃ったアプリ開発パターン集
62. おすすめ情報 –IBM CODE Patterns 62 https://ibm.biz/ibmcodejp 解説 + デモ動画 + ソースコードが揃ったアプリ開発パターン集
63. おすすめ情報 –IBM Cloud と接続する紙型ロボット https://www.ibm.com/developerworks/jp/code/open/pro jects/tjbot/index.html 63 TJBot zero
64. おすすめ情報 –300ドルで完成する3DプリントLEGO顕微鏡 https://idarts.co.jp/3dp/open-source-3d-print-lego- microscope/ https://github.com/IBM/MicroscoPy 64 IBMの科学者が僅か300ドルで完成するオープンソースの3Dプリントレゴ顕微鏡を開発 IBMの科学者Yuksek Temiz氏は、レゴブロック、Raspberry Pi、8メガピクセルのRaspberry Pi カメラモジュール、そして3Dプリントされたコンポーネントをベースに、僅か300ドルで完成 する高精度なDIY顕微鏡を完成させ、オープンソースとして資料を公開した。 (こちらのページは3DPid.arts サイト記事の紹介です)
65. このセッションではSli.doによるライブ投票を⾏います。 65