Markdown + reveal.js + GitHub Pages でバージョン管理可能なスライドを作成 & 公開する

## はじめに
本記事は、[reveal.js](https://revealjs.com/) と [GitHub Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages) を用いて、**バージョン管理可能なスライド**を作成し、公開する手順についてご紹介したものです。

成果物は以下のようになります。
https://tatsurou-yajima.github.io/Head-first-for-study-meeting/chapter-9.html#/

↓画面イメージ
![Jan-20-2023 19-50-48.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/d7c62215-f5ca-f2da-8b43-b08596e84521.gif)

（キーボードの矢印キーで遷移できます！）


## 特徴
今回作成するスライドは、以下のような特徴を持っています。

- **Markdownを使用**
    - いつものドキュメント作成と同じ感覚でスライドが作成できる！
    - 細かいレイアウトを気にしなくて済む！
    - シンプルで見やすいスライドが作成できる！
- **バージョン管理可能**
    - テキストベースのスライドなので、バージョン管理と相性良し:point_up:
    - ソースはGitHubへアップ
- **スライドをホスティングし、Web上に公開**
    - せっかくなので公開しましょう！
- **無料**:v::v::v:
    - ありがとうGitHub Pages！

## 作成手順
では、ここからは実際にどのような手順でスライドを作成＆公開するか、について述べます。

私の作業環境はMacですが、その他のOSでも基本的には同様の手順で作成できると思います！

### 1. ディレクトリ作成
まずは、スライドを作成するディレクトリを作成します。

今回は `MySlides` ディレクトリを作成して進めていきます。

```bash:お好きなディレクトリを作成ください
$ mkdir ~/Documents/tmp/MySlides

$ cd ~/Documents/tmp/MySlides
```

### 2. reveal.js インストール
`reveal.js` をインストールします。

インストレーションページの手順に従います。

https://revealjs.com/installation/

① Node.js (10.0.0 or later) をインストール

② reveal.js リポジトリをクローン
```bash
$ git clone https://github.com/hakimel/reveal.js.git
```

③　ディレクトリ移動 & npm インストール
```bash
$ cd reveal.js && npm i
```

④ 動作確認
```bash
$ npm start
```
 http://localhost:8000 を開き、下記のようなページが表示されることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/93bdb90f-eba3-8b86-1c00-53077a10c7b4.png)

これで、reveal.jsのインストールが終了しました。

### 3. reveal-md インストール
次に、Markdownを使用可能にするため、`reveal-md` をインストールします。

READMEにインストール手順が記載されています。

https://github.com/webpro/reveal-md

```bash:インストール
$ npm install -g reveal-md
```

では、動作確認です。

`~/Documents/tmp/MySlides/md` ディレクトリを作成 ＆ 移動します。

```bash
$ mkdir ~/Documents/tmp/MySlides/md

$ cd ~/Documents/tmp/MySlides/md
```

簡単なMarkdownファイルを作成します。

```bash:~/Documents/tmp/MySlides/md
$ vi sample.md
```
`sample.md`の中身は、仮に以下のようにしてみます。
```markdown:sample.md
# Hello World!
```

では、`MySlides`ディレクトリで下記コマンドを実行してみましょう！

```bash:~/Documents/tmp/MySlides
$ reveal-md md -w
```

このコマンドは、`md`ディレクトリ以下のファイルをスライドとして表示し、ホットリロードを実行してくれるコマンドです。

ブラウザが立ち上がり、「sample.md」のリンクをクリックすると・・・
![Jan-20-2023 20-36-45.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/0de3c278-b48f-d635-57fe-fb70528e6349.gif)

`HELLO WORLD!`と表示されればOKです！

（「Hello World!」が大文字に変換されてます）

最後に、HTMLを出力します。

```bash:~/Documents/tmp/MySlides
reveal-md md --static docs
```

このコマンドは、`md`ディレクトリ以下のファイルを`docs`ディレクトリにHTMLなどの静的ファイルとして出力するコマンドです。

最終的には、この`docs`ディレクトリをホスティングして公開することになります。

現在のディレクトリ構成は以下のようになっています。

```bash
MySlides ) tree -L 2
.
├── docs
│   ├── css
│   ├── dist
│   ├── favicon.ico
│   ├── index.html
│   ├── plugin
│   └── sample.html
├── md
│   └── sample.md
└── reveal.js
    ├── LICENSE
    ├── README.md
    ├── css
    ├── demo.html
    ├── dist
    ├── examples
    ├── gulpfile.js
    ├── index.html
    ├── js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── plugin
    └── test
```

### 4.スライド作成
ではここからはスライドの中身を作成していきます。

今回は、3.で作成した`sample.md`を以下の内容に更新します。

```markdown:sample.md
---
title: 勉強会の資料
theme: beige
slideNumber: true
---
<style type="text/css"> .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { text-transform: none; text-align: left;}
.reveal p {line-height: initial; text-align: left;}.text-center { text-align: center !important; } li {font-size: 0.9em; line-height: initial;} .reveal small {line-height: 2.3em}
.reveal pre {width: 100%} .reveal.slides{width: 100%}
</style>

<h1 class="text-center">勉強会の資料</h1>
2023年1月20日
---
<section data-auto-animate>

## 目的

</section>
<section data-auto-animate>

## 目的

この勉強会は、以下の目的で実施しています。

（以下略）
</section>

---

```

ホットリロードに対応しているので、ファイルを保存するとすぐにブラウザ上に反映されます。

![Jan-20-2023 20-54-31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/e627893d-ede3-2f51-d0b5-0fd12483111c.gif)

操作方法は、キーボードの矢印キーで行えます。

アニメーションは、`<section data-auto-animate></section>`タグで要素を囲むことで実装できます。

例えば下記のように記述できます。

```markdown:sample.js
---
<section data-auto-animate>

## 目的

</section>
<section data-auto-animate>

## 目的

この勉強会は、以下の目的で実施しています。

（以下略）
</section>

---
```

同一ページの`<section data-auto-animate></section>`タグの要素同士の**差分**に対して、`reveal.js`がいい感じにアニメーションをつけてくれます！

ページ区切りは`---`です。

スライド全体のテーマも、`black`や`white`など、色々と選べます。

https://revealjs.com/themes/

同じ内容でも、ガラッと雰囲気が変わるので楽しいです！

↓brack
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/0e1ffb1b-c007-b4ca-47c9-1944ed5cddaa.png)

