2020 ソフトウェア設計及び演習用の班Wiki

19::gr12::中間発表

プロジェクト名

がんちゃんマップ

テーマ

岩手大学生の為のマップをつくる〜

プロジェクト概要

  • 岩手大学生用の岩手大学内マップを作成する。
  • 各施設の説明や講義室検索をすることができる。

モノと操作の洗い出し

モノ

モノにあたる部分は、各施設、各講義室であるため、岩手大学内の施設、講義棟を洗いだした。

操作

  • 各施設、講義室は検索された際に誘導できるようにエリア、建物を光らせる。
  • 検索バーは検索された語句に対してのサジェストを表示し、検索のアシストを行う。
  • 戻るボタンが押された際に、前の画面へと戻る。

モジュール分け

画像の一部に対する操作(新山、葛城)

  • 画像一部をリンクにする。
  • マウスが画像上の特定の位置にあるとき、その場所の色を変化させる。
  • マウスが画像上の特定の位置にあるとき、ポップアップを表示する。

    <説明>
    画像上の座標をつなげ施設の形位沿った多角形を作成する。
    その作成した多角形に対し、上3つの操作をする。

各エリアのマップを表示する。(葛城、米内)

  • 理工学部エリア(講義室、研究施設など)
  • 中央エリア(教育等、第一体育館など)
  • 農学部エリア(講義室、情報基盤センターなど)

    <説明>
    岩手大学のHPに館内マップが存在するところはそのpdfを引用する。
    存在しない館内マップは作成する。

検索バーと検索元のデータをまとめる(工藤、今野、山口)

<説明>
javascriptの配列とオブジェクトを用いて、施設とその施設に対するID(HTMLのIDではないです)のデータベースを作る。
検索バーから直接入力された文字列から、施設IDを取得する関数を作成
inquiryfacId('施設名') 戻り値:施設ID

検索時、目的地まで誘導(新山、渡辺)

<説明>
関数から画面の対応する位置を光らせ、目的の位置まで誘導する。

戻るボタン(葛城)

BackButton()という関数を使用する。
<説明>
クリックすると一つ前の画面に戻る。

プログラムの動き

prog_arrow.jpeg

プロトタイプ

プロトタイププログラムのリポジトリ

プロトタイププログラムの説明

理工学部1号館までのマップを作成した。
  • フロントページの各学部をクリックすると学部ごとのページヘと遷移する。

トップページ

Screenshot_2019-06-07 がんちゃんマップ.png

トップページ 理工学部選択時

トップページ理工学部選択.png

理工学部 マップ

理工学部マップ.png

理工学部 マップ 1号館選択時

  • 通常の状態
    理工学部マップ選択前.png
  • マウスカーソルが合った時
    理工学部マップ選択時.png

理工学部1号館 フロアマップ

理工学部1号館.png

検索、施設データベース

  • サジェスト機能
    • 検索バーの内容が直接ページに反映される性質上、サジェストが重要だということが企画段階からはっきりしていた為、質の高いもにした
    • 打っている文字のハイライトやサジェストの数を増やしてストレスを軽減
      検索テスト5.png
    • 時間割によくある⑤⑥のような機種依存文字にも対応
      検索テスト7.png

  • 施設データベース
    • 施設ごとに施設ID(facilityID = facId)を割り当てた
    • その施設がどの施設の内部なのか、または内部にどんな施設(講義室)を持つかを施設ID一つで分かるように工夫して割り当てている
    • 検索バーから直接入力された文字列から、関数一つでIDを割り出せる 検索テスト6.png

      ページの先頭へ戻る

      12班トップ


最終更新日:2019/06/14 14:40:55