マークダウンで簡単スライド作成【vscode-reveal】

# はじめに

マークダウンからスライドを作成する「`vscode-reveal`」の紹介です。

この記事では
- 使ってみての所感（使いやすかったです）
- より使いこなす方法

をご紹介します。

### ◆ 「導入方法」
→素晴らしき先人の記事をお読みください。

https://qiita.com/Targityen/items/40ae4795e2cb77c1adc6

### ◇ 「概要を知りたい」「イメージを掴みたい」
→ こちらの公式スライドをご覧ください。

https://revealjs.com/


# まずは感想

:::note
**素晴らしい**です。

マークダウンで書くことによって、思考がスムーズに流れ出てきます。

デフォルトのテーマ・デザインも秀逸ですし、アニメーションや背景のカスタマイズも（慣れれば）容易です。
:::
:::note warn
**「慣れれば」が鍵で、わかりにくい部分もそれなりにありました**。
:::

# 真価を発揮させるには

本題です。簡単な内容から順番に紹介していきます。

:::note warn
基本的な操作（スライドの作成）はできる前提です。

先に[「導入方法」記事](https://qiita.com/Targityen/items/40ae4795e2cb77c1adc6)をお読みください。
:::

### ◆ ディレクトリ構成
特に指定はありません。

任意の名前で`.md`ファイルを作成します。
```
/
└─ slide.md（名称なんでも）
```

画像を使用する場合は、任意のディレクトリを作成すると良いかも。

```
/
├─ slide.md（名称なんでも）
└─ image/（名称なんでも）
   ├─ 1.png
   └─ 2.png
```


### ◇ テーマ指定
「YAML Front Matter」という記法を使用します。

`---`で囲んだブロックを、ファイルの最初に記述するだけです。
```md:slide.md
---
theme: "black"
---

<!-- 以下、スライドをつくっていく -->
```

＜用意されているテーマ一覧＞

https://revealjs.com/themes/

### ◆ YAML Front Matterで設定できるもの

`slideNumber: false`など

https://revealjs.com/config/

:::note warn
リンク先ではYAML Front Matterを使用していませんが
YAML Front Matterでも利用可能です。

※ただし、全て応用可能であるかは不明
:::

### ◇ 自動大文字化の解除

`Sample` → `SAMPLE` など、自動的に大文字になってしまう機能があります。

これを解除するには、以下の記述をします。

```md:slide.md
<!-- 上にYAML Front Matter -->

<style type="text/css">
  .reveal h1,
  .reveal h2,
  .reveal h3,
  .reveal h4,
  .reveal h5,
  .reveal h6 {
    text-transform: none;
  }
</style>

<!-- 以下にスライド -->
```

＜詳しくはこちら＞

https://srz-zumix.blogspot.com/2014/09/revealjs-markdown.html#:~:text=%E3%81%97%E3%81%A6%E3%81%8A%E3%81%8F%E3%80%82-,%E8%A1%A8%E9%A1%8C%E3%81%8C%E5%A4%A7%E6%96%87%E5%AD%97%E8%A1%A8%E8%A8%98%E3%81%AB%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B,-%E8%A1%A8%E9%A1%8C%E3%81%8C%E5%A4%A7%E6%96%87%E5%AD%97

### ◆ クラスの作成・適用

1. ファイル上部にstyleタグを記述し、classを作成できます
1. `{ .class }`という記法で、要素にクラスを適用できます。**簡単！**

```md
<style>
  .sample {
    color: red;
  }
</style>

<!-- 以下スライド -->
# Sample

test { .sample }
```

| `color: red`（`.sample`）が適用されている |
|:-:|
| ![スクリーンショット 2024-11-24 9.48.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/57def54c-9b01-3253-4c55-1bf9eaee69fc.png) |




### ◇ styleの適用

先程の`{ }`記法を使います。**素晴らしく簡単です。**

```md
# Sample

test { style="color: yellow" }
```

| `color: yellow`が適用されている |
|:-:|
| ![スクリーンショット 2024-11-24 9.52.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/2c38b470-87ae-981b-bb11-aba99ba71aba.png)|

＜画像幅指定も可能＞
```md
![](./image/1.png) {style="width: 200px"}
```

＜文の途中だけにスタイルを適用＞

`span`タグを使用します。
```md
文章ー<span style="color:orange">強調</span>ー文章
```

| `color: orange`が適用されている |
|:-:|
| ![スクリーンショット 2024-11-24 10.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/19c1b9f3-4995-58f8-d71d-f47395c3e102.png)|

### ◆ アニメーション

「導入方法」から引用します。

`.fragment`は必須です。

`.fade-out`の指定は任意。指定がなければ`fade-in`が適用されます。

>```md
>---
>
>## 効果
> 
>大きくする {.fragment .grow}
>
>小さくする {.fragment .shrink}
>
>フェードアウト {.fragment .fade-out}
>
>右フェード {.fragment .fade-right}
>
>上フェード {.fragment .fade-up}
>
>下フェード {.fragment .fade-down}
>
>左フェード {.fragment .fade-left}
>```

`style`の指定と組み合わせることも可能です。

```md
大きくする {.fragment .grow style="color:red"}
```


### ◇ 上下方向のスライド

スライドの区切りを`---`で行うと「左右方向（通常）」
スライドの区切りを`--`で行うと「上下方向」のスライドになります。

```md
---

# 1

---

# 2.1

--

# 2.2

---
```


### ◆ backgroundの画像・映像・透明度

以下の要素を組み合わせてbackgroundを指定できます。

- コメントアウト`<!-- -->`
- `.slide`クラス
- `data-background`プロパティ（画像 / `.gif`）
- `data-background-opacity`プロパティ（透明度）

```md
<!-- .slide: data-background="./src/3.png" data-background-opacity=0.3 -->
```

＜使用例＞
```md
---

<!-- .slide: data-background="./image/3.png" data-background-opacity=0.3 -->

# かわいい
```
| `background`に画像を適用できている |
|:-:|
| ![スクリーンショット 2024-11-24 10.12.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/f0c4c981-d8fd-7d17-9de5-7c206bfe6d22.png)  |
|   |



:::note alert
**どうしてもできなかったこと**
videoの背景設定 ~~・埋め込み~~ ができませんでした。
`gif`で代用できましたが、変換の手間があるのが難点です。
:::

:::note
### ◇ 追記 videoの埋め込み

```md
<video controls src="./src/test1.mp4">
```

`controls`を指定することで、再生ボタンを表示できます


|  |
|:-:|
| ![スクリーンショット 2024-12-14 9.22.42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/971a3ffd-4488-6ff9-fe24-a7e41e614b5c.jpeg)  |

対応を確認できた拡張子は`mp4`と`webm`です。
`webm`はローカルだと読み込まれませんが、ブラウザで開くと正常に機能します。


この他、以下の属性を指定できます

- `muted`：ミュートにする
- `loop`：ループ再生する

:::note warn
以下の属性は機能しません

- `autoplay`
- `data-autoplay`：本家reveal.jsでは、この属性で自動再生が行われるようです
:::

:::note
### ◆ 追記 videoの自動再生

以下のコードを`.md`ファイルの中に埋め込むことで、動画の自動再生が行われます。
埋め込みはスライドのどこでも大丈夫です。

※ファイルを分け、`script src=""`で読み込むこともできます。
※背景動画は除く
※解説はいずれ追記します
```html
<script>
    document.addEventListener('DOMContentLoaded', function () {
      const slides = document.querySelectorAll('.slides section');
    
      // スライドを監視
      slides.forEach((slide) => {
        const observer = new IntersectionObserver(
          (entries) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                // 現在のスライド内の動画を再生
                const video = slide.querySelector('video');
                if (video) {
                  video.muted = true; // 自動再生のためにミュート
                  video.play().catch((error) => {
                    console.error('Autoplay error:', error);
                  });
                }
              } else {
                // 現在のスライドでない場合、動画を停止
                const videos = slide.querySelectorAll('video');
                if (videos) {
                  videos.forEach((video) => {
                    video.pause();
                    video.currentTime = 0; // 再生位置をリセット
                  });
                }
              }
            });
          },
          { threshold: 0.5 }
        ); // スライドが50%以上表示されたときにトリガー
        observer.observe(slide);
      });
    });
</script>
```
:::
### ◇ auto-animate

概要はこちらをご覧ください。

https://revealjs.com/auto-animate/

実装方法を解説します。
- `.md`で使用する場合、スライドを2枚用意するのが良さそうです
- それぞれのスライドに`data-auto-animate`を設定します


```
---

<!-- backgroundを設定する場合は、2スライドとも同じに設定する -->
<!-- .slide: data-background="background.png" data-auto-animate -->

# before

![](before.png)

---

<!-- .slide: data-background="background.png" data-auto-animate -->

# after

![](after.png)
```
# なぜわかりにくいか

これを知っておくことで、調べるときの徒労を減らすことができます。

- **`vscode-reveal`と、`reveal.js`は別物**
共通部分も多いが・・・ゆえに「よりややこしい」
また、`reveal.js`の情報が多いため、`vscode-reveal`用に変換しなくてはいけません。
<br>

- `vscode-reveal`公式サイトの出来が悪い
リンクの設定されていないナビゲーションバーがあったり・・・

https://www.evilznet.com/vscode-reveal/#/README

<br>

- シンプルに情報が少ない
諦めも肝心

:::note warn
**本家`reveal.js`について**
こちらも使ってみました。mdにも部分的に対応していますが、基本的にはhtmlで書くという印象。

htmlはタグを閉じなければいけない関係で、mdほど気持ちよく書けませんでした。

**`vscode-reveal`のほうがオススメ**です。
:::
# 参考

https://qiita.com/Targityen/items/40ae4795e2cb77c1adc6

https://srz-zumix.blogspot.com/2014/09/revealjs-markdown.html

https://revealjs.com/

https://www.evilznet.com/vscode-reveal/#/markdown/extended-syntax

https://zatsugaku-engineer.com/static/reveal-js/index.html#/