Zenn
☄️

Markdownから簡単スライド作成！Marpの基本的な使い方と魅力を解説

2024/10/06に公開
Markdown
slide
Marp
idea

はじめに

1.ご挨拶

プレゼンテーション用のスライド作成と聞くと、PowerPointやGoogleスライドを思い浮かべる方が多いと思います。でも、このツールはそれらとは一味違います。
今回は、Markdownから簡単にスライドを作成できるオープンソースツール「Marp」をご紹介します。エンジニアや学生、Markdownに慣れている方には特におすすめのツールです！

2. Marpとは？

Marpは、Markdownをベースにしたシンプルかつパワフルなスライド作成ツールです。Marpを使えば、見慣れたMarkdown記法でスライドを素早く作成でき、コードを書く感覚で美しいスライドを仕上げることができます。
特に、開発者や技術系のプレゼンを頻繁に行う方には使いやすいツールです。

主な特徴:

  • Markdownベース: 簡単で素早い記述。
  • 豊富なカスタマイズ: テーマを使用したり、CSSで記述が可能。
  • 柔軟なエクスポート: PDFやPPT形式,HTMLへの出力が可能。
  • リアルタイムプレビュー: 編集しながら即座にスライドを確認。
  • オープンソース: 無料で利用できます。

3. Marpの魅力

Marpのメリット:

  • Markdownで簡潔に記述できるため、従来のスライド作成ツールに比べて効率的に作業が進められる。
  • テーマやスタイルを選ぶだけで、デザインに時間をかけることなくプロフェッショナルなスライドが作成可能。
  • エクスポート機能を使えば、PDF形式の配布用資料やPPT形式のプレゼン資料が一瞬で完成。

既存のMarkdownファイルをスライドとして書き換えるという使い方も便利ですね。例えば、このブログを少し修正することでスライドに早変わりします。
また、コードで記述するのでLLMなどを利用したスライド作成との親和性が高かったりします。

Marpの使い方

Marpの使い方は非常にシンプルです。
ここでは、Marpの基本的な利用方法を解説します。

1. インストール方法

  1. Marp for VSCode拡張機能のインストール: 
    ext install marp-team.marp-vscode
  2. Marp CLIのインストール（CLIを使用したい場合やVSCodeではないエディタの利用者向け）:
    npmが必要です。
    npm install -g @marp-team/marp-cli

2. 記述方法

以下は公式のサンプルコードです。

---
theme: gaia
_class: lead
paginate: true
backgroundColor: #fff
backgroundImage: url('https://marp.app/assets/hero-background.svg')
---

![bg left:40% 80%](https://marp.app/assets/marp.svg)

# **Marp**

Markdown Presentation Ecosystem

https://marp.app/

---

# How to write slides

Split pages by horizontal ruler (`---`). It's very simple! :satisfied:

```markdown
# Slide 1

foobar

---

# Slide 2

foobar

ヘッダーの記述

ヘッダー部分には読み込むスタイルや設定を記述します。

<!-- ヘッダー -->
---
theme: gaia
_class: lead
paginate: true
backgroundColor: #fff
backgroundImage: url('https://marp.app/assets/hero-background.svg')
---
  • theme: gaia: Gaiaテーマを使用する指定。テーマによりスライドのスタイルが変わります。
  • _class: lead: スライドのフォントサイズやレイアウトをカスタマイズするためのクラス指定。
  • paginate: true: スライドの右下にページ番号を表示します。
  • backgroundColor: 背景色を設定します。
  • backgroundImage: 背景画像を設定。url() の中に指定した画像が背景に表示されます。

基本

<!-- 画像の表示 -->
![bg left:40% 80%](https://marp.app/assets/marp.svg)
  • bg left:40% 80%: このオプションで画像をスライドの左下に配置します。
  • url: Marpのロゴ画像をスライドに表示します。
<!-- タイトル -->
# **Marp**
  • 一般的なMarkdownの通り#でタイトル、##で小見出しなどを表現できます。
<!-- インラインスタイル -->
# タイトル {style="color: red; font-size: 2em;"}
  • インラインでCSSを記述することでデザインをすることも可能です。
<!-- スライドの分割 -->
---
  • ハイフン３つでスライドの分割となります。
```markdown
# Slide 1

foobar

---

# Slide 2

foobar
```
  • コードブロックを記述することによるコードのハイライト表示もスライドに反映されます。

3. MarpCLIについて

各ファイルへのエクスポート方法

  1. HTML
    デフォルトではHTMLへとエクスポートされます。
marp your_file.md
  1. PDF
marp --pdf your_file.md
  • --pdf オプションを指定することでPDFファイルをエクスポート出来ます。
  1. .pptx
marp --pptx your_file.md
  • --pptx オプションを指定することでPDFファイルをエクスポート出来ます。

便利機能

marp -w your_file.md
  • リアルタイムでマークダウンファイルの変更がHTMLファイルに反映されます。
marp -s your_path
  • ディレクトリを指定することでリアルタイムで更新されるローカルサーバーが建てられます。
marp -p your_file.md
  • プレビューできます。
marp --theme gaia
  • エクスポート時にテーマを上書きして変更できます。この場合はgaiaというテーマを指定しています。

まとめ

今回は簡単にMarpとMarpCLIの基本的な使用方法をまとめました。
以下はMarpの公式サイトとGitHubリポジトリです。

今回紹介した機能以外にも、オリジナルのカスタムテーマの作成や利用方法など、様々な使い方があります。今後もMarpに関する記事を上げたり更新することが有るかもしれませんので、よかったらフォローもよろしくお願いいたします。
また、間違っている箇所や気になる箇所があれば是非コメントでご指摘下さい。
最後まで読んでいただきありがとうございました。

Discussion