((outline))

!!! ページリンク
>>{24::gr10}{班ページトップへ}<br><br>
<br><br>


!!!モジュール分け

!!htmlファイル（cssも付随）



:__search.html__担当：髙橋　俊喜
* ユーザーが入力した音階からから当てはまる楽曲を検索する画面
* 機能
** 曲全体の音階を調整するボタン
** 入力された音階を微調整するボタン
** 音ごとに昇順、降順でソートするボタン

*data_search.jsから該当歌手の曲名が入ったリストを返す
<br><br>



:__song_output.html__担当：竹田　笙馬
* 楽曲の「曲名」、「歌手名」、「音域」、「MV」、「歌詞」など、楽曲にまつわる情報を出力する。
<br><br>

:__input.html__担当：澤田昌弥
*トップページ。楽曲を曲名や歌手名、音域から検索する。
*お試しで音を聞くことができるキーボードと、マイクから音を拾って、最高音、最低音を出力してくれる簡易音域チェッカーを使って、検索に役立てられるようにする。
*右上のアイコンから、ログイン画面に遷移する。

:__main.html__担当：葛西　日向
*ログイン画面表示。ユーザー名とパスワードの受取を担う。
*input.htmlから、ページ遷移する。

<br><br>

!!javascriptファイル

:__data_search.js__担当：関口堂真
*構造体で曲のデータを保存するデータベース。
*検索結果に対応した曲のリスト（構造体）をoutput.jsに渡す
<br><br>


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





:__filter.js__担当：髙橋　俊喜
*結果表示画面において表示やソート、キーの変更の制御を行うファイル。
*window.onloadでページを開いたときにフィルタを行うように設定
*関数
**filterAndDisplay() 入力された音階に対応する曲を検索し表示する関数
**convertToNoteNumber() 入力された音階や調整後の音階を表示する関数
**displayPagination() 表示された曲をページ分けして表示する関数
**incrementValue() 音ごとにキーを上げる関数
**decrementValue() 音ごとにキーを下げる関数
**incrementValues() 曲ごとにキーを上げる関数
**decrementValues() 曲ごとにキーを下げる関数
**incrementCounter()　キー変更をHTMLへ反映する
**decrementCounter()　キー変更をHTMLへ反映する
**updateCounters()　キー変更の合計を計算する関数
**convertToNote()　数値から音階へ変換する関数
**sortDataA()　昇順でソートする関数
**sortDataD()　降順でソートする関数

:__script.js__
*アカウント作成やログイン時に参照するデータ。
*ログイン後、song_output.htmlへページ遷移。
<br><br>

:__input.js__担当：澤田昌弥
* input.htmlに関するscriptが入っている。
*入力した曲名をsong_output.htmlに、歌手名をartist_song.htmlに、音域をsearch.htmlに渡すための関数が入っている。
*キーボード部分で鳴らす音の制御、周波数解析部分の制御を行っている。
*
検索部分<br>
search()...音階での検索<br>
search_so()...曲名での検索<br>
search...si()...歌手名での検索
*
キーボード部分<br>
make_sound()...設定した周波数から正弦波で音を作成<br>
play_sound()...make_soundで作成した音の再生<br>
*
周波数解析部分<br>
addEventListner()...周波数解析の制御<br>
function draw()...波形の描画<br>
frequencyToPitch()...周波数→音階の変換を行う


!!入力、検索画面
*担当：澤田昌弥<br>
   input.html<br>
   input.js<br>
   input.css<br>

*トップページ。楽曲を曲名や歌手名、音域から検索する。
*お試しで音を聞くことができるキーボードと、マイクから音を拾って、最高音、最低音を出力してくれる簡易音域チェッカーを使って、検索に役立てられるようにする。
*右上のアイコンから、ログイン画面に遷移する。
<br><br>

!!音域検索結果出力画面
*担当：髙橋　俊喜<br>
   search.html<br>
   filter.js<br>

*入力、検索画面で入力された音階をもとに当てはまる楽曲を検索する画面。
*検索後にキー、最高音、最低音、裏声最高音をボタンによって増加、減少させることができる。
*最高音、最低音、裏声最高音をボタンによってソートすることができる。
<br><br>
!!楽曲検索結果出力画面
*担当：竹田　笙馬<br>
   song_output.html<br>
   song_output.css<br>

