Marpのすゝめ ~Markdownスライド作成ツール~

数あるMarkdownでスライドを作成するツールの中で私が気に入っているMarpを紹介したいと思います。

私は毎週進捗報告用のスライドを作らなくてはならないのですが、メモのように手軽にかけて、githubのプライベートリポジトリで管理したい（当時複数のパソコンでデータを共有したかったため）という要望がありました。

そんなときに見つけたのがMarpでした。

Marpの利点

・Markdownでスライドが作れる
・HTMLの記述が柔軟に使える
・テーマを自分で作れる
・npxコマンドで動かすことができる!!!
・VSCodeの拡張機能がある

個人的に一番気に入っている点がnpxコマンドで動かせる点です。nodeが入っていれば動かせます。

似たようなツールにreveal.jsというものがあります。こちらのほうがアニメーションがきれいなのですが、reveal.jsを動かすためにはgithubのリポジトリを持ってこなくてはならず、ディレクトリがスライドとは関係ないファイルで溢れてしまいます。
また、スライドを作るごとにgithubリポジトリをクローンしてこなくてはなりません(そうしなくていい方法があるかもしれませんがわかりません)。

marpであればmarkdownファイル一つ用意するだけでよいのでディレクトリは非常にスッキリします。
大量のスライドを一つのディレクトリにまとめて保存したい人 (私みたいに毎週スライドを用意しているような人) にとってはファイルを管理しやすくなると思います。

Marpの使い方

1. markdownファイルを用意

以下のような形式で書けます。

---
title: Marp slide deck
description: description
theme: gaia
paginate: true
_paginate: false
header:
footer:
---

<!-- _class: lead -->
# Titile Page
### subtitle


---

# Slide 1

foo

---

# Slide 2

bar

詳細な使い方は割愛します。公式ページを参照してください。
ドキュメントとgithubが見やすいです。

2. npx でローカルサーバーを立ち上げる

npx @marp-team/marp-cli -w -s --html ./

各オプションは以下の通り。
・"-w": 変更を監視する。markdownを変更、保存すると自動的に再変換してくれる。
・"-s": サーバーを立ち上げる
・"--html": html表記を使用する

これだけで利用できます。

サーバーが立ち上がり、localhost:8080にアクセスすると、

このように、markdownファイル一覧が現れます。
ディレクトリの階層も辿っていけます。

スライドのファイルを選ぶと、

スライドを表示できます。全画面表示も可能です。

とてもかんたん！

私の使い方

- テンプレートファイルの作成
- オリジナルテーマを作成
- npx は少し遅いのでmarpをグローバルにインストール
など...

githubに個人的に使いやすいと思える設定をしているリポジトリを作成したのでぜひ使ってみてください。
slidesディレクトリ以下にmarkdownファイルを作成し、`make run-npx`で実行可能です。

今回は説明していないことも含まれているので、それらの説明はまたの機会に行いたいと思います。

今回のnoteではMarpのほんの一部しか伝えられなかったので、随時おすすめの使い方を紹介していきたいと思います。

読んでくださったみなさんも興味があればぜひ試してみてください。