犬画像 API につないでみよう

8b3562b82fc4b2f8ff213966c1fd3f3a

Node-RED パレットにはじめから多彩な接続ノードがあります。 WEB まわりで使われる HTTP / WebSocket など揃えています。

4a5f646eda6c88a6d5303ad7938e5a9c

API は HTTP でつなぐことが多いですが Node-RED にも HTTP 関連ノードあります。

c35f519b28bb8f47fbde1e9bfc1d0158

さまざまな API につなぐ例として、犬画像 API から https://random.dog/ を取得してみることを試してみます。

フローのタブを追加して今回のフローをはじめる

Node-RED ではフローをタブで分けて作業できます。今回のフローは新しいタブで進めましょう。処理としては同じ Node-RED 内の処理です。

bfacbb2d76a7dd13d00cde6b970fb7d5

こちらの＋ボタンからフローのタブを作成します。

e01a18b769c2495de48a79a925ac8be8

新しい名前のフローができるので、こちらで進めます。

inject ノードを配置

af09116801b29c392cbe03090907c5ad

パレットから inject ノードを配置します。

http request ノードを配置

908ca750fd2e9f804b4e787bef1cc211

パレットから http resuest ノードを探します。このノードは、HTTPリクエストを送信し、レスポンスを返します。

c5624380278275141618e2cfa9298c79

inject ノードの横に配置します。

16defaa77097163827df6c653e56f57a

inject ノードとつなぎます。

http request ノードの設定

8704383322f88fc626764382e85f1479

さきほど配置した http resuest ノードをダブルクリックしてプロパティを表示します。

alt text

ランダムで犬画像が取得できる API https://random.dog/ の仕様は https://github.com/AdenFlorian/random.dog に書いてあります。Web サイトの右下にリンクがあります。

GETリクエストでURL https://random.dog/woof.json?include=jpg,jpeg とつなぎに行くとJPG,JPEG に絞ってランダム犬画像を取得できるので、それに合わせてプロパティを以下に設定します。

出力形式を JSON オブジェクトに変更するのは、すでにリクエストが JSON で来ることでが分かっているので、この後 JSON として扱うことで、今後のデータを扱いやすくします。

完了ボタンをクリックしてワークスペースに戻りましょう。

一度デバッグをしてみる

alt text

ここまで出来たら、名前を変更することで shibe.online となった 先ほどの http request ノードのあとに debug ノードを配置してつなげましょう。

Alt text

デプロイします。

7b9d45f2d8a6c709d749bd529937a111

inject ノードのボタンをクリックして、inject ノードからデータを発生させて、http request ノードが random.dog にアクセスしてデータを受信して debug ノードにデータが届くか試してみましょう。

alt text

デバッグタブにデータが来るか確認しましょう。

alt text

JSON であればこちらの三角ボタンをクリックすることで、中のデータ構造を確認できます。

{"fileSizeBytes":49470,"url":"https://random.dog/1ddb2caa-41f5-456f-a446-f5a5335b5811.jpg"}

今回の場合は、配列のデータで 1 つだけ柴犬画像 URL が入っています。

データの流れを変更できる change ノードを配置

66ad3dd31e4294b0ef99df1afbafe408

http request ノードに change ノードをつなぎます。change ノードはデータの流れを変更できます。

c3fed19e6bc45cd8a487d261eae58ee4

パレットでは近くに似ている switch ノードがあるので、間違えないように配置してください。

alt text

http request ノードに change ノードをつなぎます。

change ノードの設定

baae9c45e87d6af2dab7704d870ed14b

change ノードをノードをダブルクリックしてプロパティを表示します。

d5a524587bf1fec1978fade1b5023bcb

msg.payload に変更する対象の値を、まず、msg にします。

alt text

対象の値は payload.url にします。

{"fileSizeBytes":49470,"url":"https://random.dog/1ddb2caa-41f5-456f-a446-f5a5335b5811.jpg"}

先ほどの柴犬画像 URLが配列がきていて URL が一つだけ入っているものを指定するために、payload の中の url の値ということで payload.url にしています。

完了ボタンをクリックしてワークスペースに戻りましょう。

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

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

画像 URL が入ってくると画像を表示する node-red-contrib-image-output ノードをインストールします。

Alt text

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

alt text

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

alt text

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

alt text

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

66cd153be70bdf92248a338b3451fc9b

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

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

alt text

node-red-contrib-image-output ノードをパレットから探します。

alt text

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

alt text

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

Alt text

デプロイします。

動かしてみる

7b9d45f2d8a6c709d749bd529937a111

inject ノードのボタンをクリックして、動作確認してみましょう。

alt text

このように、柴犬 API からデータが取得でき、node-red-contrib-image-output ノードで画像が表示されます。

エクストラ

49f835fa9e85339a5bc223ddd85ff0d6

  • node-red-contrib-image-output ノードのプロパティに Width 160 という画像の横幅を指定する値があるので 320 にして大きく画像を表示してみましょう。
  • 余裕があれば、 public-apis https://github.com/public-apis/public-apis の紹介

results matching ""

    No results matching ""