8
5

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 2017-06-25

はじめに

Node-REDとは、オープンソースの開発プラットフォームです。
IBMの提供するBluemixというクラウドがあれば、簡単に使えます。
今回は、Node-REDを初めて使う人に、Node-REDでのアプリを掴んでいただきたいと思います。

今回使用するノード

  1. ingectノード:処理のトリガーとなるノード
  2. debugノード:debugタブに文字列などを出力するノード
  3. functionノード:Node.jsのコードで、何らかの処理を書くノード

アプリの完成図

ug1.png

アプリの実装方法

  1. Bluemix上で、Node-RED Starterを選択し、Node-REDのアプリを作成します。
    Bluemixへの登録、ログインは、下記URLから行ってください。
    https://console.bluemix.net/
      
  2. Node-REDのアプリが開始中になったら、Node-REDの編集画面を開きます。
      
  3. 左のノード一覧の入力カテゴリーから、ingectノードをフロー上にドロップ&ドラッグします。
    jikoku1.png
      
  4. injectノードをダブルクリックし、injectノードの設定をします。
    「Payload」の「timestamp」を選択することで、タイムスタンプをdebugタブに出力することができます。
    jikoku7_1.png

  
5. 同様に、左のノード一覧の出力カテゴリーから、debugノードをフロー上にドロップ&ドラッグします。
jikoku2.png
   
6. フロー上のingectノードの右の点と、debugノードの左の点を線で結びます。
ノードを結合したら、右上のデプロイボタンをクリックし、フローの変更をアプリに反映します。
jikoku3.png
  
7. ingectノードの左側のボタンをクリックすることで、右側のdebugタブにingectノードをクリックしたタイムスタンプを取得することができます。
jikoku6.png
  
8. 今debugタブに表示されているタイムスタンプを時刻に変換する処理を加えます。
左のノード一覧の機能カテゴリーから、functionノードをフロー上にドロップ&ドラッグします。
jikoku8.png
  
9. functionノードをダブルクリックし、functionノードの設定をします。
functionノードでは、「Function」にNode.jsのコードを記述できますので、この中に下記のコードを記入し、「完了」をクリックしてください。
jikoku9.png

functionノードの「Function」に記述するコード
var date = new Date();
date.setTime(msg.payload);
msg.payload = date.toString();
return msg;

10.ingectノードとdebugノードを繋げた線をマウスで選択し、deleteキーを押します。
マウスで選択し、deleteキーを押すことで、ノード、ノードをつなぐ線を消すことができます。
  
11. ingectノード、functionノード、debugノードの順にノードを繋げ、右上のデプロイボタンをクリックし、フローの変更をアプリに反映します。
jikoku10.png
  
12. 再度ingectノードの左側のボタンをクリックし、世界標準時刻が表示されたら完成です。
jikoku11.png

8
5
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
8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?