CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/04/13 14:00
目次

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間通信イメージ
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が繋がったことが確認できました。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ROSとRaspberryPiで遠隔みまもりロボットを作ろう(「Tech-Sketch」出張所/番外編)

著者プロフィール

  • 古賀 勇多(TIS株式会社)(コガ ユウタ)

    TIS株式会社 AIサービス事業部AIサービス企画開発部所属。2015年入社後、自律移動ロボットの研究開発に従事。ロボット・クラウド・機械学習を活用した、人と共生できるロボットシステムの開発を目標にしている。最近興味がある技術は電子工作や3D CAD、DIY。

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5