ラズパイで動くロボット「GoPiGo」をつかって遠隔見守りロボットを作ろう（3）スマホ連携編

ROSとRaspberry Piで遠隔みまもりロボットを作ろう 第3回（「Tech-Sketch」出張所／番外編）

2. スマホからGoPiGoを操作できるようにする

　次に、スマホなどのブラウザからGoPiGoを操作する機能を追加しましょう。ブラウザから操作できるようにするには、ブラウザに表示する操作画面と、ユーザが操作画面で操作したデータ（操作コマンド）をGoPiGoに送る仕組みの、計2点が必要です。

パッケージの作成

　1点目の、GoPiGoの操作画面を作成しましょう。ジョイスティックやカメラ映像を表示する画面を作成するために、新規にROSのパッケージを作成します。ここでは、webjoy_exampleという名前のパッケージを作成しましょう。

　パッケージを作成するには、catkin_create_pkgコマンドを使用します。

新規パッケージの作成

$ cd ~/gopigo_ws/src
$ catkin_create_pkg webjoy_example

　次に、htmlなどのリソースファイルを配置します。操作画面のサンプルファイルをこの記事に添付しているので、そちらをGoPiGoにダウンロード・解凍し先ほど作成したwebjoy_exampleフォルダ内にコピーして、以下の構成になるようにしてください。

webjoy_example
        ├── CMakeLists.txt
        ├── launch
        │   └── webjoy_example.launch
        ├── package.xml
        └── www
            ├── index.html
            └── webjoy.js

　webjoy_exampleパッケージのwwwディレクトリ以下には、操作画面のhtmlやjsなどリソースファイルが入っています。これらのファイルは次項の「Webサーバを立てる」でWebサーバ起動時に読み込まれます。なお、wwwディレクトリ以下のindex.html、webjoy.jsのソースコードの解説は最後のページで行います。

　では、webjoy_exampleパッケージをビルドしましょう。catkin_makeコマンドは、作成したパッケージをビルドするために使用します。次のsourceコマンドで、新規に作成したパッケージをROSが見つけられるようにしています。

パッケージのビルドと読み込み

$ cd .. && catkin_make
$ source ~/gopigo_ws/devel/setup.bash

Webサーバを立てる

　遠隔操作に必要なリソースは揃いましたが、これらのリソースは外部に公開されていないため、今のままではGoPiGo内部からのみアクセス可能な状態です。スマホなどの外部デバイスにリソースを配信するためには、Webサーバが必要です。今回は、roswwwというROSのパッケージを使ってWebサーバを立てます。

　こちらのサーバは、内部的にはTornadoというPythonベースのWebサーバ（フレームワーク）を使っています。デフォルトでは、パッケージの下にwwwというフォルダを作ると、その下にあるhtmlなどのリソースを自動で読み込んでくれます。 では、Webサーバを起動しましょう。これは、デフォルトで8085番ポートをクライアント接続用に解放します。

Webサーバの起動

$ roslaunch roswww roswww.launch

　Webサーバの起動後、下記にアクセスしてみましょう。

http://GoPiGoのIPアドレス:8085/webjoy_example/index.html

　下図のようなページが表示されたでしょうか？

スマホに表示された操作画面

　上部はGoPiGoからのカメラ映像、下部はジョイスティックになっており、ジョイスティックを動かすことでGoPiGoを操作できるインターフェースとなっています。

WebとROSを繋げる

　実は、現時点ではブラウザでジョイスティックを操作しても、その操作データはROSへ到達していません。これは、ブラウザ（Web）とROSが双方向で繋がっていないためです。

　このように、WebからROSへ、またその逆のROSからWebへデータを変換する仕組みが必要になります。幸い、ROSにはこの相互変換の仕組みがすでに用意されています。ROSではrosbridge_suiteパッケージ、WebではroslibjsというJavaScriptライブライリ使うことで、ROSのメッセージとJSONが相互変換され、WebとROSとで双方向に通信できるようになります。

　通信にはWebSocketが用いられ、rosbridge_serverはWebSocketサーバ、roslibjsはWebSocketクライアントとして動作します。

rosbridge_serverを介したWeb-ROS間通信イメージ

　では、まずROS側のWebSocketサーバであるROSブリッジサーバを起動します。このサーバは、デフォルトで9090番ポートをクライアント接続用に解放します。

ROSブリッジサーバの起動

$ roslaunch rosbridge_server rosbridge_websocket.launch

　一方、クライアント側は先ほど表示したindex.html内でroslibjsの読み込みが行われます。

　ページを再読み込み後、ジョイスティックを操作して速度コマンドの/cmd_velトピックがROS側に到達しているかどうか確認しましょう。

/cmd_velトピックがROSに到達しているか確認

$ rostopic echo /cmd_vel

　操作画面のジョイスティックを上下左右に操作して、以下のようにトピックの内容が変化すればOKです。この操作により、linearのx（併進方向で単位はm/s）、angularのz（回転角度で単位はradian/s）が変化するのを確認してください。

ジョイスティックを上に操作した時の実行結果

linear:
  x: 0.0
  y: 0.0
  z: 0.0
angular:
  x: 0.0
  y: 0.0
  z: 0.0
---
linear:
  x: 0.0673572564762
  y: 0.0
  z: 0.0
angular:
  x: 0.0
  y: 0.0
  z: 0.0
---
～以下略～

　これで、ROSとWebが繋がったことが確認できました。