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

2020/05/28 に公開1400 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)を使ったプレーヤーを実装した

テーマを選んだ知勇

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

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちはこんにちはえ、今日もですねytサイドやっていければと思います。え、まず、初めにこのポッドキャストについて紹介させていただきます。

Guest 00:09
UIT INSIDEは、ユーザーインターフェースとテクノロジーを愛する開発者たちによる。ポントキャストです。

Guest 00:16
最新のえ、ウェブ標準の動向や開発、フレーマークの変遷、またまたurやuxに関することまで

Guest 00:23
最新のフロントエンドの情報をキャッチアップすることを目的としております。

Guest 00:27
今回はですね、ラインのフロントエンドエンジアのゴールデンウィーク。え、4日目ということで、もうだいぶえ終盤に

Guest 00:35
入ってきましたけれども、え、本日はですね。けいしさんをゲストにえお呼びしてですね。ミュージックキッドジェイスをえ、使ったえと、プレイヤーの実装について聞いていきたいと思います。けしさん、よろしくお願いいたします

Guest 00:48
よろしくお願いします。

2. Pittan さん自己紹介 00:50

Guest 00:50
じゃあ、ということで、まずけいしまさん自己紹介からお願いできますでしょうか。

Guest 00:54
はい、ライングロステクノロジーとgtのUITの所属のえと、ケシアモンと言います。

Guest 01:02
普段はどういった開発とかされてる。

Guest 01:05
普段はLINEポイントというプロジェクトの中に入って、開発とかをしています。

Guest 01:11
なるほど、なるほどではけしさんよろしくお願いいたします

Guest 01:15
お願いします。

3. GWの成果物について 01:17

Guest 01:17
本日のえ、内容ですけど、今回実際ですね。ゴールデンウィークの自由研究っていう枠で、消しさんどういったことは、ことをされたかっていうところを簡単に説明してもらってもよろしいでしょうか。

Guest 01:29
はい、今回一言で言いますと、appleが出してるapplemusicの

Guest 01:41
も、今プレイヤーとして再生できるみたいな状態。

Guest 01:44
あ、はい、そうですね、今回はちょっとあの、なんていうんですかね。うんと

Guest 01:50
ま。フルフルサイズのプレーヤーというよりかは、ちょっと面白いものを作ろうというような。気分で言ったので、ちょっとカセットテープ

Guest 01:57
をなんか再現したようなプレーヤーを作りました。

Guest 02:00
割と物理的なコンテンツじゃなくなってる時代にあえてこう、これu愛的に出すみたいな感じなんすかね。

Guest 02:08
あ、そうですね、い的にもですし。あとは、も共同的にも活動テープをあけをなるべく再現してみようということで

Guest 02:16
やってみます。簡単に画面を共有しているんですけど、はいとまあこんな感じでログインします。と

Guest 02:23
と、ユーザーが自分のライバルに登録しているプレイリストの一覧がこのように出てきます。はい、で、そうですね、例えば、

Guest 02:31
このチルハウスというプレイリストを再生しようとしあ、ちょっとすいません。なんでもいいんですけど。まず、例えば、このプレイリストを再生しようとした時に、

Guest 02:41
こんな感じで再生が始まります。で、もちろんカセットテープなので、あの曲ごとの

Guest 02:48
頭出しとかっていうのはないので、あの、自分で早送りして、

Guest 02:54
ここだというポイントであまた再生を始めてもらうと、このような感じで再生されます。カセットテープなので、もちろんaメビーメンというあの概念を実装してて、

Guest 03:06
こんなかあのbメの方も再生できますよ。っていうような感じ、

Guest 03:09
結構ま、見た目u愛的にもこれはカセットテープっぽい挙動は自分で実装したっていう感じなんですか。

Guest 03:16
そうですね、結構あのcssとかhcmlとかを頑張って、この見た目、あのカセットの中の

Guest 03:24
なんて言うんですかね。くるくる回ってるところとか、もっとちゃんとみ。なんか、カセットデートっぽくなるような速度感とか。なるほど、なるほど、あとは、この中のあのテープの残量がちゃんと再生に応じて動いていくみたいなところも

Guest 03:36
再現してます。な、

Guest 03:37
なかなか面白い初めに選んだ曲が120分以上の曲再生できないっていうのに出るのもめっちゃ面白いですね。

Guest 03:44
そうですね、ほんとはここ出さない方がいいかなと思ったんですけど、あえて、やっぱここはなんか出しといた方が、なんかカセットテープ感いるかなとか、

Guest 03:51
あとは、なんかこう。自分で、なんか昔だとビックステープとか作ってるみたいな話も聞いたので、なんかその辺とかもなんか

