Markdown で登壇資料を作りたい Marp, Wunderpresentation, (reveal) 2022/02/05 horitks Gunma.web #44 テーマフリー by @t_pori418 1

自己紹介 Name: Hori Takashi Twitter: @t_pori418 Work: 都内のWeb システムベンチャー企業でPM/EM → 三月からWeb サービス系の企業でエンジニア 複業で新規SaaS プロダクトの立ち上げ開発メンバー 今日は知ってる人は知ってるって感じの軽めのネタです by @t_pori418 2

スライドを Markdown で書きたい！ できればWeb サービスないかな... ドキュメントとしても残せるようなやつ... by @t_pori418 3

swipe 知らなかったんですが、 サービス終了してました by @t_pori418 4

Notion から生成できたら便利では？ → サービスあった ※notion の説明は割愛します。Web ドキュメントツールです。 by @t_pori418 5

wunderpresentation https://wunderpresentation.com by @t_pori418 6

Notion 書いたのはこんな感じ→ 公開設定にして・・・ by @t_pori418 7

wunderpresentation のサイトでconvert する by @t_pori418 8

デモ Notion https://scalloped-fortnight-3c7.notion.site/Gunmaweb44-demo- 7717ac49a6e84ae7802cbefb8b7244eb Wunderpresentation https://run.wunderpresentation.com/61f5724bdb8fe26d3ddea5 87 by @t_pori418 9

めっちゃ楽 ! けど notion を公開する必要がある スライドがPDF でDL できない 動画は表示されないっぽい by @t_pori418 10

Web サービスじゃなくても、 普段使っているエディタで楽に作れて git 管理できると良い、と考えてみる by @t_pori418 11

Marp / VSCode に落ち着く Marp Markdown でスライドを作れるOSS VS Code のプラグインがある VSCode Visual Studio Code MS のエディタ 選定理由: VSCode のプラグインがあって手軽そうだったから by @t_pori418 12

開始手順 1. VSCode インストール 2. 拡張のmarp をインストール これで markdown 書くだけ by @t_pori418 13

プレビューしながらマークダウンを書いていけます。 by @t_pori418 14

PDF 出力して完成! by @t_pori418 15

Git 管理できるしドキュメントに集中できて最高！ 弱点は ... 細かいレイアウトを気にし始めるとCSS とかを書く必要がある ( そっちのが好きな人には利点とも言える) パワポみたいに動画を埋め込むことはできない 画像の配置難しい by @t_pori418 16

所感 その場限りでPDF の配布ないLT とかなら Notion+Wunderpresentation でサクッと作っちゃうのもアリかも 普段VSCode 使ってるのでMarp はプラグイン利用できたので良い体 験だった。プレビューしながら書けるのがでかい 今回はMarp+VSCode で資料作成した。 関係ないけどPullRequest ベースの発表とか自分もやってみたい 他に何か良いツールあるよって方いたら是非教えてください by @t_pori418 17

Appendix Wunderpresentation はChrome 拡張もあります。 by @t_pori418 18

Appendix プレビューだけならvscode-reveal とかも良さげです。 PDF はあんまりいい感じに出力できなかったです。 デモ (marp 用で書いたmarkdown をtheme だけ変えて出力してみました) https://horitks.github.io/gunmaweb44/ by @t_pori418 19