((outline))

!!! ページリンク
>>{23::gr03}{班ページトップへ}<br><br>
>>{23::gr03::関数}{使用した関数の詳細（自作したものについて）}
<br><br>


!!!モジュール分け（html, js, cssファイルの順）

!!htmlファイル

:__top.html（担当：刈谷、中野、角掛）__
*トップページ。他のhtmlファイルのパスを使って画面切り替えを行えるようにする
<br><br>


:__input_choice.html(担当：角掛)__
*音域入力の方法（音声 or 手動）を選択する画面
<br><br>


:__voice_imput.html（担当：吉田、中島）__
*声の入力を行う画面。
*マイクでの入力を行い、以下のものを表示する
**現在観測中の音
**読み取った最高音・最低音
**読み取っている音声波形<br><br>
*観測音をもとに、音域の決定は半自動で行う
<br><br>


:__manual_input.html（担当：角掛）__
*音域を自分で選択する画面。最低音、地声最高音、裏声最高音をそれぞれ入力する
*入力はint型の整数戻り値も整数。
<br><br>


:__singer_search.html（担当：角掛）__
*歌手名を入力する画面
*入力された文字が含まれている歌手を表示するサジェスト機能あり
*入力はstring型の文字列
*data_search.jsから該当歌手の曲名が入ったリストを返す
<br><br>


:__song_search.html（担当：角掛）__
*曲名を入力する画面。
*入力された文字が含まれている曲を表示するサジェスト機能あり
*入力はstring型の文字列。
*data_search.jsから該当の曲名が入ったリストを返す
<br><br>


:__output.html（担当：角掛）__
*「音域検索」では、その音域に当てはまる曲のリストを出力する。
*「歌手名検索」や「曲名検索」では、該当する歌手の曲のリスト又は、検索した曲をピンポイントで出力する。
*表形式で出力し、歌手名や音域での並び替えや、歌手名でのフィルタリングを行えるようにする。
*キー変更したときに自分の音域に当てはまる曲もわかるようにする
<br><br>


:__sample_voice.html（担当：吉田）__
*それぞれの音階（ mid1E ~ hihiA ）の音声サンプルを表示。
<br><br>
<br><br>


!!javascriptファイル

:__data_search.js（担当：島脇、清水、正野、角掛）__
*構造体で曲のデータをデータベ保存するデータベース。
*受け取った変数に応じて返す構造体の中身を決定する。
*検索結果に対応した曲のリスト（構造体）をoutput.jsに渡す
<br><br>


:__tuner.js（担当：吉田、中島）__
*音声入力の結果から音域を割り出し、結果をdeta_search.jsに送る
<br><br>


:__output.js（担当：角掛）__
*出力方法を制御するファイル。
**数字で管理しているが、表示形式に変換しなければならないもの
**表形式での表示のさせ方
<br><br>


:__pitch_match.js(担当：角掛、島脇)__
*数字で管理している音階を文字で書いた音階に変換する
<br><br>


:__pitch_match_rev.js(担当：角掛）__
*文字で書いた音階を数字で管理している音階に変換する
<br><br>


:__sort.js(担当：角掛)__
*結果表示画面における音階での並び替えを制御するファイル。
<br><br>


:__key_control.js(担当：角掛）__
*output.htmlで表示する曲の音域の条件を変える。
<br><br>


:__singer_filter.js（担当：角掛）__
*結果表示画面において出力する歌手名などに条件で絞り込みをする
<br><br>
<br><br>


!!cssファイル

:__top.css(担当：刈谷)__
*トップページのデザイン<br><br>


:__input.css(担当：角掛)__
*音域検索(manual_input.html)、歌手名検索(singer.html)、曲名検索(song.html)に用いるデザイン<br><br>


:__input_choice.css（担当：角掛）__
*入力方法選択画面（inout_choice.html）のデザイン<br><br>


:__voice_input.css（担当：角掛）__
*音声入力画面（voice_input..html）のデザイン<br><br>


:__manual_input.css（担当：角掛）__
*手動入力画面（manual_input.html）のデザイン<br><br>


:__name_search.css（担当：角掛）__
*曲名や歌手名で検索ページの検索バーのデザイン<br><br>


:__setting.css（担当：角掛）__
*設定画面（setting.html）のデザイン<br><br>


:__output.css（担当：角掛）__
*検索結果の出力画面（output.html）のデザイン<br><br>


<br><br>
!!!モジュール分けの図
<<{モノと操作_モジュール分け2.jpg}