Help us understand the problem. What is going on with this article?

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

More than 5 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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした