YouTube2ppt (YouTube 動画から powerpoint のスライドを生成) ブラウザ拡張機能

Page content

最近 ML(Machine Learning)を勉強しています。

その勉強でよく参考にするのが、 YouTube の解説動画です。

解説動画をパワポにまとめる

この解説動画は、スライドを再生しながら内容を解説する動画になっています。

動画での解説は文字よりも情報が頭に入ってくる、というメリットはありますが、 動画を後で見返すのは時間がかかるし、 どの再生時間だったかを探すのも面倒です。

そのため、自分の理解を深めるため & 後で見返したときに確認したい箇所を簡単に探せるように、 パワーポイントにまとめています。

具体的には、

「動画のスクリーンショットを取りながらパワーポイントにまとめる」

ということをしていました。

ただ、これだと動画を見ながら

  • シーンが変った時に動画を止める
  • キャプチャする
  • パワポのシートを追加する
  • キャプチャした画像を貼る
  • 貼った画像のレイアウトを調整する

というのをシーンが変わるごとに行なう必要があり、動画に集中できません。

そこで、今回上記作業を自動で行なうためのブラウザ用拡張機能を作成しました。

ブラウザ拡張機能 ( firefox Chrome 用)

拡張機能のコードは以下です。

<https://github.com/ifritJP/youtube2ppt>

当初は Firefox 用として開発していましたが、 Firefox で未登録の extension を動かすには 面倒なので、 Chrome 用に切り替えました。

現在は正式な extension として登録していないため、 ブラウザで動かす場合は ここ の手順が必要です。

そのうち、正式な extension として登録申請する予定です。

ブラウザに extension を登録した後は、次の手順で実行します。

  • キャプチャしたい動画のページをブラウザで開く
  • 登録した extension のボタンを押下する
  • 新しいタブが開いて、そこに YouTube の動画が表示される
  • 再度 extension のボタンを押下する
  • 新しいウィンドウが開く
  • 新しいタブ内の動画の再生を開始する
  • extension は一定時間ごとに動画の画面をキャプチャし、新しいウィンドウにサムネイルを表示する
  • キャプチャしたい範囲の再生が終ったら save ボタンを押す
  • キャプチャした画像をパワーポイントに変換しダウンロードが行なわれる

以下、注意点です。

  • キャプチャは 2 秒間隔でシーンの変化を検出し、変化があった場合にキャプチャします。

    • シーンの変化は直前のシーンとのピクセルのRGBの差が一定値を越えたかどうかを確認しているだけです。
  • キャプチャする動画のサイズは、 extension のボタンを押下する際に開いていた YouTube の動画サイズです。
  • 表示されている動画の画像をキャプチャするので、 動画を操作しているときに表示されている YouTube の操作パネルなどもキャプチャされます。
  • save ボタンを押下してから progress バーが止まるまで window を閉じないでください。

    • キャプチャ画像 1 枚につき数秒程度の時間がかかります。

マニフェスト

今回の拡張機能のマニフェストの permissions は以下を定義しています。

  • activeTab

    • 画面のキャプチャ用
  • tabs

    • タブの情報の取得用
  • scripting

    • キャプチャする動画のサイズ(縦、横)情報の取得用
    • 動画の再生中の時間、再生状態の取得用

使用技術

  • PptxGenJS

    • パワーポイントのドキュメントを JS 上で生成する