プレゼンも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でスライドを作成する。
• REVEAL.JSを使ってみた
• 公式
• 公式github : markdownについて
• 公式github : pdf出力について

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を編集する。
参考

サンプルの削除

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

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

補足:pdf出力

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

感想

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

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

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

インストール

$ npm install -g generator-reveal

でインストールして

yo revealでプロジェクト作成

プロジェクト作成

$ 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用のリポジトリを自動で作ってくれるわけではない）

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