Tweet
Tweet

Slide 1

Slide 1 text

アカウントの登録 アカウントの登録 登録には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

Slide 2

Slide 2 text

このセッションではSli.doによるライブ投票を⾏います。 2

Slide 3

Slide 3 text

IBM Dojo IoT/Node-RED入門：翻訳アプリを作ろう Noriko Kato Developer Advocate Tokyo City Team 2020/10/14 #StaySafe #IBMOnlineDojo #NodeRED #IBMだ

Slide 4

Slide 4 text

Group Name / DOC ID / Month XX, 2018 / © 2018 IBM Corporation 4

Slide 5

Slide 5 text

クラウドを選ぶメリット 5 いつでも どこにいても インターネットがあれば }ü 開発できる ü リリースできる ü 試せる

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

⽬次 1.ハンズオン準備 Node-RED Appのセットアップ 2.Internet of Things Platform デバイスの設定⽅法の紹介 3.Node-REDでビジュアルプログラミング 各機能の説明 4.ハンズオン 翻訳アプリの作成 7

Slide 8

Slide 8 text

ウェアラブル端末が ヒトの自己管理をサポートして もっと健康的な日常生活 自動運転がより安全に 進化して誰もが自由に活動できる 農業や配送も便利で効率的に メンテナンスをサポートして 便利で安全な社会 スマートシティが 進んでロスのない安全な街 IBM Cloud で実現するIoT IoTを活⽤することで安全で住みやすくなる未来 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

2.Internet of Things Platform IoT活⽤に⽋かせないデバイスの管理プラットフォームです。 17 ü 使⽤状況が確認できる ü デバイスの登録、管理ができる ü アクセス許可メンバーとロールの管理ができる ü アプリケーション接続キーの管理ができる ü セキュリティー定義や設定の確認ができる

Slide 18

Slide 18 text

2.Internet of Things Platform IoT活⽤に⽋かせないデバイスの管理プラットフォームです。 18 IBM Watson™ IoT Platform は、IoTデバイスから 簡単に価値を引き出せるようにするフルマネージドの クラウド・ホスティング・サービス、MQTTプロトコル を使⽤してデータ送信することができます。

Slide 19

Slide 19 text

にゅう IBM Cloud で実現するIoT Watson IoT Platformの活⽤ 19 Watson IoT Platform デバイス管理 メッセージ転送 死活管理 アプリケーション運用 データ管理 分析 可視化 予測分析 事業戦略

Slide 20

Slide 20 text

2.Internet of Things Platform IoTデータの収集、視覚化 IBM Cloud資料 / ソリューションチュートリアルより 20 プラットフォームへの登録 と接続動作確認までをStep by Stepでご紹介

Slide 21

Slide 21 text

2.Internet of Things Platform リソースの確認 ハンズオンの対象ではありませんが、この⼿順を実施される場合、Internet of Things Platform サービスとCloud Foundry アプリケーションが作成されます。ライトアカウントで試す場合は、 作成済みのアプリケーションを削除するなど事前に必要な環境を整えてください。 21

Slide 22

Slide 22 text

2.Internet of Things Platform Internet of Things Platformの作成 22 ③Internet of Things Platform をクリックする ②検索窓でIoTのキーワードで 検索 ①メニューのカタログを開く

Slide 23

Slide 23 text

2.Internet of Things Platform Internet of Things Platformの作成 23 ②リソース名を適宜変更する （Uniqueである必要がある） ①プランを確認する ③作成ボタンをクリックする

Slide 24

Slide 24 text

2.Internet of Things Platform Watson Iot Platformを起動 24 ①起動をクリックする

Slide 25

Slide 25 text

2.Internet of Things Platform セキュリティーポリシーの設定 25 ①セキュリティーメニューより セキュリティー接続を編集 ②デフォルトの規制よりセキュ リティーレベルをTLSとトーク ン認証を選択し保存する

Slide 26

Slide 26 text