Guest 03:59
また思い出すような、はい、感じになればいいなと思って、こんな感じにしてます。

Guest 04:04
結構ノスタルジーなん

Guest 04:08
なんか、これって、見てる人がアクセスできるっていうことかってあったりしますかね。

Guest 04:12
そうですね、これはあの、普通に公開してるものなので、あの、全然皆さん見ていただいて大丈夫だと思います。

Guest 04:21
では、後でそのurlも掲載しておこうかなと思いますので、ぜひぜひちょっと触ってみてもらえればと思います。

4. テーマ選定の経緯 04:30

Guest 04:30
はですね、ちょっとこの実際のテーマについて、ちょっと詳しく聞いていきたいなと思うんですけど、今回はこのミュージックチットを使って、プレイヤー実装するのをテーマに選んだ経緯とかってあるんですかね。

Guest 04:43
そうですね、最近、appleがapplemusicのweb版っていうものを、正式にリリースされたっていう

Guest 04:50
話を聞いて、で、結構実際自分でも触ってみて、結構よくできてるんですよね。はいはい、なんかこのなんでしょう。画面がちっちゃくなった時に、ちゃんとちっちゃい画面をのur

Guest 05:00
なるとか

Guest 05:01
っていうあたりが結構。あのま、今後の自分のフロントエンドの実装の方でも、なんか参考になるかなっていうような感じで、最初はこのま同じも全く同じものをちょっと作ってみようかなっていう気持ちで始めてみたんですけど、はいはい

Guest 05:15
ま結構あのやることが大変多いんですよね。あの、ゴールデンウィークでは、ちょっと収まらないかもしれないとか、あとはなんでしょう。同じことをやってるまあ、ビュービーで

Guest 05:24
同じことやってるようなプロジェクトもあったので、はいはい、はい、ちょっと個人的には、なんかあのモチベーションがなんかなくなっちゃった。なるほど、はい

Guest 05:33
っていうことで、なんかちょっと1人ハッカソンみたいな感じで、ちょっとなんか面白いものを作ろうかなっていう感じで、はい、作業方向を変えまして、

Guest 05:41
でま、最初に言ってたいい感じのプレーヤーを作るっていう、そのいい感じってなんだろうっていうところにちょっと

Guest 05:47
考えてみた結果。はい、なんか、今なんかカセットテープって、なんかま、レコードとかカセットテープって、なんかまだちょっと盛り返してきてる、盛り上がってるみたいなところもあるので、

Guest 05:56
なんか、その辺をちょっとやってみようかなという感じで、今回のやつを作ってみました。

Guest 06:02
あそこのカセットテープとかが盛り上がってるのって、なんなん。何の流れから来てるん。

Guest 06:08
そうですね、なんか、やっぱりモスタルジーとか、なんかそういうところだと思いますね。なんか、やっぱ今まレコードとかと同じ流れだとは思うんですけど。

Guest 06:19
はい、

Guest 06:24
今、最近はもうみんな割と物理的なコンテンツを持たないで、サブスクとかで曲聴いてる人も多い中であえて、そのその基盤を使って、

Guest 06:34
カセットテープっぽく作るっていうのは、結構面白い。取り組み。これ、技術的にはアンギュラーで実装してるんですか。

5. 音楽プレイヤーの裏側 06:40

Guest 06:44
そうですね、アンゲラとたいアンゲラータタイプ、スクリットとか、アンゲラーでテストしてます。

Guest 06:50
ラインだと、アンギュラー業務で使える機会って、そんなに多くない気がするんで、割とごそうですね。下るには結構いいというか、

Guest 06:58
はい、なんか普段普段触れない分、触る機会になるのは結構いいですよね。

Guest 07:03
そうですね、ちょっと気持ちが切り替わると言いますか。気分転換になるというか、

Guest 07:08
すね、なんか、リアクトビル書いてると、まあ、いつもの業務じゃんって気持ちになってしまうっていうのも、やっぱある程度あるかなと思うんで、うちらの場合、特にビジェスとか書いてるとま、業務じゃんってな。なるところもあるかな、とはい、そうです。

Guest 07:20
あ、ちょっと使われてる技術の方について、詳しく聞いていきたいと思

Guest 07:24
なんですけど。私、海外のけしさん見て、初めてこのミュージックキットってやつかええ、あの、映画作られてるのを知ったんですけど、ざっくりと教えてもらってもいいですかね。これがどういったものかっていうの

Guest 07:35
はいミュージックキットjasっていうのは、

Guest 07:40
ま、公式のドキュメントには、あ、あの、applemusicplayertobeverpというあるように、webアプリに、applemusicのpriaを埋め込むようなものっていうもので、

