きっかけ

いつも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_が
面白い記事で締めてくれると思います。
是非見てみてください。