mcpField
B
bilibili-render-pdf

bilibili-render-pdf

github.com/wdknsドキュメント820371 回インストール6 日前に更新
リポジトリ

bilibili-render-pdf について

bilibili-render-pdfは、Bilibili動画から中国語の講義ノートを作成し、PDFに出力するワークフロースキルです。構造化された学習資料が必要な読者向けに、字幕または音声文字起こしと重要フレーム、動画カバーを組み合わせた完全なLaTeX文書を生成します。

主な機能

  1. 01動画メタデータと分割動画の確認
  2. 02字幕・Whisper・映像のみの切り替え
  3. 03カバー画像と重要フレームの抽出
  4. 04講義形式に沿った中国語ノートの構成
  5. 05LaTeXとPDFの生成・コンパイル

活用シーン

  1. 01Bilibiliの講義動画を学習ノートに整理
  2. 02字幕が少ない動画の内容をまとめる
  3. 03長時間動画を分割してノートを統合

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/wdkns/wdkns-skills --skill bilibili-render-pdf

インストール後、Claude Code で/bilibili-render-pdfを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yamlassets/notes-template.tex

詳細

Bilibili レンダリング PDF

このスキルを使うと、Bilibili の動画から、完全でコンパイル可能な .tex ノートとレンダリング済み PDF を作成できます。

このスキルは、youtube-render-pdf のワークフローを拡張し、字幕が少ない場合、ログインが必要な高解像度動画、複数パート(分P)の動画、プラットフォーム固有の学習内容以外のコンテンツに対応します。

Bilibili と YouTube の主な違い

項目対応方法
字幕の少なさまず CC 字幕を試し、利用できない場合は Whisper の音声認識に切り替え、さらに利用できない場合は映像のみのモードを使います
ログインが必要な HD1080P 以上の画質には Cookie が必要です。ユーザーに yt-dlp --cookies-from-browser chrome の使用を促してください
複数パートの動画分P 動画を検出し、処理するパートをユーザーに確認します
URL 形式bilibili.com/video/BVxxxxxxx と b23.tv の短縮リンクに対応します
弾幕学習内容の情報源として弾幕は使わないでください(ノイズが多すぎます)。CC 字幕または Whisper の出力のみを使います

目標

Bilibili の URL から、質の高い中国語の講義ノートを作成します。

出力は次の要件を満たす必要があります。

  • 字幕の書き起こしだけに頼らず、動画の実際の学習内容を使う
  • 利用可能な場合は、動画のオリジナルのカバー画像を .tex とレンダリング済み PDF の表紙に配置する
  • 重要度の高い必要なキーフレームをすべて図として含め、重複するスクリーンショットは追加しない
  • 最後に総括のセクションを設け、講演者による内容のある締めくくりの議論と、独自に整理した要点を含める
  • \section{...} と \subsection{...} を使って構造化する
  • \documentclass から \end{document} まで含む完全な .tex ドキュメントにする
  • 最終成果物として、PDF へのコンパイルを正常に完了する

教育上の基準

ノートは、優れた教師が読者を導いているように読める必要があります。

  • 各主要セクションは、まず動機を説明し、次に主要な考え方、仕組み、例や根拠を示し、最後に要点をまとめるよう構成します
  • 論理の展開を丁寧かつ明示的に示します。講演者がその概念を導入する理由、解決する問題、次の考え方につながる流れを明確にします
  • 深くても分かりやすい説明を目指します。技術的な深さは維持しつつ、形式的な記述は平易な直感的説明の後に導入します
  • 内容が密なセクションは、長い導出にすべてを詰め込まず、理解を段階的に深められるよう、より小さなサブセクションに分けます
  • 字幕の内容を時系列順に並べるだけにせず、明確な意図、対比、段階的な展開を備えた学習の流れに沿って書き直します

ソースの取得

メタデータの確認
  1. まず動画のメタデータを確認します。 執筆前に、タイトル、チャプター、再生時間、サムネイルの有無、字幕の有無を優先して確認します。

  2. 複数パート(分P)の動画かどうかを検出します。 すべてのパートを一覧表示し、ダウンロードする前に処理するパートをユーザーに確認します。

字幕の取得(3 段階のフォールバック)

優先度 1:CC 字幕(プラットフォームに埋め込まれた字幕)

手動字幕と自動生成字幕の両方がある場合は、手動字幕を優先します。 zh-Hans、zh-CN、zh、または ai-zh の字幕トラックを優先します。 字幕のタイムスタンプを保持します。図の位置を特定する必要がある間は、字幕を早い段階で単なるテキストに変換しないでください。

yt-dlp --write-subs --sub-langs "zh-Hans,zh-CN,zh,ai-zh" --convert-subs srt \
  --skip-download -o "%(title)s.%(ext)s" "<URL>"

優先度 2:Whisper による音声認識(CC 字幕を利用できない場合)

まず音声を抽出し、次に Whisper でタイムスタンプ付きの SRT ファイルを作成します。

yt-dlp -x --audio-format wav -o "audio.%(ext)s" "<URL>"
whisper audio.wav --model medium --language zh --output_format srt --output_dir .

優先度 3:映像のみのモード(音声の品質が低すぎる場合)

字幕を完全に省略し、動画フレームを高密度でサンプリングして、映像のみから学習内容を抽出します。

動画とカバー画像のダウンロード
  1. .tex を作成する前に、動画のオリジナルカバー画像を取得します。 プラットフォームのメタデータで提供されている、最も高解像度のサムネイルを優先してください。 選んだカバー画像をローカルに保存し、表紙からそのローカルアセットを参照します。

  2. 図の抽出には、使用可能な中で最適な動画ソースを選びます。 フォーマットを調べ、現在の環境で実際にダウンロードできる最高解像度を選択してください。 Bilibili の 1080P 以上の動画には、通常ログイン Cookie が必要です。

  3. 可能な場合は、すべてのソースアーティファクトをローカルに保持します。 一般的な作業アーティファクトは、メタデータ、ダウンロードしたカバー画像、タイムスタンプ付きの字幕ファイル(CC または Whisper で生成したもの)、必要に応じて整理した文字起こしテキスト、ローカル動画ファイル、抽出したフレームです。

長い動画の進め方

長い動画の場合、単一の一括処理だけに頼らないでください。

  • 動画が 20 分を超える場合、または字幕ファイルの字幕エントリーが 300 件を超える場合は、作業を小さなセグメントに分割します。
  • 分割にはチャプター境界または分P境界を優先します。それらがない場合や、分割の偏りが大きすぎる場合は、内容のまとまりに沿った時間区間または字幕範囲で分割します。
  • サブエージェントが利用できる場合は、カバー範囲を広く保ち、詳細を失わないよう、異なるセグメントを複数のサブエージェントに並行して割り当てます。
  • 各サブエージェントには具体的なセグメント境界を指定し、次の内容を返すよう求めます:そのセグメントの教育目標、主張の要点、重要な数式やコード、時間情報の出典を含む必要な図、統合時に解決が必要な曖昧な点。
  • 説明が境界をまたぐ場合は、隣接するセグメント間に小さな重複を設け、統合時に重複を取り除きます。
  • メインエージェントは、セグメントごとの出力を統合し、統一されたアウトラインと一貫性のある最終的な構成にまとめます。最終 PDF は、セグメントごとの要約をつなぎ合わせたものではなく、ひと続きの講義ノートとして読める必要があります。

教育コンテンツのルール

利用可能な場合は、以下のすべてを使ってノートを作成します:

  • 動画のタイトルとチャプター構成
  • 動画のオリジナルカバー画像と主要なメタデータ
  • 画面上の図、数式、表、プロット、アーキテクチャのスライド
  • 字幕による説明、例、口頭での強調
  • インタビュー、パネルディスカッション、ポッドキャスト、会話形式の動画における、内容への臨場感、ユーモア、直感、または非常に簡潔な情報を加える、短く価値の高いオリジナルの会話部分
  • 講演中に表示または説明されたコードスニペット

実際のレッスンに寄与しない内容は省きます:

  • あいさつ
  • 雑談
  • 情報、緊張感、ユーモア、直感、または教育的価値を加えない定型的なやり取り
  • スポンサー紹介
  • チャンネルに関する案内(一键三连、关注投币など)
  • 締めの社交辞令

まとめ、限界、今後の課題、トレードオフ、アドバイス、未解決の問いなど、実際の教育的価値がある場合は、話者による締めくくりの議論も残します。

