Raspberry Pi側

Raspberry Pi側開発ページ

アーキテクチャ図

機能一覧

• ICカード読み取り機能
• 入退室処理機能
• 音再生機能
• ICカード登録機能
• 参加者一覧表示機能
• 自動起動・ワンタッチ終了機能

開発に関して

• babel + webpackを使用する。最新の機能や構文でコードがかける(ES6など)
• HTMLはタグの文章構造を意識してみる
• モック画面作成手順 テンプレートの使用に関して

フロントサイド

画面遷移図

SPAで使用するPATH一覧

• SPA用のURL一覧

各画面説明

準備中

• 遷移図の変更があったため、更新中です

【画面名】 待ち受け画面

画面レイアウト

URL

./

画面説明

• 入室・退室処理機能
  • ICカードをPaSoRiが読み込むと音が鳴る
  • ICカードのidをAPIサーバにPOST送信
  • レスポンスによって、表示する画面(目的選択・退出・エラー画面)を判断し遷移
• ユーザ登録ボタン
  • タップするとユーザネーム入力 に遷移
• 今いるひとボタン
  • タップすると参加者一覧 に遷移

【画面名】 ユーザネーム入力

画面レイアウト

URL

./register/username

画面説明

• ユーザネーム入力機能
  • 表示した時に、inputにフォーカスされている(できれば)
  • ユーザネームを入力する
• 右下のボタンをタップ
  • メールアドレス入力 に遷移
  • 未入力の場合、アラートが表示
• 左上をタップ
  • 待ち受け画面 に遷移

【画面名】　メールアドレス入力(ユーザネーム入力と統合予定)

画面レイアウト

URL

./register/email

画面説明

• メールアドレス入力機能
  • 表示した時に、inputにフォーカスされている(できれば)
  • emailを入力する(@以降は入力しない)
• 右下のボタンをタップ
  • カード読み取り待機 に遷移
  • 未入力の場合、アラートが表示
• 左上のボタンをタップ
  • ユーザネーム入力 に遷移

【画面名】 カード読み取り待機

画面レイアウト

URL

./register/scan

画面説明

• ICカードを読み取り機能
  • ICカードをPaSoRiが読み込むと音がなる。
  • 入力確認ダイアログが表示される
  • 「はい」をタップすると、ユーザ情報をAPIサーバにポスト送信し、登録中 に遷移
  • 「いいえ」をタップすると、ダイアログが消えるてユーザネーム入力 に戻る

【画面名】：登録中

画面レイアウト

URL

./register/processing

画面説明

• 登録処理が終わるまで表示される
• 一瞬だと思われるので、あえて表示させても,,,,(応相談)
• 正常処理の場合登録完了 に遷移
• 失敗の場合登録失敗 に遷移

【画面名】 登録完了

画面レイアウト

URL

./register/success

画面説明

• 右下のボタンをタップ
  • 目的選択 に遷移
• 10秒経過
  • 目的選択 に遷移

【画面名】 登録失敗

画面レイアウト

URL

./register/failed

画面説明

• 右下のボタンをタップ
  • 待ち受け画面 に遷移
• 10秒経過
  • 待ち受け画面 に遷移
• ICカードスキャン
  • 待ち受け画面と同じ振る舞いとなる

【画面名】　目的選択

画面レイアウト

URL

./purpose

画面説明

• 各目的をタップ
  • idと目的をAPIにPOSTする
  • レスポンスが正常系なら、目的毎に遷移
  • 失敗の場合は、処理失敗　に遷移

【画面名】 目的選択後(勉強会)

画面レイアウト

URL

./purpose/study-group

画面説明

• 目的選択で勉強会をタップし、入室処理が完了後に表示される画面
• 10秒経過
  • 待ち受け画面 に遷移
• ICカードスキャン
  • 待ち受け画面と同じ振る舞いとなる

【画面名】　目的選択後(仕事)

画面レイアウト

URL

./purpose/work

画面説明

• 目的選択で仕事をタップし、入室処理が完了後に表示される画面
• 10秒経過
  • 待ち受け画面 に遷移
• ICカードスキャン
  • 待ち受け画面と同じ振る舞いとなる

【画面名】　目的選択後(自習)

画面レイアウト

URL

./purpose/self-study

画面説明

• 目的選択で自習をタップし、入室処理が完了後に表示される画面
• 10秒経過
  • 待ち受け画面 に遷移
• ICカードスキャン
  • 待ち受け画面と同じ振る舞いとなる

【画面名】　目的選択後(サークル)

画面レイアウト

URL

./purpose/circle

画面説明

• 目的選択でサークルをタップし、入室処理が完了後に表示される画面
• 10秒経過
  • 待ち受け画面 に遷移
• ICカードスキャン
  • 待ち受け画面と同じ振る舞いとなる

【画面名】　参加者一覧

画面レイアウト

URL

./participants

画面説明

• 参加者一覧を取得
  • APIに本日の参加者一覧をリクエストする
• 本日の参加者一覧を表示
  • 入室時間で昇順に表示される
  • 表示範囲より参加者が多い場合、ヘッダー固定のスクロールすることができる
• 左上の矢印ボタンをタップ
  • 待ち受け画面 に遷移

【画面名】　退出

画面レイアウト

URL

./leaving

画面説明

• 退出完了表示
  • 退出処理が完了したら表示される
• 10秒経過
  • 待ち受け画面 に遷移
• ICカードスキャン
  • 待ち受け画面と同じ振る舞いとなる

【画面名】　ユーザ未登録表示

画面レイアウト

URL

./error/notfound

画面説明

• 未登録表示
  • ICカードが登録されていないことを表示する
• 10秒経過
  • 待ち受け画面 に遷移
• ICカードスキャン
  • 待ち受け画面と同じ振る舞いとなる

【画面名】　入室処理失敗

画面レイアウト

URL

./error/entry

画面説明

• 入室処理失敗表示
• 10秒経過
  • 待ち受け画面 に遷移
• ICカードスキャン
  • 待ち受け画面と同じ振る舞いとなる

【画面名】　退室処理失敗

画面レイアウト

URL

./error/out

画面説明

• 退室処理失敗表示
• 10秒経過
  • 待ち受け画面 に遷移
• ICカードスキャン
  • 待ち受け画面と同じ振る舞いとなる

サーバサイド

WebSocketの利用

• ICカード読み取り時に、ICカードのIDをフロントに送信する必要があるためWebSocketを使用する

音を出す

• ICカード読み取り時に、読み取り音を鳴らす
  • 連続スキャンさせないように、インターバル時間を設ける(１sぐらい)