メモ

Node-RED で public-apis の柴犬画像 API につないで表示させるメモ

Posted on by seigo

Node-RED で public-apis の柴犬画像 API につないで表示させるメモです。

public-apisが、とても好きで すぐにAPIを体験！public-apis 100以上のJavaScript axiosサンプル集 といった記事も書いています。

今回は、その知見を活かして Node-RED で public-apis の柴犬画像 API shibe.online につないでみます。

Node-RED のフローの流れ

image

このようにフローをつなぎます。

なにもないワークスペースからスタート

image

まず、なにもないワークスペースからスタートしましょう。

inject ノード

inject ノードをパレットからワークスペースに配置します。

image

パレットから inject ノード をドラッグアンドドロップします。

http request ノードを配置

image

http request ノードをパレットからワークスペースに配置します。

http request ノードと inject ノードをつなぎます

image

http request ノードと inject ノードのフローをつなぎます。

これで inject ノードがクリックされると、それをきっかけに以降のフローが動いていきます。

http request ノードの設定

image

こちらの http request ノードで shibe.online につなぐ設定をします。

http request ノードをダブルクリックして詳細を設定します。

image

shibe.online の仕様は、GETリクエストでURL http://shibe.online/api/shibes?count=3&urls=true&httpsUrls=true とつなぎに行くと、柴犬画像が取得できますので、それに合わせて設定します。

  • メソッド
    • GET
  • URL
    • http://shibe.online/api/shibes?count=3&urls=true&httpsUrls=true
  • 名前
    • shibe.online

と設定してつながるように設定します。

JSON ノードの設定

http request ノードでデータを取得しただけだとデータが文字列のままです。JSONノードでJSONに変換して扱いやすくします。

image

JSONノードをパレットからワークスペースに配置します。

image

http request ノードと JSON ノードのフローをつなぎます。

change ノードの設定

change ノードを使って、JSONデータから画像URLを取り出します。

[
"https://cdn.shibe.online/shibes/e4feffcdc53a9b42bc6b5c2c9bf88560123596ea.jpg",
"https://cdn.shibe.online/shibes/408aae17438e5b9b45c986bd46a6104e93a6e4de.jpg",
"https://cdn.shibe.online/shibes/04877898b178c9de253e21b07216949b48998aab.jpg"
]

受け取ったデータは、たとえば、このようになっています。配列になっているので 0 番目（一番先頭）の画像パスを拾うようにしてみます。

image

change ノードをパレットからワークスペースに配置します。

image

JSON ノードと change ノードのフローをつなぎます。

こちらの change ノードをダブルクリックして詳細を設定します。

image

  • 名前
    • 0番目の画像URLを取り出す
  • ルール
    • 値の代入
    • msg.payload
    • 対象の値
      • msg.payload.0

と画像のように設置します。

http request で取得したデータを JSON ノードで JSON 化して change ノードに流れ込んできた msg.payload データの 0 番目のデータを示す msg.payload.0 を、msg.payload に値の代入をすることで0番目の画像URLを取り出すことができます。

image

設定すると名前が設定されたため change ノードのタイトルが変わります。

画像を表示する node-red-contrib-image-output ノードを追加する

ここまでで、柴犬画像の画像URLを 1つ表示することができました。

画像を表示する node-red-contrib-image-output ノードをインストールします。

image

右のメニューから メニュー ＞ パレットの管理 と移動します。

image

ノードの追加タブをクリックしてノード追加画面に移動します。

image

ノードを検索するテキストエリアに node-red-contrib-image-output を入力してノードを検索して ノードを追加 ボタンをクリックします。

image

追加 ボタンをクリックします。

image

インストールされました。

node-red-contrib-image-output ノードをつなげる

image

node-red-contrib-image-output ノードをパレットからワークスペースに配置します。

image

change ノードと node-red-contrib-image-output ノードのフローをつなぎます。

デプロイしてフローを保存する

これで設定は完了です。デプロイしてフローを保存します。

image

デプロイボタンをクリックします。

image

保存され、このように灰色にボタンの色が変わったら完了です。

動かしてみます

image

inject ノードを押してみましょう。http request ノードで柴犬APIからデータが読まれて JSON ノードで JSON 化されたデータが、 change ノードによって 0 番目の画像URLが取り出されて、その画像URLが node-red-contrib-image-output ノードによって画像が表示される流れが体験できると思います。

フローのJSONデータ

Node-REDでインポートしてすぐ使えるフローはこちらです。

[{"id":"605eef04.d0868","type":"inject","z":"47eb929c.06468c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":460,"wires":[["aaa73249.dd7a7"]]},{"id":"b0ca9f77.c1433","type":"json","z":"47eb929c.06468c","name":"","property":"payload","action":"","pretty":false,"x":650,"y":460,"wires":[["23d4c36b.95a63c"]]},{"id":"23d4c36b.95a63c","type":"change","z":"47eb929c.06468c","name":"0番目の画像URLを取り出す","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.0","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":200,"y":560,"wires":[["9b1d09a3.5b3548"]]},{"id":"aaa73249.dd7a7","type":"http request","z":"47eb929c.06468c","name":"shibe.online","method":"GET","ret":"txt","paytoqs":"ignore","url":"http://shibe.online/api/shibes?count=3&urls=true&httpsUrls=true","tls":"","persist":false,"proxy":"","authType":"","x":390,"y":460,"wires":[["b0ca9f77.c1433"]]},{"id":"9b1d09a3.5b3548","type":"image","z":"47eb929c.06468c","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":530,"y":560,"wires":[]}]

インポートする場合は こちら を参考にしてみてください。

seigo