*入力画面で入力された曲名や、音域検索結果画面でクリックされた曲名をもとに当てはまる楽曲の詳細（歌詞、MVなど）を表示する画面。
*ページ下部にあるボタンで、Topページである入力画面や、その楽曲を手掛けたアーティストのページに移動することができる。
*最低音や最高音がどこか分かるように歌詞が見やすく施されている。
<br><br>
!!アーティスト結果出力画面
*担当：竹田　笙馬<br>
   artist_song.html<br>

*入力画面で入力されたアーティスト名や、音域検索結果画面でクリックされたアーティスト名をもとに当てはまるアーティストの曲をリスト化した画面。
*楽曲検索結果出力画面と同様の表示の方法で、アーティストに絞ったような形である。
*曲名をクリックすれば楽曲検索結果出力画面のページに移動することができる。
<br><br>


!!データ
*担当：関口堂真<br>
   data_search.js<br>

*アーティスト名、曲名、曲の最高音・最低音の音域、最高音・最低音に対応する歌詞などを配列にしてまとめた。
<br><br>

!!その他
*担当：竹田　笙馬<br>
   common.css<br>
   convertionNumTone.js<br>

*
<br><br>
!!ログイン画面
*担当：葛西　日向<br>
　main.html
　script.js

*ログイン後、song_output.htmlへページ遷移。
*ページ遷移後、ユーザー名を受け渡し。
*ログインデータやログイン画面を動かすためのjsファイル。
<br><br>






unction showOrHide() {//パスワードを表示するか隠すかを判断するプログラム
  let showpass = document.getElementById("pass");
  let check = document.getElementById("showpassword");
  if (check.checked) {
    showpass.type = "text";
  } else {
    showpass.type = "password";
  }
}

let userdata = [//必要に応じてここにログイン情報を追加する。例:{name: "user4",age: 24, email: "user4@exam@;e.com" password: "user-4"}
  { name: "administrator", age: 20, email: "Administrator@example.com", password: "Administrator" },
  { name: "user1", age: 21, email: "user1@example.com", password: "user-1" },
  { name: "user2", age: 22, email: "user2@example.com", password: "user-2" },
  { name: "user3", age: 23, email: "user3@example.com", password: "user-3" }
];

function login() {
  let loginuser = ""
  let username = document.getElementById("username").value;
  let password = document.getElementById("pass").value;

  let found = false;
  let i = 0;

  while (!found && i < userdata.length) {//foundがtrueを返すかuserdataのlengthがiより少なくなるまで以下の処理を実行
    loginuser = userdata[i];
    if (loginuser.hasOwnProperty("name") && loginuser.hasOwnProperty("password")) {//データが破損していないかの確認（参考:chatgpt）
      if (loginuser.name === username && loginuser.password === password) {
        found = true;
      }
    }
    i++;
  }

  if (found) {/*foundがtrueの場合にcontainer2の要素(<p>)を上書きする。*/
    alert(`こんにちは。${username}さん。`);
    console.log(`logined is ${username}`);
    document.getElementById("user").textContent = "ユーザー名:"+loginuser.name;
    document.getElementById("age").textContent = "年齢:"+loginuser.age;
    document.getElementById("email").textContent = "Eメール:"+loginuser.email;
    document.getElementById("password2").textContent = "パスワード:"+loginuser.password;
    window.setTimeout(dispMsg, 3000);

    function dispMsg(){

      window.location.href = "../input.html?" + encodeURIComponent(username);
    }
  } else {
      alert("ログインに失敗しました。入力している内容がデータと一致しませんでした。間違いがない場合は、ユーザーデータが破損している可能性があります。入力内容に誤りのない場合は、javascriptファイルのuserdata変数を確認してください。\nEnglish...Login failed. Data in the user data variable may be corrupted or entered incorrectly. If there are no typos in what you entered, please check the userdata variable in javascript.");
      console.log("Login failed. Data in the user data variable may be corrupted or entered incorrectly. If there are no typos in what you entered, please check the userdata variable in javascript.");

  }
}