Node.js
Markdown
yeoman
reveal.js
プレゼンテーション

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

More than 3 years have passed since last update.


概要

社内の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を入手

さくっとやりたいので

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

http://localhost:8000

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


補足:pdf出力

slide shareにアップしたり

社内ファイルサーバに補完したり

Google Docsに補完したりしたい場合

pdf変換は便利。

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


感想


  • markdownで書くと、整形に時間が取られなくていいかも

  • CSSとか触ればオリジナリティある資料が出来そう!?

  • ↓↑で見せる資料は補足的な資料、基本は←→で見せる資料にしておけば、同じ資料でも時間に合わせた発表が可能!?


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

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

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


インストール

$ 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