$30 off During Our Annual Pro Sale. View Details »

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

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

you(@youtoy)
PRO

July 05, 2023
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

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