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

19::gr12::モジュール分け

〜最終更新_08/02〜

がんちゃんマップ_モジュール分け.png
がんちゃんマップ_モジュール分け02.drawioをダウンロードして、 ここで編集できます。
エクスポートしたpng画像はここで50%にリサイズしてください。

統合、ユーザインターフェース(メインページ)(葛城ほか)

  • /main.html
    • ユーザーインターフェースかつ全てのファイルやスクリプトを読みだす
    • グローバル変数(pageID,facID,yudoID)の管理、受け渡し
  • /js/particles.js , windowsize.js
    • トップ画面(がんちゃんマップと書いてある場所)用のスクリプト
    • /js/particles.jsはシャボン玉を出すライブラリ
    • windowsize.jsは画像の大きさをwindowのサイズに合わせて変更するスクリプト
      本当はマップ画像にも適応したかったができず、トップ画面の画像のみに機能を引き継いだ

マップ画像(工藤、米内)

  • /image
    • もともと存在するMAPを岩手大学HPから拝借
  • /image/floremap
    • 講義室がある施設のフロアマップをすべて作製(全32枚)
    • もともとあるフロアマップも作り直し、書式や色をすべて統一。

画像の一部にマウスが乗ったときの操作(新山、今野)

  • js/lightMap.js
    • 上記のマップ画像ごとに施設・講義室ひとつひとつの座標を管理
    • ツールチップで使う(今野が撮ってきた)建物の写真を/image/facilityから読み出し管理、ツールチップ上の施設紹介文も管理
    • マウスが上に乗った時のトリガーを用意。(発動はMapster)
  • /js/ImageMapster.js
    • 画像の色を変更、ツールチップの出現を手助けするライブラリ
    • 仕様はここ(英語)
  • /js/rikouM.js
    • エリアを線で囲った画像を出現(もとあった画像を消去)させるプログラム
    • 関数名はなし(ずっと監視させておく)、ウィンドウのクリックイベントを監視してどこでもいいから押されたら発動
  • /js/tooltip.js , /css/tooltip.css
    • ツールチップのオプション、属性管理

検索、サジェスト、施設名データベース(山口)

  • /js/list.js
    • 施設名ごとに擬似データベースを管理
      カラム・・・|facID(=エリア)|facility1|facility2|..|class1|..|keyword1|..|
      facID:グローバル変数,施設の"エリア"に対しユニーク,階層化されたエリアに対応するよう工夫されている。
      facility:施設名、エリアに対し複数に対応できる
      class:そのエリアで行われる授業名、エリアに対し複数対応
      keyword:エリアに対するキーワード、冗長性に対応するため用意した
  • /js/kensaku.js
    • formに入力された文字列からエリアに対しユニークなグローバル変数facIDを返す。
    • what(facID,pageID)→yudoID:誘導光モジュールに渡すためのID
  • /js/suggest.js , /js/suggest_option.js
    • サジェストを表示するライブラリ、list.jsで作ったデータベースからサジェストを表示できるように改造

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

  • /js/induction.js , green.js
    • 関数から画面の対応する位置を光らせ、目的の位置まで誘導する。

画面遷移(葛城、山口)

  • /js/bodyChange.js
    • changeBody(pageID):画像遷移する

使い方について(工藤)

  • how.htmlに使い方をわかりやすくまとめた。
  • データのやり取りは特にない。

おまけ

    • 別のページに飛んだりする、ただのHTML


最終更新日:2019/08/02 15:21:09