VRChat 内で LT をするときのスライド動画生成を自動化する

VRChat 内で LT をする場合，スライドを書き出した PDF 内のページを2秒ずつ送る動画形式にする必要がある．

これは VRChat 内のスライドシステムとして実装されているアセットのほとんどが動画プレイヤーの仕組みを用いており，スライド送りの機能は，オフセットを2秒ずつ動かすという方法で実装されているためである．

PDF を突っ込めばスライドシステムで読み込める形式の動画を生成し，リンクを発行してくれる Web サービスもあるにはあるが，以下の理由から後述の ffmpegを用いた方法でスライド動画を生成した．

画質の劣化が激しい
生成される URL が長い
たまに生成が失敗するなど，動作が安定していない
- 開発者のことは知ってはいるが，ファイルを入れるのはどことなく不安

手順1. PDF ファイルを用意する#

まずはスライドの内容を書き出した PDF ファイルを用意する．

私は Marp を使っているため，Marp を用いて PDF を生成した．

手順2. PDF ファイルを動画に変換する#

スライドの PDF ファイル名が slide.pdfであるとして，以下のコマンドを実行する．

コマンドの内容を少し解説すると，pdftoppmは PDF ファイルのページの1枚1枚を PNG ファイルとして書き出すコマンド．解像度はスライドシステム内で綺麗に表示するために 4K で書き出している．

ffmpegはその生成された PNG ファイルを1枚あたり2秒表示する動画に変換している．

1
pdftoppm -png -scale-to-x 3840 -scale-to-y 2160 slide.pdf slide
2
ffmpeg -framerate 1/2 -i slide-%02d.png -s 3840x2160 -r 60 -c:v libx264 -pix_fmt yuv420p -profile:v baseline slide.mp4

手順3. オブジェクトストレージに突っ込む#

あとはこれで生成された動画ファイルをオブジェクトストレージに格納し，URL を得る．

今回の用途では Cloudflare R2 が 10GB 分のストレージを持っているため，これを利用することにした．

自分でファイル名を決めるので，衝突の心配がない．また，R2 に独自ドメインを当てることで，スライドを表示するための URL はとても短くなる．

手順4. ここまでの手順を GitHub Actions で自動化する#

あとはここまでの手順を GitHub Actions にやらせることで， Markdown を main に push するだけでスライドデータが用意できるようになる．

この仕組み自体は GitHub Actions と Cloudflare R2 を用いた簡易的なものであるため，使ってみたい場合はご自身のアカウントで同じような環境を構築し，ワークフローを書くことで実現できる．

以下，Claude に以上の要件を伝えた上で書いてもらったワークフローを貼っておく．

*.mdに変更があった場合と，手動で実行できるようになっている．

*.mdの方は差分更新で，手動で実行した場合は全てのスライドをコンパイルするので，枚数が増えてくると ffmpegの実行にそこそこ時間がかかりそうな雰囲気がある．

Secrets は適宜自分の S3 互換ストレージのものに置き換えるなどしてほしい．

1
name: Build and Deploy Slides
2

3
on:
4
  push:
5
    branches: [main]
6
    paths:
7
      - "**/*.md"
8
  workflow_dispatch:
9

10
jobs:
11
  build:
12
    runs-on: ubuntu-latest
13
    steps:
14
      - uses: actions/checkout@v4
15
        with:
16
          fetch-depth: 2
17

18
      - name: Determine target directories
19
        id: targets
20
        run: |
21
          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
22
            dirs=$(ls -d */index.md 2>/dev/null | xargs -I{} dirname {})
23
          else
24
            # HEAD コミットで変更された .md ファイルの親ディレクトリだけ対象
25
            dirs=$(git diff-tree --no-commit-id --name-only -r HEAD -- '*.md' \
26
              | xargs -I{} dirname {} | sort -u \
27
              | while read -r dir; do [ -f "$dir/index.md" ] && echo "$dir"; done)
28
          fi
29

30
          if [ -z "$dirs" ]; then
31
            echo "No slide directories to build."
32
            echo "skip=true" >> "$GITHUB_OUTPUT"
33
          else
34
            echo "skip=false" >> "$GITHUB_OUTPUT"
35
          fi
36

37
          {
38
            echo "dirs<<EOF"
39
            echo "$dirs"
40
            echo "EOF"
41
          } >> "$GITHUB_OUTPUT"
42

43
      - uses: actions/setup-node@v4
44
        if: steps.targets.outputs.skip == 'false'
45
        with:
46
          node-version: "22"
47

48
      - name: Install dependencies
49
        if: steps.targets.outputs.skip == 'false'
50
        run: |
51
          sudo apt-get update
52
          sudo apt-get install -y poppler-utils ffmpeg
53
          npm install -g @marp-team/marp-cli
54

55
      - name: Build and convert slides
56
        if: steps.targets.outputs.skip == 'false'
57
        run: |
58
          while IFS= read -r dir; do
59
            [ -z "$dir" ] && continue
60
            project=$(basename "$dir")
61
            echo "::group::Building $project"
62

63
            # Marp to PDF
64
            marp --theme-set .styles/index.css --allow-local-files --pdf "$dir/index.md" -o "$dir/${project}.pdf" --verbose
65

66
            # PDF to PNG (3840x2160)
67
            pushd "$dir"
68
            pdftoppm -png -scale-to-x 3840 -scale-to-y 2160 "${project}.pdf" slide
69

70
            # Rename to ensure 2-digit zero-padded numbering for ffmpeg
71
            for f in slide-*.png; do
72
              num=$(echo "$f" | sed 's/slide-0*\([0-9]*\)\.png/\1/')
73
              dest=$(printf 'slide-%02d.png' "$num")
74
              [ "$f" != "$dest" ] && mv "$f" "$dest"
75
            done
76

77
            # PNG to MP4
78
            ffmpeg -framerate 1/2 -i slide-%02d.png -s 3840x2160 -r 60 -c:v libx264 -pix_fmt yuv420p -profile:v baseline "${project}.mp4"
79

80
            rm -f slide-*.png
81
            popd
82

83
            echo "::endgroup::"
84
          done <<< "${{ steps.targets.outputs.dirs }}"
85

86
      - name: Upload to Cloudflare R2
87
        if: steps.targets.outputs.skip == 'false'
88
        env:
89
          AWS_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
90
          AWS_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
91
          R2_ENDPOINT: https://${{ secrets.R2_ACCOUNT_ID }}.r2.cloudflarestorage.com
92
          R2_BUCKET: ${{ secrets.R2_BUCKET_NAME }}
93
        run: |
94
          while IFS= read -r dir; do
95
            [ -z "$dir" ] && continue
96
            project=$(basename "$dir")
97
            aws s3 cp "$dir/${project}.pdf" "s3://${R2_BUCKET}/slides/${project}.pdf" --endpoint-url "$R2_ENDPOINT"
98
            aws s3 cp "$dir/${project}.mp4" "s3://${R2_BUCKET}/slides/${project}.mp4" --endpoint-url "$R2_ENDPOINT"
99
          done <<< "${{ steps.targets.outputs.dirs }}"

見た目の違いに関して#

実際どれぐらい見た目が違うのか実際に検証した．ちなみに私は画像処理系に関しては門外漢なので，主観ベースでしかお話できないことを予め断っておく．

左は Web Screen を用いて PDF を動画に変換したもの，右は今回の手法で動画に変換したもの．

今回の手法で出力した場合のほうが，全体的に文字のぼやけがなく，クリアに表示されていることがわかる．

謝辞#

えーさんから手順2で示した動画化コマンドとアイデアを頂きました．ありがとうございました．