Guest 07:50
apple公式で、配布されているsdkになります。

Guest 07:54
で、こちらを使うには、マップルの。デベロッパーのアカウントが必要だったりとか。ちょっとハードルはま高いっちゃ高いと思うんですけど、ま、それをま

Guest 08:03
通り越してしまえば。あとは、数行のコードだけで曲を再生できるようなものとなってます。

Guest 08:11
ミュージックキットって、結構最近出たやつなんですか。それとも、結構前からあったのがあった

Guest 08:15
そうですね、ちょっと僕の記憶があんまりなこの曖昧なので、ちょっとそこの辺までは、具体的にはわからないですけど。

Guest 08:25
なるほど、なるほど、いやま、appleのアカウントさえあれば、初めの申請さえしまえを使えれるって感じなんです。

Guest 08:33
そうですね、

Guest 08:34
てか、これってなんか単純にapplemusic用のその接続なのか、音声の取り扱いも含めてやってくれるようなライブLINE。なんか

Guest 08:43
そうですね、アップamusicのAPIのアクセスと、あと、音楽の再生も含めて、全てやってくれるようなものになってます。

Guest 08:50
な、なんか、再生以外だと、どういった操作とかができたりするんです。

Guest 08:53
例えば、プレイリストの作成とか、あとはまあ曲の追加とか、曲の削除とかも確かできた気がします。

Guest 09:02
基本的に、applemusicのAPIにつなので、できるものであれば、ほぼすべてのことができるかなという認識です。

Guest 09:10
結構高機能なのは高機能な

Guest 09:13
そうですね、

Guest 09:14
ただ、ちょっとドキュメントが、微妙なところがありまして、あのま全てななんていうんでしょう。あの、我々のフロントエンドデベロッパーがよく見るようなnpmだったりとか、ギターブでよく見るプロジェクトのドキュメント

Guest 09:27
よりはちょっと不親切なところがあるので、そこがちょっと取り扱う上で難しかったポイントでもあり、ま

Guest 09:33
てことはもう完全にあれなんですかね。そのossとかではない感じで提供されている。

Guest 09:39
はい、そうです。あの、cdnkuで取ってくるような形で、はい、npmで配布されてないですね。

Guest 09:46
もう、普通にアップルのデベロッパーサイトのドキュメント見て、使っていくって感じになるっていうとこですね。はい、

Guest 09:53
そうなります

Guest 09:55
てことはあれですかね。なんか、アキラだと多分tsでかか書かれてると思うんですけど、タイプでフィニションとかもあのあるわけではないみたいな感じですかね。

Guest 10:04
そうですね、

Guest 10:05
一応あの非公式であのさん誰かがつかあのつってくれたミュージックキットタイプ、スクリプトっていうプロジェクトがあるにはあるんですけど、ちょっとうまくは使えなかったっていうのもあって

Guest 10:15
ま。ちょっとこの際、勉強があったら、自分でもカで書いてみようかなってことで、この辺もチャレンジしてます。

Guest 10:21
なるほど、なるほど、

Guest 10:23
みちそのもう1個ミュージックキットジースについて聞きたいんですけど、その再生とかのやってくれるってところがあったと思うんですけど、これって、その、あの、オーディオコンテキストのAPIとかとも繋ぎ込むことはできるんですかね。

Guest 10:35
そうですね、ちょっとそこまで試してはいないんですけど、このライブの挙動を見る限りだと、ページの中にオーディオタグっていうのを埋め込んでいるようで、

Guest 10:45
もしかしたら、ここを何かどうにかこうにかすれば、ちょっといじれるようになるかもしれませんけども、基本的に再生とかっていうのは

Guest 10:53
ゆ。あの高度から、その音楽に直で触るようなことはできないので、なんてちょっと道数って感じです。

Guest 11:00
ま、ただ、最終的には普通にオーディオタクの中で再生されるっていう答えなので、まあ、オーディオタグへのアクセスでできることってのは、まあできそう

Guest 11:09
って感じですかね。

Guest 11:10
そうですね、

Guest 11:14
じゃ、ちょっと次技術的な部分、そのミュージックキット外の技術的な部分とかにも聞いていきたいんですけど、なんかやってみて、書簡とか、ま、こういうところが

6. フロントエンド技術と所感 11:15

Guest 11:24
なんかよかったとか、ま、こういうところ、技術的にやってみたいとか、

Guest 11:29
いろいろあったら、聞いていきたいなと思うんですけど、なんか、今回のはいま技術選定の理由とか、ミルクキット

