node-red-contrib-uibuilder を使ったフロントエンド開発

1. UIbuilderを使ったフロントエンド開発
Node-RED Park Vol.4 - Node-RED+フロントエンドどうしてる？
Node-RED User Group Japan 古城 篤

2. 自己紹介: 古城 篤（Atsushi Kojo）
➤ Node-RED User Group Japan 発起人（since 2015）
➤ 国連CEFACT日本代表メンバー IoT白書エディター
➤ 株式会社ウフル Chief Research Officer
18年前にCMSのSaaS（当時はASPと呼ぶ）を開発して
提供した時からエンドユーザー・コンピューティングに
興味を持ち、いつしかプログラミングの民主化を夢見て
現在も民主化活動を鋭意継続中！

3. 簡単な node-red-contrib-uibuilder フロー

4. 実際のフロントエンド画面は別ウィンドウ
http://localhost:1880/attendance/

5. Injectノードのボタンを押すと…
Injectノードの値が画面側に来た！

6. ソースは ./node-red/uibuilder/attendance/src にある
だからVScodeで開けちゃう！いつものように画面開発できる！
逆に言うとフローの貼り付けだけでは移行できない罠でもある…

7. 画面側でmsgを受け取ってるのはこのへんっぽい
// run this function when the document is loaded
window.onload = function() {
// Start up uibuilder - see the docs for the optional parameters
uibuilder.start()
// Listen for incoming messages from Node-RED
uibuilder.onChange('msg', function(msg){
console.info('[indexjs:uibuilder.onChange] msg received from
Node-RED server:', msg)
// dump the msg as text to the "msg" html element
const eMsg = document.getElementById('msg')
eMsg.innerHTML = syntaxHighlight(msg)
})
}
onload後にuibuilder.start()してuibuilder.onChangeでmsgをサブスクライブする感じ

8. じゃあVueの場合は？
uibuilderノードの設定でVueのTemplateを選択してLoad&Overwrite

9. Vueのテンプレートはごちゃごちしてるけど要はこんな感じ
const app = new Vue({
el: '#app',
data() {
return {
ts: ''
};
},
created() {
const vm = this
uibuilder.start(vm)
},
mounted() {
const vm = this
uibuilder.onChange('msg', function (msg) {
vm.ts = msg.payload
})
}
})
createdでuibuilder.start()してmountedでuibuilder.onChangeでmsgをサブスクライブする

10. index.htmlもごちゃごちゃ書いてるけど全部消してh1に

11. これでInjectノードのタイムスタンプが画面側に表示される
恒例のInjectノード1分間隔定期実行すると動的なページがと良くわかりますよ∼

12. 逆に画面側から何か送信する場合はuibuilder.send()
const app = new Vue({
el: '#app',
data() {
return {
ts: '',
payload: '画面から来たよ！'
};
},
created() {
const vm = this
uibuilder.start(vm)
uibuilder.send(vm.payload)
},
mounted() {
const vm = this
uibuilder.onChange('msg', function (msg) {
vm.ts = msg.payload
})
}
})

13. 画面側をリロードすると画面側からメッセージが来る

14. 応用例: 勤怠管理

15. 応用例: 勤怠管理 Node-REDフロー
細々としたデータ操作はなるべくNode-REDフローでやる
そうすればフロントエンドのソースコードがシンプルになる

16. 応用例: リスト画面

17. どんな画面開発に向いてるか？
ペライチ画面に向いています！
（逆にたくさんの画面遷移があって多くのStateを保持する必要がある画面は向きません）
トリガ 画面操作 データ更新

18. node-red-contrib-uibuilder まとめ
➤ ソースコードはフローとは別に存在するので好きなエディタで開発できる
➤ Node-REDのフローから画面にデータを送信できる
➤ 画面からNode-REDのフローにデータを送信できる
➤ データ操作をNode-REDフロー任せればフロントエンドはシンプルになる
➤ ペライチ画面開発に向いている
•メールのリンクをクリックして表示される画面
•チャットのリンクをクリックして表示される画面
•バーコードリーダーでバーコードを読み取って表示される画面など…

19. ご清聴ありがとうございました