LTのスライド作成に時間をかけたくない

8963 ワード
Marp Markdown VSCode Markdown テキストリンク

きっかけ

いつもLTを行うとき
メモ帳でスライドに書くべき内容をまとめたうえで、パワーポイントを作成していた。
これを"もっと楽にしたい"という思いから本記事に手法をまとめた。

今回の目標

.md形式でかいたらスライドが自動で作成される。

解決策

調べてみるとツールはたくさん存在した。

  • reveal.js
  • remark.js
  • Marp
  • Swipe
  • Qiita

etc...
参考:[ Markdownでスライド作成 ] 5種類くらいツールを試してみた結果

今回はMarpを採用した
採用理由は以下

  • デザイン性
  • 拡張性
  • VSCode上でできる

Marpでなにができるのか

  • md記法でスライドがかける
  • 独自のディレクティブを記述できる
    • ページ番号表示
    • スライドの高さ・幅・縦横比の指定
    • テーマの変更
    • 背景色/文字色等の変更
    • ヘッダー/フッターの表示
    • 背景画像や画像の表示比率等の指定
    • 数式の表示
    • CSSによるカスタマイズ

など

Marpってなに？

yhattさんが作成されているツール。
GitHubにソースコードが公開されている。

インストール

今回はVSCodeのプラグインであるMarp for VS Codeを使用した。

アプリケーション等も用意されているので、VSCode上でやりたくない人は各自で。

使い方

スライドの確認

.mdファイルを作成→プレビュー表示

スライドに変換したい

対応フォーマット

  • PDF
  • HTML
  • PowerPoint
  • PNG (First slide only)
  • JPEG (First slide only)

Marp Commandをクリック

テンプレート

---
marp: true

---
<!-- 
theme: default
size: 16:9
paginate: true
style: |
  section {
    background-color: #FFFFFF;
  }
-->
# 1st page

---

## 2nd page

### The content of 2nd page

---

# 3rd page

Directives

MarpはDirectivesを使用することで、スライドの作成をサポートできる。

Global directives

スライド全体の設定値。
同じGlobal directivesを何度も記述した場合、最後の値のみを認識する。

  • テーマの指定
  • テーマスタイルの調整
  • スライドの分割オプション

テーマの切替

テーマは２種類が選択できる。
カスタマイズすることも可能。

Default
<!-- theme: default -->
Gaia
<!-- theme: gaia -->

テーマスタイルの調整

CSSでテーマの調整ができる。

Style
<!-- 
style: |
  section {
    background-color: #111111;
  }
-->

スライドの分割オプション (HeadingDivider)

見出しの前にスライドページを自動的に分割するように指示できる。

RegularSyntax
# 1st page

---

## 2nd page
### The content of 2nd page

---

# 3rd page
HeadingDivider
<!-- headingDivider: 2 -->
# 1st page

## 2nd page

### The content of 2nd page

# 3rd page

Local directives

スライドページごとの設定値。定義されたページ及び後続のページに適用される。

  • ページ数の表示
  • ヘッダーの表示
  • フッターの表示
  • 背景色の指定
  • 文字色の指定

etc...

単一のページに適用させる

現在のページにのみLocal Directivesを適用する場合は、
directivesの名前の前に_(アンダーバー)をつける。

<!-- _backgroundColor: black -->

ページ数の表示

trueに設定すると、スライド右下にページ番号が表示される。

Paginate
<!-- paginate: true -->

ヘッダーの表示

スライド左上に任意のヘッダー文字を表示できる。

Header
<!-- header: This is a header -->

フッターの表示

スライド左下に任意のフッター文字を表示できる。

Footer
<!-- footer: This is a footer -->

背景色の変更

任意の背景色に変更することができる。

BackgroundColor
<!-- backgroundColor: black -->

文字色の変更

任意の文字色に変更することができる。

Color
<!-- color: white -->

その他の機能

画像表示

参考:Image syntax

* 背景画像に設定する
![bg](picture.png)

* 画像サイズの比率を設定する
![60%](picture.png)

*サイズを自動調整する
![fit](picture.png)

* 空白区切りで複数指定
![bg 60%](picture.png)

数式の表示

KaTeX形式で数式を記載することができる。
\$でインライン表示、\$$でブロック表示する。

$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$

スライドのアスペクト比・サイズの指定

スライドのサイズを変更できる。
デフォルトはsize: 4:3で設定されている。

<!-- size: 16:9 -->


<!-- width: 12in -->
<!-- height: 6in -->

終わりに

LTのスライド作成に時間をかけたくない！！
という思いから本記事を書かせていただきました。
これを使用するようになってから
快適なLTライフを行えるようになったと感じています。
皆様も是非お試しください。

アドベントカレンダーについて

CA Tech Dojo/Challenge/JOB Advent Calendar 2019の24日目は
@ta9starが書かせていただきました。
CATechDojoからはじまり、現在はCATechJobをさせていただいています。
インターンシップ期間中はずっとGolangを使った開発ができていて楽しいです。
明日はCATechDojo仲間の@yawn_yawn_yawn_が
面白い記事で締めてくれると思います。
是非見てみてください。