iPodのクリックホイール操作をブラウザで再現、話題のサイトを試してみた


     
    iPodのクリックホイールを使った操作画面をブラウザ上で再現し、Apple MusicとSpotifyで音楽を再生できるWebサイトが話題になっているので、iPhoneで試してみました。

    ブラウザにiPodを再現、「エモい」と話題に

    最近、クリックホイール付きiPodをブラウザで再現し、音楽を聴けるWebサイトが「エモい」「楽しい」と話題になっています。
     


     
    このWebサイトを公開したのは、ソフトウェアエンジニアで、iFixitでも勤務経験のあるタナー・ビラレティ氏です。同氏は2019年頃からGitHubでプログラムを公開しています。
     
    iPod Classic.js
     

    iPhoneでiPodの操作を再現してみた

    iPhoneでWebサイトにアクセスし、iPod風の操作を体験してみました。
     
    Webブラウザでサイトにアクセスすると、懐かしいデザインのiPodが表示されます。
     
    iPod Classic.js
     
    クリックホイールをなぞる、中央のボタンで決定、「MENU」で戻る、といったiPodと同様の操作体系が再現されています。
     
    音楽を聴くには「Sign in」から、Apple MusicかSpotifyを選択できます。
     
    iPod Classic.js
     
    Apple Musicを選択すると、Apple IDでのログインとアカウントの連携を求められるので、表示内容を確認して許可し、先に進みます。
     

    ログインが完了すると、音楽再生が可能になります。Apple Musicでは利用できないカバーフローの操作画面は、現在でも色褪せない、直感的に操作できる優れたデザインだと思いますし、眺めているだけでも楽しいです。
     
    iPod Classic.js
     
    再生中にクリックホイールを回すと、音量や再生位置の調整ができます。音量調節は、筆者が試したところ、iPhoneのSafariでは音量に反映されませんでしたが、MacのSafariでは音量の変更が可能でした。
     
    iPod Classic.js
     
    なお、Apple Musicの歌詞表示や、カラオケ機能「Apple Music Sing」、動画の再生には対応していないようです。
     
    個人的には、クリックホイールを回した時のカチカチという音を再現して欲しいと思いました。GitHubでは以前、サウンドの実装に向けたやり取りがされており、実現に期待しています。

    本体色の変更やゲームも可能

    「Settings」メニューからは、iPodのカラーをシルバー、ブラック、赤と黒を組み合わせたU2 Editionに切り替えることもできます。
     
    iPod Classic.js
     
    「Games」メニューからは、ブロック崩しゲームを楽しむこともできます。クリックホイールを操作してボールを打ち返すのは、筆者には難易度高めでした。
     
    iPod Classic.js
     
     
    Source:Tanner Villarete
    (hato)

    この記事がお役に立ったらシェアお願いします
    目次