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

Posted by johtani on Monday, April 5, 2021

目次

みなさんは、スライドの作成には何を使っていますか? Keynote?Powerpoint?Google Slides?

私は、Macでスライドを作るときは前職ではテンプレートもあったのでKeynoteでしたが、ちょっとしたものはMarkdownベースのDecksetを利用していました(買い切りタイプの有料ソフト)。

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

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

Marpとは?

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

といっても、これ自体を使わなくても、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版まで)や
データ分析基盤構築入門の著者の一人

---

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

プラグイン

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

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

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

Decksetのスライドとの違い

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

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

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

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

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

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

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


comments powered by Disqus