背景

TwitterのTLで少し話題になっているのを見かけたので、Marpに入門してみました。
特に新バージョンリリースされたとかではないですが、便利さゆえか定期的に話題に上がる様子。
VScodeのプラグインもあり、私もなんちゃってエンジニアとしてVScodeを使っているので触ってみました。
Marpはおろかマークダウンも使い慣れていない人なので生暖かい目でご覧ください。

About Marp

マークダウンの文書をいい感じにスライド形式に落としこんでくれるツール
オープンソース
作成したスライドはHTML, PDF, ppt形式で出力可能
クロスプラットフォーム対応(Linux, Windows, Mac)

VScodeのプラグインとCLIの2種類あり
今回はVScode版を触りました~~(CLIもあるので宗教上の理由でVScode触れない人も安心)~~。

How to Install

インストールはVScodeのエクステンションなのでボタン一発

How to Use

マークダウン形式なのでマークダウンファイル(.md)を作成
ファイルの冒頭でFront Matter(水平線3つ)で区切られたセクションにYAML記法でMarpの設定を記載、今回は以下の設定で記載しました。

---
marp: true 　　　　            　　　　　　　　　　--> Marpを利用することを明記
theme: gaia                   --> スライドテーマ
paginate: true                --> 通し番号
headingDivider: 1             --> スライドの区切り指定(1なら#、2ならば##、3ならば###で区切られる)
class: lead                   --> 中央揃え
header: Marpで目指す脱パワポ職人 　　--> ヘッダー指定(フッターも同様に指定可能)
---

スライドテーマはデフォルトで3種類あり、テーマはCSSで記述されているので自作や公開されているものをインポートも可能です。今回はチュートリアルなのでデフォルトのgaiaを利用しました。

表紙などページごとの設定を入れたい場合は、HTMLのコメント文である「」を用いることで、スライド毎にMarpの設定が可能です。以下は表紙のみページの通し番号とヘッダーを消したものになります。

<!--
_class: lead
_paginate: false
_header: ""
-->
# Marpで目指す脱パワポ職人

あとはMarkdown形式で記載することでスライドが作成されます。以下のように文字装飾や図/表もMarkdown形式で挿入可能です。

メリット

書くのが楽

文字の配置や整形を勝手にやってくれるのでパワポで作成するよりも文書を書くのが楽でした。
変にこだわらなくなる

上記の通りで自動整形してくれるのですが、逆に細かい調整はし辛いのでスライドの無駄な拘りが減って作成時間が短くなりました。
Git連携ができる

今回は使ってないですがGit管理してチームで資料作成も可能です。マークダウンファイルなのでgit diffで差分も取れたりするのが便利そうですね。
既存ドキュメントを再利用できる

今回は使って(ry

マークダウン形式で書かれた文章であれば冒頭の設定追記するだけでスライド化できるので、それこそQiitaの記事をLTにしたいときなどにも使えると思います。
コーディングチックでパワポ職人よりは楽しい

普段コーディングあまりしない故の憧れ・・・

デメリット

画像系の扱いが難しい

画像の埋め込みが難しかったです。イメージどおりにできず、寄せるだけで四苦八苦しました。やはり画像はGUI操作できる方が楽ですね。
細かい調整が難しい

たぶん慣れていないだけでできないことはないと思いますが、細かい文書や配置の整形は難しい気がしました。
~~たまにプレビューの反映がされない~~

~~画像を差し替えた際などにプレビューに反映されないことがありました。~~その後右上の三点リーダーを押すと"Refresh Preview"ボタンがありました。。。

まとめ

なかなか個人的には使いがってのいいツールでした。ただ細かい調整が難しいので体裁を気にするようなものには向かないかもしれません。一時的にアイデアを共有したい場合やLT等のスライド作成には向いていると思います。
また普段からVScode使っている人であればVScodeにさらに機能集約ができるので使ってみて損はないかと。
あとQiita→LTやLT→Qiitaで変換しやすいのは良いですね。

参考資料

"Marp(公式サイト), https://marp.app/
"Markdownでスライドを作る、Marpのすゝめ",
https://eng-blog.iij.ad.jp/archives/11432
"Markdownから簡単にスライドを作成する「Marp(Marpit)」", https://tracpath.com/works/development/marp/