feat(ui): add contents of Music components

[hwakabh]

AsIs

Currently Music section in /about is marked as TBD.
Since we need to fetch recent played information from Apple Music's API,

Justifications

N/A (as application requirements)

(Optional) ToDo

• research how to get invoke Apple's API and decide to design
• implement design either, or both if needed, to frontend/backend

[hwakabh]

As we invoke Apple Music's APIs programmatically, it seems that they are mainly invoked from the SDK named MusicKit, and it requires developer for using it to generating Developer Token first.

As noted in the official documents, we need to purchase Apple Developer Program, ADP, for generating the token, where user would be signed up with Apple Developer account.
(Apple Developer account is different from generic Apple User account, which is identified by Apple ID)

Also, regarding MusicKit, when we would like to use MusicKit, there are 2 ways to invoke them:

1. Using native (Switft) API
2. Using Web API, named MusicKit on the Web: Docs

For calling MusicKit on the Web, it seems that currently developer could be only available with JavaScript, MusicKit JS, and base logics are included inside it.
(Although it has been minified, but we can see whole logics from the web: https://js-cdn.music.apple.com/musickit/v3/musickit.js)

[hwakabh]

For sanity PoC after we signed up Apple Developer account, we have been able to fetch responses from its Web API.

24-08-22 22:13:45 git/hwakabh.github.io [feat/353/resume] % curl -s \
> -H 'Authorization: Bearer $DEVELOPER_TOKEN' \
> 'https://api.music.apple.com/v1/catalog/jp/charts?types=albums' \
> | jq .

  "results": {
    "albums": [
      {
        "chart": "most-played",
        "name": "トップアルバム",
        "orderId": "most-played:albums",
        "next": "/v1/catalog/jp/charts?chart=most-played&offset=20&types=albums",
        "data": [
          {
            "id": "1759899363",
            "type": "albums",
            "href": "/v1/catalog/jp/albums/1759899363",
            "attributes": {
              "copyright": "℗ 2021(5,8,14),2022(2,4,13),2023(7,12,18),2024(1,3,6,9-11,15-17,19-20) Sony Music Labels Inc.",
              "genreNames": [
                "J-Pop",
                "ミュージック"
              ],
              "releaseDate": "2024-08-21",
              "isMasteredForItunes": false,
              "upc": "4547366699760",
              "artwork": {
                "width": 3000,
                "height": 3000,
                "url": "https://is1-ssl.mzstatic.com/image/thumb/Music221/v4/3e/b2/13/3eb21367-be26-2634-d90f-bc8182d3d0b2/4547366699760.jpg/{w}x{h}bb.jpg",
                "bgColor": "f8eae1",
                "textColor1": "180700",
                "textColor2": "001d36",
                "textColor3": "45342d",
                "textColor4": "314658"
              },
              "url": "https://music.apple.com/jp/album/lost-corner/1759899363",
              "playParams": {
                "id": "1759899363",
                "kind": "album"
              },
              "recordLabel": "Sony Music Labels Inc.",
              "trackCount": 20,
              "isCompilation": false,
              "isSingle": false,
              "name": "LOST CORNER",
              "artistName": "米津玄師",
              "editorialNotes": {
                "tagline": "おすすめアルバム",
                "standard": "コロナ禍の状況を色濃く反映した2020年の『STRAY SHEEP』から4年ぶりとなる6作目のアルバム。タイトルは“失われた場所”、あるいは“遺失物置き場”、つまり“失われたものが集まる場所”という意味がある。4年間のうちに発表した多くのヒットシングルを収録し、それらの楽曲には共同プロデューサーとして坂東祐大、Yaffle、常田大希ら多彩なミュージシャンが参加した。一方、初収録曲には米津玄師単独プロデュースの作品が多く、時代を象徴するクリエイターとなった彼の心の内が明かされる。それはこの世界の現状と同じく複雑で、答えはなく、見通しも定かではない。けれど同時に、現状を冷静に受け止め、絶望からするりと身をかわす軽やかさも感じられる。道に迷いながら同乗者と車を走らせる「とまれみよ - Stop Look Both Ways」、そして「探しに行こうぜマイフレンド」と歌い出す「LOST CORNER」など、米津は気心の知れた相棒に話しかけるように気さくに歌う。向かう先はすでに失われた場所なのか、それとも失ったものに出会える場所なのか。考えを巡らせながら聴けば聴くほど、米津玄師の描く世界に深く入り込める。",
                "short": "冷静な視線と軽やかな足取りでその先へ。話題曲を含む4年ぶりのアルバム。"
              },
              "isComplete": true
            }
          },
# (...)
        ],
        "href": "/v1/catalog/jp/charts?chart=most-played&types=albums"
      }
    ]
  },
  "meta": {
    "results": {
      "order": [
        "most-played:albums"
      ]
    }
  }
}

[hwakabh]

But for accessing personalized data, such as user's stations or playlists, it requires Music User Token as well as Developer Token, and the logics to generate this token is composed in musickit.js.
So it seems that generally we could not call the personalized endpoint under api.music.apple.com/v1/me only with developer token via curl.

Also musickit.js would be expected to used in client side and it requires to login to Apple Music with biometrical authentications when it would successfully fetch data of personalized data.

So we concluded it is difficult to invoke MusicKit on the Web from server side, backend Node.js, and we could not meet the application requirement with this approach.

Alternatively, we would use embedded iframe codes of public playlist, which is accosted to user, in frontend.
The reasons why we adopt this are:

• this is the most easiest way to meet application requirement
• embedded codes seem to be good styles in current UI