執筆ルール

  1. ユーザーが別の言語を明示的に指定しない限り、ノートは中国語で記述します。

  2. 文書は \section{...} と \subsection{...} で構成します。 必要に応じて教え方の流れを再構成し、字幕の順序を機械的になぞらないでください。 適用できる場合、各セクションでは次の問いに順番に答えます:どの問題を解決するのか、より単純な見方ではなぜ不十分なのか、中心となる考え方は何か、それはどのように機能するのか、読者が覚えておくべきことは何か。

    「不是……而是……」という文型を多用しないでください。 動画で実際に明確な対比が示され、その対比が仕組みの理解に大きく役立つ場合に限って使います。

    曖昧で抽象的すぎる表現は避けてください。 可能な限り、具体的な仕組み、例、変数、手順、観察された現象、タイムスタンプ、図、または話者が示した根拠に基づいて主張を述べます。

  3. assets/notes-template.tex を起点にします。 ローカルのカバー画像パスを含むメタデータブロックを埋め、本文コンテンツのブロックを生成したノートに置き換えます。

  4. 動画のオリジナルカバー画像が利用可能な場合は、必ずフロントページに含めてください。 文書の後半に埋もれさせず、最初のページに配置してください。 本文中の解説図とは視覚的に区別できるようにしてください。

  5. 説明を実質的に改善する場合は、必ず図を使用してください。 文書全体で多数の図が必要になるとしても、教育上の明確さのために必要な数の図を含めてください。 図の数を少なく抑えることを目的とせず、説明の網羅性と読みやすさを最適化してください。 優れた図とは、重要な数式、図解、表、プロット、視覚的な比較、パイプラインのスケジュール、アーキテクチャの全体像、段階ごとの視覚的な進行表現などです。

  6. カスタムメッセージボックスの中に画像を配置しないでください。

  7. 数式が登場する場合は、次のようにしてください。 まず、その数式が何を表現しようとしているのか、なぜ登場するのかを平易な日本語で説明する $$...$$ を使用したディスプレイ数式で示す その直後に、すべての記号を説明するフラットなリストを続ける

  8. コード例が登場する場合は、次のようにしてください。 リストの前にコードの役割を説明し、必要に応じてその後に期待される動作を要約する lstlisting で囲む 説明的な caption を含める

  9. 内容がそれを正当化する場合は、教育上のシグナルを意図的かつ繰り返し強調してください。 読者が必ず持ち帰るべき中核概念には importantbox を使用する。これには形式的な定義、中心的な主張、主要なメカニズムの要約、定理に類する記述、重要なアルゴリズムの手順、密度の高い説明の後での主要なアイデアの簡潔な言い換えが含まれます。 本筋ではないが理解を深める背景知識や補足知識には knowledgebox を使用する。これには前提のリマインダー、歴史的な系譜、エンジニアリングの文脈、設計上のトレードオフ、用語の比較、直感を養う類推が含まれます。 よくある誤解やつまずきやすい点には warningbox を使用する。これには記号の過負荷、暗黙の仮定、誤解を招くヒューリスティック、犯しやすい実装ミス、因果関係の混同、オフバイワン的な推論の誤り、話者が誤った直感と正しい直感を対比させる箇所が含まれます。 dialoguebox は、会話が多い動画において、短いオリジナルの対話セグメントが情報量が多く、面白く、生き生きとしている、あるいは特に直感的であり、話者の言葉遣いを保つことで読者が議論の場にいるという感覚をより強く得られる場合にのみ使用してください。 dialoguebox には、1 回のやり取りでも、質問、追加質問、反論、明確化、回答の連続など、密接に関連する複数のターンを含めてもかまいません。 dialoguebox の抜粋は短く保ってください。話者のラベルと具体的なタイムスタンプまたは区間を保持し、明白な ASR エラーは確信がある場合にのみ軽く修正し、そのボックスの後に、その対話セグメントがなぜ重要であるかを説明する文章を続けてください。 挨拶、フィラー、長い文字起こしのダンプ、通常の要約的な説明のほうがわかりやすい対話には dialoguebox を使用しないでください。 1 セクションにつき 1 つのボックスという割り当てはありません。素材に複数の異なる教育上のシグナルが含まれる場合は、1 つのセクションに複数のボックスを追加してください。 各ボックスは、一般的な強調ではなく、特定の教育上の内容を担うべきです。 ボックスは、それを動機づける段落、導出、または例の直後に配置することを優先してください。 通常の説明は通常の文章にとどめてください。ボックスは装飾ではなく、シグナルの強い要点のためのものです。 図は importantbox、knowledgebox、warningbox、dialoguebox の外に置かなければなりません。

  10. すべての主要セクションを \subsection{本章小结} で終えてください。 価値のある外部リンクが 1 つか 2 つある場合は、\subsection{拓展阅读} を追加してください。

  11. 文書の最後に、\section{总结与延伸} などの最終トップレベルセクションを設けてください。 この最終セクションには、以下を含める必要があります。

    • 定型的な締めの言葉を除いた、話者による内容のある締めくくりの議論
    • 中心的な主張、仕組み、実践的な意味を体系的に整理した要約
    • 概念を簡潔にまとめ、各セクション間の関連を示し、動画の内容に忠実な範囲で慎重に一般化した、発展的な総合考察
    • 内容に応じた具体的な要点、未解決の問い、または次のステップ
  12. LaTeX に [cite] 形式のプレースホルダーを出力しないでください。

