LoginSignup
10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@Kakimoty_Field((かっきー)Kakimoto Daichi)

Node-RED でブラウザに 「大石泉すき」

Last updated at Posted at 2019-12-09

この記事は 「大石泉すき」アドベントカレンダー 10日目の記事です。
フローベースドプログラミングツール Node-RED で
「大石泉すき」をブラウザで表示したいです。
idol++もしたいと思います。

やること

なるべくノンコーディングで
ブラウザに「大石泉すき」を表示します。

020.png
こんな感じです。

応用編 「大石泉すき」を好きな数表示 (idol++)(ページ内リンク)では、好きな回数「大石泉すき」を表示します。
040.png

使用環境

  • OS : Windows 10 Home (1809 ,OS ビルド: 17763.864 )
  • Node.js: v12.13.1
  • Node-RED:v1.0.3

基本編「大石泉すき」を１つ表示

仕様

  • URL にアクセスして、「大石泉すき」と表示します

フロー

010.png

実行と結果

ブラウザで アクセスします。

http://localhost:1880/love

020.png

プログラミング

各ノードを接続後、ノードを適切に設定します。

  1. http in ノードをダブルクリックし、 URL 欄に /love と入力します。
    500.png

  2. template ノードをダブルクリックし、テンプレート 欄に 大石泉すき と入力します。もともと入力されている "{{payload}}" は削除します。

510.png

ソースコード

下記ソースコードを、Node-RED の「三」メニュー 内、 「読み込み」で表示される
「フローをクリップボードから読み込みダイアログ」にコピペすると
お手元の Node-RED で 「大石泉すき」が可能になります。

[{"id":"b1ec6763.a56ed8","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"bc1ab3d0.d2682","type":"http in","z":"b1ec6763.a56ed8","name":"","url":"/love","method":"get","upload":false,"swaggerDoc":"","x":100,"y":40,"wires":[["6752026.6da1bfc"]]},{"id":"6752026.6da1bfc","type":"template","z":"b1ec6763.a56ed8","name":"大石泉すき","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"大石泉すき","output":"str","x":490,"y":40,"wires":[["a6c51039.aef8e"]]},{"id":"a6c51039.aef8e","type":"http response","z":"b1ec6763.a56ed8","name":"","statusCode":"","headers":{},"x":650,"y":40,"wires":[]},{"id":"e7ce0c8f.150bb","type":"comment","z":"b1ec6763.a56ed8","name":"ブラウザに返す","info":"","x":700,"y":80,"wires":[]},{"id":"f85e4d72.b284a","type":"comment","z":"b1ec6763.a56ed8","name":"入り口 URL","info":"","x":90,"y":80,"wires":[]}]

ソースコード読み込みメニュー
630.png
フローをクリップボードから読み込みダイアログ
640.png

環境 のセットアップ

node.js のインストール

  1. Node.js 公式からインストーラをダウンロード
  2. インストーラ実行
  3. 動作確認

公式からインストーラをダウンロード

TOP ページにダウンロードリンクがあるのでクリックしてダウンロードします

インストーラ実行

Welcome
[Next] クリック
100.png

End-User License Agreement
チェックボックスにチェックして、[Next] クリック
110.png

Destination Folder
任意のフォルダを指定して、[Next] クリック
120.png

Custom Setup
基本、そのまま [Next] クリック
130.png

Tools for Native Modules
チェックせずに、[Next] クリック
140.png

Ready to install Node.js
覚悟を決めて [Install] をクリック
150.png

Installing Node.js & Completed the Node.js Setup Wizard
しばらく待って、Completed ダイアログが表示されたら [Finish] クリック
160.png
170.png

動作確認

コマンドプロンプトを立ち上げて node コマンドが実行できることを確認します。

node -v

インストールした node.js のバージョンが表示されれば成功です。
210.png

Node-RED のインストールと実行

インストール

公式(npmによってインストールする)の手順に従いインストールします。
コマンドプロンプトにて、下記コマンドを入力します。

npm install -g --unsafe-perm node-red

コンソールがピロピロするので、終わるまで待ちましょう。

実行

公式(Windowsで実行する)の手順に従い、下記コマンドを入力します。

node-red

220.png
※このプロンプトはこのままにしておく

セキュリティの重要な警告が表示された場合

チェックボックスを適切に設定して [アクセスを許可する]クリック
230.png

Node-RED エディタの表示

公式(はじめてのフロー)の手順に従いブラウザで以下のURLにアクセス

http://localhost:1880/

フローエディターが表示されます。
300.png

Node-RED ノード概要

http in

URL のパスを定義するノードです。
対応するWEBメソッドの設定も可能です。

410.png

http Response

処理の結果をブラウザに返すノードです。

420.png

template

View を整形するノードです。
430.png

change

変数の代入処理を行うノードです。
440.png

switch

if を制御するノードです。
450.png

function

任意の javascript を記述できるノードです。
460.png

応用編 好きな数だけ「大石泉すき」を表示 (idol++)

仕様

  • URL クエリーパラメータ izumiに指定された数、「大石泉すき」と表示します
  • izumi パラメータが無い場合は、１つだけ「大石泉すき」と表示します

