1. HTML5 Conference 2015
HTML5 によるロボット制御

2. 自己紹介

Twitter: @masap

職業: 組み込みプログラマ（主に Wi-Fi）

3. 3/28
HTML5 でロボット制御とは

4. ネイティブから HTML5 へ

ロボット制御はネイティブが主流

C/C++ を書く必要がある

HTML5 での開発へ

Web 開発者もロボット制御が可能になる

ロボットに限らずハードウェア制御も可能なので IoT 等への応
用もできる

このスライドでは以下の二通りを紹介

WebSocket 経由で制御

Web API を新設する

5. 5/28
WebSocket 経由でルンバを動かす

6. 6/28
ハードウェア構成図
PC ルンバスマホ
WebSocket USB Serial

7. 7/28
ソフトウェア構成図
PC ルンバスマホ
WebSocket USB Serial
ROS
Rosbridge
(WebSocket Server)
roslib.js
Webアプリ

8. ROSとは

ロボット制御のためのライブラリ、ツール

Robot Operating Systemの略だがOSではない

ロボットを制御するための統一的なAPIを提供する

制御プログラムは、ユーザーが C++ で記述する

9. ROS の仕組み

ROS の基本用語

ノード、publish、subscribe
ROSアプリ
cmd_vel ノード
（移動指示を受ける）
publish
(前進、回転等の指示を送る)
odom ノード
（位置情報を発信する）
subscribe
(情報を取得する)

10. Rosbridge とは

ROS を JavaScript から使用できるようにするパッ
ケージ

WebSocket サーバー機能を持つ

ユーザーは JavaScript で WebSocket サーバに接続
し、ロボットにコマンドを送る

ROS を使うには C++ を書く必要があったが JavaScript
で書けるので Web 開発者にやさしい

11. Rosbridge の使い方

ライブラリのインストール

eventemitter2.jsとroslib.jsをダウンロードする

WebScoket サーバへ接続
var ros = new ROSLIB.Ros();
ros.connect('ws://localhost:9090');

12. ルンバに指示を送る (1/2)

ルンバに移動コマンドを送る

cmd_vel というノードに前進コマンドを送る
var cmdVel = new ROSLIB.Topic({
ros : ros,
name : '/cmd_vel',
messageType : 'geometry_msgs/Twist'
});
var forward = new ROSLIB.Message({
linear : { x : 0.1, y : 0.0, z : 0.0 },
angular : { x : 0.0, y : 0.0, z : 0.0 }
});
cmdVel.publish(forward); ROS
アプリ
cmd_vel ノード
（移動指示を受ける）
publish
(前進、回転等の
指示を送る)

13. ルンバに指示を送る (2/2)

指示の詳細

進行方向と回転方向を指定

linear: 進行方向と速度 (meter/sec)

angular: 回転方向と速度 (radian/sec)

平面で考えると簡単

linear の x 座標が + なら前進、 - なら後退

angular の z 座標が + なら反時計回り、 - なら時計回り

14. ルンバの情報を受け取る

ルンバの情報を受け取る

odom というノードを subscribe する
var listener = new ROSLIB.Topic({
ros : ros,
name : '/odom',
messageType : 'nav_msgs/Odometry'
});
listener.subscribe(function(message) {
console.log('Received message: ' +
message.header.seq);
listener.unsubscribe();
}); ROS
アプリ
odom ノード
（位置情報を発信する）
subscribe
(情報を取得する)

15. 15/28
WebAPI でルンバを動かす

16. Web API とは

二種類のWeb API

Web 上のサービスとして提供

Twitter API、Youtube API、...

ブラウザ上のJavaScript API （今日扱うのはこちら）

navigator.getUserMedia, navigator.geolocation, ...

17. ロボットを制御するWeb API

ロボットを制御するWeb APIはあるのか

今の所は無い。なので新しく作る

何を作るのか

navigator.getusermedia のように
navigator.robotxxx のような API を作る

どうやって新しい Web API を作るのか

Firefox を修正する

Foxberry Pi を使用する

18. 作る意義

そうまでして自分向けに作る意味はあるのか

W3C Browsers and Robotics Community Groupにて
標準化検討中
http://www.w3.org/community/browserobo/

未来の標準を作る

19. Firefox を修正する

なぜ Firefox か

Chrome、Safari、IE と比較してハードウェアにアクセスする
Web API が最も充実しているため

Firefox では Gecko が Web API を実装している

なので Gecko にコードを追加することで新しい Web API を作
ることができる

gecko/dom/geolocation 等
Gecko
Web アプリ
Web API

20. Foxberry Pi を使用する

Gecko の修正は敷居が高い

JavaScript と C++ の両方を書かなければならない

Foxberry Pi で Web API を実装

JavaScript を使って擬似的に Web API を実装できる
Firefox OS
JavaScript WebIOPi
ハードウェア
HTTP
Raspberry Pi
Web API

21. WebIOPi

WebIOPi とは

Raspberry Pi 上で動く IoT フレームワーク

HTTP で WebIOPi に接続してコマンドを送ることでハー
ドウェア制御ができる

22. 必要な Web API は

ロボットを動かす API

ロボットを動かす = モーターを動かす

ロボットの情報を受け取る API

ロボットの関節の状態

ロボットに搭載したセンサーの情報

カメラの情報 （これは既存の WebRTC で取得）

必要なのは GPIO と I2C

23. GPIO とは

GPIOとは

General Purpose Input/Output（汎用入出力）の略。

コンピュータと周辺機器を接続するためのピン。

ピン番号を指定して、 on/off を設定したり、 on/off を
読み取ったりできる。

ロボット制御においてはモーターの on/off を制御でき
る。

24. I2C とは

I2Cバスとは

シリアル通信のためのバス

GPIO ではモーターの on/off しか制御できないのに対
し、モーターの回転数等を細かく制御できる

25. Web GPIO API

Web GPIO API

navigator.mozGpio.write(ピン番号, 値)

例えば 10 番ピンにモーターがつながっている場合、以下のよ
うに on/off できる
navigator.mozGpio.write(10, 1) で on
navigator.mozGpio.write(10, 0) で off

navigator.mozGpio.read(ピン番号, 値)

26. Web I2C API

Web I2C API

navigator.mozI2c.getI2cDevice(デバイス名,アドレス)

I2c デバイスの取得

i2c_device.write/read(レジスタアドレス, 値);

レジスタへの書き込み、レジスタの読み取り

例

DRV8830 を用いたモーター制御
var i2c_device =
navigator.mozI2c.getI2cDevice("/dev/i2c-1", 0x64);
i2c_device.write(0x00, 0xfd);

27. まとめ

HTML5 でもロボットを

このように HTML5 でもロボットを動かせるようになって
きています

他にも Tessel や Espruino 等、 JavaScript で動かせる
ハードウェアがあります

楽しいのでぜひ！

28. 28/28
以上