short lecture note for building a web-based UI of a ROS system (in Japanese)
それでは、roswww
を用いて、パッケージにウェブサーバーの機能を追加してみましょう。
package.xml
にroswww
への依存関係を追加します。
<exec_depend>roswww</exec_depend>
launch
ファイルを作成し、roswww
とrosbridge_server
を起動させるよう設定します。既存のlaunchファイルに追記してもいいですし、新しくlaunchファイルを作成してもいいです。
<arg name="port" default="8085"/> <!-- Apacheのデフォルトポートは避ける(普通は80) -->
<arg name="webpath" default="www"/> <!-- ウェブサーバーのルートディレクトリにするフォルダへの相対パス -->
<arg name="use_roswww" default="true" />
<!-- 以下はコピペするだけでOK -->
<include if="$(arg use_roswww)" file="$(find rosbridge_server)/launch/rosbridge_websocket.launch" />
<include if="$(arg use_roswww)" file="$(find roswww)/launch/roswww.launch">
<arg name="port" value="$(arg port)"/>
<arg name="webpath" value="$(arg webpath)"/>
</include>
パッケージの中にwww
フォルダを作成しましょう。このフォルダ(厳密には、launchファイルでwebpath
に設定したフォルダ)が、ウェブサーバーのルートディレクトリになります。講習資料のsample/simple_static
ディレクトリの中身を、www
フォルダにコピーしてみましょう。
roslaunch
した後、http://localhost:8085/%YOUR_PACKAGE_NAME%
にアクセスしてみましょう。www/index.html
の内容が表示されているはずです。
このサンプルは、静的なコンテンツでしかありませんが、roslibjs
を使うことで、topic通信など、ROSの機能が使えます。