Guest 11:35
を使った開発をしてみての学びとかあったら、色々聞いていきたいなと思うんですけど、なんかありますかね。

Guest 11:40
と、今回、テクニカルの部分のチャレンジっていうところとしては、

Guest 11:44
アンゲラcliっていうま、アンギラーの出してる開発ツールの中に、えと、ライバリーを作るっていうngェネレートライバリーっていうま、コマンドがあるんですけど、はいはい、

Guest 11:54
それを使って、何かしらのライブラリーの作成にチャレンジしてみたいっていうところがありまして。はいはい、

Guest 11:59
実はこのプレイヤーの裏でま。もう1個サイドプロジェクトという感じではあるんですけど、

Guest 12:05
あの、musicapplemusicのmusickidjasをangelでラップしたような。ライブラリっていうのを一緒に作っています。

Guest 12:12
じゃあ、そのライブラリーを使うデートして、今回のプレイヤーを作っているみたいな。

Guest 12:17
そうですね、その意味も含んでますで、今回こちらのその片定義とかも含めて、全て自前で書くので、

Guest 12:27
結構ま固定義の練習にもなったなっていうところは、ま、先ほども言ったような感じなんですけど、

Guest 12:35
結構ななんでしょうね。あの、まど、どういうラップの設計をしていくか、みたいなところは、結構

Guest 12:41
今回作る上で悩んでる部分でもあって、まだちょっと正解が見えてないところでもあるんですけど、はいはい、なんか難しいなと感じた部分ですね。

Guest 12:49
まどこまで隠蔽するかとかって感じですかね。

Guest 12:52
それで、そうですね、あの、結構なんかこのapplemusickitjaceの、あのプレイヤーっていうインスタンス

Guest 12:59
があるんですけど、が、結構なんでしょう。コードに書いてしまうと、ミュージックキットドット、ゲットインスタンスドットプレイヤーって結構深いところにあるんですよね。

Guest 13:09
で、それを結構毎回あの巣で書くのも大変だろうなっていうことで、今回はちょっともう少し簡単になるような感じで

Guest 13:17
そう。アンゲラのサービスの中にも、インスタンスを置いちゃうとかっていうようなところをやってみたんですけど、この設計は良かったのだろうか、みたいなところとかは結構ある、悩んだ部分ですね、

Guest 13:30
結構そういうのはまあ使ってみて、使い心地を確かめないとか、新しく誰かに使ってもらわないと、なかなかこう

Guest 13:38
あれっすもんね。あの、まだわからないところがありますもんね。

Guest 13:42
そうですね、っていう意味でも、やっぱりこう。自分でデモのアプリも一緒に作っておくと、

Guest 13:47
なんか、ライブラリの設計とで、使う側の視点も一緒になんか検証できるので、はい、結構そこは良かったなと思います。

Guest 13:55
いや、でもいいですよね、なんか自分でライブラリあの、結構まあ、ライブラリってこう使うものがないと

Guest 14:01
イメージしづらいってとこもあると思うんで、ま、同時並行で作っていけるってのは結構面白いですね。

Guest 14:07
あ、じゃあもう1点。はい、あのま結構さっきも業務の中だと、いつもリアクトとかビューってがほとんどになるかなっていう中で、今回アンケラを選定した理由とかってあるんですかね。

Guest 14:18
あ、はいとそ個人。えと、全職の方でとアンゲラの方をあけ扱っていたので、ま、結構個人的には、このアンゲランの

Guest 14:27
技術、スタックみたいなところのキャッチアップをどんどん続けていきたいなっていうところがありました。はいはいで、結構

Guest 14:34
片定義とかライブラリを作成するみたいなところが結構ま大変だろうなっていうところを

Guest 14:39
なんとなく分かっていたので、まその辺をまuiの部分については、もう割と自分の中で慣れてるフレームワークを使ってま。ちょっと頭の中の領域みたいなものをちょっとあの小さくしたかったっていうのもあ、

Guest 14:50
はいはいはい、できるだけ省エネでやりたかった。

Guest 14:52
あ、そうですね、はい。

Guest 14:54
エシェネレートライブラリーっていう存在を私、初めて知ったんですけど、

Guest 14:58
はい、あの、これは結構プロジェクト的には、あの普通アビラって入したらとま。テスト環境を含めて、ドンとアプリケーション作るためのものが出てくると思うんですけど、このライブラリージェネレートの場合は、どういったものが作られるんですか。

Guest 15:12
そうですね、この場合はまあらいほんとにクリエイトライバリーという名の通りと、アングラーのまライブラリーを作るようなものを、生成してくれるものになります。