図の扱い

恣意的な枚数の目安や、文書を視覚的にすっきりさせたいという偏りにとらわれず、必要性と学習上の価値に基づいて図を選んでください。

候補フレームを探す際は、適合率よりも再現率を重視してください。 スライド、数式、表、図が最終的に完全に表示され、読み取れるようになるフレームを見逃すより、まずは近傍の候補を多めに確認してください。

フレームの内容は、実際に画像を目視して把握してください。

  • 候補フレームや切り抜きを確認し、何が示されているか、どのように説明すべきか、掲載に十分な状態かどうかを判断する前に、view image ツールを使用してください。
  • フレームの内容を視覚的に理解する代わりに、tesseract などの OCR ツールを使用しないでください。
  • 画像そのものを確認せず、近くの字幕、ファイル名、タイムスタンプだけを根拠にフレームの意味を推測しないでください。
  • コンタクトシート、モンタージュ、タイル状の帯画像は候補を広く探すのに適していますが、最終的な採否と内容を表す名前は、view image で実際の画像を確認したうえで決めてください。
フレーム選定チェックリスト

動画フレームを挿入する前に、まず同じ字幕に対応する区間から複数の近接候補を確認し、以下のチェックリストに照らしてください。いずれかの項目を満たさない場合は、そのフレームを不採用とし、近傍から探し続けてください。概略が合うだけのフレームを無理に採用しないでください。

  • 関連性:そのフレームは、広い話題が同じというだけでなく、前後の段落または小節で扱う概念を直接裏付けている必要があります。
  • 必要な内容の可視性:本文で言及する視覚要素がすべて、フレーム内にすでに表示されている必要があります。
  • 完全に表示された状態:スライド、ホワイトボード、アニメーション、ダッシュボードが段階的に構成される場合は、内容がすべて表示され、読み取れる最終状態を使用してください。
  • 近傍候補の中で最適であること:複数の近接候補を比較し、最も完全で読み取りやすいフレームを優先してください。
  • 読みやすさ:掲載する根拠となる程度に、テキスト、数式、ラベル、図の構造が判読できる必要があります。
フレームの命名
  • 元の候補フレームには、中立的なタイムスタンプベースの名前を使用します。実際のフレーム内容を確認する前に、意味を表す名前を付けないでください。

  • フレーム内で何が完全に表示されているかを目視で確認してから、意味を表す名前に変更します。

  • 意味を表すファイル名は、字幕、前後のナレーション、段落の主題として意図された内容から推測するのではなく、フレームに実際に表示されている内容を説明するものにします。

  • フレームの表示が途中である場合、切り替え中である場合、または曖昧な場合は、検索を続け、まだ意味を表す名前を確定しないでください。

  • キーフレーム検索では、タイムスタンプ付きの字幕ファイル(CC または Whisper で生成した SRT)を主な手掛かりとして使用します。

  • まず、話題となっている概念、例、数式、または視覚的な説明に対応する字幕の区間を特定します。

  • 次に、その字幕に対応する時間区間内と、必要に応じてその前後を検索し、最も読みやすいフレームを見つけます。

  • 推測したタイムスタンプから、抽出したフレームを 1 枚だけ直接確認するのは避けてください。 まず、該当する時間区間から候補フレームを高密度で生成し、その後に確認して絞り込みます。

  • magick montage、コンタクトシート、タイル状のフレームストリップ、または同等のワークフローなど、多数の近接した候補を一度に確認できるツールを優先します。 これらを活用して網羅性を高め、視覚情報が完全に表示されるフレームを見逃さないようにします。

  • PPT の段階的な表示、アニメーションの展開、ホワイトボードへの書き足し、ダッシュボードの状態変化の場合は、内容がすべて表示された最終状態を明示的に探します。 おおよそ正しいと思われる最初のフレームで検索を止めないでください。

  • 近接した候補間で段階的な表示状態だけが異なる場合は、最も多くの情報が読みやすく揃ったフレームが見つかるまで確認を続けます。

  • 初期の情報が少ないフレームと、同じ説明区間の後半にある、より情報量の多いフレームで迷った場合は、後半のフレームのほうが大幅に内容が充実しており、なおかつ読みやすければ、そちらを優先します。

  • 内容を十分に説明するために必要な図は、すべて含めます。

  • 動画内でアイデアが段階的に展開される場合は、1 つのセクションまたはサブセクションに複数の図を含めても問題ありません。むしろ、そうすることが望ましい場合もあります。

  • 繰り返しのフレームや情報量の少ないフレームは省きます。

  • チャプターがある場合は、チャプター境界や説明の山場付近のフレームを抽出します。ただし、字幕のタイミングと照合して確認してください。

  • 最初に抽出したフレームがアニメーションの切り替わりを捉えていた場合は、近接するタイムスタンプも検索します。

  • 全体表示では範囲が広すぎる場合は、該当領域を切り抜く、拡大する、または個別に表示します。

  • スライドの内容が段階的に表示される場合は、読み取れる最終状態をキャプチャし、中間フレームは、それ自体が本当に異なる手順を説明する場合にのみ追加します。

  • 視覚情報が密集したセクションでは、まず多めにサンプリングし、後から削除しても問題ありません。 重要な視覚状態を確認できなくなるほど早い段階で候補数を抑えないでください。

  • ラベルが読めないほど情報を詰め込んだ 1 つの図より、必要な図を複数並べる構成を優先します。

  • 数式とラベルの読みやすさを保ちます。

