MIRS2404-SOFT-0001 - ソフトウェア詳細設計

名称	ソフトウェア詳細設計
番号	MIRS2404-SOFT-0001

版数	最終更新日	作成	承認	改訂記事
A01	2025.1.24	松嶋　昂平	香川先生	初版

2. 機能概要

table1. iPadアプリ概要
機能	概要	記述言語
予約データの取得	当日の案内のスケジュール、見学者の名前、PINを取得する。	html,JavaScript
本人確認	見学者のPINと入力されたPINを比較してノン人確認をする。	html,JavaScript
案内の進行	学校の見学を予約通りに行うように制御する	html,JavaScript
案内の中止/再開	途中で機体の動作の停止、再開	html,JavaScript
見学者との対話	音声認識で質問を聞き取り、回答を生成して読み上げる。	html,JavaScript
地図の表示	ロボットの現在地を地図上に表示する	html,JavaScript
使用方法の説明	音声で説明し、使用方法の下増を見れるようにする。	html,JavaScript

table2. 事前予約アプリログインページ概要
機能	概要	記述言語
ユーザーの登録	メールアドレス、ユーザーネーム、パスワードを登録する	html,JavaScript
ログイン	パスワードを入力してログイン。ユーザーの権限ごとにリダイレクトするページを選択	html,JavaScript

table3. 事前予約アプリ見学者用ページ
機能	概要	記述言語
イベント予約	事前に見学を希望する内容を予約することができる。また、プロフィールを参照し、適切なイベントを優先的に表示する。	html,JavaScript
対話予約	事前に見学を希望する相手との対話を予約することができる。また、プロフィールを参照し、適切なイベントを優先的に表示する。	html,JavaScript
プロフィールの設定	イベント、対話予約で参照するプロフィールを設定する。	html,JavaScript

table4. 事前予約アプリ在校生用ページ概要
機能	概要	記述言語
対話の登録	対話の予約が入れられる時間を登録する。	html,JavaScript
プロフィールの設定	対話予約で参照するプロフィールを設定する。	html,JavaScript

table5. 事前予約アプリ管理用ページ概要
機能	概要	記述言語
イベントの登録	見学可能な場所、日時、時間などを設定して予約可能な状態にする	html,JavaScript
イベントの更新	既に登録してある見学内容の変更をする	html,JavaScript
イベントの削除	登録してある内容を消去する	html,JavaScript

table6. 事前予約アプリAPI概要
機能	概要	記述言語
予約データの提供	GET通信に対して当日の予約のリスト、予約者のユーザー名、PINを返す	html,JavaScript

table7. 機体本体概要
機能	概要	記述言語
モーターの制御	指令値に対してモータードライバへPID制御を行う	arduino
エンコーダの読み取り	エンコーダの値を読み取り、トピックを流す	arduino
LiDARデータの取り扱い	LiDARのデータを読み取り、処理し、トピックを流す	python

table8. PC処理概要
機能	概要	記述言語
Navigation2の処理	機体の移動ルートの制御を行う	pyhton
ROSとWEBの間の通信	WEBsocketでROSとWEBサイト間の通信を行う	html,javascript
iPad用WEBアプリの配信	PCからHTML等を配信する	arduino

3. モジュール構成

iPad用アプリの構成図を以下に示す。

fig1. iPad用アプリのモジュール構成図

table9. iPad用動作概要
モジュール名	概要
gapless.html	iPad用WEBアプリのhtmlページ
gapless.js	アプリ全体の制御、データの取得、ログインを行う
gapless_chat.js	対話機能の制御、音声認識、回答生成、回答の読み上げ、チャット履歴の表示などを行う。
gapless_ex.js	使い方の画像の表示や説明の処理を行う。
gapless_ros.js	ROSとの通信を主に行い、現在地の取得、目的地の送信、走行状態の監視などを行う。
gapless.css	全体的なスタイル、待機画像のスタイル
gapless_chat.css	対話のチャット欄のスタイル
gapless_ex.css	使い方の画像の表示や説明のスタイル
gapless_ros.css	地図、走行状態のスタイル
LoginCSS.html	ログインページのスタイル

ログインページの構成図を以下に示す。

fig2. ログインページのモジュール構成図

table10. mirs_navigationのモジュール動作概要
モジュール名	概要
appsscript.json	GASWEBアプリのタイムゾーンやoauthScopesの設定ファイル
Login.html	アクセスして最初に表示されるページ。
LoginCode.gs	登録、ログイン機能のdrive側での処理。データの操作などを主に行う
LoginJavaScript.html	登録、ログイン機能のフロント側での処理。登録フォームの送信などを行う
LoginCSS.html	ログインページのスタイル

