APIレスポンスの情報を取り出して整形するためにtemplateノードを使った話 / Node-RED Park Vol.12

Transcript

1. 2023年7月5日 (水)
   Node-RED Park Vol.12 @オンライン
   豊田陽介（ ）
   @youtoy
   APIレスポンスの情報を取り出して整形するために
   templateノードを使った話
   

   View Slide

2. 自己紹介
   豊田陽介（ ）
   @youtoy
   ・IT系イベント主催、登壇や運営なども
   ・子ども向けの活動いろいろ
   ・ Microsoft MVP（2021/10 から）
   プライベートでの活動
   ・ガジェット大好き
   ・ビジュアルプログラミング／JavaScript
   　とガジェットの組み合わせをよくやって
   　いたりするかも
   好きなこと、他
   

   View Slide

3. 今日のテーマ
   templateノード
   

   View Slide

4. どんな時に使った？
   

   View Slide

5. 情報を取り出して
   特定のフォーマットにする
   

   View Slide

6. 利用事例：全体フローとtemplateノード
   ココ
   

   View Slide

7. 全体の処理とtemplateノードの使いどころ
   ■ フローの処理内容
   1）国と都市を指定して API経由で
   天気情報を取得
   2）API のレスポンスの一部を抜粋
   して特定のフォーマットに整形
   3）整形後のデータを表で出力 templateノードの設定
   

   View Slide

8. templateノードの入出力
   

   View Slide

9. templateノードでの入出力の内容
   元のオブジェクトの
   特定の部分を取り
   出しつつ Key は変更
   （天気情報の取得は「node-red-node-openweathermap」を利用）
   

   View Slide

10. ダッシュボード上での表示
    Key の変更後の内容が
    表のヘッダに使われる
    ・テーブルの表示は「node-red-node-ui-table」にて
    ・templateノードの出力 3つは joinノードでまとめた
    

    View Slide

11. 分かりやすい処理で
    サクッとデータ整形
    

    View Slide

12. 今回出てきたフローの詳細
    こちらの Qiita の記事をご参照ください
    

    View Slide

13. templateノードで
    自分が活用できてないところ
    

    View Slide

14. 構文の「mustache」以外の選択肢
    たくさんあるけど活用できてない...
    

    View Slide

15. templateノード以外
    の話ですが
    

    View Slide

16. enebularでNode-RED 3.0の
    新機能が使える！
    

    View Slide

17. 先ほどのフローが見やすくできる！
    線の分岐の適用前
    線の分岐を適用
    

    View Slide

18. これらの流れの後の
    思いつきでやったこと
    

    View Slide

19. LINEアプリへのSticker送信で
    templateノード ＋
    Node-RED 3.0 の新機能
    を使ってみる
    

    View Slide

20. 以前行った内容
    changeノードを使った LINE Notify での Sticker送信
    

    View Slide

21. templateノードを使ったところ
    templateノードの
    テンプレートで設定
    changeノードで設定
    

    View Slide

22. Node-RED 3.0 の新機能を使ったところ
    http requestノード内
    でヘッダの設定
    changeノードで設定
    

    View Slide

23. もう少し複雑な処理であれば
    templateノードが活きるかも？
    

    View Slide

24. 追加で試した内容について
    詳細は Qiita の記事をご参照ください
    

    View Slide

25. 終わり！
    

    View Slide