音声書き起こし
1. オープニング
@spring_raining
こんにちは、UITの玉田です。今回も、uyteサイドを始めたいと思います。
テンサイドは、ユーザーインターフェースと、テクノロジーを愛するハア者のためのポッドキャストです。
最新の標準の動向や開発、フレーマークの品質、uiやuxに関することまで、毎週フロントエンドの情報を発信していくことを目的としています。
@spring_raining
今回はですね。花谷さんとえと2人でメディアセッションAPIというえについてえ、話していこうと思います。それではよろしくお願いします、
@potato4d
お願いいたします。
2. MediaSession API とは？
@spring_raining
はい、じゃあまあまずは何はともあれ、メディアセッション、APIの概要について聞くところから始めようかなと思います。では、 お願いしても大丈夫です。
@potato4d
はい、大丈夫です突然なんですけど、玉田さん、人類の夢ってなんだと思います
@spring_raining
じ、人類の夢ですか。
@potato4d
はいや、私はあのピクチャーインピクチャーとかだと思ってるんですけど、
@spring_raining
なるほど、はいはい、
@potato4d
あの、最近夢がかなったじゃないですか。こう、色んなあのysとかも含めてですけど。そうですね。たくさん夢が叶って、まあ、みんなこう 幸せに今生きているかなと思うんですけど、まあ、なんかこうネイティブとかならえ、まだしも、なかなかこう。ウェブの世界ってああいうこ。
ブラウザの枠を飛び出たコントロールとかっていうところに、融通が利かないことが、これまですごい多かったかなと思うんですよね。
@spring_raining
はいはい
@potato4d
で、。今回メディアセッションAPIの話をえする予定になってるんですけど、まさにですね。メディアセッションAPIっていうのは、そういうこう ブラウザ上で再生されるま、音声であったりだとか、動画みたいなものに対してこう色々情報を付与したり、操作できるようになったりする。APIのことなんですよね。
ま、つまりはあのpip時代とかにま、色々こう、好きなことができるようなAPIだと認識してもらえるといいかなと思っております。
@spring_raining
なるほど、な
@potato4d
ええ、 メタセッションAPIなんですけど、今は一応。使用としては、エディターズドラフトって形になっていて、まだこう正式なものじゃないんですけど、なんか一方で実装状況としては、かなりこう いい状態になっていてですね。ま、こういわゆるモダンブラウザでは全部実装されていて、あのサファリも含めてですね
@potato4d
モダンなブラザート全部リストされてて、もう現在時点で 一応こう使う分には不便しないような実装状況になってるかなっていうので、実はブラウザ側からも、そういった音声や、どうかっていうコンテンツに対して、色々アプローチできるような状態になっているっていう感じで ございます。
@spring_raining
あ、なるほど、対応状況もそうですね、クローブfifox、さらに対応していてって感じ
@potato4d
で。そうですね、なんでもうあの、まあエッジとかもそうですけど、まあ、基本的なブラザとなんでも使えるんで、もうこう普通に。
あの、まあ、もちろんは愛はちょっとできないんですけど、まあ、それ以外に使えるかなっていう風なところでございます。はい、
3. MediaSession API でできること
@spring_raining
そうですね、メディアセッションエアって、その名前からちょっと。私、最初あの、どういったものか掴みづらかったんですけれど、もま 使ってみるとまあすごいあここれかってなるやつで。実はこの岩テンサイドのサイトも先日対応されたと聞きまして、 対応もしてるんですよね。
@potato4d
あ、そうなんですよ実は今これ。多分このエピソードが公開されるのが金曜日なんですけど、その2日前の水曜日にとってるんですけど、 実はその収録日から見て、前日の3月29日の火曜日に対応したのがデプロイされたところでして、 なんか実際今えせっかくアクセスして見てくださってる人もいるかなと思うんで、まあ、ちょっと触りながら見てもらえると
@potato4d
いいかなと思うんですけど、もうばっちり対応して使えるような状態となっております。なんで、せっかくなんで、ちょっと今じゃあ、実際yテンサイトでの実装ベースで どういうことができるかとか、紹介させてもらってもいいですかね。あ、はい、どうぞおじゃまずなんですけど、そうですね。結構スマホとかで見てたらと、スマホの通知バーみたいなところに表示されていてと、あと、pccromとかで見てると、再生中に 右上のあのタブクロム拡張が表示されてるところに、なんか音楽のマークみたいな音符マークみたいなんが表示されてるかなと思うんですけど、ま、そこをクリックすると、
@potato4d
出てくるメディアの再生エリアみたいな、あの、メディア通知エリアみたいなところを見てもらえると わかるかなと思うんですけど、まずできることで言うと、そのメディア通知のエリアにですね。再生してる動画とか、音声のメター情報が表示できるような感じになってます。
まあ、どういったものが表示できるかって言うとですね。タイトルえま。今回であれば、UIT INSIDEの再生中のエピソードのタイトル
@potato4d
でアーティスト。まあ、音楽とかも考慮されてるんで、アーティストを誰が提供してるかみたいなのが表示されていて、今回ま一律でUITに設定させてもらってるんですけど、アーティスト情報 で、最後にアートワーク、サムネイルですね。が、設定可能な感じとなっております。
まあ、なんでこの辺りは元々は特にえ、音声とか再生するだけだとえ、取れない情報になるんですけど、まあ、外部からメタ情報として、
@potato4d
その未来セッションAPIの一環であるメディアメタデータっていう、そのウインドウに生えてる クラスというか、オブジェクトがあるんですけど、まそ、これを入することによって、え、メタデータの入ったオブジェクトをえ、生成して、それを流し込むことが可能と なっております。
@potato4d
なんで、結構えと、グラウドのメダ通知と連携することが前提にはなってるんですけど、まあ、音声コンテンツであったり、動画コンテンツであったりっていうのが、そこにもも表示されるエリアではあるので、最適化した情報を表示できるっていうのがこう良さなのかなと 思っております。
で、加えてあれですかね。スマホであったら、バックグラウンドpcとかであったら、ベタブを開けてる時にもですね。このメディア通知欄っていうのは、常に表示されているんで、こう結構バックグラウンドから音声を再生するとか、動画のコントロールをするみたいなのができるのがすごい
@potato4d
1番いい特徴かなと思っております。
@spring_raining
はいはい、なるほど、なるほど、
@potato4d
そうこれは、メタ情報を表示するだけで、できるような感じになってます。
@spring_raining
ほんとに設定するだけで大丈夫だった。
@potato4d
そうですね、基本的な再生自体はもうこのメタ情報を設定するだけで、ブラザが吉野にやってくれるような形に
参加者 3
ああなっており
@potato4d
ます。なんで、すごいスモールスタートするだけだったら、例えば、そのポッドキャストのサイトとかに、これ設定するだけでも、すごい便利になるんじゃないかなと思いました。
@spring_raining
あ、そうなんですね、ほんとになんかスマホ、 私はスマホが特にほんとに便利そうですね。グラウンドで聞けますし、そのロック画面でこう。まあ、iosとかアンドとかだと操作できると思うので、 それがめちゃくちゃびにあ
@potato4d
あ、わかりますわかります、結構これまでって、その ブラウザで提供する時に、そのアプリとの差別化点。ていうか、アプリにできて、ブラウザでできないこととして、その裏側で色々触ったりとかっていうのがあったかなと。バックグラウンドドでの そのビヘアっていうのがあったかなと思うんですけど、そこがかなりこう。ネイティブに近づいたかなっていうのは、私も感じましたね。
@potato4d
あと、音声再生してる時に、iphoneのロック画面とかで、こうなんかただの音符マークみたいなんじゃなくて、ちゃんとサムネイルとかが表示されているとこう。ああ、今このエピソード聞いてるんだなってのがわかりやすくなるってのを、 やっぱりかなりいいところだな。
参加者 3
入りましたね、
@potato4d
で、加えてですね。これが、メタデータの設定だけでできることなんですけど、プラスで音声とか、動画のコントロール自体も結構可能な感じに なっています。はい、で、さっきある程度はやってくれるって話をしたかなと思うんですけど、逆にまこうある程度しかやってくれないっていうところでもあって、 例えばですけどい再生とか一時停止とか、ま、あと、スマートフォンのブラウザとかだったら、スマートフォン側で、え、ちょっとした
@potato4d
飼育とかもできるかなと思うんですけど、ま、それぐらいのデフォルトの挙動しかなくてですね。
十分ではない体験のキスもあるかなと思ってます。で、ただ、そこに対してミアセッションAPIには、そのメタデータの要素の え、他にアクションハンドラーという様子がありまして、まあ、要はそのイベントリスナーみたいなものですね。メディアに対してのイベントリスナーみたいなものがあってですね。そこで、トラック単位のスキップとか、曲のアルバム聴いてる場合の次の曲へのスキップみたいな操作。
@potato4d
あ、飼育が十分じゃない媒体での飼育などの操作みたいなのも、js側と共有できるような形になっていたりします。
なんで、これを使うことによって、例えばイインサイドって、サト内でこう再生ボタン押して、再生中だとこうチャプターが移り変わったりだとか、今ひ今聞いてる何分何秒みたいなのが表示されたりだとか。あと、こうシークバーの水色の えバーがちょっとずつ進んでいったりみたいなのがあると思うんですけど。ああいうのってこう。勝手にメディアセッションの方で、表示されてるボタンを押すだけとかだったら、うまくシングされなかったりするってのが課題担当して
@potato4d
あるかなと思っていて、えま。そういったブラウザ上に存在するものとえ、メディアセッション側の不整合を起こさないようにする。プラス、お互いでこう、相互に連携するみたいなのを、アクションハンドラーっていう機能を使うことによって、実現できるようになったりします。
なんでこうメタデータで、最低限の再生を保証しながらま、アクションハンドラーの方で、よりこう高いエクスペリエンスを提供するみたいなのができるのも結構特徴ですね。
@spring_raining
なるほど、なるほど、今あのmdnのサイトを見ていて、結構ま例ではいろんなアクション、ハンドラがありますね。まあ、プレイポーズは 当然あるんですけれども、なんか飼育とかも一応終わったり
@potato4d
しますね、です、ですです、そうなんです結構色々あって、かなりこう小回りの利く ように作られてるな、というか、実際のユースケースにかなり添っているなっていう気がしますね。
@spring_raining
はいはい、はい、ほんとにあれですね。その音楽というか、音源の再生の一通り機能は揃って感じが します。
@potato4d
ですね、なんならこうこんなのをブラウザにはやされると、音楽プレイヤーとか、自分で実装しようと思ってる人からしたら、たまったもんじゃないぐらい 高機能な
参加者 3
操作がはいはい、
@potato4d
あるなと思いますね。
@spring_raining
これ、あの、そうです。私、最初こういうメディアセッションでできる機能って、もっとクローズドな機能というか、例えば、youtubeとかだと、有料じゃないと、そのバックグラウンド再生できないとか あったりとかして、
@potato4d
ああ、ありますね。うん、なんか、
@spring_raining
こういう機能って、すごいブラウザのベンダーの特権みたいな感じなのかなって。
@potato4d
あ、私もその印象で言いました。
@spring_raining
思ってたんですよね、でも、こういうのがあるのって知らなかったですね、ちなみに、これってどうやって知ったんですかね。
@potato4d
あ、これはえ、なんだっけな始まりはだいぶ前にえ。実はUIT INSIDEのリポジトリの方にメディアセッシュ、ネピア対抗してくれっていうのが、去年の末ぐらいに上がってて、 あ、そうなんです。そう、そっからちょっと調べててみたいな感じがな。なのが私の
@spring_raining
けだし、はいはいはい、あ、なるほど、なるほど
@potato4d
で、ああ、このapaがあるんだって。確か、元々それの異臭が上がったのが、googleのカンファレンスで発表されていたっていう風な経緯でしたかね。
なんですけど、ちょ、はい、後で参考用のurlを シノートにも貼っておこうかなと思うんですけど。あ、cromデベロッパーズの方に。去年の10月末に上がっている動画があって、
@potato4d
はいはいはい、そここで 閲覧できるようになってますね。ちょっとこれも白の人に貼っておこうかなと思うんですけど。カスタマイズメディアのノティゲーションズ、アンドプレイバックコントロールです。アウトサイドザブラウザーっていうので が、そのブラザーの外からいろんな操作ができるよみたいな書いてあるような。動画があってですね、そこで、こう知ることができた
@spring_raining
ああ、なるほどですま、存在自体は結構前からあってで、そうですね、サファリが15そうです。
@spring_raining
なんでまあこう時が来たというか、マンをして 反映されて、で、ほんとにios使ってみてもわかると思うんですけれども、全く違和感なく、そのネイティブアプリっぽい こう、動きをしてくれる。すごいいい
@potato4d
実装になってやめちゃめちゃいいですよね、わかります そう、UIT INSIDEって、実は結構前からpwaには対応してたんですけど、こうpwaに対応しても、バックグラウンド再生できないっていうのがずっと課題タとしてあって、 これなんかうまく今動いてて、すごい嬉しいってのが実はあったりしますね。
@spring_raining
そうですね、なんか、ほん真のピラになった感じが
@potato4d
そうですね。ほんとにプログレッシブウェブアプリケーションっていう感じに、1つにのものになったんで、こういうのが来てくれるのは、ほんとめちゃくちゃ嬉しいですね。
@spring_raining
ほんとに、そのポットキャスト系のサイトだと、復員ですね。は素晴らしい
@potato4d
ま、そんな感じでかなり便利なんですけど、一応一意事項として、セットアクション、ハンドラーでできる。そのアクション、ハンドラーに関しては、結構実装状況がまちまちなところが あるみたいなんで、使う時は、ブラウザを横断して使ってみるといいかなと思います。なんか、例えば、私も実際あのisサファリ とかで触ってる分には完全な。ストップがなくて、ポーズしかなかったんですけど、ちょっと多田さんにandroidで見てもらったら、ストップが絶対生えていて、ストップのハンドラーは実装しないといけないねみたいな話になったりとかで、なんかこう表示されるかどうかと。
@potato4d
イベントハンドラが実際反応するかどうかみたいなのがまちまちっぽいんで、まえ。できれば、クロスブラウザで確認しながら、実装するのがいいかなっていう感じでしたね。
@spring_raining
あの、コントローラーは、ほんとにosのネイティブの器用なんで、ま。ブラウザもそうですし、 メジャーなこうosとかは確認した方がいいかもとは思いますね。もしかしたらこう、例えば、windowsとかでも、 そのオスで提供するプレイヤーみたいなのがあるかもしれない。知らないですけど、
@spring_raining
っていう感じなんであれですかね。こうとりあえず確認はしてないけど、ハンドラを実装してみるとかでもいいかも。
@potato4d
ああ、そうですね、そうすね、一通り想定されるシエーションやっておくとかはいいかも
参加者 3
しないです。
@spring_raining
まあ、それをあの使うかどうかは、そのosとブラウザ次第
@potato4d
て感じ。そうですね。そうですね、っていうのがいいかなとは思い、
4. こういうときに使えそう
@spring_raining
じゃあそうですね、あの、メディアセッションapはめっちゃ便利っていうことはわかったんで、 もうちょっとなんかこうえ。ポットキャストもそうですけど、どんなサイトに使えそうなのを考えてみますかね。
@potato4d
あ、あですね、なんかそれで言うと結構使ってみた感じなんか、もう音声とか動画とか使うような。まあ、ボッドキャストであったり、まあ、動画サイトみたいなところとか。あだったらもうとりあえず対応しといて、全然そのないかな 思いました。
ま、最小限のこうめメタデータ付けるだけだったら、ほんとにこう入して、そこのオブジェクトに必要なデータ放り込むだけみたいなんで対応できるんで、ま、ほぼ実装をコスト0ぐらいかなと思いますし。なんか、ウェブページ内の
@potato4d
そのコントロールと連携するみたいなのも、めちゃめちゃコストがかかるっていうわけでもないかなと思ったんで、なんかこう結構とりあえずで、音声とか動画使うならまだか、それが主体なコンテンツとして、取り扱うサイトなら、もうどこでも結構使えるのかなっていう風な 印象があります。ただ、まあ、その高機能さみたいなところをどれだけ引き出すか。みたいなのは、結構サイトによるのかなと思っていて、 例えば具体的な話で言うと、UIT INSIDEって、今基本的なソースしかほぼ対応してないんですけど、え、ネクストトラックみたいな、その次のトラックに済むみたいなボタンを
@potato4d
実装しようと考えた時、ま、そのuy側は私たちは鑑賞できない、その実際のコントロールする。愛はブラウザが定義してるんで、鑑賞できないんで。
例えば、次のチャプターに行くボタンみたいなのを作ろうと思うと、こういわゆる音楽でいう、次の曲に行くボタンのいる表示方がされちゃうんですよね。
でとはいえ、こうpodcastで、次の曲に行くボタンを押した時に、次のエピソードにいきなり飛んだら。多分誰もその体験は求めてないんですけど、
@potato4d
なんかこう。次絵を押した時に、次のエピソードじゃなくて、次のチャプターに行くっていうのも、こう。これまで私たちが学習してきたこう、uiの 基本的な体験と回離するっていうのがあって、なんかそれはそれでそもそも押してもらえないんじゃないかみたいなとかもあったりとかしていて、
@spring_raining
これ
@potato4d
どこまで体応するかっていうのは、サイトの体験とuiがどれだけマッチしてるかみたいなのによるかなっていう風な印象を 受けましたね。
@spring_raining
悩ましいですね、
@potato4d
そういや、悩ましいですね。
@spring_raining
その音楽プレイヤーとして、特化してるAPIだからこそ、それをそのままポッドキャストのサイトに流用できるわけではない。
@potato4d
あ、あ、ですですですです、そうですね、なんで比較的そういった一気に次に飛ぶみたいなのって、なんかこう。短時間の動画や音声に 短時間てても5分ぐらいまではいと声を想定してると思うんで、こう長いものに対して、どういうアクションを取るか、みたいなのは、結構難しいところだなと思いました ね。え、
@spring_raining
うん、確かにとりあえず対応とかすごい。そのアクションハンドラーのところは、まあ、こういう 議論とかはあると思うんですけど、それ以外のメタデータとかはすごいほんとにいつでもたいそうです。
@potato4d
ですね、すぐ対応できそうなんで、メタデータはとりあえず対応するで全然いいかなっていう風な気がしました。アクションハントナーの方も、なんかこう、 googleとかが主要に入ってるなら、googleとかって言って、もうyoutubeとかって、チャプターとかもあるし、こう ロジックとしては、これまでえ、mp3や、実はチャプター書き込める仕様がちゃんと存在するんで、そういったところをこう。そのプローするなら、チャプターっていう概念があってもいいんじゃないか。みたいなことをこう
@potato4d
別にお金て言ってくれると嬉しいし、そうなったら、アクションハンドラーをもっと有効に使えるんだけどな。あみたいなのは、ちょっと感じたりはしましたね。
@spring_raining
あ、そっか、そういう
@potato4d
そうですね、一応あのmp3とかって、四上チャプターが載せられるんで、そういったものの需要があるっていうのは、これまでのその音声ファイルの歴史としてあると思うんで、なんか、そこは全然剃っていいのかなみたいな気が
参加者 3
しましたね。
@spring_raining
なんか、めっちゃあれな意見ですけど、有料プランとかに使いそうです。そうですね、
@spring_raining
ユタイになったら、バックランド再生や、まさしくyoutubeなんですけど、なんか ほんとにコストもかからないし、実装側からしたらいいコストしかないですね。
@potato4d
確かにし、逆にコストかからない割に体験に直結するんで、こういうのも有料プランとかにされる
@spring_raining
課金ポイントができましたね。
@potato4d
それがいいかどうかわかった
@spring_raining
そうですね、これは、あのな内緒でお願いします。ここだけで、
@potato4d
まあそんな感じでかなり便利ですし、とりあえず使える機能じゃないかなと思いました
@spring_raining
皆さんも是非使ってみてください。結構、あの音声を取り扱うサイトって限られてるっちゃ限られてるんですけど、も、 もし使ってたらぜひってですね、ほんとに便利です。
@potato4d
そうですね、めちゃめちゃ便利なんで、ぜひぜひ
@spring_raining
じゃあそんな感じですかね。
@potato4d
そうですね、はいな感じかなと思います。
5. クロージング
@spring_raining
はい、では、今回はメディアセッションエピアについて、えはたさんに聞いてみました。
LINEのフロントエンド組織UITでは、このような技術的なキャッチアップを日々行っております。
UITサイト以外にも、毎週の社内勉強会で、安定の情報交換を行っています
@spring_raining
今後も、utsを通して、このような情報を外部に発信していけたらと思います。
最後に、現在ラ株式会社では、新卒、中途採用ともに大募集しています。
このポットキャストを聞いて、lに清みを持たれましたら、その1番下にある求人のページから、ぜひアクセスしてください。それでは、谷さん、ありがとうございました、
@potato4d
ありがとうございました。
