Markdownでスライドを作ってみた
vscode-revealを使って、Markdownでプレゼンテーション用のスライドを作ってみました。
Table of Contents
はじめに
皆さんはプレゼンテーションスライドを何で作りますか?
私はPowerPointを使うことが多いです。
複雑なアニメーションや表現をGUIで実現できるところが気に入っています。
しかも、最近はAIで勝手にデザインを決めてくれたりもします。
Markdownでスライドを作るということ
以前から何度かMarkdownを使ったスライド作りにチャレンジしたことがあります。
下記の通り、色々な理由があります。
- マウスなどを使わずにキーボードで簡潔する
- CSSに精通していればスライド作成ツールよりもデザインしやすい
- Gitでバージョン管理できる
- 既存のマークダウンファイルを流用できることがある
- HTML/CSSの勉強になる
- ソースコードを載せるのが楽
しかし、CSSの知識が足りないこともあり、度々挫折してきました。
PowerPointを使う方が直感的で分かりやすく、速かったのです。
またチャレンジしようと想ったきっかけ
FUSUMAというスライド作成ツールのv1.0.0が公開された記事を見て、試したくなったからです。
FUSUMAは素晴らしいツールですが、今回はvscode-revealを使うことにしました。
reveal.js
本記事のメインはvscode-revealです。
その前にreveal.jsの紹介をさせてください。
reveal.jsはJavaScript製のプレゼンテーション作成フレームワークです。
HTMLを利用していますが、Markdownを使うこともできます。
しかし、非開発者からするとMarkdownを使ってスライドを作る過程が少し面倒です。
vscode-reveal
VSCodeでreveal.jsを使ってスライド作成できる拡張です。
ポイントはお手軽さです。
VSCodeでMarkdownを作成し、Open presentation in browserを実行するだけでスライドが表示されます😄
スライドを作ってみた
私のトレードマークでもある『みみぞう』を表示するスライドを作ってみました。
詳しい使い方は公式ドキュメントをご覧下さい。
ここではファイルの中身だけ記載します。
slide.md
---
theme : "white"
customTheme: "theme"
transition: "slide"
highlightTheme: "monokai"
slideNumber: true
---
# みみぞうとレイアウト
~ Grid Layout ~
----
### tadashi-aikawa
2019-07-24 (Wed)
<!-- .slide: class="title" data-background="https://blog.mamansoft.net/images/cover/2019-07-04.jpg" -->
---
## みみぞう
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
---
## 増えるみみぞう
--
### 2×1 みみぞう
<div class="grid-2x1">
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
</div>
--
### 2×2 みみぞう
<div class="grid-2x2" style="width: 500px; height: 500px;">
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
</div>
--
### 3×3 みみぞう
<div class="grid-3x3" style="width: 500px; height: 500px;">
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
</div>
---
## おしまい
<img src="https://avatars0.githubusercontent.com/u/9500018?s=400&v=4" />
よく使うレイアウトはCSSにまとめてみました。
theme.css
/* Base font options */
.reveal {
font-size: 250%;
}
/* Images */
.reveal section img {
border: none;
box-shadow: none;
}
/* Title */
.reveal .title {
font-size: 80%;
color: white;
text-shadow: 3px 3px 3px #37474F;
}
/* Title image */
.reveal .slide-background.present {
filter: brightness(50%) grayscale(20%) sepia(40%) blur(5px);
}
/* Title headers */
.reveal .title h1 {
color: white;
text-shadow: 3px 3px 3px #37474F;
}
.reveal .title h3 {
color: white;
text-shadow: 3px 3px 3px #37474F;
}
/* Headers */
.reveal h1 {
color: #37474F;
text-transform: none;
}
.reveal h2 {
color: #37474F;
text-transform: none;
}
.reveal h3 {
color: #37474F;
text-transform: none;
}
.reveal h4 {
color: #37474F;
text-transform: none;
}
/* Emphasis */
.reveal strong {
color: #F06292;
}
.reveal em {
color: #42A5F5;
}
/* List */
.reveal ol li {
font-weight: bolder;
font-size: 75%;
}
.reveal ul li {
font-weight: bolder;
font-size: 75%;
}
/* Code */
.reveal pre {
padding: 15px;
background-color: #37474F;
}
/* Table */
.reveal .small-table {
font-size: 75%;
}
/* Refer */
.reveal .refer {
font-size: 12px;
}
.reveal .refer:before {
content: "🔗";
}
/***********/
/* Layouts */
/***********/
.reveal .central-2 {
display: flex;
justify-content: space-around;
}
/* Need to specify width & height */
.reveal .grid-2x1 {
display: grid;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
margin: auto;
grid-column-gap: 5%;
grid-template-columns: 40% 40%;
}
.reveal .grid-2x2 {
display: grid;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
margin: auto;
grid-row-gap: 5%;
grid-column-gap: 5%;
grid-template-rows: 40% 40%;
grid-template-columns: 40% 40%;
}
.reveal .grid-3x3 {
display: grid;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
margin: auto;
grid-row-gap: 3%;
grid-column-gap: 3%;
grid-template-rows: 30% 30% 30%;
grid-template-columns: 30% 30% 30%;
}
変更があった場合は以下を更新していく予定です。
スライドを見る
上記2ファイルをプロジェクトに含め、vscode-revealでスライドを出してみましょう。
以下のようなタイトルが表示されればOKです👍
スライドの構成には階層があり、ESCを押すと以下のように表示されます。
総括
vscode-revealを使って、VSCodeからMarkdownで簡単にスライドを作る方法を紹介しました。
fragmentを使えば、簡単なアニメーションが使えるため実用上も問題ありません。
また、以下のような配布形式にも対応しています。
- 静的サイトとしてデプロイ
しばらくは、画像構成やアニメーションが複雑でないスライドはvscode-revealで作ってみる予定です。
