スライド作成の環境をMarpにしてみた

フリーランスになってもこちらを利用していたのですが、Windows環境に切り替えたので使えなくなってしまいました。一度はGoogle Slidesで作ったのですが（第39回Es勉強会スライド）、既存の資産を流用したくなりどうしたものかと悩んでい(ツイートし)たら。

Macの頃はDecksetってアプリでMarkdownで書いてたんだけど、Winに移動したのでこのタイミングでGoogle Slidesにでもしようかなと考えてるところ。Markdownでスライド作るのほかになんかあるか探すほうがいいかなぁ？
— Jun Ohtani (@johtani) March 18, 2021

僕はこれ使ってますhttps://t.co/sFaAmKZY6V
— miyake | ZEN (@kazuyukimiyake) March 18, 2021

ということで、利用してみようかなとなりました。

Marpとは？

Markdownでプレゼンテーションのスライドを作ることができるOSS?になります。

Marp公式サイト

といっても、これ自体を使わなくても、VS Code上でプレビューしたりHTML形式で動作するスライドを吐き出すことが可能です。なので、VS Code用のプラグインを利用しています。

サンプル

この間利用したスライドはこんな感じのMarkdownになってます。 ---でページを区切りつつ、記述していく形です。

---
marp: true
theme: poster

---

<!-- _class: big-center -->
# 本当にその検索は<br/>自分が想像している検索に<br/>なってますか？

<br/>
<br/>

> 2021/03
> Jun Ohtani / @johtani

---
![bg right:40% 40%](johtani_face.jpg)
# 自己紹介



- フリーランスエンジニア 
- 検索技術勉強会主催者
- Apache Solr入門(第2版まで)や
データ分析基盤構築入門の著者の一人

---

プレビューで見るとこんな感じです。

プラグイン

Marp for VS Code

プラグインをインストールするのも簡単ですよね。マーケットプレイスからインストールすれば完了です。

機能については上記のページにあるように、プレビューとスライドの出力です。プレビューでは、Markdownのプレビューみたいな形で、スライドが表示できます。

先日この機能を利用して作成して、HTMLで出力して利用しました。 PDFとかPPTX出も出せるようなので、今後試してみようかなと。

Decksetのスライドとの違い

ページの区切りなども同じだったので、大筋ではそれほど違いはありませんでした。ただ、画像周りとスタイルの設定は細かく修正をしました。

変更した点としては、以下のようなものがあります。

ヘッダ部分の変更
- 上のサンプルにありますが、marp: trueを含む部分がMarp独自の記述です。
ページごとのちょっとした変更
- ページごとにスタイルの変更ができるみたいで（Decksetではできなかったはず？）、タイトルページのスタイルを変えてあります。
画像の指定
- 画像の読み込み自体は違いはないのですが、画像の配置についての指定方法は
カスタムテーマ用CSSの作成
- デフォルトではなく、Decksetで用意されているような感じのスタイルに変更してみてます。

カスタムテーマはCSSで設定できるので、CSSファイルを用意して、VS Codeの拡張機能の設定からファイルパスを指定する形です。

ということで、当面はMarpでスライドを作っていくことになるかと思います。まぁ、ただ、スライドを作るいこと自体が減ってきてはいるのですが。ほかの配色を試したり、ヘッダフッタとかも試してみるのもいいかもな。

気が向いたら、CSSをどこかにアップロードするかもです。

※今回のブログはGateronサイレントクリア軸をルブしてみた、Corne Light v2で最後の数行を書いてみました。キースイッチだけだとこすれる音が減った気がしてましたが、キーキャップを付けたら少しこすれる音が気になる感じです。

スライド作成の環境をMarpにしてみた

目次

Marpとは？

サンプル

プラグイン

Decksetのスライドとの違い

See Also by Hugo

Related by prelims-cli

FEATURED TAGS