More than 5 years have passed since last update.

Reveal.js | Yeoman + Reveal.js 構成について

Last updated at 2015-07-23Posted at 2014-09-03

Reveal.js | Yeoman + Reveal.js 構成について

概要

Yeoman + Reveal.js 構成について

Yeoman を利用することで、効率よく Reveal.js のスライドを開発することが可能です。
Yeoman を構成する各要素、 Yeoman と Reveal.js の連携についてまとめます。

Yeoman とは？

Web App開発の生産性を上げるワークフローを提供してくれるツールセット。
Generator , Package Manager, Build System から構成され、
代表的な組み合わせが、

Generator : Yo
Package Manager : Bower
Build System : Grunt

です。

Yo とは？

Google 社製の Generator 。
Rails の Scaffold や Generator に当たるツール。

Bower とは？

Twitter 社製の Package Manager 。
HTML, JavaScript, CSS のパッケージ管理を行う。

Grunt とは？

Build System 。
build , 静的解析, minify などのタスクを管理する。

Yo / Bower / Grunt のインストール

node.js , npm はインストール済みの想定。

$ npm install -g bower yo grunt-cli

$ yo --version
1.2.1
$ grunt --version
grunt-cli v0.1.13
$ bower --version
1.3.9

Reveal 用の Generator をインストール

$ npm install -g generator-reveal

Yeoman を利用して、 Reveal.jsのスライドを作成

$ mkdir yeomen_revealjs
$ cd yeomen_revealjs
$ yo reveal
# 対話形式で質問されるが、最初の質問のみ「Reveal.js slide dev with Yeoman」と入力し、
# 残りは全てデフォルトを選択

ひな形が生成されました

※1階層目だけ確認

$ tree -L 1 -a
.
┣ .bowerrc
┣ .editorconfig
┣ .gitignore
┣ .jshintrc
┣ .yo-rc.json
┣ bower.json
┣ Gruntfile.coffee
┣ js
┣ node_modules
┣ package.json
┣ slides
┗ templates

ライブラリのインストール

# ※git protocolが利用出来ない場合は、gitで下記設定を行っておく
$ git config --global url."https://".insteadOf git://

$ bower install
# => ./bower_components に各ライブラリがインストールされます

確認用サーバーの起動

$ grunt serve

各スライドのひな形をMarkdownで生成

$ yo reveal:slide "Generate" --markdown
     info Using Markdown.
     info Appending slides/generate.md to slides/list.json.
   create slides\generate.md
$ yo reveal:slide "Manage Package" --markdown
     info Using Markdown.
     info Appending slides/manage-package.md to slides/list.json.
   create slides\manage-package.md
$ yo reveal:slide "Build" --markdown
     info Using Markdown.
     info Appending slides/build.md to slides/list.json.
   create slides\build.md
$ grunt dist

各スライドを手動編集

下記の編集中は、 grunt serve を実行したままにしておけば、画面に最新状態が反映されます。

例： ./slides/index.md の編集


# Reveal.js slide dev with Yeoman

### Yeoman を使って  <!-- .element: class="fragment roll-in" -->
### Reveal.js のスライドを  <!-- .element: class="fragment roll-in" -->
### 楽々作成  <!-- .element: class="fragment roll-in" -->