html5j エンタメ技術部

5/17（土）13:30～＠インターネットイニシアティブ 17階 中会議室

～ Web技術者のためのArduino入門 ～

第2回勉強会

- 実践編（資料 2/2） -

本日の流れはじめに

Arduinoの回路を組んでみる、プログラムで制御する

　　（休憩）

JavascriptでArduinoを制御してみる

Websocketによるセンサー情報の送受信

　　（休憩）

自由課題、自由課題の内容共有

おわりに

この資料の内容

ここは別資料に

本日の流れはじめに

Arduinoの回路を組んでみる、プログラムで制御する

　　（休憩）

JavascriptでArduinoを制御してみる

Websocketによるセンサー情報の送受信

　　（休憩）

自由課題、自由課題の内容共有

おわりに

Javascript連携の話Arduino側のセッティング

node.jsのライブラリのセッティング

LEDやスイッチの利用

Arduino側のセッティングIDEのメニュー内の「ファイル」から

＞ スケッチの例

　＞ Firmata

　　＞ Standard Firmata

を開く

サンプルプログラムには手を加えず、Arduinoにそのままプログラムを書き込む

Javascript連携の話Arduino側のセッティング

node.jsのライブラリのセッティング

LEDやスイッチの利用

セッティングの補足node.js のセッティング　今回は公式のインストーラを利用　⇒ http://nodejs.org/download/　より、ご自身のOS・32-bit/64-bit など、　環境にあったものを入手

完了後の確認インストール完了後、コマンドで「node -v」と「npm -v」をそれぞれ実行した際にバージョン番号が表示されればOK

注： 今回は、任意の場所に作業用　　フォルダを作成し、そのフォルダ　　内で作業を進めるようにして　　います

ライブラリの導入node.js の ライブラリパッケージを導入。パッケージ管理ツール npm を利用。コマンドで　npm install johnny-fiveを実行

公式の情報：　rwaldron/johnny-five　　https://github.com/rwaldron/johnny-five

Javascript連携の話Arduino側のセッティング

node.jsのライブラリのセッティング

LEDやスイッチの利用

Javascript での制御～ LED・スイッチの利用など ～

第１回勉強会 セッション３ のソースコードと回路図：https://github.com/iwanaga/arduino-test

※ ソースコード・回路図は下記になります。

第１回勉強会　セッション３：「JavaScript と Arduino でオリジナルデバイスを作ろう」http://www.slideshare.net/YoshihiroIwanaga/javascript-arduino

※ 下記の資料「ページ２６～４０」もご参照ください

先ほど利用したセンサーをJavascript で扱う

～ センサーの値をログ出力 ～

回路図

Arduino IDE で光センサーを扱った際と同じ

センサーの値をログ出力ソースコードはこちら

https://github.com/yo-to/html5j-entech/tree/master/002

短縮URL　http://goo.gl/uPhWbL⇒ 上記の中の「01_Photoresistor」

実行は、Arduinoを接続した状態にし、コマンドで　node Photoresistor.jsを実行⇒ センサーの値が一定の時間間隔で表示されればOK（センサー付近を手で覆ったり、手を離したりすると値が変化）

本日の流れはじめに

Arduinoの回路を組んでみる、プログラムで制御する

　　（休憩）

JavascriptでArduinoを制御してみる

Websocketによるセンサー情報の送受信

　　（休憩）

自由課題、自由課題の内容共有

おわりに

Websocket・ Socket.IO の利用

Websocket についてサーバクライアント間での双方向通信

高速なリアルタイム通信

HTTPを模したハンドシェイクに、独自の通信プロトコル

　　　など。

Websocket についてクライアント側での利用

様々なPC・スマホ用ブラウザで利用可能http://caniuse.com/websockets

Websocket についてWebサービスPusher | HTML5 WebSocket Powered Realtime Messaging Service　http://pusher.com/

　　※無料プランもあります（1日あたりの　　　利用量などの制限あり）

Websocket についてサーバ側の実装こちらも様々な言語での利用可能なライブラリありhttp://ja.wikipedia.org/wiki/WebSocket

　

今回は、node.jsで利用可能な　　「Socket.IO http://socket.io/」

　を利用

Socket.IO についていくつかのリアルタイム通信技術を、統一的なAPIで提供したものnode.js用サーバ側ライブラリとブラウザ用JavaScriptライブラリを利用する形。

「WebSocket、Comet、ポーリングなどの通信に対応」

シンプルなチャットの実装例ローカルで動作する Socket.IO を利用したチャット実装例

【node.js】socket.ioで構築したローカルで動くシンプルなチャットルーム。http://www.tettori.net/post/852/

前ページの例の構成

app.js

Webサーバ

Websocketサーバ

１）各ウィンドウに index.html が読み込まれる

ブラウザ（ウィンドウA）

ブラウザ（ウィンドウB）

ブラウザ（ウィンドウC）２）Websocketサーバと接続（ブラウザ側がWebsocketのクライアントになる）

前ページの例の構成

app.js

Webサーバ

Websocketサーバ

ブラウザ（ウィンドウA）

ブラウザ（ウィンドウB）

ブラウザ（ウィンドウC）

１）"C_to_S_message"（イベント名） でのメッセージ送信

２）受信したメッセージを送信元を含めた全体に送信

前ページの例の構成

app.js

Webサーバ

Websocketサーバ

ブラウザ（ウィンドウA）

ブラウザ（ウィンドウB）

ブラウザ（ウィンドウC）

１）"C_to_S_broadcast"（イベント名） でのメッセージ送信

２）受信したメッセージを、送信元以外へ送信

