Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
234
Help us understand the problem. What is going on with this article?
@futoase

【個人メモ】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されていく。

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

bespoke.jsヤバイ。

実際に使ってみた

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

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

234
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
futoase
Welcome to underground...

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
234
Help us understand the problem. What is going on with this article?