↓sky
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/7f29a420-83b5-358d-0f1f-c876838386c9.png)

Markdownなので、コードブロックもきれいに表示できます。

```php:sample.md
<?php
foreach ($array as $key => $value){
    echo $key, ':', $value;
}
?>
```
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/3ab3c544-f0f7-1410-e459-8ad52a34b0bf.png)

`reveal.js`には、そのほかにもいろいろな機能があるので、ドキュメントをご参照ください。

https://revealjs.com/

:::note info
内容を作成し終えたら、静的ファイルを作成します。
```bash:~/Documents/tmp/MySlides
reveal-md md --static docs
```
:::

参考までに、私が実際に作成したスライドはこちらです。

https://github.com/Tatsurou-Yajima/Head-first-for-study-meeting

### 5. GitHub PagesでWeb上に公開

では最後に、スライドを`GitHub Pages`で公開しましょう！

https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages

手順は以下の通りです。

#### ① リポジトリ作成
GitHubにログインし、新たにリポジトリを作成します。

https://docs.github.com/ja/get-started/quickstart/create-a-repo

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/52bcdafc-a56b-2074-30dd-1fc0c1ee168e.png)

#### ② ①をローカルリポジトリに登録
通常通り、Gitをセットアップします。

```bash:~/Documents/tmp/MySlides
$ git init
$ git remote add origin リモートリポジトリURL
```

#### ③ リモートリポジトリにプッシュ
作成したソースファイル群をプッシュします。

今回は、手順の簡略化のために直接`main`ブランチにプッシュしてしまいます。

```bash::~/Documents/tmp/MySlides
$ git add .
$ git push origin main
```

#### ④ Github Pagesをセッティング
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/80ee8075-c22f-c507-a108-2558b81fb250.png)

`main`ブランチの`docs`以下をホスティングする、という設定にします。

デプロイが終わり次第`Your site is live at ...` のURLへアクセスすると、作成したスライドが表示されているはずです！

## おわりに
今回は、Markdown + reveal.js + GitHub Pages でバージョン管理可能なスライドを作成 & 公開する手順をご紹介しました。

シンプルなスライドであれば簡単に作成でき、公開までできるので、非常に重宝しています！

みなさまもぜひお試しください！

パワポだとレイアウトなどを決めるのが大変で、手間がかかると感じていましたが、今回の構成であればテキストベースで作成できるので、見た目ではなく中身に集中できるのが嬉しいです。

reveal.js は機能が多く、私自身もまだまだ勉強中です。

何か便利な使い方などありましたら、コメントで教えてください！

以上です:raising_hand: