2020/05/28 に公開1147 views
LINE のフロントエンドエンジニア の GW の活動を5日連続で紹介する企画 vol.4。
@potato4d が、 @pittanko_pta に、 Apple MusicKit を使った音楽プレイヤーの実装について聞きました。
まとめはこちら: GWを利用した自由研究発表会を開催しました - LINE ENGINEERING
amon.keishima
- LINE Growth Technology UIT Team
GW の成果
MusicKit JS (Apple Musicのブラウザ用SDK)を使ったプレーヤーを実装した
- https://pittan.github.io/awesome-music-player/
- https://mobile.twitter.com/pittanko_pta/status/1260232018392043520
テーマを選んだ知勇
- Apple MusicのWeb版が正式リリースになったので、フロントエンドの素振りとして
実装をトレースしてみようということになった- 本家はemberで実装されているっぽい雰囲気
- いろんな画面サイズに、いい感じに対応しているので学びになりそうと思った
- とはいえ、同じことをしているプロジェクトがあったのでモチベーションが下がってしまい……
- あとは機能が多すぎて連休中に作るのは無理と判断
- 気持ちを切り替えて、ひとりハッカソンみたいな雰囲気でいくことにした
- 「いい感じのプレーヤーを作る」にフォーカスした結果、カセットテープを再現しようということに
- こんなときだからこそ、ゆっくり音楽を聴きたい
MusicKit JSとは
- https://developer.apple.com/documentation/musickitjs
- Apple の Developer アカウントが必要
- 再生まわりもすべてやってくれるので、UIを作り込むだけでだいたい済んでしまう
- OSSではなく、CDNからスクリプトを取ってくるような形。npm配布もなし。
- 型定義も公式では提供されておらず
- 非公式で https://github.com/wsmd/musickit-typescript があるものの、うまく扱えなかった（自分の使い方の問題かもしれないけど…）
テクニカルな部分
- Angular CLIの
ng generate library機能を使って何かしらのライブラリ作りにチャレンジしたい - ドキュメントを見てゴリ押しで型定義を書いた（最低限書いたものの、まだまだ書けてないところが多い）
- 型定義まわり、よくわかっていないことも多いので練習という目的も
- Why Angular?
- 前職ではAngularを扱っていたため、個人的にキャッチアップを続けていきたいみたいな
- 型定義作成・ライブラリをラップする部分にフォーカスしたかったので UIまわりは慣れているフレームワークを使って頭の領域を節約したかった