IBM Cloud Festa Online 2022 Summer

by 1ft-seabass

Slide 1

Slide 1 text

IBM Cloud Festa Online 2022 Summer Code Engine デプロイした Node-REDで IoT/VR/AI オンラインリアルタイムデモ Dive！ワンフットシーバス田中正吾

Slide 2

Slide 2 text

私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！

Slide 3

Slide 3 text

田中正吾（たなかせいご）屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。

Slide 4

Slide 4 text

今日はデモを交えつつ Code Engine で動く Node-RED をお伝えしていきます

Slide 5

Slide 5 text

Node-RED でビジュアルプログラミングをクラウド上でやりたい！と、いつも考えてるいろいろなプロトタイピングをするときにクラウドでサッと作れるのはうれしい

Slide 6

Slide 6 text

IBM Cloud もそのひとつでよく使ってた以前は Cloud Foundary でサッと作れた IBM Cloud で Node-RED セットアップ (2021年4月) - Qiita https://qiita.com/Kakimoty_Field/items/ed30531445cafcb30a63

Slide 7

Slide 7 text

終了は今すぐじゃないけど他のやり方をポジティブに模索する時期になった Cloud Foundry on IBM Cloud サービス提供終了のお知らせ | IBM ソリューションブログ https://www.ibm.com/blogs/solutions/jp-ja/cloud-foundry-eos/

Slide 8

Slide 8 text

とりあえず、Code Engine という仕組みでうまくインストールできました！

Slide 9

Slide 9 text

今回の仕組みを色々試していきます！外部 API に HTTP で指示する MQTT で双方向にデータ連携するいろいろなコラボレーションやってみる

Slide 10

Slide 10 text

HTTP 経由で obniz を動かします Code Engine Node-RED App Node-RED obniz

Slide 11

Slide 11 text

obniz のテープ LEDを動かすデモから obniz クラウドへ HTTP で指示して動かします

Slide 12

Slide 12 text

obniz https://www.switch-science.com/catalog/3838/

Slide 13

Slide 13 text

このような仕組み Code Engine Node-RED App Cloudant （フロー保存） Git （Node-REDの基礎） Node-RED obniz HTTPで点灯指示

Slide 14

Slide 14 text

obniz には obniz クラウドというものがありメッセージング機能で外部から HTTP で指示できるメッセージング - obniz Docs https://obniz.com/ja/doc/reference/common/messaging

Slide 15

Slide 15 text

obniz クラウドでメッセージ受信後ふくめた処理を JavaScript でつくってデバイス設定

Slide 16

Slide 16 text

Node-RED はこのようなフロー

Slide 17

Slide 17 text

動かしてみます！

Slide 18

Slide 18 text

ここはいつものアプリの作成画面。ここから変わってなくてよかった

Slide 19

Slide 19 text

アプリ名を決めて Cloudant も作成

Slide 20

Slide 20 text

Cloudant などの出来上がりを待ってデプロイメント自動化の画面

Slide 21

Slide 21 text

Code Engine を選びました

Slide 22

Slide 22 text

Code Engine この記事が参考になりました。感謝。サーバレスって感じの立ち位置ですね。「IBM Cloud Code Engine」はフルマネージド型で開発に注力できるランタイムサービス https://japan.zdnet.com/article/35173145/

Slide 23

Slide 23 text

Node-RED だとエディタ画面を開いてフローを編集するのがサーバレスでどうなるのか気になりますが、いけそうです。

Slide 24

Slide 24 text

IBM Cloud API 鍵作ったり色々やってツールチェーンの設定。私はもともとダラスにツールチェーンあったのでダラスで作りました。最初はシドニー選んでリージョン違いでデプロイメント自動化が動作せず？やりなおしたのは良い思い出。

Slide 25

Slide 25 text

ちょっと待ってたら進行中になりました

Slide 26

Slide 26 text

Delivery Pipeline の詳細でより細かく確認できます

Slide 27

Slide 27 text

さらに ci-pipeline ダッシュボードで経過時間も確認できました

Slide 28

Slide 28 text

このときはこれくらいの時間で作成完了

Slide 29

Slide 29 text

デプロイメントが完了しても一瞬進行中で不安になりますが、少し待てば成功になります！

Slide 30

Slide 30 text

アプリ URL にも登場。 Node-RED の URL をクリックします！

Slide 31

Slide 31 text

最初が若干時間かかりますが起動します。（体感30秒～1分）

Slide 32

Slide 32 text

おなじみの Node-RED 初期画面が出てきます。 ID・パスワード設定する手順でいけました。

Slide 33

Slide 33 text

初期フローがあって無事動作しました

Slide 34

Slide 34 text

つづいて MQTT 経由で M5Stack を動かします Code Engine Node-RED App Node-RED

