自律移動ロボットや協働ロボットの研究開発を得意とするお客さまが試作した「階段を昇降できる自動掃除ロボット」において、タブレットでコマンド送信や状態表示をするUIアプリケーションを開発しました。ロボット開発に懸ける想いや、理想のUIについて作り手同士たくさんの協議を重ねて実現されました。

私たちが開発したアプリは、ロボットの経路を簡単に作成できるものです。操作が難しそうな印象を受けるかもしれませんが、ユーザーに直感的で使いやすい体験を提供するため、お客さまと密接に協力して設計しました。このロボットとアプリには、動作予約や緊急停止などの機能も用意されており、タブレットからロボットをスムーズに操作できます。階段昇降ロボットとのデータ連携も、お客さまとの綿密なコミュニケーションを基に、最適なソリューションを実現しました。さらに、ロボットのブランドイメージを構築するため、デザインにもこだわりを持って開発を進めました。

ロボット自体をWebサーバーとし、タブレットのブラウザでアクセスするという特殊な環境での開発になりました。ROS（Robot Operating System）というロボット開発のためのプラットフォームを利用し、WebSocketを使いそこから取得したトピックとサービスを使ってロボットとの連携を行っています。フレームワークとしてVue.jsを、画面上での経路作成機能やマッピングされた画像への領域指定機能などグラフィカルな機能部分ではJavaScriptライブラリのFabric.jsを採用しています。今後お客さま自身での改修もありうるということでしたので、汎用性が高いコンポーネントの作成、Vue.jsのsetup構文を取り入れたシンプルで分かりやい記述、TypeScriptによる型推論など、後々修正がしやすいコードの記述を心がけました。
デザイン面ではお客さまのコーポレートカラーを差し色とし、なるべくシンプルで操作のしやすいデザインを意識しました。ITに精通していないユーザーが使うことを念頭に、アイコンを多用して何をする機能かがわかりやすいように工夫しています。右上にはリアルアイムでステータスを表示することで、電波やバッテリー残量や稼働状況がひと目見ただけでわかるUIとなっており、サイドメニューを常に表示しておくことでユーザーが見たい画面にすぐにアクセスできる仕様になっています。