プレゼンもmarkdownでね！reveal.jsで資料を作成してみた


# 概要

社内のLTで、発表まで時間あるし
パワポの資料作るの面倒だし
っていうか、MacにしたからOfficeないし
Google Appsでプレゼン資料作るのもいいけど
なんか他の方法で準備したいなー
showoff入れてみたけどreveal.jsのほうが見た目かっこよさそうだなー
的な話。

# 作った資料

github pagesにアップしました

http://imura81gt.github.io/201405-LT/#/
※元ネタはこちら：http://qiita.com/imura81gt/items/03e926d7e17352a3dcf4


# 参考URL

* [Reveal.js、Markdown、Githubでスライドを作成する。](http://qiita.com/budougumi0617/items/19b19019bbe01f86e251 "qiita")
* [REVEAL.JSを使ってみた](http://tmlife-storage.googlecode.com/svn/trunk/reveal.js-guide/index.html#/)
* [公式](http://lab.hakim.se/reveal-js/)
* [公式github : markdownについて](https://github.com/hakimel/reveal.js#markdown)
* [公式github : pdf出力について](https://github.com/hakimel/reveal.js#pdf-export)



# reveal.jsを入手

さくっとやりたいので

https://github.com/hakimel/reveal.js#basic-setup を参照。

https://github.com/hakimel/reveal.js
の「Download ZIP」からファイルをダウンロードして
任意のディレクトリに展開

`reveal.js-master/`を`201405-LT/`にリネームした
以下のディレクトリ構成で進める。


```:ディレクトリ構成
$ tree -d 201405-LT/
201405-LT/
├── 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

26 directories
$ 
```



# 下準備

## サンプルスライドの編集

index.htmlを編集する。
[参考](https://github.com/hakimel/reveal.js#external-markdown)

### サンプルの削除

44行目より後ろ

```
 41     <div class="reveal">
 42 
 43       <!-- Any section element inside of this container is displayed as a slide -->
 44       <div class="slides">
```

から
356行目より前

```
356       </div>
357 
358     </div>
359 
```

のサンプルスライドの記述を削除する。


こんなかんじになる

```
 41     <div class="reveal">
 42 
 43       <!-- Any section element inside of this container is displayed as a slide -->
 44       <div class="slides">
 45 
 46       </div>
 47 
 48     </div>

```

### markdown形式の追加

先ほどの45行目に`section`を追加する


```
 41     <div class="reveal">
 42 
 43       <!-- Any section element inside of this container is displayed as a slide -->
 44       <div class="slides">
 45 
 46 <section data-markdown="slide.md"  
 47          data-separator="^---"  
 48          data-vertical="^--"  
 49          data-notes="^Note:"  
 50          data-charset="utf-8">
 51 </section>
 52 
 53       </div>
 54 
 55     </div>
```

### markdownで書いていく

slide.mdにmarkdownで書いていくと出来上がり！
index.htmlをブラウザで開くと、プレゼンテーションが出来る。

* `---`で区切ると`←``→`に移動するスライド
* `--`で区切ると`↑``↓`に移動するスライド


# 補足:ローカル環境にwebサーバを立てて実行する（Full setup）

```
$ cd ~/LT
$ brew install node.js
$ sudo npm install -g grunt-cli
$ git clone https://github.com/hakimel/reveal.js.git
$ cd reveal.js
$ sudo npm install
$ grunt serve
```

http://localhost:8000

にアクセスするとプレゼン資料が表示される。

# 補足:pdf出力

slide shareにアップしたり
社内ファイルサーバに補完したり
Google Docsに補完したりしたい場合
pdf変換は便利。

http://localhost:8000/?print-pdf#/


# 感想

* markdownで書くと、整形に時間が取られなくていいかも
* CSSとか触ればオリジナリティある資料が出来そう！？
* ↓↑で見せる資料は補足的な資料、基本は←→で見せる資料にしておけば、同じ資料でも時間に合わせた発表が可能！？

# おや？こっちのほうが楽かな？

yeoman使ったら楽なのかな？ 〜yeomanっていろいろできるのね〜

https://github.com/slara/generator-reveal

```shell-session:インストール
$ npm install -g generator-reveal
```

でインストールして

yo revealでプロジェクト作成

```shell-session:プロジェクト作成
$ yo reveal

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

This includes the amazing Reveal.js Framework
and a Grunt file for your presentation pleasure.

[?] What are you going to talk about? Reveal.js and Yeoman is Awesomeness
[?] What version should we put in the package.json file? 0.0.0
[?] Do you want to use SASS to create a custom theme? This requires you to have Ruby and Sass installed. No
[?] Do you want to deploy your presentation to Github Pages? This requires an empty Github repository. Yes
[?] What is your Github username? imura81gt
[?] What is the Github repository name? LT-06
```

Github pages の準備もしてくれる！（github pages用のリポジトリを自動で作ってくれるわけではない）

```shell-session:markdownで作成
$ yo reveal:slide "Slide Title" --markdown
```

でmarkdownの設定を準備してくれる

* slideのlistが書かれたjsonの設定（slides/list.json）
* slides/配下にmarkdown用ファイルの準備（slides/slide-title.md）


grunt serverでwebサーバを起動すると
http://localhost:9000/
でスライドが表示される

```
$ grunt server
```