reveal.js について

HTML プレゼンテーションフレームワークです。
つまり、PowerPoint で作るようなプレゼンテーションを HTML で簡単に作成するためのものです。

大まかな文書テンプレート的な枠組みがあるので、スライドに当たる部分を HTML とか markdown で書けるようになっています。

なんで、reveal.js？

PowerPoint が要らない
PowerPoint が使いこなせない
あまり凝らなくても、それなりのプレゼンが簡単に作成できる
chrome で PDF に変換できる

「PowerPoint が慣れてるし、凝ったの簡単に作れるし、、」という方には必要はありません。

reveal.js 本家のデモページ

百聞は一見にしかずということで、まずはひと通り見てみましょう。

reveal.js - The HTML Presentation Framework
http://lab.hakim.se/reveal-js/

reveal.js の利用法

いろんな方が紹介していますが、一番いいのは本家のページを読むことです。
かなり平易に説明しているので、わかりやすいです。

reveal.js 本家のページを上から順にざっと読んでみましょう。
その上で、前述のデモページのソースを見れば、実際に reveal.js をどう使っているのかがよくわかります。

hakimel/reveal.js · GitHub
https://github.com/hakimel/reveal.js/

操作方法

Reveal.js | デフォルトのキー操作 - Qiita
http://qiita.com/tbpgr/items/d345e35e6ea700f0e0a9

凝った？サンプル達

こんなのもあるよ的なものなので、これは時間があるときにどうぞ。

Example Presentations · hakimel/reveal.js Wiki · GitHub
https://github.com/hakimel/reveal.js/wiki/Example-Presentations

markdown について

markdown とは？

プレーンテキストで HTML を表現するための記法。
GitHub でも README.md として、説明を書くために利用されています。
もちろん、Qiita でも使われてますね。
利用サイトにおいて若干の方言的な表記法もありますが、基本はとてもシンプルです。

Markdown記法 · 日本語Markdownユーザー会
http://www.markdown.jp/syntax/

Markdown - Wikipedia
http://ja.wikipedia.org/wiki/Markdown

Markdown Tables generator - TablesGenerator.com
http://www.tablesgenerator.com/markdown_tables

せっかくなので、reveal.js の README.md を raw 表示（プレーンテキスト）で見てはどうでしょうか。
https://raw.githubusercontent.com/hakimel/reveal.js/master/README.md

markdown の練習

少し練習してみたければ、以下のサイトなどで試すことができます。

Markdown Edit
http://georgeosddev.github.io/markdown-edit/

Qiita で記事を投稿したり、GitHub でコードを公開するなどして、慣れていくのが１番だとは思います。まだの方はこの機会に、reveal.js + markdown で慣れましょう。

オフライン編集用のツールもいろいろあるようですが、Qiita 投稿用の kobito はよくできてると思います。

なんで markdown？

HTML の知識があまり無くても、テキストベースでガツガツ書ける
構成管理などで使った時に更新差分がわかりやすい
そもそもスクリーンに投影する用途であれば細かい図表とかを使うべきではないので、シンプルな markdown があっていると思う

reveal.js と markdown を組み合わせて使う

以下のサイトに、とてもわかりやすい説明があります。
ひと通り見たら、やはりソースを見て reveal.js をどう使っているのか確認すると理解が深まります。
そもそもこの文書で説明したいことの大半は、このサイトで説明されています。

reveal.js で Markdown
http://flatbird.github.io/revealjs-markdown/

使ってみよう

インストール

本家のページからダウンロードできます。

Basic setup
Full setup

の２つがあります。

Full setup ですべての機能を使うことができます。
とりあえずやってみたいという方は、"Basic setup" でいいです。

これを書いている時点で最新が、3.0.0 です。
Downloads から "Source code(zip)" をダウンロードします。

まず最初に

HTML の初期設定

解凍したら index.html を編集するだけです。
まず、最低でも以下を変えておきましょう。

/html@lang
/html/head/meta[@name="author"]
/html/head/meta[@name="description"]
/html/head/title

reveal.jsでmarkdownを使う方法の備忘録 | 黒ぶちメガネのblog
http://www.kurobuti.com/blog/?p=7340

reveal.js の初期設定

reveal.js 自体の初期設定については、以下が参考になります。

Reveal.js | 初期設定 - Qiita
http://qiita.com/tbpgr/items/fe0a1a7ca91cbb59eb99

初期のテーマは以下のように black です。

<link rel="stylesheet" href="css/theme/black.css" id="theme"/>

少し前のバージョンでは以下のようになっていました。
他にもいろいろあるので、お好きな指定でどうぞ。

<link rel="stylesheet" href="css/theme/league.css" id="theme"/>

スライド編集

markdown ファイルを本体の HTML から切り離して外部ファイルとして参照するためには、作ったコンテンツを Web サーバー上で動かさなければなりません。
オフラインで使えないとダメという方は、index.html 内に直接 markdown を書いていきます。

