【GithubActions + Marp】markdown記法でプレゼン資料を好きな形式で作成&公開できるようにする

はじめに

みなさんは、Marpをしっていますか？
Marpはmarkdown記法でプレゼン資料を簡単に作成できるツールになります。
今回はMarpとGithubActionsを利用して、サクッとmarkdownを書いてGitHubでスライドを公開する方法を紹介します。

Marpの詳しい使い方はこちらを参照ください。https://marp.app/

作成した経緯

エンジニアだと、プレゼンやLT会などでスライド資料を作って発表する機会が多いと思います。
自分自身も発表する機会が増えてきました。
普段、スライド資料を作成するときはPowerPointを使ってたんですが、
LT発表などサクッとスライドを作りたいときは

• 「もっと楽に(よく書いているmarkdown記法で)スライドを作りたい。」
• 「書いたスライドをGitHubで公開、管理したい。」

と思い、今回の環境をつくりました！

何ができるようになるの？

「この環境を作って何ができるの??」　と思われるかと思います。
この環境を作ると以下のことができるようになります。

1. markdownでスライドがつくれる！
2. githubでスライド(markdown)を管理できる！
3. 好きな出力形式(pdf,html,pptx)でスライドを公開できるようになる。
4. (スライドで発表するさいに参加者が)簡単にダウンロードできる

概要

作った環境は以下のとおりです。

普通にローカル上でmarkdownを編集(スライドを作成)します。
markdownを編集し終わったら、作成したmarkdownファイルをGitHubにpushします。
GitHubActionsはそれを検知してartfactsに対してスライドのpdf,html
などが作成されます。

環境を作ってみる

上記の環境を実際に作ってみましょう。
手順は以下の通りです。

1. ファイルを用意
2. ファイルの中身を記述

では見ていきましょう。

1.必要ファイルを用意

以下のファイルを用意しましょう。

(好きなディレクトリ)/
　├ .github/workflows/
            ├ slide.yml 
　├ config.json

以下のコマンドでファイルを作成できます。

$ mkdir -p .github/workflows/
$ touch .github/workflows/slide.yml config.json 

2.ファイルの中身を記述する

作ったファイルは以下のように記述してください。

Github Actionsのslide.ymlの中身はこちらをクリック

slide.yml

name: marp-GitHub-actions
on: [push]
jobs:
  marp-to-pdf:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: sudo apt-get update & sudo apt-get install jq
      - run: |
          directory=$(cat config.json | jq -r .directory)
          output_format=$(cat config.json | jq -r .output_format)
          echo "::set-output name=DIR::${directory}"
          echo "::set-output name=FORMAT::${output_format}"
        id: config
      - run: docker run --rm -u root --init -v "$(pwd):/home/marp/app/" 
              -e LANG=$LANG marpteam/marp-cli ${{steps.config.outputs.DIR}}/slide.md 
              --${{steps.config.outputs.FORMAT}} 
              -o ${{steps.config.outputs.DIR}}.${{steps.config.outputs.FORMAT}}
      - uses: actions/upload-artifact@v2
        with:
          name: output_slide
          path: ${{steps.config.outputs.DIR}}.${{steps.config.outputs.FORMAT}}

config.json(設定ファイル)の中身はこちらをクリック

{
    "directory": "__ディレクトリ名__",
    "output_format": "__html,pdf,pptxを記述する__"
}

環境自体はこちらで完成になります。
では実際にこちらの環境を使ってデモを見ていきましょう。

Demo

:::messages:warning
testディレクトリにslide.mdファイルを作成すること前提で説明します。
:::
:::messages:warning
エディタとしてVscodeをインストールしておきましょう。
:::

事前準備

事前準備としてvscodeに以下の拡張機能をインストールしておきましょう。
こちらの拡張機能をインストールしておくことでMarpのプレビューを確認することができます。

Marp for VS Code - Visual Studio Marketplace

スライド作成~スライド公開

事前準備も終わったところで
早速、スライドを作ってみましょう。
公開までは以下の3ステップを踏むだけです。

1. markdown(スライド)を作成する
2. 設定ファイルを修正する
3. GithubにPushする

1.markdownファイルを作成する

まずはslide.mdの中身に以下の内容を記述しましょう。

slide.mdの中身はこちらをクリック

slide.md

---
marp: true
page_number: true
theme: gaia
paginate: true
class: lead
header: header
footer: footter
---
<!-- headingDivider: 1 -->

<!-- #　見出しの前にスライドページを自動的に分割 -->
# test1
- test
- test

# test2
- test
- test

以下のように表示されているかと思います。

2.設定ファイルを修正する

上記で作成したconfig.jsonファイルを以下のように修正します。
今回はスライドの出力形式をpdfとします。

config.jsonファイルの中身はこちらをクリック

今回はtestディレクトリにmarkdownファイルを作成しているので、以下のように記述します。

config.json

{
    "directory": "test",
    "output_format": "pdf"
}

3.作成したファイルたちをGitHubへpush

こちらのファイルをGitHubにpushします。

$ git add test/slide.md .GitHub/workflows/slide.yml config.json
$ git commit -m "必要なファイルを追加"
$ git push origin HEAD

4. あとはスライドが作られるのを待つだけ！！

GitHubにpushされるとGitHubactionが検知をして、処理が走ります。

処理が完了すると、artfactsにスライドができあがります。

output_fileをクリックしてみましょう。
zip形式でインストールできます。
展開するとtest.pdfが出来上がります。

これで、デモは終了です！

さいごに

今回はmarkdownでスライドを作成しgithubアクションで公開する方法を紹介しました。
わからないことなどありましたら、気軽にコメントお願いいたします。

補足

日本語のフォントが少しおかしく、画像が読み込まれない問題がありました。
下記のように修正していただけると、対応できるかとおもいます。

Github Actionsのslide.ymlの中身はこちらをクリック

--allow-local-files オプションを追記しています。

slide.yml

name: marp-github-actions
on: [push]
jobs:
  marp-to-pdf:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: sudo apt-get update & sudo apt-get install jq
      - run: |
          directory=$(cat config.json | jq -r .directory)
          output_format=$(cat config.json | jq -r .output_format)
          echo "::set-output name=DIR::${directory}"
          echo "::set-output name=FORMAT::${output_format}"
        id: config
      - run: docker run --rm -u root --init -v "$(pwd):/home/marp/app/" 
              -e LANG="ja_JP.UTF-8" marpteam/marp-cli ${{steps.config.outputs.DIR}}/slide.md 
              --${{steps.config.outputs.FORMAT}} 
              -o ${{steps.config.outputs.DIR}}.${{steps.config.outputs.FORMAT}}
              --allow-local-files
      - uses: actions/upload-artifact@v2
        with:
          name: output_slide
          path: ${{steps.config.outputs.DIR}}.${{steps.config.outputs.FORMAT}}

スライドのmarkdownファイルを以下のように修正します。

スライドのmarkdownファイルはこちらをクリック

slide.md

---
marp: true
page_number: true
theme: gaia
paginate: true
class: lead
header: header
footer: footter
---
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');

section {
    font-family: 'Noto Serif', serif;
}
</style>

<!-- headingDivider: 1 -->

<!-- #　見出しの前にスライドページを自動的に分割 -->

# test1
- test
- test

# test2
- test
- test