WindowsでYeoman + Reveal.js

かっこいいプレゼン作るメモ。

generator-revealはMacでも動作するので環境に合わせて読み替えてください

環境

• Windows7 (32bit)
• Chrome32
• IE11

準備

いろいろインストール。

Git

Bowerを動かすのに必要。

ここからダウンロード。
PATH変数にC:¥Program Files¥Git¥binを追加しておく。

C:¥> git --version
git version 1.8.5.2.msysgit.0

node.js

Yeoman/Grunt/Bowerを動かしたり、npmでインストールするのに必要。

ここからダウンロード。

C:¥> node -v
v0.10.25

C:¥> npm -v
1.3.24

Yeoman/Grunt/Bower

• Yeoman ... 必要なものを集めてくれるおっさん
• Grunt ... 変更ファイルの監視・タスクラナー
• Bower ... パッケージ管理(JavaScriptやCSSとか取ってくる)

C:¥> npm install -g bower grunt-cli yo

C:¥> yo --version
1.1.2

C:¥> grunt --version
grunt-cli v0.1.13
grunt v0.4.2

C:¥> bower --version
1.2.8

Reveal.js

かっこいいプレゼンフレームワーク。
Yeomanのジェネレータ(generator-reveal)が便利。

C:¥> npm install -g generator-reveal

プロジェクト作成

フォルダを準備。

C:¥> mkdir ¥path¥to¥project¥dir¥
C:¥> cd ¥path¥to¥project¥dir¥

Yeomanに必要なファイルを集めてもらう。

C:¥path¥to¥project¥dir¥> yo reveal

対話形式で質問に回答。とりあえず全部リターンでOK。

Gitが入っていないとBowerが動作せずエラーになるので注意。Reveal.jsのないプロジェクトが出来上がってしまう。
エラーが出てたら設定を確認してBowerを再実行。

C:¥path¥to¥project¥dir¥> bower install

Gruntでサーバ起動、変更ファイルの監視開始。

C:¥path¥to¥project¥dir¥> grunt server
Running "buildIndex" task

Running "connect:livereload" (connect) task
Start connect web server on http://localhost:9000

Running "watch" task
Waiting...OK

ブラウザが起動してページが表示されれば完了。

スライドを追加

コマンドで雛形作成。

C:¥path¥to¥project¥dir¥> yo reveal:slide "slide title"

Gruntが監視してるので、この時点でブラウザに反映されている。
reveal:slideコマンドで日本語を使うとファイル名が空で生成されてしまうので、必ずアルファベットを使いましょう。

• slides/slide-title.htmlが作成される
• slides/list.jsonに作成したファイル名が追加される

markdownで書きたいなら--markdownを指定。

C:¥path¥to¥project¥dir¥> yo reveal:slide "slide title2" --markdown

• slides/slide-title2.mdが作成される

縦スライド

slides/list.jsonを編集。

slides/list.json

[
    "index.md",
    "slide-title.html",
    "slide-title2.md"
]

縦にしたいスライドを配列に入れる。

slides/list.json

[
    "index.md",
    [
        "slide-title.html",
        "slide-title2.md"
    ]
]

十字キーの上下で移動可能に。

テーマの変更

bower_components/reveal.js/css/themeに入っているテーマに変更。

デフォルト。

templates/_index.html

    <link rel="stylesheet" href="bower_components/reveal.js/css/theme/default.css" id="theme">

月。

templates/_index.html

    <link rel="stylesheet" href="bower_components/reveal.js/css/theme/moon.css" id="theme">

空。

templates/_index.html

    <link rel="stylesheet" href="bower_components/reveal.js/css/theme/sky.css" id="theme">

などなど。

エクスポート

出来上がったプロジェクトをデプロイ。

HTML

Gruntでビルド。

C:¥path¥to¥project¥dir¥> grunt dist

distフォルダに出力されるファイル全部をサーバへコピー。

.mdも拡張子そのままなのでサーバ設定を確認すること
IISの場合"MIMEの種類"に.mdをtext/plainやtext/x-markdownとして追加

PDF

ChromeでURL末尾に?print-pdfをつけて開く。印刷->PDF保存。

C:¥> "C:¥Program Files¥Google¥Chrome¥Application¥chrome.exe" http://localhost:9000?print-pdf