見学者向けページの構成図を以下に示す。

fig3. 見学者向けページのモジュール構成図

table11. mirs_navigationのモジュール動作概要
モジュール名	概要
SystemCode.gs	ページアクセス時の処理の記述
appsscript.json	GASWEBアプリのタイムゾーンやoauthScopesの設定ファイル
Home.html	アクセスして最初に表示されるページ。サイトの使用方法を記述
HomeCSS.html	ホームのページのスタイル
EventListCode.html	イベント予約機能のdrive側での処理。データの操作などを主に行う
EventListJavaScript.html	イベント予約機能のフロント側での処理。予約フォームの送信やイベントのリストの生成、ソートなどを行う
EventList.html	イベント予約機能のhtmlページ
EventListCSS.html	イベント予約機能のhtmlページのスタイルシートの記述
MatchListCode.html	対話予約機能のdrive側での処理。データの操作などを主に行う
MatchListJavaScript.html	対話予約機能のフロント側での処理。予約フォームの送信やイベントのリストの生成、ソートなどを行う
MatchList.html	対話予約機能のhtmlページ
MatchListCSS.html	対話予約機能のhtmlページのスタイルシートの記述
ResevListCode.html	予約確認機能のdrive側での処理。データの操作などを主に行う
ResevListJavaScript.html	予約確認機能のフロント側での処理。予約削除のフォームの送信やイベントのリストの生成、ソートなどを行う
ResevList.html	予約確認機能のhtmlページ
ResevListCSS.html	予約確認機能のhtmlページのスタイルシートの記述
PlofCode.html	プロフィール設定のdrive側での処理。データの操作などを主に行う
PlofJavaScript.html	プロフィール設定のフロント側での処理。フォーム送信などを行う
Plof.html	プロフィール設定のhtmlページ
PlofCSS.html	プロフィール設定のhtmlページのスタイルシートの記述

在校生向けページの構成図を以下に示す。

fig4. 在校生向けページのモジュール構成図

table12. mirs_navigationのモジュール動作概要
モジュール名	概要
SystemCode.gs	ページアクセス時の処理の記述
appsscript.json	GASWEBアプリのタイムゾーンやoauthScopesの設定ファイル
Home.html	アクセスして最初に表示されるページ。サイトの使用方法を記述
HomeCSS.html	ホームのページのスタイル
PlofCode.html	プロフィール更新機能のdrive側での処理。データの操作などを主に行う
PlofJavaScript.html	プロフィール更新機能のフロント側での処理。フォームの送信などを行う
Plof.html	プロフィール更新機能のhtmlページ
PlofCSS.html	プロフィール更新機能のhtmlページのスタイルシートの記述
ResistCode.html	対話登録のdrive側での処理。データの操作などを主に行う
ResistJavaScript.html	対話登録のフロント側での処理。登録フォームの送信や予約のリストの生成などを行う
Resist.html	対話登録のhtmlページ
Resist.html	対話登録のhtmlページのスタイルシートの記述

管理用ページの構成図を以下に示す。

fig5. 管理用ページのモジュール構成図

table13. mirs_navigationのモジュール動作概要
モジュール名	概要
appsscript.json	GASWEBアプリのタイムゾーンやoauthScopesの設定ファイル
Maneg.html	アクセスして最初に表示されるページ。
ManegCode.gs	イベント登録機能のdrive側での処理。データの操作などを主に行う
ManegJavaScript.html	イベント登録機能のフロント側での処理。登録フォームの送信などを行う
ManegCSS.html	イベント登録ページのスタイル

APIの構成図を以下に示す。

fig6. APIのモジュール構成図

table14. mirs_navigationのモジュール動作概要
モジュール名	概要
APICode.gs	GET通信に対して当日の予約のリスト、予約者のユーザー名、PINを返す

ESP32の構成図を以下に示す。

fig7. ESP32のモジュール構成図

table15. ESP32動作概要
モジュール名	概要
mirs24_esp32.ino	setup関数,loop関数,グローバル変数,include,マクロの定義
encoder.ino	エンコーダーの値の読み取りを行う
pubsub_callback.ino	rosとの通信を行う
config.h	パラメータの設定を行う
ros_setup.ino	ROSのセットアップを行う
server_callback.ino	servis_serverとの通信を行う
vel_observer.ino	速度の監視を行う
vel_ctrl.ino	速度のPID制御を行う。

jetsonの構成図を以下に示す。

fig8. jetsonのモジュール構成図