Slide 35

Slide 35 text

Node-RED から MQTT で指示を出して M5Stack の背景色と文字を変えます

Slide 36

Slide 36 text

ほかの色にも変わります

Slide 37

Slide 37 text

M5Stack M5Stack Basic V2.6 https://www.switch-science.com/catalog/7362/

Slide 38

Slide 38 text

このような仕組み Code Engine Node-RED App M5Stack MQTTで背景色と文字を指示 CloudMQTT 外部 MQTT ブローカデータ発行データ購読

Slide 39

Slide 39 text

M5Stack は Arduino IDE から C 言語でプログラムを書き込めます

Slide 40

Slide 40 text

M5Stack に MQTT からの指示データ取得とディスプレイの文字と背景色の変更を設定

Slide 41

Slide 41 text

Node-RED はこのようなフロー

Slide 42

Slide 42 text

MQTT の接続＆データ待ちを維持するのに最低 0 インスタンス運用は相性悪かったので対策

Slide 43

Slide 43 text

一つ増やしてみて、いいかんじになりました。でも、これだとサーバが必ず存在してしまうが、うまく動くことを大事に。

Slide 44

Slide 44 text

M5Stack にとりつけた CO2 センサーの値を Node-RED ダッシュボードで可視化しますこれはむちゃくちゃ換気した部屋で観測

Slide 45

Slide 45 text

CO2 濃度の目安換気の目安になる「CO2濃度」を見える化 | IODATA アイ・オー・データ機器 https://www.iodata.jp/news/2021/newprod/ud-co2s.htm

Slide 46

Slide 46 text

Code Engine Node-RED App このような仕組み M5Stack + CO2センサーセンサー値を送受信 CloudMQTT 外部 MQTT ブローカダッシュボードグラフ表示

Slide 47

Slide 47 text

M5Stack に Arduino IDE からセンサー値取得と MQTT へのデータ定期送信を設定

Slide 48

Slide 48 text

Node-RED はこのようなフロー

Slide 49

Slide 49 text

こちらに配置したダッシュボードノードも URL(/ui)が発行されリアルタイムに動きます

Slide 50

Slide 50 text

CO2 データ共有コンテンツこの QR コードから見ることができます！ https://bit.ly/icfesta22-tseigo-01 （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）

Slide 51

Slide 51 text

動かしてみます！

Slide 52

Slide 52 text

ダッシュボードノードのような新しいノードの追加にはコツがあった

Slide 53

Slide 53 text

Code Engine は保管された仕組みを起動するので普通に入れても戻ってしまいますなので、保管されているものを更新します

Slide 54

Slide 54 text

アプリのページの送信元からリポジトリにアクセス

Slide 55

Slide 55 text

リポジトリの様子

Slide 56

Slide 56 text

Node.js の各インストールを司る package.json を直接編集します

Slide 57

Slide 57 text

ダッシュボードノードを書き加えました

Slide 58

Slide 58 text

Commit すると ci-pipeline が進行中になります

Slide 59

Slide 59 text

Running → Succeeded を待ちます！

Slide 60

Slide 60 text

Node-RED のパレットにダッシュボードのノードが登場します！

Slide 61

Slide 61 text

Tips : 反映前後で Node-RED のフローを変更してると更新後にフローのデプロイ時にエラーコンフリクトしまくって焦る

Slide 62

Slide 62 text

フローを再起動で無事回避できました二重にできた同存在の Node-RED がフローを変更しあってたと思われる

Slide 63

Slide 63 text

いざやってみると学びはたくさん

Slide 64

Slide 64 text

こんな風にできた Node-RED でひきつづきデモをお伝えしていきます

Slide 65

Slide 65 text

指輪ヘルスケアデバイス OuraRing 連携 Code Engine Node-RED App Node-RED

Slide 66

Slide 66 text

指輪ヘルスケアデバイス OuraRing

Slide 67

Slide 67 text

指につけるデバイスで色々なセンサーで健康状態を常にチェックしてくれるスマホアプリでBluetooth でデータ取得し体調・睡眠時間・アクティビティ・心拍数などクラウド分析 https://play.google.com/store/apps/details?id=com.ouraring.oura

Slide 68

Slide 68 text

自分でも API 経由でデータ取得可能これを Node-RED につなぐ

Slide 69

Slide 69 text

このような仕組み Code Engine Node-RED App OuraRing API 私の OuraRing OuraRing スマホアプリで Bluetooth 経由で手動取得

Slide 70

Slide 70 text

Node-RED はこのようなフロー

Slide 71

Slide 71 text

ダッシュボードで最新のデータが見えるようにします

Slide 72

Slide 72 text

OuraRing 心拍数コンテンツこの QR コードから見ることができます！ https://bit.ly/icfesta22-tseigo-02 （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）

