2020/05/28 に公開 880 views

このエピソードについて

LINE のフロントエンドエンジニア の GW の活動を5日連続で紹介する企画 vol.4。

@potato4d が、 @pittanko_pta に、 Apple MusicKit を使った音楽プレイヤーの実装について聞きました。

まとめはこちら: GWを利用した自由研究発表会を開催しました - LINE ENGINEERING

amon.keishima

  • LINE Growth Technology UIT Team

GW の成果

img

MusicKit JS (Apple Musicのブラウザ用SDK)を使ったプレーヤーを実装した

テーマを選んだ知勇

  • Apple MusicのWeb版が正式リリースになったので、フロントエンドの素振りとして
    実装をトレースしてみようということになった
    • 本家はemberで実装されているっぽい雰囲気
    • いろんな画面サイズに、いい感じに対応しているので学びになりそうと思った
  • とはいえ、同じことをしているプロジェクトがあったのでモチベーションが下がってしまい……
    • あとは機能が多すぎて連休中に作るのは無理と判断
  • 気持ちを切り替えて、ひとりハッカソンみたいな雰囲気でいくことにした
    • 「いい感じのプレーヤーを作る」にフォーカスした結果、カセットテープを再現しようということに
    • こんなときだからこそ、ゆっくり音楽を聴きたい

MusicKit JSとは

  • https://developer.apple.com/documentation/musickitjs
  • Apple の Developer アカウントが必要
  • 再生まわりもすべてやってくれるので、UIを作り込むだけでだいたい済んでしまう
  • OSSではなく、CDNからスクリプトを取ってくるような形。npm配布もなし。
  • 型定義も公式では提供されておらず

テクニカルな部分

  • Angular CLIのng generate library 機能を使って何かしらのライブラリ作りにチャレンジしたい
  • ドキュメントを見てゴリ押しで型定義を書いた(最低限書いたものの、まだまだ書けてないところが多い)
    • 型定義まわり、よくわかっていないことも多いので練習という目的も
  • Why Angular?
    • 前職ではAngularを扱っていたため、個人的にキャッチアップを続けていきたいみたいな
    • 型定義作成・ライブラリをラップする部分にフォーカスしたかったので UIまわりは慣れているフレームワークを使って頭の領域を節約したかった

Refs

  • BGM&SE
    • 魔王魂/騒音のない世界/OtoLogic