impress.jsとsocket.ioでimpress.ioっていうプレゼンツール作った。

f:id:yosuke_furukawa:20130503130338p:plain

埋め込みスライド、矢印キーで操作できるようにしました。：

2013/05/11 追記：スライドページを修正。
2013/05/11 追記：Gruntコマンドを修正。

発表資料作る時、いつも何で作るか迷ってたんですが、悩んでいる時に markdown2impress という素晴らしいツール(yoshiki/markdown2impress · GitHub)に出会い、これを基にimpress.jsとsocket.ioを使ったプレゼン同期ツール、impress.ioを作りました。

機能

プレゼンページ同期
プレゼンを変更し、GitHubにcommitしたら、その場でプレゼンを見ている全クライアントをリフレッシュする
Markdownを記述し、Impress.jsに変換

といった機能があります。

Super quick demo

何はともあれ、デモ。
プレゼンページはgithub.io上にアップしてあります。
Impress.io = socket.io + impress.js

このままでは、単なる聴講者なので、ページは同期されません。
ページ同期をするには、発表者になる必要があります。
認証ページ

ユーザーとパスワードは両方共 "admin" です。

認証後、同じブラウザでもう一度プレゼンページに行くと発表者になります。発表者が見ているページを同期するので、もう一つ別なブラウザを起動させてプレゼンページを見れば、ページが同期していることがわかると思います。

ちょっとした機能

ページ同期をする/しないを選択できる。

f:id:yosuke_furukawa:20130503132554p:plain

こういうページ同期系のプレゼンを観る時の問題の1つとして、じっくり読みたいページがあっても発表者が先に先に進んでしまい、読み切れない場合があると思います。
その時は左下のボタンを押し、Disconnect状態にすれば、同期されなくなります。

impress.ioを使ってプレゼンを書きたい時

cpanmとgruntとforeverが必要です。ひとまずそれをインストールしてください。

cpanmインストール

$ curl -L http://cpanmin.us | perl - --sudo App::cpanminus

gruntインストール

$ npm install grunt-cli -g

foreverインストール

$ npm install forever -g

その後、以下のコマンドを実行すれば、環境を整えることができます。

$ git clone git://github.com/yosuke-furukawa/impress.io.git
$ cd impress.io
$ git submodule init
$ git submodule update
$ npm install
$ grunt build

とりあえず資料を出力する

$ grunt impress:create --file=README.md // or write your markdown
$ open index.html

上のコマンドでOK。

資料を推敲する度に上のコマンドを実行するのが面倒な場合は、以下のコマンドを実行すれば、fileオプションに指定したmarkdownを更新する度にindex.htmlが再作成されます。

$ grunt impress:watch --file=README.md // or write your markdown

Socket.ioを起動して、同期したい時

$ grunt create:user --user=<username> --pass=<password>
$ grunt server:start

これでユーザーの作成を行い、サーバーが起動します。
デフォルトでは、 http://localhost:3000/login に行けば、発表者のログインページに行きます。
コマンドで指定したユーザー名とパスワードをログインに使用してください。

またサーバーを止める時は

$ grunt server:stop

です。

サーバーを起動していれば、先程のimpress:watchと併用して、markdownを更新するだけでブラウザのページに反映されます。

というわけで

要望等があればGithubのページにissueを上げてください。

pull reqもお待ちしています。