体験的マイコン学習（Arduino編）

準備するもの

フルカラーLED： 1個
ジャンパー線： 4本
抵抗(330Ω): 3個

PubNubとは

PubNubとは、デバイスやブラウザ間でリアルタイムでデータをやり取りするサービスです

必要なものをインストール

(1)Node.jsをインストールします

Node.js公式サイト

(2)コマンドプロンプトでnode -vを実行しバージョンが表示されることを確認してください

(3)下記をダウンロードしてください

16_pubnub_led(zip)

(4)ダウンロードしたものを展開しコマンドプロンプトでそのフォルダに移動

// Windowsでの移動
cd C:¥Users¥MyName¥16_pubnub_led¥node(ダウンロードして展開した場所によって異なります)
// MacOS での移動
cd /Users/MyName/16_pubnub_led/node(ダウンロードして展開した場所によって異なります)

(5)johnny-fiveのインストール

// johnny-fiveのインストールコマンド
npm install johnny-five

(6)pubnubのインストール

//Pubnubのインストールコマンド
npm install pubnub

(7)firmataの削除

「node」フォルダの中の「node_modules」内にある「firmata」フォルダを削除してください

deletefirmata

ブレッドボードへの接続

ブレッドボードへの接続を行っていきます

fritzing画像

Ardiunoの設定

Ardiunoの準備

ardiuno.exeを起動して左上にあるファイル>スケッチの例＞Firmata＞StandardFirmataを選択してArdiunoに書き込む

※一度でも書き込んでいればここは飛ばしてもらっていいです(第15回を行っている場合)

ardiunofirmata画像

PubNubの設定

(1)PubNubの公式ページに行きます

公式ページはこちら

(2)ログインをしてください

pubnubログイン

(3)「CREATE NEW APP」をクリック

pubnubnewapp

(4)「App Name」に名前を入れて「CREATE」をクリック

pubnubnewapp2

(5)作成すると以下のものが表示されるのでクリック

newapp

(6)「Demo Keyset」をクリック

keyset

(7)開いたページの「Application add-ons」の「PRESENCE」,「STORAGE & PLAYBACK」,「PUBNUB FUNCTIONS」をONにして「SAVE CHANGE」をクリック

pubnubapp

(8)PubNubページ左側にある「FUNCTIONS」をクリックし「CREATE MODULE」をクリック

functions

必要な情報を入れて「CREATE」をクリック

createmodule

(9)作成したものをクリック

module

(10)「CREATE FUNCTION」をクリック

modulefunction

(11) 必要な情報を入力して「CREATE」をクリック

createfunction

プログラムの作成

ダウンロードした中にある「index.html」「index.js」の「publish_key」「subscribe_key」にPubNubのキーを設定

以下の記述が「index.html」「index.js」の中にあるのでキーを設定してください

var pubnub = PUBNUB.init({
  publish_key: 'ここにPubNubのキーを設定',
  subscribe_key: 'ここにPubNubのキーを設定'
  });

PubNubのキーはPubNubのページの左の「KEYS」をクリックすると表示されます

以下の画像は表示された画面をさらにクリックした状態です

key

実行する

(1)ArdiunoをPCに接続

(2)コマンドプロンプトで展開した場所に移動して下記のコマンドを入力

node index

正常な場合はコマンドプロンプトに以下のように表示される

正常な場合の画像

(3)index.htmlを開く

ブラウザ画面

(4)RGBのバーを動かして色を変えてみましょう

色が変わっている様子

Arduino編第16回 Node.js(johnny-five)とPubNubを使ってブラウザからLEDの色を操作してみよう