lyrics finder
1.0.0
ブリーフ - 1つ以上のAPIに大きく依存する単一のページアプリケーションを作成します。
私が使用することを選択したAPIは、https://www.musixmatch.com/にあるSong歌詞のMusixmatchカタログです。
特定の曲の歌詞を調べたいユーザーは、Lyric Finderを使用してそうすることができます。
ユーザーはアーティストまたは歌で検索でき、彼らが探している歌の歌詞を見つけるためにナビゲートできる結果のリストを返します。
このページは、https：//hfolcot.github.io/lyrics-finder/でライブになりました
ライセンスのために歌詞は完全に印刷されていないことに注意してください
このページでは、Bootstrap 4.0.0を使用しており、グリッドシステムやその他のスタイリングを使用しています。
このページでは、Googleフォントのヌニトサンとコーベンフォント、およびfontawesomeのアイコンを使用しています。
私自身のさらなるスタイリングは、Assets/CSS/Main.CSS内で行われました
スクリプトはjQuery 3.3.1を利用しています。
使用されるAPIはhttps://api.musixmatch.com/ws/1.1です。返されるデータはJSONP形式であるため、データを取得するにはjQuery ajaxリクエストが必要でした。
これらは、アプリの各段階の段階です。次の数値を使用して、[段階]各関数が使用され、どの段階が導かれるかを説明します。
また、各ステージ内には、Clear ResultsボタンまたはGo Backボタンのいずれかを介して、前のページに戻る機能があります。
歌詞ファインダーで使用される7つの主要な機能があります。
この関数は、ユーザーが検索ボタンをクリックするとすぐに呼び出されます。電波ボタンの値をチェックし、これに基づいて関連する関数を実行します。
この関数は、既に結果コンテナにある可能性のあるデータをクリアするために、次のすべての機能の先頭に呼び出されます。
この関数は、ユーザーが検索されたときにソングラジオボタンがチェックされた場合、CheckRadio（）によって呼び出されます。この関数は、https://api.musixmatch.com/ws/1.1/track.searchへの$ .ajax要求をパラメーターq_trackとして検索ボックスに入力した値を使用します。リクエストが成功した場合、トラックの返されたリストを含む可変トラックレッスルが作成されます。これらは、MusixMatchの評価システムに基づいて、アーティストの人気によってソートされています。次に、このリストの各アイテムについて、名前とアーティストがindex.htmlの結果コンテナに入力され、選択した曲の歌詞を表示するオプションをユーザーに提供するボタンがあります。これは、Clickでtrace_idをパラメーターとしてgetLyrics（）関数に渡すことで機能します。これはクリック時にトリガーされます。
この関数は、ユーザーが検索されたときにアーティストラジオボタンがチェックされた場合、CheckRadio（）によって呼び出されます。この関数は、https://api.musixmatch.com/ws/1.1/artist.searchへの$ .ajax要求をq_artistのパラメーターとして検索ボックスに入力した値を使用します。
リクエストが成功した場合、アーティストの返されたリストを含む可変Artistresultsが作成されます。これらは、MusixMatchの評価システムに基づいて人気によってソートされています。次に、このリストの各項目について、アーティストはindex.htmlの結果コンテナに入力され、選択したアーティストがアルバムを表示するオプションをユーザーに提供するボタンがあります。これは、artist_idをパラメーターとして渡すことで機能します。これは、クリック時にトリガーされる関数です。
この関数は、前の2つの関数と同様に実行されます。 Artist_idはgetArtist（）関数からそれに渡され、これはそのアーティストのアルバムデータを取得するために使用されます。次に、各アルバムの名前とそのアルバムのトラックリストを表示するオプションを提供するボタンを含むリストとして、コンテナ要素に印刷されます。これにより、クリック時にgetTrackList（）が実行され、アルバム_IDをパラメーターとしてその関数に渡します。
アルバム_IDはこの関数に渡され、そのアルバムのトラックのリストについてhttps://api.musixmatch.com/ws/1.1/album.tracks.getにリクエストを行うために使用されます。これにより、getTrack（）のようなボタンを使用して、歌詞を表示するオプションを備えたトラックのリストを返します。
この関数は、曲のリスト内のボタンがクリックされたときに呼び出されます。選択した曲のトラックIDは、前の関数から渡されます。この関数は、2つの個別のAJAX呼び出しを使用します。 1つ目は、track.get.get in the apiでデータを取得し、タイトルとして表示できるようにトラック名を縮小するために使用されます。次に、2回目の呼び出しがmatcher.lyrics.getに行われ、歌詞自体を返します。返される歌詞がない場合、コンテナ要素内にカスタムエラーメッセージが表示されます。
ページのレイアウトは、メソッドを明白でシンプルに保つために非常に基本的に保たれています。暗い背景画像が使用されており、目に穏やかで、ユーザーの注意を引き付けません。配色は、この画像を可能な限り一致させようとし、coolors.coで作成されました。データは、適切なヘッダーを備えたテーブルで返されます。
JavaScriptコードはJshintで実行され、エラーは返されませんでした。 HTMLはW3Cマークアップバリレーターで実行され、エラーを返さなかった。 CSSはW3C CSSバリデーターで実行され、エラーが返されませんでした。
ユーザーテスト中に、MusixMatchデータベースのすべての曲が歌詞を持っているわけではないため、結果に歌詞_Bodyキーがない人にカスタムエラーが追加されているわけではないことに注意してください。
assets/js/spec.jsが作成および実行され、ResetPage（）の機能を確認しました。このテストは成功しました。テストスクリプトが正しいことを確認するために、結果コンテナ内にテキストを含めるように関数が編集されました。この時点で、テストが失敗しました。
テスト中に、二重または単一の引用マークを含む曲の歌詞が返されていないという興味深い問題が発生しました。調査では、この問題は、曲名を新しい関数に渡そうとする関数（このプロセス中に改名されたGetLyrics）によって引き起こされたように見えましたが、曲名に引用が存在したとき、それはこれを終了として読んでいました括弧付きの括弧がなかったため、パラメーターとエラーの。これは、GetLyricsを編集することで解決され、以前の関数から渡すのではなく、別の呼び出しで曲の名前自体を取得しました。
新しい機能が変更された後、テストの各段階が再現されました。
テストする：
（x =予想どおり機能）（o =予想どおり機能しない）
以下は、コードが期待どおりに機能しているかどうかをテストしています。
| ブラウザ/テスト | オペラ | Firefox | クロム | 角 | サファリ |
|---|---|---|---|---|---|
| 1 | x | x | x | x | x |
| 2 | x | x | x | x | x |
| 3 | x | x | x | x | x |
| 4 | x | x | x | x | x |
| 5 | x | x | x | x | x |
| 6 | x | x | x | x | x |
| 7 | x | x | x | x | x |
| 8 | x | x | x | x | x |
| 9 | x | x | x | x | x |
| 10 | x | x | x | x | x |
| 11 | x | x | x | x | x |
| 12 | x | x | x | x | x |
| 13 | x | x | x | x | x |
| 14 | x | x | x | x | x |
| 15 | x | x | x | x | x |
| 16 | x | x | x | x | x |
| 17 | x | x | x | x | x |
以下は、ディスプレイが期待どおりに機能しているかどうかをテストしています。
| ブラウザ/テスト | オペラ | Firefox | クロム | 角 | サファリ |
|---|---|---|---|---|---|
| 1 | x | x | x | x | x |
| 2 | x | x | x | x | x |
| 3 | x | x | x | x | x |
| 4 | x | x | x | x | x |
| 6 | x | x | x | x | x |
| 7 | x | x | x | x | x |
| 8 | x | x | x | x | x |
| 9 | x | x | x | x | x |
| 11 | x | x | x | x | x |
| 12 | x | x | x | x | x |
| 14 | x | x | x | x | x |
| 15 | x | x | x | x | x |
| 17 | x | x | x | x | x |
マイクロソフトのエッジで問題が認められ、背景画像が正しく表示されていませんでした。これは、HTMLコード内のスクリプト要素の位置によるものでした。頭の中ではなく体の端に移動すると、背景画像が正しく表示されました。
別の問題がiPhoneで見つかりました。この問題は、背景画像が固定されておらず、ページにスクロールしないため、大量の返されたデータをスクロールするとバックグラウンドが「削除」されます。調査では、これがiOSの既知の問題であることが示されました。これは、メディアクエリを使用して背景を設定して小さな画面で繰り返すことで解決されました。
Google Chrome開発者ツールを使用して、アプリケーションの各段階が異なる画面幅で表示される方法をテストします。
x =予想どおり表示
| 画面幅/ページ表示 | Galaxy S5 | ピクセル2 | ピクセル2xl | iPhone 5/se | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X | iPad | iPad Pro |
|---|---|---|---|---|---|---|---|---|---|
| 1 | x | x | x | x | x | x | x | x | x |
| 2 | x | x | x | x | x | x | x | x | x |
| 3 | x | x | x | x | x | x | x | x | x |
| 4 | x | x | x | x | x | x | x | x | x |
| 6 | x | x | x | x | x | x | x | x | x |
| 7 | x | x | x | x | x | x | x | x | x |
| 8 | x | x | x | x | x | x | x | x | x |
| 9 | x | x | x | x | x | x | x | x | x |
| 11 | x | x | x | x | x | x | x | x | x |
| 12 | x | x | x | x | x | x | x | x | x |
| 14 | x | x | x | x | x | x | x | x | x |
| 15 | x | x | x | x | x | x | x | x | x |
| 17 | x | x | x | x | x | x | x | x | x |
このプロジェクトはCloud9に建設され、GitHubにプッシュされ、Githubページでhttps://hfolcot.github.io/lyrics-finder/で公開されました。
