Posted at

【個人メモ】bespoke.jsを使ってプレゼン資料を作成する

More than 5 years have passed since last update.


なんだこのプレゼンは?

と思ったプレゼンをネット上で見かけた。

スクリーンショット 2014-03-28 10.45.13.png

Build Warsへのリンク

JavaScriptのプロダクトをうまい具合にビルドするためのツール、

Gruntglupを比較したプレゼンだ。

gifアニメが多用されてるし、オサレでカッコイイ。

何使ってこのプレゼン作ってるんだ!?と思って調べてみたら、

このプレゼンの作者が自分で作っていた。

bespoke.jsというアプリだった。


bespoke.js

bespoke.jsというプレゼンアプリを早速使ってみたい。

セットアップや、プレゼンのスケルトン作成って

めんどくさいのかなと思ったんだけど、yeomanを利用して

テンプレを作成する形になってて、

プレゼン作成準備に必要な手間は少ししかなかった。


bespoke.jsを使うまで

bespoke.jsをセットアップするのに必要なツールは以下の通り。

Mac OS Xを使っているのであれば、

homebrewをインストールしてれば以下の流れで

bespokeを使う準備は終わる。

> brew install node

> npm install -g yo
> npm install -g generator-bespoke
> mkdir presentation-of-newbie
> cd presentation-of-newbie
> yo bespoke

実行すると、プレゼンのタイトルなどを

cliで問われるので、適当に答えていく。

スクリーンショット 2014-03-28 10.59.21.png


出来上がったプレゼンを見てみよう

grunt server を実行すれば、確認できる。

スクリーンショット 2014-03-28 11.02.49.png


デフォルトの内容を編集していこう

自動生成されたテンプレートにある

src/index.jade ファイルを弄っていけば良い。

例えば、以下のようにする。

スクリーンショット 2014-03-28 11.04.23.png

grunt server を実行したままにしていれば、

ホットリロード(!)が有効になってるので、

ブラウザ上でリロード動作が勝手に行われる。

素晴らしい。

スクリーンショット 2014-03-28 11.06.02.png


github pagesでの公開

github pagesへの公開にも対応している。

githubにリポジトリを登録して、

git initして、git add .して、

git push origin master して、

その後にgrunt deploy を実行しよう。

gh-pagesリポジトリに

作成したプレゼンがpushされていく。

試しに作成したプレゼンはこちら。

http://substanz.github.io/presentation-of-newbie

bespoke.jsヤバイ。


実際に使ってみた

先日行われた技術系イベントでLTするときに使ってみた。

http://futoase.github.io/switch-from-chef-to-docker/


以前からbespoke.jsを紹介していたエントリ