Go to Qiita Advent Calendar Top
LoginSignup
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Yajima_t(矢島 達朗)

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

Posted at

はじめに

本記事は、reveal.js と GitHub Pages を用いて、バージョン管理可能なスライドを作成し、公開する手順についてご紹介したものです。

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

↓画面イメージ
Jan-20-2023 19-50-48.gif

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

特徴

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

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

作成手順

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

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

1. ディレクトリ作成

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

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

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

$ cd ~/Documents/tmp/MySlides

2. reveal.js インストール

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

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

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

② reveal.js リポジトリをクローン

$ git clone https://github.com/hakimel/reveal.js.git

③　ディレクトリ移動 & npm インストール

$ cd reveal.js && npm i

④ 動作確認

$ npm start

http://localhost:8000 を開き、下記のようなページが表示されることを確認します。
image.png

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

3. reveal-md インストール

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

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

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

では、動作確認です。

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

$ mkdir ~/Documents/tmp/MySlides/md

$ cd ~/Documents/tmp/MySlides/md

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

~/Documents/tmp/MySlides/md
$ vi sample.md

sample.mdの中身は、仮に以下のようにしてみます。

sample.md
# Hello World!

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

~/Documents/tmp/MySlides
$ reveal-md md -w

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

ブラウザが立ち上がり、「sample.md」のリンクをクリックすると・・・
Jan-20-2023 20-36-45.gif

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

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

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

~/Documents/tmp/MySlides
reveal-md md --static docs

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

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

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

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を以下の内容に更新します。

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

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

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

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

sample.js
---
<section data-auto-animate>

## 目的

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

## 目的

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

（以下略）
</section>

---

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

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

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

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

↓brack
image.png

↓sky
image.png

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

sample.md
<?php
foreach ($array as $key => $value){
    echo $key, ':', $value;
}
?>

↓
image.png

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

内容を作成し終えたら、静的ファイルを作成します。

~/Documents/tmp/MySlides
reveal-md md --static docs

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

5. GitHub PagesでWeb上に公開

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

手順は以下の通りです。

① リポジトリ作成

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

image.png

② ①をローカルリポジトリに登録

通常通り、Gitをセットアップします。

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

③ リモートリポジトリにプッシュ

作成したソースファイル群をプッシュします。

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

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

④ Github Pagesをセッティング

image.png

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

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

おわりに

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

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

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

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

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

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

以上です:raising_hand:

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?