はじめに
マークダウンからスライドを作成する「vscode-reveal」の紹介です。
この記事では
- 「実際やってみて、使いやすかった？」
- 「真価を発揮させるには」
をご紹介します。
◆ 「導入方法」
→素晴らしき先人の記事をお読みください。
◇ 「概要を知りたい」「イメージを掴みたい」
→ こちらの公式スライドをご覧ください。
まずは感想
素晴らしいです。
マークダウンで書くことによって、思考がスムーズに流れ出てきます。
デフォルトのテーマ・デザインも秀逸ですし、アニメーションや背景のカスタマイズも（慣れれば）容易です。
「慣れれば」が鍵で、わかりにくい部分もそれなりにありました。
真価を発揮させるには
本題です。簡単な内容から順番に紹介していきます。
基本的な操作（スライドの作成）はできる前提です。
先に「導入方法」記事をお読みください。
◆ ディレクトリ構成
特に指定はありません。
任意の名前で.mdファイルを作成します。
/
└─ slide.md（名称なんでも）
画像を使用する場合は、任意のディレクトリを作成すると良いかも。
/
├─ slide.md（名称なんでも）
└─ image/（名称なんでも）
├─ 1.png
└─ 2.png
◇ テーマ指定
「YAML Front Matter」という記法を使用します。
---で囲んだブロックを、ファイルの最初に記述するだけです。
---
theme: "black"
---
<!-- 以下、スライドをつくっていく -->
＜用意されているテーマ一覧＞
◆ YAML Front Matterで設定できるもの
slideNumber: falseなど
リンク先ではYAML Front Matterを使用していませんが
YAML Front Matterでも利用可能です。
※ただし、全て応用可能であるかは不明
◇ 自動大文字化の解除
Sample → SAMPLE など、自動的に大文字になってしまう機能があります。
これを解除するには、以下の記述をします。
<!-- 上にYAML Front Matter -->
<style type="text/css">
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
text-transform: none;
}
</style>
<!-- 以下にスライド -->
＜詳しくはこちら＞
◆ クラスの作成・適用
- ファイル上部にstyleタグを記述し、classを作成できます
-
{ .class }という記法で、要素にクラスを適用できます。簡単！
<style>
.sample {
color: red;
}
</style>
<!-- 以下スライド -->
# Sample
test { .sample }
color: red（.sample）が適用されている |
|---|
 |
◇ styleの適用
先程の{ }記法を使います。素晴らしく簡単です。
# Sample
test { style="color: yellow" }
color: yellowが適用されている |
|---|
 |
＜画像幅指定も可能＞
 {style="width: 200px"}
＜文の途中だけにスタイルを適用＞
spanタグを使用します。
文章ー<span style="color:orange">強調</span>ー文章
color: orangeが適用されている |
|---|
 |
◆ アニメーション
「導入方法」から引用します。
.fragmentは必須です。
.fade-outの指定は任意。指定がなければfade-inが適用されます。
--- ## 効果 大きくする {.fragment .grow} 小さくする {.fragment .shrink} フェードアウト {.fragment .fade-out} 右フェード {.fragment .fade-right} 上フェード {.fragment .fade-up} 下フェード {.fragment .fade-down} 左フェード {.fragment .fade-left}
styleの指定と組み合わせることも可能です。
大きくする {.fragment .grow style="color:red"}
◇ 上下方向のスライド
スライドの区切りを---で行うと「左右方向（通常）」
スライドの区切りを--で行うと「上下方向」のスライドになります。
---
# 1
---
# 2.1
--
# 2.2
---
◆ backgroundの画像・映像・透明度
以下の要素を組み合わせてbackgroundを指定できます。
- コメントアウト
<!-- --> -
.slideクラス -
data-backgroundプロパティ（画像 /.gif） -
data-background-opacityプロパティ（透明度）
<!-- .slide: data-background="./src/3.png" data-background-opacity=0.3 -->
＜使用例＞
---
<!-- .slide: data-background="./image/3.png" data-background-opacity=0.3 -->
# かわいい
backgroundに画像を適用できている |
|---|
 |
どうしてもできなかったこと
videoの背景設定・埋め込みができませんでした。
gifで代用できましたが、変換の手間があるのが難点です。
◇ auto-animate
概要はこちらをご覧ください。
実装方法を解説します。
-
.mdで使用する場合、スライドを2枚用意するのが良さそうです - それぞれのスライドに
data-auto-animateを設定します
---
<!-- backgroundを設定する場合は、2スライドとも同じに設定する -->
<!-- .slide: data-background="background.png" data-auto-animate -->
# before
---
<!-- .slide: data-background="background.png" data-auto-animate -->
# after
なぜわかりにくいか
これを知っておくことで、調べるときの徒労を減らすことができます。
-
vscode-revealと、reveal.jsは別物
共通部分も多いが・・・ゆえに「よりややこしい」
また、reveal.jsの情報が多いため、vscode-reveal用に変換しなくてはいけません。
-
vscode-reveal公式サイトの出来が悪い
リンクの設定されていないナビゲーションバーがあったり・・・
- シンプルに情報が少ない
諦めも肝心
本家reveal.jsについて
こちらも使ってみました。mdにも部分的に対応していますが、基本的にはhtmlで書くという印象。
htmlはタグを閉じなければいけない関係で、mdほど気持ちよく書けませんでした。
vscode-revealのほうがオススメです。
参考