💤

サッと Markdown でスライドを書いて GitHub で自動的に HTML と PDF を公開する方法

2021/01/22に公開

Marp というツールで Markdown から手軽にスライドを作る方法と、そのスライドを GitHub Pages で自動的に公開するためのツール Marp CLI Action というものを作ったので紹介します。

先に結論だけ述べますと、Marp のエコシステムを使ってスライドを書き、GitHub にプッシュすれば Marp CLI Action を含んだ GitHub Actions で GitHub Pages に自動でスライドを公開できます。

前置き

会社や勉強会でプレゼンをするとき、どのようにスライドを作成しているでしょうか？
PowerPoint、Keynote、Google スライドなど、さまざまなやり方があると思います。
私はとにかく楽に作りたいので Marp というツールを使っています。

Marp は Markdown 記法でプレゼンスライドを書けるツールです。およびそのエコシステムのことです。

Markdown 記法からスライドを生成する、というのが中心にあり、そのための Markdown の拡張記法やさまざまなテーマ、CLI や VS Code 拡張などがあります。

雰囲気を掴むために公式サイトの example のソースコードを Marp Web に貼り付けてみるとわかりやすいと思います。

私は勉強会で発表する時などは、よく以下の手順でスライドを作成していました。

この手順で公開したスライドの例が以下です。

上記の手順は楽で十分機能していたのですが、スライドを 見る側としては Speaker Deck に少し不満がありました。

そのような観点から、スライドはなるべく HTML ベースのもので読み込みが軽いものを公開してほしいな、と思いがありました。

また、いつも定型の作業なため可能な限り自動化したいという思いもありました。

ソースコードを書くことだけすれば後は公開までを自動化したかったので GitHub Actions を活用することにしました。
また、公開するサイトを GitHub Pages にすることで自分でデプロイ先を用意する必要もなくなります。

Marp の記法で書かれた Markdown から HTML スライドを出力するには、Marp CLI を使えば可能です。
これを GitHub Actions に組み込む必要がありました。

検索すると、ほぼ同じアプローチを用いている人の記事を見つけることができました。
Markdown でプレゼンを作って GitHub で自動公開するフローを整えた | Cosnomi Blog

こちらを参考に、新しく GitHub Action を作成することにしました。上記のものをそのまま使用しなかったのは、私以外の人にも使ってもらいやすくするため、GitHub Action のインターフェースを少し変更したかったためです。

作成した GitHub Action が Marp CLI Action となります。

Marp CLI Action の使い方は README やサンプルスライドを参照してください。
こちらのサンプルスライドも Marp CLI Action で生成しています。

テンプレートリポジトリも用意したので、使用することですぐに使い始めることができます。

Marp と Marp CLI Action を使って、GitHub で手軽にスライドを公開する方法を説明しました。

スライド作りをとにかく楽にしたい、という方にはおすすめの方法です。ぜひやってみてください。