table16. ESP32動作概要
モジュール名	概要
mirs_launch.py	システムの起動
src/以下	各ノード当の定義
config.yaml	各パラメータ等の設定ファイル
mirs_msgs/以下	mirsで使うメッセージ型などの定義

3-1. 共通の処理

fig9. ページリダイレクト処理

3-2. データの管理

本システムにおいて、ユーザーデータや予約データの管理はgoogle spreadsheetを使用する。使用するスプレッドシート、データの構成を以下に示す。

3-2-1.スプレッドシートの構成

fig2に構成の図を示す。

fig10. スプレッドシートの構成

以下に各スプレッドシートで扱うデータを示す。

3-2-1. VisitorPlof

見学者のプロフィールを保存する

table17. VisitorPlof.gsheet
address	username	dep_d	dep_s	dep_e	dep_m	dep_c	way	club
ユーザーのメールアドレス	ユーザーの名前	D科に興味があるか	S科に興味があるか	E科に興味があるか	M科に興味があるか	C科に興味があるか	予定している通学方法	興味のある部活

3-2-2. UserData

全ユーザーのログイン時の情報や権限などの管理

table18. UserData.gsheet
address	username	password	resevdate	pin
ユーザーのメールアドレス	ユーザーの名前	パスワード	予約中の日にち	当日の認証に使う4桁の数字

3-2-3. StudentPlof

在校生のプロフィールを保存

table19. UserData.gsheet
address	username	describe	department	grade	way	club
ユーザーのメールアドレス	ユーザーの名前	自己紹介	所属学科	学年	通学方法	部活

3-2-4. EventData

イベントの情報を保存

table20. EventData.gsheet
eventname	describe	datetime	location	address	dep_d	dep_s	dep_e	dep_m	dep_c	grade_1	grade_2	grade_3	grade_4	grade_5	class	dorm	other	resevuser
イベント名	イベントの説明	開催日時	開催場所	登録者のメールアドレス	各学科に関連しているか					各学年に関連しているか					見学内容の大まかな区分			予約したユーザーのメールアドレス

3-2-5. StudentPlof

在校生のプロフィールの保存

table21. UserData.gsheet
address	datetime	location	resevdata
登録ユーザーのメールアドレス	開催日時	開催場所	予約したユーザーのメールアドレス

3-2-6. Location

各場所の座標情報を記録

table22. Location.gsheet
location	x	y	z	w
場所の名前	各場所の座標(クオータニオン)

また、データ管理をspreadsheetで行っているため、データ内に'='を含むデータの登録は数式として認識される可能性があるため禁止とする。

3-3. マニュフェストファイルについて

各ページの構成に含まれるappsscript.jsonファイルにより、サイトのタイムゾーンやランタイムのバージョンなどを設定することができる。ここで、ドライブ内の他のファイルやスプレッドシートへのアクセスの許可を行っている。

4.フローチャート

4-1.ログインページアクセス時の処理のフローチャート

fig11フローチャートを示す。

fig11. ログインページアクセス時の処理のフローチャート

4-2.ログインページのユーザー認証の処理のフローチャート

fig12にフローチャートを示す。

fig12. ログインページのユーザー認証の処理のフローチャート

4-3.認証成功時の処理のフローチャート

WEBブラウザの特性上音声の出力は何らかユーザー側からの操作があった直後でなければ機能しない。そのため、ログインの時点で空の文字列を読み上げることで以降の音声出力の権限を付与させている。
fig13にフローチャートを示す。

fig13. 認証成功時の処理のフローチャート

4-4.走行状態の監視のフローチャート

fig14にフローチャートを示す。

fig14. 走行状態の監視のフローチャート

4-5.画面スクロール禁止のフローチャート

画面のスクロールによってページがリロードされてしまうと案内の状況と整合性が取れない事態になってしまうため、対策としてページ自体のスクロールを禁止し、一つの外面に収めるようにした。
fig15にフローチャートを示す。

fig15. 画面スクロール禁止のフローチャート

4-6.案内再開のフローチャート

fig16にフローチャートを示す。

fig16. 案内再開のフローチャート

4-7.画面スクロール禁止のフローチャート

fig17にフローチャートを示す。

fig17. 画面スクロール禁止のフローチャート

4-8.画面ピンチイン/アウト禁止のフローチャート

fig18にフローチャートを示す。

fig18. 画面ピンチイン/アウト禁止のフローチャート

4-9.ダブルタップ禁止のフローチャート

fig19にフローチャートを示す。

fig19. ダブルタップ禁止のフローチャート

4-10.高さ調節のフローチャート

fig20にフローチャートを示す。

fig20. 高さ調節のフローチャート

4-11.使用方法のフローチャート

fig21にフローチャートを示す。

