LoginSignup
4
1

More than 5 years have passed since last update.

Node-REDで、ブラウザにメッセージを表示するアプリを作ってみた

Last updated at Posted at 2017-06-20

はじめに

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

今回使用するノード

httpノード:ブラウザでアプリを開くノード
templateノード:ブラウザに表示されるされる内容を記述
http responseノード:ブラウザに出力するノード

アプリの完成図

rehello6.png

アプリの実装方法

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

rehello1.png

  
5. ブラウザにメッセージを表示するためには、templateノードを使います。

左のノード一覧の機能カテゴリーから、templateノードをフロー上にドロップ&ドラッグします。
rehello2.png

  
6. templateノードをダブルクリックし、Template欄に「Hello World!!」と記述し、完了ボタンをクリックします。

ug9.png

  
7. 左のノード一覧の出力カテゴリーから、http responseノードをフロー上にドロップ&ドラッグします。
http responseノードは設定不要です。

rehello3.png

  
8. httpノード、tempalateノード、http responseノードの順でノードを結びます。
ノードを結合したら、右上のデプロイボタンをクリックします。

rehello4.png
  
9. Node-REDのアプリの語尾に「/hello」を入力し、ブラウザでアクセスします。
下記のようにブラウザに、「Hello World!!」と表示されたら、完成です。

rehello5.png

4
1
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
4
1