KoedoLUG 2023/11 Marpではじめるスライド作成

Marpではじめるスライド作成 Taro Matsuzawa (@smellman) KoedoLUG 2023/11 KoedoLUG 2023/11 1

• https://twitter.com/smellman

自己紹介 Georepublic Japan GIS Engineer Sub-President, Japan UNIX Society Director, OSGeo.JP Director, OpenStreetMap Foundation Japan Lead of United Nation OpenGIS/7 core Breakcore cluster KoedoLUG 2023/11 2

元ネタ KoedoLUG 2023/11 3

やりたいこと Markdownでスライドを作りたい PPTXに書き出しをしたい Github Actionでgh-pagesに書き出ししたい KoedoLUG 2023/11 4

Marpでスライドを作る Markdownでスライドを簡単に作成できる PPTXに書き出しできる Github Actionでgh-pagesに書き出しできる KoedoLUG 2023/11 5

footerなどの調整 --marp: true theme: default footer: 'KoedoLUG 2023/11' paginate: true --- ではじめるスライド作成 # Marp --- で囲んでYAML形式で指定する KoedoLUG 2023/11 6

Pageの切り替え # Page 1 --# Page 2 --- がページ区切りになる。 --- の前後に空行が必要 KoedoLUG 2023/11 7

変換コマンドの基本的な使い方 $ npx -y @marp-team/marp-cli@latest koedolug_202311.md -o koedolug_202311.pptx npm installとか不要 拡張子は自動判別される 他にもHTMLとPDFに対応 KoedoLUG 2023/11 8

画像の埋め込みの注意点 画像はlocalのものを使う時は変換時に --allow-local-files をつける このスライドでは面倒なのでimgurを使っている 画像のサイズは自動で調整される(調整しない方法もある) ちょっと癖が強いかも 詳細はImage syntaxを参考 KoedoLUG 2023/11 9

• https://imgur.com/
• https://marpit.marp.app/image-syntax

Github Actionsでの自動化 name: GitHub Pages on: [workflow_dispatch] jobs: deploy: runs-on: ubuntu-22.04 permissions: contents: write concurrency: group: ${{ github.workflow }}-${{ github.ref }} steps: - uses: actions/checkout@v3 - name: Setup Node uses: actions/setup-node@v3 with: node-version: '20' - name: Cache dependencies uses: actions/cache@v3 with: path: ~/.npm key: ${{ runner.os }}-noderestore-keys: | ${{ runner.os }}-node- run: run: run: run: run: run: mkdir -p public touch public/.nojekyll cp -fr images public/images npx -y @marp-team/marp-cli@latest jica-seminar-2023.md -o public/index.html npx -y @marp-team/marp-cli@latest jica-seminar-2023.md -o public/jica-seminar-2023.pptx --allow-local-files npx -y @marp-team/marp-cli@latest jica-seminar-2023.md -o public/jica-seminar-2023.pdf --allow-local-files - name: Deploy uses: peaceiris/actions-gh-pages@v3 if: github.ref == 'refs/heads/main' with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./public KoedoLUG 2023/11 10

ポイント 毎回ビルドするとgitが肥大化するので、必要なときだけマニュアルでビルドさせる ビルドしたものをgh-pagesにpushする 画像はgh-pagesにcopyしてpushする(HTMLのリンクのため) KoedoLUG 2023/11 11

で、何を作ってるの？ JICAの講義資料を作成している こっちにはGithub Actionsを仕込んでいる MapLibre Meetup Japan #01の資料 FOSS4G Asia 2023の資料 これらはlocalで出力 KoedoLUG 2023/11 12

• https://github.com/smellman/jica_2023
• https://github.com/smellman/presentation/blob/master/mugjp-20231109-maplibre-aws-terrain.md
• https://foss4g.asia/2023/

まとめ Marpで資料作りは便利 Github Actionsで自動化すると便利 画像の埋め込みはちょっと癖がある 画像はimgurを使うと便利 この資料は10分程度で作りました KoedoLUG 2023/11 13