15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Marpでスライド作成

Last updated at Posted at 2021-10-04

Marpについて

Marpは,Markdownからプレゼンテーションスライドを作成してくれるツールです.Marpには,VSCode上で動かす「Marp for VS Code」,CLIベースでMarpを様々な形式に変換したり,プレゼンモードを起動したりする「Marp CLI」,reveal.jsのようにHTMLフレームワークとして動く「Marpit」があります.この中でも「Marp for VSCode」と「Marp CLI」を組み合わせたプレゼン作成が簡単かつ拡張性があるため,この記事では主にこの二つを扱います.

うれしさ

  • Markdownという簡単な記法
  • テキストベースなので,Gitで管理が可能
  • TeX数式対応(KaTeX
  • Emoji対応 😎
  • 様々な形式に変換可能(pdf, pptx, html)

かなしさ

  • 細かなレイアウトはCSSで調整が必要
  • 文字の色,フォントサイズはhtmlタグで記述
  • アニメーション非対応

Marp for VSCodeの導入

Marp for VS CodeをVSCodeにインストール後,Markdownファイル(.md)を作成し以下を記述.これだけでMarpが使えます.

---
marp: true
---

VSCodeの右上にアイコンが増え,それぞれ以下のようなボタンとなっています.今,プレビューボタンを押すと白いスライドが一枚表示されます.

VSCodeの設定

フォントサイズやフォントの色を変える際や音声の埋め込みをする際にはHTMLタグを用いる必要がありますが,デフォルトではVSCodeのプレビューにHTML要素が反映されません.従って,有効に設定する必要があります.VSCodeの「設定」から,「marp html」などと検索するとMarp: Enable HTMLという項目が出てくるので:ballot_box_with_check:を入れます.これで,HTMLがプレビューに反映されます.

Marpの機能説明・使用方法

実際にMarpを用いて機能及び使用方法を説明しています.
サンプルコード及びスライドを置いておきます.

Marp CLIの導入

VSCode上でもMarpをpdfやpptxに変換することができますが,画像の埋め込みやHTMLタグの反映が難しいため,Marp CLIを用いて生成する方が楽です.

Marp CLIはnpmパッケージとして公開されており,まずはNode.jsをインストールする必要があります.npmはNode Packaged Modulesの略称で,パッケージ管理ツールです.Pythonでいうところのpipで,Web系でよく使うツールです.今はあまり深入りせずにMarpに集中しましょう.

Node.jsの導入

https://nodejs.org/ja/download/ から,対応するインストーラをDLしてインスコしてください.
導入が完了したら,ターミナルにnpmと入力しなんか出てきたらOKです.

Marp CLIのインストール

ターミナルに以下のコマンドを打つことで,Marp CLIをインストールできます.インストール完了後marpと打ちなんか出てきたら導入完了です.

npm install -g @marp-team/marp-cli

https://github.com/marp-team/marp-cli#global-installation

Marp CLIの使用方法

スライド生成

Marp CLIを用いてpdfを生成します.

marp --pdf <file_name>.md --html --allow-local-files --image-scale 2

--pdfのオプションが生成するファイル形式となっており,pptxを生成したい場合は,--pptxのようになります.
あとは,ファイル名を指定することで生成できますが,htmlタグを使用している場合は--htmlが必要となります.また,--allow-local-filesで画像(音声)の埋め込みを行っています.
pptxを生成する場合は--image-scaleオプションで2に指定してあげないとジャギります.

プレゼンモードの起動

スライド生成と同様にpreviewオプション-pをつけてあげるだけです.

marp -p <file_name>.md --html --allow-local-files --image-scale 2

また,ローカルホストを立ち上げるserverモード-sもありますが,使いどころは限られそうです.

おわり

以上がMarpの基本的な説明です.CSSを用いたカスタムテーマの作成については別記事に書く予定です.

15
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?