Javascriptで書くプレゼン資料

OpenDataDay

今日はオープンデータデイということでデータ分析にチャレンジした結果を発表してきた。発表した内容に関してはまたいつか書き記したい。

使ったデータなどを可視化する際にD3.jsなどを利用した。実際にプレゼンするときそのまま載せたいと思いJavascriptでプレゼン資料が書けないかと思った。探してみるとreveal.jsという便利なものが見つかったので今回はそれの紹介をしたい。

reveal.js

簡単にいうとプレゼン資料を作るJSで比較的簡単に作ることができた。
まず、githubの方からreveal.jsをクローンする。

そのリポジトリの中身が以下のとおりである。

$ tree -d reveal.js
reveal.js/
├── css
│   ├── print
│   └── theme
│       ├── source
│       └── template
├── js
├── lib
│   ├── css
│   ├── font
│   └── js
├── plugin
│   ├── highlight
│   ├── leap
│   ├── markdown
│   ├── math
│   ├── multiplex
│   ├── notes
│   ├── notes-server
│   ├── postmessage
│   ├── print-pdf
│   ├── remotes
│   ├── search
│   └── zoom-js
└── test
    └── examples
        └── assets

この中のindex.htmlを編集していくのだがスライド一枚の内容を次のように記述していく。

<section>
プレゼンの内容
</section>

sectionの中身にはscriptも書け無事目的であるD3を使った図をのせることに成功した。
更に何よりうれしかったのがプレゼンをMarkdownで記述することができたことである。記述の仕方は次のとおりである。

<section data-markdown=""
            data-separator="^\n---$"
            data-separator-vertical="^\n>>>$">
        <script type="text/template">
        
　　　（内容）

        </script>
<section>

またスライドの移動の動きを変えることができ上の記述だと---横移動のスライド、>>>は縦移動するスライドを書くことができる。その他にもcssファイルをいじると違ったデザインのものを書くことができたり拡張性はあることが確認できた。
また機会があったら使ってみたい。てか使う！