フロー

030.png

実行と結果

ブラウザで アクセスします。
この例では、２０回「大石泉すき」です。

http://localhost:1880/love?izumi=20

040.png

プログラミング

  1. izumi クエリパラメータが指定されているかどうかを Switch ノードで判定し、その後のフロー先を切り替えます。
    (パラメータが指定されていない場合は基本編のフローに流れます。)
    710.png

  2. izumi クエリパラメータが指定されている場合は、後続のループ処理のための変数を初期化します。

  • idol：ループカウンタ
    720.png
  • izumi：ループ終了判定値
    730.png
  • payload：大石泉すき 格納
    740.png
  1. idol++ しながら、指定された回数分「大石泉すき」を文字列結合します。
  • payload 変数に 大石泉すき を追加した文字列を、payload 変数に代入します。
    750.png
  • idol 変数をインクリメントする。(みんな大好き idol++)
    760.png
  • idol 変数が、izumi変数の値と異なる間、ループして 大石泉すき を追加し続ける
    770.png
  1. 最後に、ループ内で作成した「大石泉すき」をブラウザに返します。

ソースコード

[{"id":"22a0265c.ef9e3a","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"4bab2f49.7a2d6","type":"http in","z":"22a0265c.ef9e3a","name":"","url":"/love","method":"get","upload":false,"swaggerDoc":"","x":100,"y":60,"wires":[["6304e723.4eec68"]]},{"id":"969b8bff.8ad168","type":"http response","z":"22a0265c.ef9e3a","name":"","statusCode":"","headers":{},"x":650,"y":60,"wires":[]},{"id":"3b9123ce.08425c","type":"template","z":"22a0265c.ef9e3a","name":"大石泉すき","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"大石泉すき","output":"str","x":490,"y":60,"wires":[["969b8bff.8ad168"]]},{"id":"6304e723.4eec68","type":"switch","z":"22a0265c.ef9e3a","name":"Query パラメータ確認","property":"payload.izumi","propertyType":"msg","rules":[{"t":"null"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":280,"y":60,"wires":[["3b9123ce.08425c"],["22bfa338.e36dec"]]},{"id":"22bfa338.e36dec","type":"change","z":"22a0265c.ef9e3a","name":"","rules":[{"t":"set","p":"idol","pt":"msg","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":250,"y":160,"wires":[["cff06288.b672"]]},{"id":"d1b4cd20.4d9f","type":"function","z":"22a0265c.ef9e3a","name":"idol++","func":"msg.idol++;\nreturn msg;","outputs":1,"noerr":0,"x":490,"y":240,"wires":[["5a07db52.bf9214"]]},{"id":"5a07db52.bf9214","type":"switch","z":"22a0265c.ef9e3a","name":"","property":"idol","propertyType":"msg","rules":[{"t":"neq","v":"izumi","vt":"msg"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":610,"y":240,"wires":[["751cc275.f2e57c"],["b414b5a3.04a728"]]},{"id":"cff06288.b672","type":"change","z":"22a0265c.ef9e3a","name":"","rules":[{"t":"set","p":"izumi","pt":"msg","to":"payload.izumi","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":220,"wires":[["8058862b.de91e8"]]},{"id":"8058862b.de91e8","type":"change","z":"22a0265c.ef9e3a","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":280,"wires":[["751cc275.f2e57c"]]},{"id":"751cc275.f2e57c","type":"template","z":"22a0265c.ef9e3a","name":"大石泉すき 追加","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{{payload}}大石泉すき","output":"str","x":500,"y":160,"wires":[["d1b4cd20.4d9f"]]},{"id":"82f12aef.e736e8","type":"comment","z":"22a0265c.ef9e3a","name":"変数の初期化","info":"","x":250,"y":320,"wires":[]},{"id":"e7b9f020.c10ce","type":"comment","z":"22a0265c.ef9e3a","name":"大石泉を溜める","info":"","x":520,"y":320,"wires":[]},{"id":"b414b5a3.04a728","type":"http response","z":"22a0265c.ef9e3a","name":"","statusCode":"","headers":{},"x":770,"y":240,"wires":[]},{"id":"4f255a39.c14724","type":"comment","z":"22a0265c.ef9e3a","name":"入り口 URL","info":"","x":90,"y":100,"wires":[]},{"id":"9dcc56ce.5dbd58","type":"comment","z":"22a0265c.ef9e3a","name":"ブラウザに返す","info":"","x":700,"y":100,"wires":[]},{"id":"c617b42a.378b58","type":"comment","z":"22a0265c.ef9e3a","name":"ブラウザに返す","info":"","x":740,"y":320,"wires":[]}]

番外編 IBM Cloud で実行

IBM Cloud では、クラウド環境で実行する Node-RED を簡単に準備することができるので
インターネットにつながるデバイスであれば、どこでも「大石泉すき」を表示できるようになります。

スマホブラウザでも「大石泉すき」！！！
820.png

「大石泉すき」Advent Calendar 2019

Day 10
10
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?