Guest 15:22
で、まあ、新しくプロジェクトっていうフォルダーができまして、そこに新しく生成したライブラリーが入ってきて、

Guest 15:31
で、そのままビルドすると、あの元のプロジェクトから参照できるような形で、ライブラリーができるというものにな

Guest 15:38
で、そこはニューした。普通のアプリケーションプロジェクトの配下にライブラリを受けるって感じなんですかね。これは

Guest 15:43
そうですね、はかというよりかま並列というか、はい、

Guest 15:49
そうなんですね。なるほど、リアクトとかミューとかって、なかなかコンポリント作りやすい環境がなくて。まあ、

Guest 15:54
あの、自前で用意しがちですけど、こういうのがデフォルトで録音されてんのは結構面白いですね。面白いそうですね、

7. これからについて 16:03

Guest 16:03
いや、ちょっとテクニカルな部分から次発展して、これからの話をちょっと聞きたいなと思うんですけど。

Guest 16:10
はい、

Guest 16:10
一旦ゴールデンウィークの。自由研究っていう枠は多分終えてま。普段の土日開発みたいな形にみんな戻っていくかなと思うんですけど、ゴールデンウィークやった内容を踏まえて、

Guest 16:20
こういうことやっていきたいなとかってあったりしますかね。

Guest 16:23
はい、今はですねこの

Guest 16:27
カセットテープのアプリは、プレイリストしか。まだ再生できないっていうものになってて、はいはい、ちょっと機能が足りないなと

Guest 16:34
感じてる部分があります。はい、例えば、applemusicだと。自分のじゃなくて、他人の公開したプレイリストだったりとか。っていうものも、きっと再生したいなっていう話も出てくると思うので、ま、その辺の拡張をもちろんしたいっていうのは

Guest 16:47
ありますし、あとま先ほど言ったように、あの、ライブラリーを作っているものの、デモアプリっていうような面もあるので、そういう意味でも、ちょっと機能が足りない

Guest 16:57
なんだろう、デモになってないじゃないか、みたいなところも、はい、結構多いと思います。この辺をもう少しなんかあの拡張していく必要があるかなと感じています。

Guest 17:06
なるほど、ございます。確かに、デモアプリという側面とは、1つのプロダクトっていう側面が両方。まあ、こうどんどん進化させていく必要があるって感じですね。

Guest 17:16
はい、

Guest 17:18
アギャラってすること、結構あのウェブコンポーネンツ、スペポーズとかも簡単にできるんで、あの、昔のブログとかによくあったあの音楽再生ウィジェットみたいなも

Guest 17:27
作れるのかなとか思うと、なんか、昔ブログパーツみたいなのいっぱいあったじゃないですか、あの、フラッシュであああいう感じで、ミュージックプレイヤーとか

Guest 17:36
踏み込めるとまた面白いのかな。

Guest 17:38
そうですね、なんか、そういう方面でも、結構チャレンジできたら面白いかなと思います。

Guest 17:44
いや、これからまたなんかアプリとかあったら、このpodcastの枠もありますので、ぜひぜひこういうのというのを話してもらえればと思います。

Guest 17:52
あ、はいはいえ、今日はありがとうございました、ありがとうございました

8. クロージング 17:56

Guest 17:58
というわけでですね、ごLINEのフロントンジアのゴールデンウィーク、4日目はですね。えけしさんに、ミュージックキットジェイスを使って、えと、

Guest 18:08
アンギラーセのウェブアプリケーションを作ってもらった話とま、それのライブラリターへの展望みたいな話を聞いていきました。

Guest 18:15
ラインのフロントエンド開発室UITではですね。このようなこのような形でま、日々、自己検算やえ、議論などを行っております。

Guest 18:24
直近で言うとですね。このラインのフロントエンドンジェラのゴールデンウィークもそうですし。ビーススタディーなんかも。社内のえ学習企画から生まれたものなので、ま。これからもこういったものがあれば、どんどんえ。外部で発信していきたいなと思っておりますので、

Guest 18:39
えま、ぜひぜひご興味があれば、これからもお聞きいただければと思います。

Guest 18:43
最後にですね。このポートキャストについてのご意見やご感想をお待ちしております。ハッシュタグシャープUIT、アンダースコアインサイド、え、シャープUIT、アンダースコアイサイド見て

Guest 18:54
つぶやいていただきます。とまたウスタッフの方で拾わせていただきますので、え、ぜひぜひフィード待っていただきますと幸いです。

Guest 19:02
というわけで、え。本日はラインのフロントエンドエンジアのゴールデンウィーク。4日目ということで、えとけしさんにお話を伺いました。けしさん、ありがとうございました、

Guest 19:12
ありがとうございました。