Faster and Faster

技術的な記事、日々の学習メモ、思うことなど。ブログタイトルはその時の思いを反映。

reveal.jsを使ってみる

社内勉強会用の資料をつくらなかやなとおもっててプレゼンツールを探してみた。

PPTでやるのも…だし、Keynote使おうと思ったけどMacはないしでJavaScriptで何かできないかなと思って探してみた。

reveal.jsを見つけたので実際に作成する前に下調べをした時のメモを公開。

Contents

reveal.jsとは

HTMLでかっこいいスライドが作れるフレームワーク。 ぐいんぐいん動いてみ見た目もよい。

インストール

Basic Setup

簡単な方法としては、 Basic Setup を参照して、https://github.com/hakimel/reveal.js/releasesから最新版をダウンロードしてindex.htmlを編集する。

Full Setup

reveal.jsのフル機能を使いたい場合はこちらを使う。外部のmarkdown を取り込みたい場合などはFullSetupが必要。 Full Setupを参照して必要なnode.js, Gruntをインストールする。 github から clone する。

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

スライドを作成する

基本的にはindex.htmlを眺めているとざっくりした書き方はわかってくる。 スライドの作成方法としては次の2つがある。

  • HTML
  • Markdown

markdownを直接書く方法、外部ファイルのmarkdownファイルの読み込みできる。 ここではhtml, markdown の2つで、スライド作成に必要になるであろう、画像埋め込み、リストについてメモをしておく。 reveal.jsの特徴としてスライドを一次元的なものではなく2次元的にも作成できる(nested vertical slide)ものがある。

HTML

<section> タグで一枚のスライドになる。

1
2
3
4
5
6
<section>
    スライド1
</section>
<section>
    スライド2
</section>

nested vertical slide の作成方法としては <section> タグ内に <section> タグをネストすることで実現できる。

1
2
3
4
5
6
7
8
9
10
11
12
<section>
    スライド1
    <section>
    スライド1-1
    </section>
    <section>
    スライド1-2
    </section>
<section>
<section>
    スライド2
</section>

画像、リスト

HTMLで記述する。

画像

画像であれば <img src="xxx"></img>

リスト

<ul><li></li></ul> を使用する。

Markdown

htmlのなかにもMarkdownはかけるが、外部ファイルのMarkdownも読み込める。 スライドだけではなくて配布資料としても使いたいのでMarkdownを埋め込めるのはとてもいい機能だと思える。 ただし、外部Markdownを使うには Full Setup を実行し、grunt serve を実行する必要がある。

外部のMarkdown を読み込む場合

外部ファイルとして用意したexample.mdを読み込む場合 スライドのセパレータとnested vertical slideのセパレータを設定。

  • data-separator: スライドのセパレーター
  • data-vertical: nested vertical slide のセパレーター
1
<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>

HTML内にMarkdown を書く場合

以下のように記述し、section内にMarkdownで書く。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<section data-markdown>
<script type="text/template">
    ## Markdown support

    For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).


    <section data-markdown>
      ## Markdown support

      For those of you who like that sort of thing.
      Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
    </section>

</script>
</section>

画像、リスト

Markdownの記法で書ける。

画像

![Alt Text](path/to/img) ただし、画像サイズの指定ができない。指定したい場合はHTMLのimgタグを使用する。

リスト

以下のとおり

1
2
3
- ABC
- DEF
- GHI

その他

画面遷移の方法、背景色の変更などはダウンロードしたディレクトリのindex.htmlをみることで理解できると思う。1

まとめ

この記事ではreveal.jsでスライドを作成する前におそらく使うであろう機能、セットアップ時のメモを紹介した。

  1. 記事に書いても本当にindex.htmlと同じことしか書けない…

Comments