UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. Pittan さん自己紹介
    00:50
  • 2. GWの成果物について
    01:17
  • 3. テーマ選定の経緯
    04:30
  • 4. 音楽プレイヤーの裏側
    06:40
  • 5. フロントエンド技術と所感
    11:15
  • 6. これからについて
    16:03
  • 7. クロージング
    17:56

ep.46 『Apple MusicKit で実現するちょっとレトロな音楽プレイヤー』 - LINE のフロントエンドエンジニアの GW

2020/05/28
374 views
HANATANI Takuma Pittan

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まわりは慣れているフレームワークを使って頭の領域を節約したかった
10秒前へ 10秒次へ