1. はじめに

皆さん、LT会(Lightning Talk会)に参加してますか？
LT会で話したいことがあったのに、スライド作るの面倒で参加しなかったことはありませんか？
本記事で紹介する Marp, github.dev, GitHub Actions を活用した効率的なスライド作成方法で、気軽にLT会の準備をしませんか

2. LT会でのスライド作成の課題

2.1. 時間的制約

LT会まで時間が限られているため、スライド作成にかけられる時間が短い
短時間で内容をまとめ、分かりやすくスライドに落とし込む必要がある

2.2. ソフトウェア・環境

スライド作成ソフトの操作に不慣れな場合、作成に時間がかかる
共同作業の場合、ファイル共有やバージョン管理が煩雑になる

2.3. デザイン・レイアウト

短時間で聴衆の興味を引くスライドを作成する必要がある
デザインの知識やセンスが求められる

3. Marp, github.dev, GitHub Actions を使うことのメリット

3.1. Marp

Markdown 形式でのスライド作成: Marp は Markdown 形式でスライドを作成できるため、テキストエディタで手軽にスライドを作成できます
シンプルな操作性: Markdown 形式での記述に慣れていれば、直感的にスライドを作成できます
豊富なテーマ: 多様なテーマが用意されており、デザイン性の高いスライドを簡単に作成できます
ソースの挿入が楽: スライドにシンタックスハイライト付きソースコードを挿入するのが楽

3.2. github.dev

ブラウザ上で開発可能: github.dev はブラウザ上で VS Code を利用できるため、場所を選ばずにスライド作成・編集作業を行えます
GitHub との連携: GitHub リポジトリと連携できるため、スライドのバージョン管理や共同作業が容易になります

3.3. GitHub Actions

スライド作成の自動化: GitHub Actions を利用することで、スライドの PDF 変換を自動化できる
PDF 変換に必要なソフトウェアのインストールをしなくても、ブラウザからの指示で変換できる

3.4 組み合わせによる効果

これらのツールを組み合わせることで、スライド作成から PDF 生成、そして共有までの一連の作業を効率的に行えます。

場所を選ばないスライド作成: github.dev,GitHub Actions により、どこでもブラウザさえあればスライド作成が可能になります
共同作業の円滑化: GitHub を利用したバージョン管理や共同編集により、複数人でのスライド作成がスムーズに進みます

これらのメリットを最大限に活かすことで、LT 会に向けたスライド作成をより効率的に、そして質の高いものにすることができます。

4. テンプレートリポジトリの紹介&使い方説明

私が作成した Marp スライド作成テンプレートリポジトリを紹介し、その使い方を説明します。

4.1. テンプレートリポジトリのリンク

4.2. テンプレートリポジトリの内容

├── .devcontainer
│   └── devcontainer.json # GitHub Codespaces設定ファイル
├── .github
│   └── workflows
│       └── marp.yml # GitHub Actions設定ファイル
├── .vscode
│   └── settings.json # VSCode設定ファイル
├── LICENSE
├── README.md
├── pdf # GitHub Actionsで変換したPDFファイルの出力先
│   └── .gitkeep
├── target.txt # GitHub Actionsで処理するMarpファイルのパスを指定するためのファイル 
├── サンプルスライド
│   ├── sample.md # サンプルスライドのMarpファイル
│   └── サンプルイラスト.png # サンプルスライドで使うイラスト
└── ロゴ画像 # サンプルスライドで使うロゴ画像 
    ├── サンプルロゴ.png
    ├── サンプルロゴ_small.png
    └── サンプルロゴ_タイトルスライド用.png

4.3. テンプレートの使い方

4.3.1 テンプレートを元にリポジトリを作成

Use this template → Create new repository でリポジトリを作成

4.3.2 Marpフォーマットの.mdファイルを編集してコミット

4.3.2.1 （パターンA）github.devを利用

作成したリポジトリのページを開いた状態で . キー

4.3.2.2 （パターンB）GitHub Codespacesを利用

<> Code → Create codespace on main

4.3.3 GitHub ActionsでPDF変換

4.3.3.1 target.txtにMarpフォーマットの.mdファイルの相対パスを記載

target.txt の内容を変換したい .md ファイルの相対パスに書き換えてコミット

4.3.3.2 GitHub Actionsを実行

リポジトリのトップページ → Actions → Convert Marp Markdown to PDF → Run workflow → Run workflow

実行した GitHub Actions ワークフローが終了するまで待つ

GitHub Actions ワークフローによってコミットされたPDFをダウンロード

5. まとめ

この記事とテンプレートリポジトリが皆さんのLT会用スライド作成に役立てば幸いです。
今回は記載しませんでしたが、Marpによるスライド作成は、LLMとの相性も良いです。LLMと組み合わせることで更にスライドの作成が楽になります。

紹介したツールのもっと良い使い方や、もっと良い組合せのツールがあれば教えてください。
また、テンプレートリポジトリに改善すべきところがあればpull requestやissueをお願いします。

6. 参考リンク

感銘を受けた、本記事書こうと思う切っ掛けになったスライド

Marpに関するQiita記事でとても良いと思ったもの

github.devを知る切っ掛けになった記事

GitHubActionsでPDF化参考にした記事

ちょっとMarpを試してみるのなら MarpWebEditorがおすすめ