Slide 73

Slide 73 text

常駐するのでこういった仕組みも作りやすい

Slide 74

Slide 74 text

Code Engine 料金だいたいどうなってる？私の使用感でのお話

Slide 75

Slide 75 text

Code Engine の料金も確かめてみるつねに1インスタンスあると CPU がずっと消費するはず https://www.ibm.com/jp-ja/cloud/code-engine/pricing

Slide 76

Slide 76 text

6月に15日（0.5月）くらい回した感じ Cloudant にコストがかかっているが、1 インスタンス常時起動でも Code Engine 自体では軽めの印象（わたしの利用状況下の個人的感想ではあります）

Slide 77

Slide 77 text

今月（7月）も置いておいてもこれくらいのコスト感で大きいズレはなさそうただしアクセス＆使用頻度が上がったり、いろいろやらせて高負荷がかかったら変動する可能性はありそう

Slide 78

Slide 78 text

VR デバイスとの連携 Code Engine Node-RED App Node-RED

Slide 79

Slide 79 text

デバイスをつけて空間に日本語をしゃべると IBM Cloud で翻訳された英語がリアルタイム表示

Slide 80

Slide 80 text

HoloLens 2 https://www.microsoft.com/ja-jp/hololens/hardware

Slide 81

Slide 81 text

HoloLens 2 には音声認識機能がありトークを日本語テキストに変換できます音声認識機能（インターネット経由）音声データマイク入力テキスト空間にテキスト表示

Slide 82

Slide 82 text

もちろん Unity C# で HoloLens 2 アプリをつくる必要はあり、がんばりましたつくる経緯の話は置いておきます（まず連携をお見せしたい） Unity

Slide 83

Slide 83 text

シンプルな音声認識の様子 OSの言語設定を日本語にして Dictation イベントを取得して空間に表示させます

Slide 84

Slide 84 text

IBM Cloud の翻訳 API を通して日→英翻訳して表示してみます日本語音声認識（インターネット経由）英語 Code Engine Node-RED App Language Translator API (IBM Cloud)

Slide 85

Slide 85 text

Language Translator アプリを取得

Slide 86

Slide 86 text

Node-RED からは Language Translator ノードがプリインストールされてのですぐ使える Code Engine Node-RED App の場合

Slide 87

Slide 87 text

API Key と Endpoint を指定すればサッと使い始めることができました！これは以前の Node-RED App でも出来たのでホッとしました

Slide 88

Slide 88 text

Node-RED はこのようなフロー

Slide 89

Slide 89 text

HoloLens 2 に翻訳後に HTTP で返答する部分

Slide 90

Slide 90 text

M5Stack にも翻訳済みテキストを表示するようにもしています

Slide 91

Slide 91 text

ダッシュボードにも翻訳済みテキストを表示するようにしています

Slide 92

Slide 92 text

HoloLens 2 翻訳テキストコンテンツこの QR コードから見ることができます！ https://bit.ly/icfesta22-tseigo-03 （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）

Slide 93

Slide 93 text

動かしてみます！

Slide 94

Slide 94 text

リアルタイムデモを交えてお伝えしました！

Slide 95

Slide 95 text

エクストラ時間があれば ● Node-RED App まわりちゃんと準備してくれてて OSS へのケアありがたいなあという話 ● コンテナやオートスケールを Code Engine が担当してくれて手軽に楽しめるの良いなあ ● CloudMQTT で MQTT 接続数みるとフローを変更してデプロイするたび接続数が増える話（詳しくは次ページ）

Slide 96

Slide 96 text

CloudMQTT で MQTT 接続数みるとフローを変更してデプロイするたび接続数が増えるこの Code Engine しかつないでないのに

Slide 97

Slide 97 text

全デプロイやフロー再起動だとMQTTノードが再度つないで接続数が増えてしまうようですサーバレス想定なので生き残っているセッションに関しての管理が弱いかも

Slide 98

Slide 98 text

変更したフローにすれば MQTTノードが再度つなぎに行かないので接続数が増えません回避策1。MQTT ノード自体の設定を変更しなりかぎりですが。

Slide 99

Slide 99 text

新規リビジョンを作成するといま居るインスタンスが全部終わるので回避可能回避策2。厳密な検証ではないですが、今は良い感じに回避できてる。成功後、すぐにセッションがなくなる。

Slide 100

Slide 100 text

まとめ ● いろいろあったが無事 Cloud Foundary で使っていた Node-RED な仕組みを Code Engine に移行できた ● Code Engine はサーバレスが下地なので常時起動したいときは色々と調整した ● 外部にもIBM Cloud 内のサービスにもつながり、追加ノードも導入できたので拡張性はありそう ● やっぱりいろいろなものにサッとつながるのは、とってもたのしいですね！