前の記事 でそうしていたんだけど、YouTube には字幕をつけられるので、ページに埋め込んだ際にその字幕までテキストとして表示してやれば親切である。ついでにそこまで早送りしてくれるとなおいい。
前回はべたっと書き下したものを、再利用性に期待して web component として書いてみる。できあがりは以下のような感じで使えるようになる。
<youtube-transcription-player videoid="<videoId>" vttsource="<vttSource>"></youtube-transcription-player>
vttSource は WebVTT 形式のリソースへの URL か、またはテキストが WebVTT であるような要素への #ID。
ただし任意の動画について字幕を簡単に取得できる API はないようなので、自分で取得・生成する必要がある。自分がアップロードした動画であれば、自動生成された字幕を編集・ダウンロードできるので、それを使うのがよい、と思う。
リポジトリはこちら。
GitHub - motemen/webcomponent-youtube-transcription-player
デモもある。自分のまともな動画が前回のエントリのために撮ったものしかないので、同じサムネを2週間ほど見続けることになって頭がおかしくなりそうだ。
このデモにあるとおり、
<script type="module" crossorigin src="https://motemen.github.io/webcomponent-youtube-transcription-player/youtube-transcription-player.es.js"></script>
してやると <youtube-transcription-player> タグを使いはじめられます。
さらに JSPM という CDN の提供している importmap を使えば、バンドルせずに使用もできるらしい: youtube-transcription-player jspm demo - CodeSandbox
Lit で Web Component を作る
Web Component のためのフレームワークはいろいろあるようだけど、Lit を使ってみた。むかし触ったことのある Polymer の精神的後継のようだった。コードを書く部分については特に困りごともなかったと思う。
しかし作りはじめるためのスターターキットが
とたくさんあってその関係もわからないのだった……。最終的に @open-wc/create というものを使った。これはコンポーネントを公開するところまで含めたタスクが用意されていて手厚かった。あとビルド関係もシンプルで、最初は Vite とかも出てこない。これは Modern Web という勢力の Going Buildless という思想に依るようで、ブラウザが賢くなっていくのであればトランスパイラやバンドラはいらないよね……ということらしい。まあ ES Module 対応してない npm モジュールをなんとかするコードを書く羽目にはなったし、<script> でかんたんに呼び出せるようにバンドラも入れたけど。
