はじめに
軽量マークアップ言語として人気の Markdown（マークダウン）ですが、この Markdown からプレゼンテーションのスライドを作ることができるツールが「Marp」です。既に Markdown (以下MD)を使いこなしている方だけではなく、このためにMDを勉強してみようと思う方にも適した便利なツールです。今回は、そのインストール手順と簡単な使い方を学んでいきましょう。
前提として、MDの知識が必要になりますので、MDについての基礎は、下記の記事をご覧ください。
VS Code を利用した Markdown の基礎とフォーマット構文のページへ
レッスン１．Marpとは
Marpは日本生まれのオープンソースツールで、Markdownの文法によってスライドを製作することが可能なツールです。Marpによって作成するスライドには以下のようなメリットがあります。
- 無料で使用することができる
- OSを問わず同じ使い方でスライド作成ができる(Windows/Mac/Linux)
- Git等のソースコード管理ツールで管理ができる
- 差分が分かるので、マージが容易である
- 既存のドキュメントを容易に再利用できる
- PDFのエクスポートもできる
- pptx(Microsoft Power pointファイル)として保存ができる
このように、多くのメリットがあります。中でもマージができるので、複数人で手分けして作成したスライドを容易に統合することができる点は魅力的です。そのため、チーム開発では重宝されるでしょう。
レッスン２．環境準備
Marpを利用するためには、Visual Studio Code（以下VS Code）のプラグインを用いるのが最も手軽な導入方法です。尚、VS Codeはあらかじめインストールされていることとします。
VS Codeを開き、拡張機能の検索から、「marp」と検索し、「Marp for VS Code」をインストールしてください。
インストールができたら、早速試してみましょう。
下記のコードを入れて、「slide.md」として保存してください。これはMarpを有効化するためのヘッダコードです。
--- marp: true ---
保存ができたら、 プレビューを見てみましょう。右上のプレビューボタンを押してください。
プレビューウィンドウに空のスライドが表示されたら、無事インストールが完了しています。
次にMarp内でのHTMLタグを有効化します。
現在Marpの画像配置コードには制限があり、単独画像の場合パーセンテージ指定のリサイズができません。そのため、画像配置の部分をHTMLタグで配置する例を紹介する関係で、今回の設定を行います。
しかしながら、説明において、必要な部分は出来る限りMD及びMarpの文法を使うようにします。
まず、Marp内でのHTMLタグを有効化するため、設定画面を開きます。コードウィンドウの上部にある、このボタンを押します。
「Open extension settings」を開きます。
「Enable HTML」のチェックを入れると、Marp内でHTMLタグを使うことができるようになります。
レッスン３．簡単なスライドを作る
では、環境の準備が整ったので、早速簡単なスライドから作っていきましょう。
タイトル
タイトルを追加するには、見出し1がタイトルとして認識されます。下記のコードを入れてプレビューを見て下さい。
コード
--- marp: true --- # サンプルのスライド
プレビュー
改ページ
改ページは空行の後に”-“を３つ並べて表現します。
コード
--- marp: true --- # サンプルのスライド --- # 2ページ目
プレビュー
文字装飾、リストなど
MDで用いられるリストや文字装飾の表現は、そのまま用いることができます。
コード
--- marp: true --- # サンプルのスライド ## 文字装飾 * **Bold** * *italic* ## 表 | 左 | 中央 | 右 | | ------ | ---- | --- | | その１ | A | D | | その２ | B | E | | その３ | C | F |
プレビュー
既存のMD資源を有効活用する
下記の方法を用いると、既存のMDドキュメントをスライドに変換することができます。headingDividerというヘッダを追加することで、自動的に見出し１の区切りでスライドが分かれて表現されます。ハイフンを入れてわざわざページ区切りを追加する必要がありません。
コード
--- marp: true --- <!-- headingDivider: 1 --> # 1ページ目 ## 1-1 ## 1-2 # 2ページ目 ## 2-1 ## 2-2
プレビュー
テーマを変更する
スライドのテーマを変更することもできます。ここではすべてのスライドに同じテーマを適用してみます。テーマは初期状態ではデフォルトのものと、gaiaというクリーム色の背景のテーマの2種類が用意されています。今回はgaiaに変更してみましょう。
コード
--- marp: true theme: gaia --- # 1ページ目 ## リスト * list1 * list2## 2-1 ## 2-2
プレビュー
ページ番号、フッターなど
ページ番号やフッターを追加することができます。ページ番号は自動付加です。
コード
--- marp: true theme: gaia --- <!-- paginate: true --> <!-- footer: フッターの文字列です --> # 1ページ目 ## リスト * list1 * list2 --- # 2ページ目 ## リスト * list1 * list2
プレビュー
また、タイトルページには入れたくないという場合は、タグの位置を調整します。こうすることで、タグを入れたページから表示されるようになります。
コード
--- marp: true theme: gaia --- # タイトルです --- <!-- footer: フッターの文字列です --> <!-- paginate: true --> # 2ページ目 ## リスト * list1 * list2
プレビュー
画像を置く
スライド内に画像を挿入したい場合です。まずslide.mdと同じフォルダ内に画像を準備します。今回はimage.jpgという名前で画像を用意しました。早速配置してみましょう。
前述したように、画像配置コードに制限があるため、場合に応じて以下の方法を使ってください。
- Pixel指定したい場合 -> MDの記法で書くことができます
- パーセンテージ指定したい場合 -> HTMLタグを使います
Pixel指定のケース
Pixel指定したい場合はMDの下記の記法を使います。幅か高さどちらかだけ入れると、元画像の縦横比が保持されます。
コード
--- marp: true --- # Pixel指定(縦の場合)  --- # Pixel指定(横の場合) 
プレビュー
パーセンテージ指定のケース
画像のパーセンテージ指定をしたい場合は、下記のコードを入れましょう。文法はHTMLに準拠しています。しかしながら、これはオリジナル画像サイズに対するパーセンテージですので、スライドのサイズに対するパーセンテージではないことに注意します。
コード
--- marp: true --- # タイトルです <img src="image.jpg" width=50%/>
プレビュー
背景画像を配置する
ここでは背景画像を配置する方法を紹介します。タイトルスライド等では背景画像があるとリッチに見えるので、効果的にお使いください。全面配置のパターンでは、視認性を上げるために文字色を白に変更しています。また、左右配置の場合、文字は画像サイズに合わせて自動で改行されます。
コード
--- marp: true --- # 背景画像を全面配置 <!-- _color: white -->  --- # 右側に配置 
プレビュー
スライドをエクスポートする
作成したスライドをPDFやpptx形式で保存することができます。方法は以下で、まずMarpのアイコンをクリックします。
「Export slide deck…」を選びます。
ファイル保存ダイアログで保存先とファイルの種類を決めます。ここでPDFやpptx形式を選んで保存することができます。要望に応じて変更ください。
おわりに
今回はMarpによるプレゼンテーションスライドの作成を学びました。既存のMD資源を使ってプレゼンテーションを行う際にも短時間でスライド化することができますし、フリーで使えるため、ライセンスを気にすることなくチームで使うこともできます。またコードによる記述ながら、MDの記法をほぼ踏襲しておりますので、新たにたくさんの文法を覚えることなく使えるのもメリットです。簡単なプレゼンテーションであれば、十分すぎるほどの機能と言えます。最後までお読みいただきありがとうございました。
No Comments