fig21. 使用方法のフローチャート

4-12.対話のフローチャート

fig22にフローチャートを示す。

fig22. 対話のフローチャート

4-13.読み上げ停止のフローチャート

fig23にフローチャートを示す。

fig23. 読み上げ停止のフローチャート

4-14.ログインページアクセス時の処理のフローチャート

fig24フローチャートを示す。

fig24. ログインページアクセス時の処理のフローチャート

4-15.ログインページのユーザー登録の処理のフローチャート

fig25にフローチャートを示す。

fig25. ログインページのユーザー登録の処理のフローチャート

4-16.管理ページのリセットの処理のフローチャート

fig26にフローチャートを示す。

fig26. 管理ページのリセットの処理のフローチャート

4-17.イベント予約用サイトアクセス時の処理のフローチャート

fig27フローチャートを示す。

fig27. イベント予約用サイトアクセス時の処理のフローチャート

4-18.イベント予約用ページの検索のフローチャート

fig28にフローチャートを示す。

fig28. イベント予約用ページの検索のフローチャート

4-19.イベント予約用ページの予約のフローチャート

fig29にフローチャートを示す。

fig29. イベント予約用ページの予約のフローチャート

4-20.対話予約用ページのアクセス処理のフローチャート

fig30にフローチャートを示す。

fig30. 対話予約用ページのアクセス処理のフローチャート

4-21.対話予約用ページの検索のフローチャート

fig31にフローチャートを示す。

fig31. 対話予約用ページの検索のフローチャート

4-22.対話予約用ページの予約のフローチャート

fig32にフローチャートを示す。

fig32. 対話予約用ページの予約のフローチャート

4-23.予約確認ページのアクセス処理フローチャート

fig33にフローチャートを示す。

fig33. 予約確認ページのアクセス処理のフローチャート

4-24.予約確認ページの予約削除フローチャート

fig34にフローチャートを示す。

fig34. 予約確認ページの予約削除のフローチャート

4-25.プロフィールページのアクセス処理フローチャート

fig35にフローチャートを示す。

fig35. プロフィールページのアクセス処理のフローチャート

4-26.プロフィールページの更新フローチャート

fig36にフローチャートを示す。

fig36. プロフィールページの更新のフローチャート

4-27.対話登録ページアクセス時の処理のフローチャート

fig37フローチャートを示す。

fig37. 対話登録ページアクセス時の処理のフローチャート

4-28.対話登録ページ登録の処理のフローチャート

fig38にフローチャートを示す。

fig38. 対話登録ページ登録の処理のフローチャート

4-29.対話登録ページの変更の処理のフローチャート

fig39にフローチャートを示す。

fig39. 対話登録ページの変更の処理のフローチャート

4-30.在校生用登録ページのリセット処理のフローチャート

fig40にフローチャートを示す。

fig40. 在校生用登録ページのリセット処理のフローチャート

4-31.在校生用登録ページの削除の処理のフローチャート

fig41にフローチャートを示す。

fig41. 在校生用ページの削除の処理のフローチャート

4-32.在校生用プロフィールページのアクセス時の処理のフローチャート

fig42にフローチャートを示す。

fig42. 在校生用プロフィールページのアクセス時の処理のフローチャート

4-33.在校生用プロフィールページの更新の処理のフローチャート

fig43にフローチャートを示す。

fig43. 在校生用プロフィールページの更新の処理のフローチャート

4-34.管理ページアクセス時の処理のフローチャート

fig44フローチャートを示す。

fig44. 管理ページアクセス時の処理のフローチャート

4-35.管理ページ変更の処理のフローチャート

fig45にフローチャートを示す。

fig45. 管理ページ変更の処理のフローチャート

4-36.管理ページのリセットの処理のフローチャート

fig46にフローチャートを示す。

fig46. 管理ページのリセットの処理のフローチャート

4-37.管理ページの登録処理のフローチャート

fig47にフローチャートを示す。

fig47. 管理ページの登録処理のフローチャート

4-38.GET通信時の処理のフローチャート

fig48フローチャートを示す。

fig48. GET通信時の処理のフローチャート

ここで、google app scriptの仕様上オリジン間リソース共有（CORS）の設定を自由に設定できないため、アクセスする際の通信方法を工夫する必要がある。

4-39.esp側のフローチャート

fig49フローチャートを示す。

fig49. jetson側のフローチャート

4-40.jetson側の処理のフローチャート

fig50にフローチャートを示す。

fig50. jetson側の処理のフローチャート

4-41.PC側のフローチャート

fig51フローチャートを示す。

fig51. PC側のフローチャート

1. ドキュメント