きっかけ
いつも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ファイルを作成→プレビュー表示
スライドに変換したい
対応フォーマット
- 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を何度も記述した場合、最後の値のみを認識する。
- テーマの指定
- テーマスタイルの調整
- スライドの分割オプション
テーマの切替
テーマは２種類が選択できる。
カスタマイズすることも可能。
<!-- theme: default -->
<!-- theme: gaia -->
テーマスタイルの調整
CSSでテーマの調整ができる。
<!--
style: |
section {
background-color: #111111;
}
-->
スライドの分割オプション (HeadingDivider)
見出しの前にスライドページを自動的に分割するように指示できる。
# 1st page
---
## 2nd page
### The content of 2nd page
---
# 3rd page
<!-- headingDivider: 2 -->
# 1st page
## 2nd page
### The content of 2nd page
# 3rd page
Local directives
スライドページごとの設定値。定義されたページ及び後続のページに適用される。
- ページ数の表示
- ヘッダーの表示
- フッターの表示
- 背景色の指定
- 文字色の指定
etc...
単一のページに適用させる
現在のページにのみLocal Directivesを適用する場合は、
directivesの名前の前に_(アンダーバー)をつける。
<!-- _backgroundColor: black -->
ページ数の表示
trueに設定すると、スライド右下にページ番号が表示される。
<!-- paginate: true -->
ヘッダーの表示
スライド左上に任意のヘッダー文字を表示できる。
<!-- header: This is a header -->
フッターの表示
スライド左下に任意のフッター文字を表示できる。
<!-- footer: This is a footer -->
背景色の変更
任意の背景色に変更することができる。
<!-- backgroundColor: black -->
文字色の変更
任意の文字色に変更することができる。
<!-- color: white -->
その他の機能
画像表示
参考:Image syntax
* 背景画像に設定する
* 画像サイズの比率を設定する
*サイズを自動調整する
* 空白区切りで複数指定
数式の表示
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_が
面白い記事で締めてくれると思います。
是非見てみてください。