Marp+github.dev+GitHub ActionsでLT会用スライドPDFをブラウザ上で気軽に作成

## 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. テンプレートリポジトリのリンク

https://github.com/steelpipe75/marp-lt-slides-template

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

```text
├── .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` でリポジトリを作成

![chrome-capture-2025-2-15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33160/7e67b481-3370-4fc9-93b2-8cdb85fb418e.gif)

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

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

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

![chrome-capture-2025-2-15_github_dev.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33160/8f307742-df89-4e21-8b63-aa5ad8e4df4a.gif)

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

`<> Code` → `Create codespace on main`

![chrome-capture-2025-2-15_Codespaces.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33160/107dece7-ff5e-4fda-b761-2983c69523f2.gif)

#### 4.3.3 GitHub ActionsでPDF変換

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

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

![chrome-capture-2025-2-15_taget_txt_compress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33160/9e5029d9-b814-4ff2-8e0e-b29587bb4ace.gif)

#### 4.3.3.2 GitHub Actionsを実行

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

![chrome-capture-2025-2-15_github_actions_compress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33160/d911159e-8b16-40bb-b146-3a7fc751e284.gif)

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

![chrome-capture-2025-2-15_finished.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33160/99affdcf-66e7-4dff-87a3-30077c79956f.png)

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

![chrome-capture-2025-2-15_pdf_dl_compress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33160/e07a152f-d4c2-4107-83be-2ad08c812e48.gif)

## 5. まとめ

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

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

### 6. 参考リンク

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

https://speakerdeck.com/sunsuke/marpdezi-liao-wozuo-tutelthenocan-jia-hadoruwoxia-geru

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

https://qiita.com/tomo_makes/items/aafae4021986553ae1d8

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

https://qiita.com/ku_suke/items/07deb49dba04bdc36216

GitHubActionsでPDF化 参考にした記事

https://zenn.dev/gakin/articles/set_up_marp_on_github_actions

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

https://marpwebeditor.app/