図の時間情報の記録

.tex または PDF で特定の動画フレーム、または動画フレームから作成した切り抜きを参照する場合は、同じページの下部脚注に、その元となる時間区間を記録します。

  • 脚注には、たとえば 00:12:31--00:12:46 のように、具体的な時間区間を記載します。
  • 区間は曖昧なチャプター単位の推定ではなく、図の特定に使った字幕対応の区間に基づくものとします。
  • 図が切り抜きの場合も、脚注には元のフレームまたは字幕区間の動画内時間を記載します。
  • 1 つの図に含まれる複数の近接フレームが同じ字幕区間に由来する場合は、明確な脚注を 1 つ付ければ十分です。
  • 図と時間を記した脚注は、必ず同じページに配置します。通常のフロートで分離される場合は、[H]、フロートを使わないブロック、または配置を安定させる別の方法を優先します。

可視化

スクリーンショットと文章だけでは説明が難しい概念には、正確な可視化を追加してください。

利用できる方法は次の2つです。

  • TikZ または PGFPlots を使って、LaTeX ネイティブの可視化を作成する
  • スクリプトで図をあらかじめ生成し、画像として挿入する

スクリプトでイラストを生成する場合、正確な説明用の図を作成するのに最も適しているときは、matplotlib や seaborn などの Python ツールを優先してください。

LaTeX でネイティブに描画するのではなく、外部で可視化を生成する場合:

  • 図は pdf として書き出し、ラスタライズによる劣化を避けて .tex に挿入してください
  • プロット、グラフ、模式図にはベクター形式を優先してください
  • 内容が本質的にラスター形式である場合を除き、スクリプトで生成する説明用の図に png や jpg は使わないでください

元の資料に含まれる関係性、結果、数式をスクリーンショットで示すより描き直したほうが分かりやすい場合は、LaTeX ネイティブのツール、または matplotlib/seaborn を使って再構成してください。

次のような内容には可視化を使用してください。

  • プロセスフロー、パイプライン、アーキテクチャの概要
  • スケーリング則、学習曲線、ベンチマーク結果、アブレーション比較などの曲線やグラフ
  • データの関係性を説明する分布、相関、ヒートマップ、その他のプロット
  • 複雑な関数、曲面、等高線図、幾何学的な直感を伝える図
  • グラフとして描き直すと分かりやすくなる表や比較
  • 節の中心となる仕組みや要点を1つの図にまとめる概要図

学習に役立たない装飾的なグラフィックは追加しないでください。

最終チェックリスト

提出前に、次のすべてを確認してください。

  • 重要な学習内容が抜け落ちておらず、要約、構成変更、短縮の過程で具体的かつ重要な詳細が失われていない
  • テキストと図が対応している:挿入した各フレームが周辺の説明を補強し、必要な切り抜きが適用され、途中や不完全な状態ではなく、関連情報が最もよく伝わるフレームが選ばれている
  • 教材として十分に視覚的な内容になっている:情報量の多い重要なフレームを追加する必要があるか、また、LaTeX ネイティブまたは Python スクリプトで生成した図を追加すると分かりやすくなるかを確認する

納品物

次のすべてを納品してください。

  • 音声文字起こしを使用した場合は、Whisper で生成した SRT 字幕ファイル
  • 表紙に記載した、ダウンロード済みのカバー画像
  • ドキュメントで参照する、抽出または生成したすべての図の素材
  • 最終版の .tex ファイルと、コンパイル済みの .pdf ファイル([中文视频标题]_notes.tex や [中文视频标题]_notes.pdf など、適切な中国語のファイル名を使用してください)

素材

  • assets/notes-template.tex:コピーして内容を記入する LaTeX のデフォルトテンプレート

コメント