IBM Cloud Festa Online 2022 Summer

IBM Cloud Festa Online 2022 Summer 「Code Engine デプロイした Node-RED で IoT/VR/AI オンラインリアルタイムデモ Dive！」の登壇資料です。

◆スライド内の素材は以下を使用させていただいております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. IBM Cloud Festa Online 2022 Summer Code Engine デプロイした Node-REDで IoT/VR/AI オンラインリアルタイムデモ Dive！ ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. 今日はデモを交えつつ Code Engine で動く Node-RED をお伝えしていきます
5. Node-RED でビジュアルプログラミングを クラウド上でやりたい！と、いつも考えてる いろいろなプロトタイピングをするときにクラウドでサッと作れるのはうれしい
6. IBM Cloud もそのひとつでよく使ってた 以前は Cloud Foundary でサッと作れた IBM Cloud で Node-RED セットアップ (2021年4月) - Qiita https://qiita.com/Kakimoty_Field/items/ed30531445cafcb30a63
7. 終了は今すぐじゃないけど他のやり方を ポジティブに模索する時期になった Cloud Foundry on IBM Cloud サービス提供終了のお知らせ | IBM ソリューション ブログ https://www.ibm.com/blogs/solutions/jp-ja/cloud-foundry-eos/
8. とりあえず、Code Engine という仕組みで うまくインストールできました！
9. 今回の仕組みを色々試していきます！ 外部 API に HTTP で指示する MQTT で双方向に データ連携する いろいろな コラボレーション やってみる
10. HTTP 経由で obniz を動かします Code Engine Node-RED App Node-RED obniz
11. obniz のテープ LEDを動かすデモから obniz クラウドへ HTTP で指示して動かします
12. obniz https://www.switch-science.com/catalog/3838/
13. このような仕組み Code Engine Node-RED App Cloudant （フロー保存） Git （Node-REDの基礎） Node-RED obniz HTTPで点灯指示
14. obniz には obniz クラウドというものがあり メッセージング機能で外部から HTTP で指示できる メッセージング - obniz Docs https://obniz.com/ja/doc/reference/common/messaging
15. obniz クラウドでメッセージ受信後ふくめた 処理を JavaScript でつくってデバイス設定
16. Node-RED はこのようなフロー
17. 動かしてみます！
18. ここはいつものアプリの作成画面。 ここから変わってなくてよかった
19. アプリ名を決めて Cloudant も作成
20. Cloudant などの出来上がりを待って デプロイメント自動化の画面
21. Code Engine を選びました
22. Code Engine この記事が参考になりました。感謝。 サーバレスって感じの立ち位置ですね。 「IBM Cloud Code Engine」はフルマネージド型で開発に注力できるランタイムサービス https://japan.zdnet.com/article/35173145/
23. Node-RED だとエディタ画面を開いて フローを編集するのがサーバレスでどうなるのか 気になりますが、いけそうです。
24. IBM Cloud API 鍵作ったり色々やって ツールチェーンの設定。 私はもともとダラスにツールチェーンあったのでダラスで作りました。 最初はシドニー選んでリージョン違いでデプロイメント自動化が動作せず？やりなおしたのは良い思い出。
25. ちょっと待ってたら進行中になりました
26. Delivery Pipeline の詳細で より細かく確認できます
27. さらに ci-pipeline ダッシュボードで 経過時間も確認できました
28. このときはこれくらいの時間で作成完了
29. デプロイメントが完了しても一瞬進行中で 不安になりますが、少し待てば成功になります！
30. アプリ URL にも登場。 Node-RED の URL をクリックします！
31. 最初が若干時間かかりますが起動します。 （体感30秒～1分）
32. おなじみの Node-RED 初期画面が出てきます。 ID・パスワード設定する手順でいけました。
33. 初期フローがあって無事動作しました
34. つづいて MQTT 経由で M5Stack を動かします Code Engine Node-RED App Node-RED
35. Node-RED から MQTT で指示を出して M5Stack の背景色と文字を変えます
36. ほかの色にも変わります
37. M5Stack M5Stack Basic V2.6 https://www.switch-science.com/catalog/7362/
38. このような仕組み Code Engine Node-RED App M5Stack MQTTで 背景色と文字を指示 CloudMQTT 外部 MQTT ブローカ データ発行 データ購読
39. M5Stack は Arduino IDE から C 言語でプログラムを書き込めます
40. M5Stack に MQTT からの指示データ取得と ディスプレイの文字と背景色の変更を設定
41. Node-RED はこのようなフロー
42. MQTT の接続＆データ待ちを維持するのに 最低 0 インスタンス運用は相性悪かったので対策
43. 一つ増やしてみて、いいかんじになりました。 でも、これだとサーバが必ず存在してしまうが、うまく動くことを大事に。
44. M5Stack にとりつけた CO2 センサーの値を Node-RED ダッシュボードで可視化します これはむちゃくちゃ換気した部屋で観測
45. CO2 濃度の目安 換気の目安になる「CO2濃度」を見える化 | IODATA アイ・オー・データ機器 https://www.iodata.jp/news/2021/newprod/ud-co2s.htm
46. Code Engine Node-RED App このような仕組み M5Stack + CO2センサー センサー値を送受信 CloudMQTT 外部 MQTT ブローカ ダッシュボード グラフ表示
47. M5Stack に Arduino IDE からセンサー値取得と MQTT へのデータ定期送信を設定
48. Node-RED はこのようなフロー
49. こちらに配置したダッシュボードノードも URL(/ui)が発行されリアルタイムに動きます
50. CO2 データ共有コンテンツ この QR コードから見ることができます！ https://bit.ly/icfesta22-tseigo-01 （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）
51. 動かしてみます！
52. ダッシュボードノードのような 新しいノードの追加にはコツがあった
53. Code Engine は保管された仕組みを起動するので 普通に入れても戻ってしまいます なので、保管されているものを更新します
54. アプリのページの送信元から リポジトリにアクセス
55. リポジトリの様子
56. Node.js の各インストールを司る package.json を直接編集します
57. ダッシュボードノードを書き加えました
58. Commit すると ci-pipeline が進行中になります
59. Running → Succeeded を待ちます！
60. Node-RED のパレットに ダッシュボードのノードが登場します！
61. Tips : 反映前後で Node-RED のフローを 変更してると更新後にフローのデプロイ時にエラー コンフリクトしまくって焦る
62. フローを再起動で無事回避できました 二重にできた同存在の Node-RED がフローを変更しあってたと思われる
63. いざやってみると学びはたくさん
64. こんな風にできた Node-RED で ひきつづきデモをお伝えしていきます
65. 指輪ヘルスケアデバイス OuraRing 連携 Code Engine Node-RED App Node-RED
66. 指輪ヘルスケアデバイス OuraRing
67. 指につけるデバイスで色々なセンサーで 健康状態を常にチェックしてくれる スマホアプリでBluetooth でデータ取得し体調・睡眠時間・アクティビティ・心拍数などクラウド分析 https://play.google.com/store/apps/details?id=com.ouraring.oura
68. 自分でも API 経由でデータ取得可能 これを Node-RED につなぐ
69. このような仕組み Code Engine Node-RED App OuraRing API 私の OuraRing OuraRing スマホアプリで Bluetooth 経由で手動取得
70. Node-RED はこのようなフロー
71. ダッシュボードで 最新のデータが見えるようにします
72. OuraRing 心拍数コンテンツ この QR コードから見ることができます！ https://bit.ly/icfesta22-tseigo-02 （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）
73. 常駐するのでこういった仕組みも作りやすい
74. Code Engine 料金だいたいどうなってる？ 私の使用感でのお話
75. Code Engine の料金も確かめてみる つねに1インスタンスあると CPU がずっと消費するはず https://www.ibm.com/jp-ja/cloud/code-engine/pricing
76. 6月に15日（0.5月）くらい回した感じ Cloudant にコストがかかっているが、1 インスタンス常時起動でも Code Engine 自体では軽めの印象 （わたしの利用状況下の個人的感想ではあります）
77. 今月（7月）も置いておいても これくらいのコスト感で大きいズレはなさそう ただしアクセス＆使用頻度が上がったり、いろいろやらせて高負荷がかかったら変動する可能性はありそう
78. VR デバイスとの連携 Code Engine Node-RED App Node-RED
79. デバイスをつけて空間に日本語をしゃべると IBM Cloud で翻訳された英語がリアルタイム表示
80. HoloLens 2 https://www.microsoft.com/ja-jp/hololens/hardware
81. HoloLens 2 には音声認識機能があり トークを日本語テキストに変換できます 音声認識機能 （インターネット経由） 音声データ マイク入力 テキスト 空間に テキスト表示
82. もちろん Unity C# で HoloLens 2 アプリを つくる必要はあり、がんばりました つくる経緯の話は置いておきます（まず連携をお見せしたい） Unity
83. シンプルな音声認識の様子 OSの言語設定を日本語にして Dictation イベントを取得して空間に表示させます
84. IBM Cloud の翻訳 API を通して 日→英翻訳して表示してみます 日本語 音声認識 （インターネット経由） 英語 Code Engine Node-RED App Language Translator API (IBM Cloud)
85. Language Translator アプリを取得
86. Node-RED からは Language Translator ノードが プリインストールされてのですぐ使える Code Engine Node-RED App の場合
87. API Key と Endpoint を指定すれば サッと使い始めることができました！ これは以前の Node-RED App でも出来たのでホッとしました
88. Node-RED はこのようなフロー
89. HoloLens 2 に翻訳後に HTTP で返答する部分
90. M5Stack にも翻訳済みテキストを 表示するようにもしています
91. ダッシュボード にも翻訳済みテキストを 表示するようにしています
92. HoloLens 2 翻訳テキストコンテンツ この QR コードから見ることができます！ https://bit.ly/icfesta22-tseigo-03 （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）
93. 動かしてみます！
94. リアルタイムデモを交えてお伝えしました！
95. エクストラ 時間があれば • Node-RED App まわりちゃんと準備してくれてて OSS へ のケアありがたいなあという話 • コンテナやオートスケールを Code Engine が担当してく れて手軽に楽しめるの良いなあ • CloudMQTT で MQTT 接続数みるとフローを変更してデ プロイするたび接続数が増える話（詳しくは次ページ）
96. CloudMQTT で MQTT 接続数みると フローを変更してデプロイするたび接続数が増える この Code Engine しかつないでないのに
97. 全デプロイやフロー再起動だとMQTTノードが 再度つないで接続数が増えてしまうようです サーバレス想定なので生き残っているセッションに関しての管理が弱いかも
98. 変更したフローにすれば MQTTノードが 再度つなぎに行かないので接続数が増えません 回避策1。MQTT ノード自体の設定を変更しなりかぎりですが。
99. 新規リビジョンを作成すると いま居るインスタンスが全部終わるので回避可能 回避策2。厳密な検証ではないですが、今は良い感じに回避できてる。成功後、すぐにセッションがなくなる。
100. まとめ • いろいろあったが無事 Cloud Foundary で使っていた Node-RED な仕組みを Code Engine に移行できた • Code Engine はサーバレスが下地なので常時起動したい ときは色々と調整した • 外部にもIBM Cloud 内のサービスにもつながり、追加 ノードも導入できたので拡張性はありそう • やっぱりいろいろなものにサッとつながるのは、とって もたのしいですね！