LoginSignup
230

More than 5 years have passed since last update.

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

Posted at

なんだこのプレゼンは?

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

スクリーンショット 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されていく。

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

bespoke.jsヤバイ。

実際に使ってみた

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
230