HTML版スライドのライブラリ、Bespoke.jsをさわってみた

前回のエントリでHTML版スライドをつくるためのフレームワーク一覧のリンクを貼って試してみたいなんて書いたので、そのうちの１つ"Bespoke.js"というのをさわってみた。

markdalgleish/bespoke.js · GitHub

まあREADME.mdに書いてあることちょこっとやってみただけですが。

まずどんなものがつくれるのかをdemoでみてみる。完成度としては十分だと感じた。

https://github.com/markdalgleish/bespoke.js#demo

さて、さっそく使ってみよう。

https://github.com/markdalgleish/bespoke.js#getting-started

"The old fashioned way"というのはさすがに使いたくなかったので無視。

こちらにはさらっと書いてあるが、まず"Yeoman"というものを知らなかったので調べてみる。自分はこのサイトわかりやすかったので参考にした。

Yeoman入門(第一部、yoを使う) - from scratch

Yeomanは"Grunt"と"Bower"と"yo"の３つを引っくるめたもののことのようで、yoというのは一言でいうと"雛形を生成するツール"のようです。

なるほど、まず雛形を生成してから使ってくださいねということらしいので、Githubに書かれている通りにやってみる。

$ npm install -g yo generator-bespoke
$ mkdir my-presentation && cd $_
$ yo bespoke

すると以下のような対話形式の質問が続くので、それに答える形で最適な雛形が生成されます。

Thanks for choosing Bespoke.js for your presentation! :)   -@markdalgleish

[?] What is the title of your presentation? test
[?] Would you like bullet list support? Yes
[?] Would you like responsive slide scaling? Yes
[?] Would you like hash routing support? No
[?] Would you like an animated progress bar? Yes
[?] Would you like slide-specific deck styles? Yes
[?] Would you like syntax highlighting? Yes

するとファイル一式が生成されていると思います。
srcディレクリ以下に"index.jade"だったり"main.styl"がありますが、"Gruntfile.js"があることからわかる通り、Gruntでビルドしてあげる必要があるようですね。

jadeとstylusについては以下
Jade - Template Engine
Stylus

$ grunt

これでpublicディレクトリが生成されたと思います。
public配下の"index.html"をブラウザで表示してみると、スライドの雛形が出来上がっている！

Bespoke.jsについてのエントリのつもりでしたが、どちらかというとYeomanとの出会いのほうが大きかったかもしれません。

とりあえず次の社内勉強会の発表はこれでいこう。