ここでは section タグ内に markdown を書いていきます。

スライド内容をmarkdownで記述するreveal.js - jnobuyukiのブログ
http://webbeginner.hatenablog.com/entry/2014/08/29/144316

例えば、こんな感じ。

<body>
  <div class="reveal">
    <div class="slides">
      <section data-markdown=""
            data-separator="^\n---$"
            data-separator-vertical="^\n>>>$">
        <script type="text/template">

## markdown でプレゼン

山田 太郎

---
### ページ１
- - -
上の破線のようなものは水平線
こんな感じでガシガシ書いていきます

**次は２ページ目**

<aside class="notes">
  発表者が見るノート   
  伝えたいことをメモ  
</aside>


---
### ページ２
- - -
1. 数字付きのリスト
1. 番号はどうでもいい

>>>
### ページ２−１
ページ２から垂直に下に遷移する  
垂直遷移には補助的な説明を

- 普通のリスト
- 簡潔にね

>>>
### ページ２−２
どんどん書いていく


        </script>
      </section>
      <!-- 最後のスライドを画像だけにしてみる -->
      <section data-background="image/last.png">
      </section>
    </div>
  </div>

markdown で表現できないこと

markdown で表現できないことは、HTML タグを使う必要があります。

途中で色や大きさを変える例

全体的に変えるなら css で設定しますが、部分的にということで直接タグを書きます。

これは<span style="color:red">赤色</span>です
これは<span style="font-size:small">小さい</span>です

エフェクト

キーを押すごとに表示するなどは、class を指定しないといけないのでタグが必要になります。

1. <p class="fragment">これが（[内部リンク](#/4/1)）</p>
1. <p class="fragment">順に</p>
1. <p class="fragment">表示</p>

イベントハンドラ

イベントハンドラを利用できます。
例えば Reveal.initialize 直後あたりに、以下のようなイベントハンドラを書いて、
最後のスライドだけコンテンツの属性とか、レイヤーの表示／非表示を切り替えるとか。

Reveal.addEventListener( 'slidechanged', function( event ) {
  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
  if ( Reveal.isLastSlide() ) {
    // 最後のスライドで何かする
  }
  else {
    // 最後以外のスライドで何かする
  }
} );

スライドの発表者ノート

ノートは以下のように書きます。

<aside class="notes">
  発表者が見るノート   
  伝えたいことをメモ  
</aside>

data-separator-notes を指定しても書けますので、そちらを使ったほうがよいかも。
separator が多くなりすぎて、スライド｜垂直スライド｜ノートの区分がわかりづらい場合は、例えばノートだけはタグを併用するとかのほうが、区切りがはっきりする場合もあると思います。
お好みでどうぞ。

つまづいたこと

data-vertical が効かない？

リリースノートに書かれていますが、3.0.0 から仕様が変わり、
"data-separator-vertical" とのことです。

reveal.js の紹介サイトには古い記法が多いようですので、気をつけましょう！

Markdown separator attributes renamed from data-notes and data-vertical to data-separator-notes and data-separator-vertical.

<section data-markdown="" data-separator-vertical="^\n>>>$">

NG（古い記法）

<section data-markdown="" data-vertical ="^\n>>>$">

表が常に中央寄せになる不具合

既に修正がコミットされています。

Markdown table column alignment #1050 by fehmer · Pull Request #1149 · hakimel/reveal.js · GitHub
https://github.com/hakimel/reveal.js/pull/1149/files

PDF にすると、背景が黒になる

既知の問題のようです。
3.0.0 デフォルトの black テーマを使っている分にはいいのでしょうけれど、
それ以外だとダメダメです。

例えば、'beige' テーマを使っている場合、
PDF 化する際には、@data-background="#F5F5DC" のように、
テーマの色を明示的に指定するようにすれば、多少それっぽくはできます。

<body>
  <div class="reveal">
    <div class="slides">
      <section data-markdown="" @data-background="#F5F5DC"

参考になるサイト

ブログズミ: reveal.js + Markdown のちょっとしたメモ
http://srz-zumix.blogspot.jp/2014/09/revealjs-markdown.html

HTML タグを併用して、色を変える
スライドタイトルの英字が大文字にならないようにする

Reveal.js 文字列幅（折り返し位置）の変更 - jnobuyukiのブログ
http://webbeginner.hatenablog.com/entry/2014/07/08/005858

組み込みの css を直接変更して、レイアウト変更

How can I get left-justified paragraphs in reveal.js? - Stack Overflow
http://stackoverflow.com/questions/21019476/how-can-i-get-left-justified-paragraphs-in-reveal-js

標準で中央寄せになるのを左寄せにするには？

私は theme 指定後に、以下のような指定を追加指定しています。

<!-- 引用部分だけを左寄せにする -->
<style>
  .reveal .slides blockquote {
    text-align: left;
  }
</style>

reveal.js で markdown を使う（2015年3月版）