GithubActions＋MarpでMarkdownからプレゼン資料を生成する（再現版）

はじめに

自分が運営に参加している勉強会（論文読み会）では、発表者の方に論文概要のプレゼン資料を作成してもらい、後日Markdownに転記したものをGitHubに登録してもらっています。先にMarkdownを書いてもらえばGithubActionsとMarpを利用してプレゼン資料の変換&公開を自動化できるかも、という話がでて、こちらの記事の方法を試してみました。ほぼこの通りの手順を再現できましたが、記事公開から少し時間が経っていて一部修正が必要でしたので、共有します。

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

やってみた結果

GitHubActionsに実行させるワークフローをYAMLファイルで定義しますが、その記法が変更になっていました。そのため、参照記事に記載されていたプレゼン資料生成のワークフローを一部修正する必要がありました。

プレゼン資料の作成手順と実行環境

プレゼン資料のもとになる文書をMarkdownで作成します。これはローカルで適当なエディタを利用して編集作業を行います。編集後、markdownファイルをGitHubにpushします。GitHubActionsはそれを検知してワークフローを起動し、Marpを利用してMarkdownを変換して結果ファイルをArtifactsに出力します。本稿のワークフローではPDFを出力します。詳細は参照した記事をご覧ください。

なお、適当なエディタでと書きましたが、VSCodeとプレビュープラグインMarp VS Codeの利用がオススメです。

Marp、Marp VS Codeについては、こちらを参照ください。

https://marp.app/

https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

ワークフローの定義

GitHubActionsに実行させるワークフローをYAMLファイルで定義します。参照した記事のYAMLファイルがこちらです。このままだとGithubActionsがエラーを吐いて、Markdownが変換されませんでした。

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}}

ワークフローの変更点

まず、アクションのバージョン@v2がdeprecatedとなっています。現在は@v4の利用が推奨されています。詳細はこちら。

slide.yml

@@ -7 +7 @@
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
@@ -20 +20 @@
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4

次に、set-outputコマンドがdeprecatedとなっています。これは環境変数を介してコマンド間で情報を共有するものですが、現在は一時ファイルを利用して書込・参照する記法に変更されています。詳細はこちら。

slide.yml

@@ -12,2 +12,2 @@
-          echo "::set-output name=DIR::${directory}"
-          echo "::set-output name=FORMAT::${output_format}"
+          echo "DIR=${directory}" >> $GITHUB_OUTPUT
+          echo "FORMAT=${output_format}" >> $GITHUB_OUTPUT
@@ -16 +16 @@
-              -e LANG="ja_JP.UTF-8" marpteam/marp-cli ${{steps.config.outputs.DIR}}/slide.md 
+              -e LANG="ja_JP.UTF-8" -e MARP_USER="$(id -u):$(id -g)" marpteam/marp-cli ${{steps.config.outputs.DIR}}/slide.md 

まとめると、修正後のワークフローは次のようになります。余談ですが、このワークフローではDockerを利用してMarpを実行していて、もしローカル等の環境にDockerがあれば、GitHubを利用せずにMarpを試すこともできます。

slide.yml

name: marp-github-actions
on: [push]
jobs:
  marp-to-pdf:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - 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 "DIR=${directory}" >> $GITHUB_OUTPUT
          echo "FORMAT=${output_format}" >> $GITHUB_OUTPUT
        id: config
      - run: docker run --rm -u root --init -v "$(pwd):/home/marp/app/" 
              -e LANG="ja_JP.UTF-8" -e MARP_USER="$(id -u):$(id -g)" 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@v4
        with:
          name: output_slide
          path: ${{steps.config.outputs.DIR}}.${{steps.config.outputs.FORMAT}}

おわりに

GithubActionsとMarpを利用してMarkdownからプレゼン資料を生成する方法を再現してみました。サクッとMarkdownを書いてプレゼン資料を簡単に生成、公開できるので、職場の簡単な報告やLT発表などに役立ちそうです。LaTeXやPandocの好きな自分としては、コンテンツ（内容）とデザイン（見た目）を分離してコンテンツ編集に専念できるのはありがたいです。

MarpではデザインをCSSで定義します。ググるとCSSのテンプレートやサンプルが多数見つかりました。図の配置を変えたり、段組みなどもできるようです。こちらは別の機会に試してみたいと思います。