2.Internet of Things Platform デバイスタイプの登録 26 ⑤次へをクリック ②デバイスタイプのタブを選択 ③デバイスを選択 ④登録するデバイス種類の総称 となる名前を⼊⼒ ①デバイスメニューより

Slide 27

Slide 27 text

2.Internet of Things Platform デバイスタイプの登録 27 ①終了をクリック Option デバイスタイプの詳細を⼊⼒

Slide 28

Slide 28 text

2.Internet of Things Platform デバイスタイプの登録 28 ①終了をクリック Option デバイスタイプの詳細を⼊⼒

Slide 29

Slide 29 text

2.Internet of Things Platform デバイスの登録 29 ①デバイスメニューより ②デバイスを作成します。 をクリックする

Slide 30

Slide 30 text

2.Internet of Things Platform デバイスの追加 30 ①デバイスタイプに登録した デバイスタイプを選択 ②デバイスIDを⼊⼒ ③次へをクリック

Slide 31

Slide 31 text

2.Internet of Things Platform デバイスの追加 31 ①認証トークンを⼊⼒ ②次へをクリック

Slide 32

Slide 32 text

2.Internet of Things Platform デバイスのドリルダウン 32 ①登録情報の確認

Slide 33

Slide 33 text

2.Internet of Things Platform IBM Cloud Shellを起動 33 ①IBM Cloud画⾯に戻り IBM Cloud Shell (ベータ版)を起動

Slide 34

Slide 34 text

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の⼊⼒

Slide 35

Slide 35 text

2.Internet of Things Platform アプリケーション作成 35 ① 以下のコマンドを実⾏する ibmcloud target --cf ibmcloud cf push ② 追加のインストールが必要なら適宜対応 ③ IoT Solution Tutorial の Status が Startedになっていたら作成完了

Slide 36

Slide 36 text

2.Internet of Things Platform アプリケーションを起動 36 ① IBM Cloud リソースリストに戻り Cloud Foundryアプリに 「iot-solution-tutorial」が作成されていること を確認 アプリケーションを開く ②iot-solution-tutorial より アプリケーションURL を開く

Slide 37

Slide 37 text

2.Internet of Things Platform デバイス情報を登録 37 ②スマホで4項⽬を⼊⼒ 情報はデバイスのWatson Iot Platform デバイスメニューのドリルダウン画⾯に表⽰ ①スマホからアプリケーションのURLにアクセス （QRコードに変更すると便利）

Slide 38

Slide 38 text

2.Internet of Things Platform スマートフォンの傾きを計測 38

Slide 39

Slide 39 text

2.Internet of Things Platform Watson Iot Platformで状況の確認 39 ①Watson Iot Platform よりデバイスメニュー デバイスの参照、登録したスマートフォンが接 続⾓になっていることを確認 ②アプリから送信された情報を確認 接続済みデバイス情報をクリック 最近のイベント情報が確認でいる イベントを展開すると、スマートフォンアプリ で測定した傾きの値が記録されている

Slide 40

Slide 40 text

2.Internet of Things Platform Watson Iot Platformのデータを確認 40

Slide 41

Slide 41 text

2.Internet of Things Platform 今回のチュートリアルデータご紹介 IoT データの収集、視覚化、分析、および異常の検出 41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

免責事項 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 ご参加ありがとうございました。

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

おすすめ情報 –IBM CODE Patterns 61 https://ibm.biz/ibmcodejp 解説 + デモ動画 + ソースコードが揃ったアプリ開発パターン集

Slide 62

Slide 62 text

おすすめ情報 –IBM CODE Patterns 62 https://ibm.biz/ibmcodejp 解説 + デモ動画 + ソースコードが揃ったアプリ開発パターン集

Slide 63

Slide 63 text

おすすめ情報 –IBM Cloud と接続する紙型ロボット https://www.ibm.com/developerworks/jp/code/open/pro jects/tjbot/index.html 63 TJBot zero

Slide 64

Slide 64 text

おすすめ情報 –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 サイト記事の紹介です)

Slide 65

Slide 65 text

このセッションではSli.doによるライブ投票を⾏います。 65