Reveal.jsとMarkdownでちょっとしたスライドを手軽に作る
JavaScriptを使ってプレゼンテーション用のスライドを作るためのライブラリは沢山ありますが、現在はReveal.jsが人気のようです。
今回はこのReveal.jsを少し改造して、Markdownでちょっとしたスライドを手軽に作る方法を紹介したいと思います。
Reveal.jsのMarkdown機能
Reveal.jsはJavaScript製のMarkdownパーサであるshowdown.jsとmarkdown.jsにより、Markdownによるスライドコンテンツ表記に対応しています。
Markdonwでスライドを書く場合、最も基本的な方法としては以下のようにマークアップします。
<section data-markdown>
<script type="text/template">
## ページタイトル１
本文
</script>
</section>
<section data-markdown>
<script type="text/template">
## ページタイトル２
本文
</script>
</section>
上記のとおり、ページ毎にsectionとscriptの二つのタグで囲う必要があるのが少々面倒です。
他に、plugin/markdown/example.htmlに記載の方法を使うと、以下のように書くこともできます。
<section data-markdown data-separator="^\n---\n$">
<script type="text/template">
## ページタイトル１
本文
---
## ページタイトル２
本文
</script>
</section>
こちらの方がだいぶすっきりしました。しかし、この方法だとなぜかHTMLタグが使えなくなってしまうようです。
Reveal.jsのMarkdown機能を応用
そこで、以下のような書き方ができるよう改造してみました。サンプルDemoスライドはこちら。
<script type="text/template" id="markdown_slides">
■ページタイトル１
本文
■ページタイトル２
本文
</script>
改造の内容は、Reveal.jsの初期化前に「■」の部分を置き換えてDOM要素を差し替えているだけです。(DOM要素の差し替えにjQueryを使っています)
<script src="js/jquery-1.9.1.min.js"></script>
<script>
var mkd_text = $("#markdown_slides").text();
mkd_text = mkd_text.replace(/^■/gm, "<\/script><\/section>\n<section data-markdown><script type='text/template'>\n## ");
mkd_text = mkd_text.replace(/^\n<\/script><\/section>/, "");
mkd_text += "\n<\/script><\/section>";
$("#markdown_slides").replaceWith(mkd_text);
</script>
各ページでタイトルが必須になるなどの制限はありますが、HTMLが使えるので順番に項目を表示するfragment機能などが普通に使えます。また、なにより読みやすくなることがポイントです。
fenced_code_blocks対応
Reveal.jsの改造ついでに、redcarpetなどで使えるfenced_code_blocksにも少し対応させてみました。
コードのシンタックスハイライト自動認識がおかしくなる場合に使えます。
シンタックス指定
``` ruby
# Ruby knows what you mean,
# even if you want to do math on an entire Array
cities = %w[London Oslo Paris Amsterdam Berlin]
visited = %w[Berlin Oslo]
puts "I still need " + "to visit the " + "following cities:", cities - visited
```
no-highlight指定
``` no-highlight
# Ruby knows what you mean,
# even if you want to do math on an entire Array
cities = %w[London Oslo Paris Amsterdam Berlin]
visited = %w[Berlin Oslo]
puts "I still need " + "to visit the " + "following cities:", cities - visited
```
改造の内容は、前述の置き換え処理に２行追加しただけです。
mkd_text = mkd_text.replace(/^``` (.+)\n/gm, "<pre><code class='$1'>");
mkd_text = mkd_text.replace(/^```$/gm, "<\/code><\/pre>");
改造後のソースやスライドの書き方の詳細は、サンプルDemoスライドのソースで確認して下さい。
Reveal.jsの日本語情報
- [JS]CSS3アニメーションを使った3Dのプレゼン用スライドショーツール -reveal.js | コリス
- オシャレなスライドショーを簡単に作れちゃう reveal.js の使い方を reveal.js を使って解説してみた. | TM Life
- reveal.jsで格好いいプレゼンを作ってみた - ZeBeVogue別館
おわりに
文中では「改造」と書きましたが、今回Reveal.jsのソース自体には手を加えていません。HTMLにscriptを書き足しているだけなので、簡単に試せると思います。
Reveal.jsはレガシーブラウザのサポートが弱く、IE8以下だとまともに動かないのでご注意下さい。
見出しを「■」でマークアップするMarkdownを、個人的には日本語Markdownと呼んでよく使っています。「■」は「ｓ」(全角ｓ)で辞書登録すると入力が簡単でお勧めです。
追記＠2013/03/03
WEB+DB PRESS編集部では「■」や「・」でマークアップする「inao」というテキストフォーマットを使っているらしいです。
