27
42

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.

Node-RED入門

Last updated at Posted at 2018-03-06

Node-RED入門です

  • Node-REDはいろいろな部品をドラッグ&ドロップで連結させてウェブサイトやデータベースアプリなどさまざまな機能を簡単に実現できるけっこう便利な道具です

#1. Node-REDをインストールします
Node-REDをインストールするを参照し、NodeーREDをインストールします

#2. Node-RED入門

  • Node-REDの編集は(特に日本語を使う場合)、FireFoxで編集したほうがうまくいきます。Chromeは日本語入力で編集箇所がズレます。IEはヒサンです(debug出力が表示されないとか)。Safariは私はあまり使わないのでよく知りません。すみません。
  • Node-REDを起動し、http://localhost:1880でアクセスします
スクリーンショット 2018-03-06 22.14.10.png
  • Node-RED画面の左側にさまざまな部品(ノード)が並んだパレットがあります
スクリーンショット 2018-03-06 22.17.05.png
  • 上記のパレットの部品をドラッグ&ドロップして中央のフローエディターに持ってきて使用します
スクリーンショット 2018-03-06 22.18.48.png
  • 例えば、「入力」セクションの一番上の灰色(薄青?)の「inject」ノードを持ってきて、さらに次の「出力」セクションの先頭の緑色の「debug」ノードをもってきます
スクリーンショット 2018-03-06 22.20.53.png
  • 「inject」ノードの右端にある端点(白い四角)からドラッグして線を引き出し「debug」ノードの左端にある端点(白い四角)へ接続します
スクリーンショット 2018-03-06 22.21.02.png
  • 左側の灰色(薄青?)の「inject」ノードをダブルクリックして「injectノードを編集」画面を開きます
スクリーンショット 2018-03-06 22.22.34.png
  • 「ペイロード」のプルダウンメニューを開き、「文字列」を選択します
スクリーンショット 2018-03-06 22.23.42.png
  • 「ペイロード」欄に何か文字列(ここでは例として「こんにちは」)を入力します
スクリーンショット 2018-03-06 22.24.36.png
  • 画面右上の赤い「完了」を押します
  • 画面右端の「デバッグ」タブを選択します(タブを開きます)
スクリーンショット 2018-03-06 22.25.47.png
  • 画面右上の赤い「デプロイ」ボタンを押して変更を確定します
  • 「inject」ノードの左端のボタンを押すと、「inject」ノードから入力した文字列が送出され、それが後続の「debug」ノードへ伝達され、 「debug」ノードから画面右端の「デバッグ」タブへ出力されます
スクリーンショット 2018-03-06 22.28.47.png
  • で?だからなんなのよ?というかたのために、ではウェブサーバーを作ってみましょう

#3. 超シンプルなウェブサーバーを作ってみます

  • 「入力」セクションの「http」ノードをフローエディターへドラッグ&ドロップで持ってきます
スクリーンショット 2018-03-06 22.34.42.png
  • 「http」ノードをダブルクリックして「http inノードを編集」画面を開きます
スクリーンショット 2018-03-06 22.34.49.png
  • 「URL」欄に適当なパス名を入力します。ここでは例として「/test」を指定しています
スクリーンショット 2018-03-06 22.36.47.png
  • 「http inノードを編集」画面右上の赤い「完了」を押して編集作業を完了します。フローエディター上で「http」ノードに指定したURLが表示されるようになります

  • 「出力」セクションの「http response」ノードをドラッグ&ドロップでフローエディターへ持ってきます

スクリーンショット 2018-03-06 22.39.45.png
  • 「http」ノード右端から「http response」ノード左端へドラッグして線で結びます
スクリーンショット 2018-03-06 22.39.53.png
  • 画面右上の赤い「デプロイ」ボタンを押して編集作業を確定します
  • 必要に応じ「デバッグ」タブ出力欄の右側にある「ゴミ箱」アイコンを押してデバッグ出力をクリアします
  • この状態で、Node-REDはhttp://localhost:1880の指定したURL(上記の例では/test)の入力を受け付けるウェブサーバーとなっています。ブラウザを立ち上げアクセスしてみます。(この例ではhttp://localhost:1880/test
スクリーンショット 2018-03-06 22.43.07.png
  • エラーにはなっていませんが、ちっとも面白くないので、上記の超シンプルウェブサーバーから超シンプルなウェブページが返されるようにします
  • 「http」ノードと「http response」ノードを接続している線をいったん切断したいと思います。両者をつなぐ線を選択するとオレンジ色に変化します
スクリーンショット 2018-03-06 22.44.30.png
  • この状態で「削除」キーを押すとこの「http」ノードと「http response」ノードを接続する線は削除(つまり「http」ノードと「http response」ノードは切断)されます
スクリーンショット 2018-03-06 22.46.20.png
  • このあと、この両者の間に別のノードを入れるので、右側の「http response」ノードを少し右の方へずらしておきます。まあどっちでもいいですけど。
スクリーンショット 2018-03-06 22.46.36.png
  • パレットの「機能」セクションからオレンジ色の「template」ノードをドラッグ&ドロップして「http」ノードと 「http response」ノードの間に置きます
スクリーンショット 2018-03-06 22.50.11.png
  • 「template」ノードをダブルクリックし「templateノードを編集」画面を開きます
スクリーンショット 2018-03-06 22.50.18.png
  • 「テンプレート」欄にThis is the payload: {{payload}} !と書かれていますが、今は使わないのでこの行を削除します
スクリーンショット 2018-03-06 22.52.05.png
  • ここにHTMLを書きます。<html>と入力し(自動的に対になる</html>が現れますがそのまま続けて)<html>の後に<body>と入力し(同様に自動的に対になる</body>が現れますがそのまま続けて)<body>の後に<h1>と入力し(同様に自動的に対になる</h1>が現れますが)<h1></h1>の間に「こんにちは」などの文字列を入れます。全体として<html><body><h1>こんにちは</h1></body></html>となります
スクリーンショット 2018-03-06 22.55.38.png
  • 「templateノードを編集」画面の右上の「完了」ボタンを押します
  • 「http」ノードの右端と「template」ノードの左端、「template」ノードの右端と「http response」ノードの左端を線で結んで
スクリーンショット 2018-03-06 22.56.19.png

- 画面右上の赤い「デプロイ」を押して変更を確定します

  • ブラウザからhttp://localhost:1880/testへアクセスすると上記で指定した文字列が返されることを確認します
スクリーンショット 2018-03-06 22.57.41.png
  • 他にもNode-REDとMySQLを使ってデータベースサーバーを作ってみたり、Google翻訳など他社のAPIをNode-REDのフローから呼び出して便利なサービスを作ったり、センサーやビーコンからの情報を受信してIoT可視化の仕組みを作ってみたり、いろいろ可能性が広がるのでぜひ試してみてください。Enjoy :-)
27
42
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
27
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?