Arduinoのセンサーの値をやりとりしてみる

ライブラリの導入サーバ用のライブラリの導入　npm install socket.ioを実行

node.js で socket.io のクライアント側の処理を実行するためのライブラリの導入　npm install socket.io-clientを実行

センサーの値のやりとりソースコードはこちら

https://github.com/yo-to/html5j-entech/tree/master/002

短縮URL　http://goo.gl/uPhWbL⇒ 上記の中の「02_Transmission」

構成とデータの流れserver.js

Webサーバ

Websocketサーバ ブラウザ

arduino.js

Websocketクライアント

Arduino

矢印はデータの流れ（※各接続の流れは後で補足）

回路図

先ほど既にセッティング済みの、光センサーを扱った際と同じ

センサーの値のやりとり実行方法

サーバの実行はコマンドで　node server.jsを実行また、Arduinoを接続した状態で、上記に追加で　node arduino.jsも実行する上記2つが両方実行されている状態で、さらに、ブラウザのアドレスに　http://localhost:8080を入力

⇒ ブラウザ上に連続して数値が表示されればOK　（センサー付近を手で覆ったり、手を離したりすると値が変化）

接続の流れ１server.js

Webサーバ

Websocketサーバ ブラウザ

arduino.js

Websocketクライアント

Arduino

１）server.js が実行され、サーバが待ち受け状態に。

２）arduiono.js が実行され、センサーの値取得と、サーバへの接続が行われる。センサーの値が取得されるごとに、サーバの値の送信が行われる状態に。

接続の流れ２server.js

Webサーバ

Websocketサーバ ブラウザ

arduino.js

Websocketクライアント

Arduino４）Websocketサーバとの接続が行われる

３）ブラウザがlocalhost に接続し、index.html を読み込む

接続の流れ２server.js

Webサーバ

Websocketサーバ ブラウザ

arduino.js

Websocketクライアント

Arduino

５）センサの値が取得されるごとにイベントが発生し、データがサーバ経由でブラウザへと送信される

ファイルの処理の補足arduino.js の 21行目までは、既出の Photoresistor.js をベースに、19行目のセンサーの値の送信処理を加えたもの。センサーの値を取得するごとに、取得した値を送信する。

arduino.js の 25行目以降は、下記の処理を行っている

Websocketサーバへの接続（接続先をポート番号を含めて指定）

Websocketサーバへの接続時・切断時、および、messageイベント取得時にログを出力

ファイルの処理の補足 server.js の 1行目から47行目まで（2行目を除く）は、簡易なWebサーバを実行するための処理。下記に記載の、カレントディレクトリ以下のファイルを読み込めるシンプルなWebサーバ。●node.jsでシンプルなwebサーバー - Qiita　http://qiita.com/_shimizu/items/094c4beace9c7a36deb1

server.js の 2行目、および、51行目から63行目までは、Websocketサーバの処理に関する部分。接続・切断時のログ出力等の処理と、55行目から59行目までのmessageイベント受信時の処理がある。messageイベント受信時は、受信したデータを接続済みのクライアント宛に送信する。

ファイルの処理の補足 index.html の 以下はWebsocketサーバとのやりとりに関する処理部分。

7行目： Socket.IO 利用時の、クライアントライブラリの取得処理

11行目： Websocketサーバへの接続

13～25行目： Websocketサーバへの接続時・切断時、および、messageイベント取得時の処理。

index.html の 28～34行目は、Websocketサーバから受信した値を、Webページ内に表示させる処理。出力先は、42行目の div要素の部分

連続して送られてくる数値のグラフ化

グラフ描画ライブラリ について

今回は「Smoothie Charts　http://smoothiecharts.org/」を利用ストリーミングデータをグラフ化するライブラリ

利用の流れは下記のとおり●Smoothie Charts: Ten Minute Tutorial　http://smoothiecharts.org/tutorial.html

センサーの値をグラフ描画ソースコードはこちら

https://github.com/yo-to/html5j-entech/tree/master/002

短縮URL　http://goo.gl/uPhWbL⇒ 上記の中の「03_Graph」

回路図

今回も、先ほど既にセッティング済みのと同じ

センサーの値をグラフ描画実行方法

サーバの実行はコマンドで　node server.jsを実行また、Arduinoを接続した状態で、上記に追加で　node arduino.jsも実行する上記2つが両方実行されている状態で、さらに、ブラウザのアドレスに　http://localhost:8080/index2.htmlを入力

⇒ ブラウザ上にグラフが描画されればOK　（センサー付近を手で覆ったり、手を離したりするとグラフが変化）

ファイルの処理の補足「02_Transmission」と「03_Graph」について、 arduino.js と server.js は同一のもの。

違いは「index2.html」と「smoothie.js」「smoothie.js」はグラフ用ライブラリ

ファイルの処理の補足 index2.html の 以下が、前述の index.htmlと異なる部分

8行目： グラフ用ライブラリの読み込み

12、13行目： グラフ描画領域の準備。描画するグラフの最大値と最小値を指定。さらに、グラフ出力を行う Canvas要素への紐付けを行っている※ 対象の Canvas要素は49行目

15、16行目： グラフとして描画する値を扱うオブジェクトの準備。ちなみに、これを複数用意すると、グラフ描画領域上に複数のグラフを描画することが可能。

41行目： グラフとして描画する値の指定。これが、サーバからのデータ受信を行うごとに発生するので、そのイベント発生時間とサーバから取得した値とを元にグラフの座標を指定。

http://www.slideshare.net/yo-to/html5j-entech0002a

この資料は、下記（1つ目の資料）の続きになります