Node-RED（初級）：芝犬の画像をランダムに取り出すデモを作成する方法

node-REDを使ってみる

Node.jsを少し触るようになってから、興味のあったローコードであるnode-REDについて学ぶ機会があったので、健忘録がてら使用方法についてまとめました。

node-REDの初期設定

ローカルで実行するための準備

インストール

ターミナル

$ sudo npm install -g node-red

node-redを実行

ターミナル

$ node-red

下記のような表示が出れば成功

ブラウザで起動

今回の場合、http://127.0.0.1:1880/をブラウザに直接入力

node-REDが起動

node-REDをとりあえず使ってみる

まずは簡単に、タイムスタンプがコンソールに表示されるフローを作成
①　injectノードをフィールドにドラックアンドドロップ
②　debugノードをフィールドにドラックアンドドロップ
③　デプロイをクリック
④　デバッグタブを選択
⑤　フィールド上にあるタイムスタンプの左側をクリック
⑥　デバッグタブ内にタイムスタンプがポストされる

node-REDでAPIを利用

使用するAPIを選択する

今回は、次のURLから利用できるAPIを選択。
https://github.com/public-apis/public-apis#food--drink
その中で、ランダムに柴犬の画像を取得できる以下のAPIを今回利用
http://shibe.online/api/shibes?count=[1-100]&urls=[true/false]&httpsUrls=[true/false]

APIをデバッグ上に表現する

'http request'を使って、3つのランダムなAPIを取得する。

その後、'change node'を使って3つの中から1つを選択する

画像をフィールド上に表現する

'node-red-contrib-image-output'をパレットに追加

image nodeを利用してフィールド上に画像を描出する

ダッシュボードを利用してデモ画面を作る

'node-red-dashboard'をパレットに追加する

buttonをクリックすると画像が表示されるように設定

'button'と'template'を利用
template内に

<img ng-src="{{msg.payload}}">

と記載。