Reveal.jsとRemotes.ioのコンボがいけてる話

ども、小西です。
社内勉強会向けにGrunt超入門というスライドを作りました。

http://shunjikonishi.github.io/slides/grunt-introduction/index.html

URLを見るとわかると思いますがスライドの公開先はGitHub Pagesです。
スライドの中身のGruntについては既に良記事もたくさんあって、今さら感もあるので割とどうでも良いんですが、今回紹介したいのはこれを作成するのに使ったReveal.jsというWebプレゼンライブラリについてです。

これ、「パワポなんか頼まれたって触ってやらねー！」というツワモノの同僚が見つけて作成したものをパクってマークダウンだけ書き換えて作ったんですが、これがなかなかいけてます。(^^v

★ Reveal.js

僕は知りませんでしたが割と有名なライブラリのようです。
日本語でも紹介記事がけっこう見つかりますが、やっぱり一番わかりやすいのは本家のWebサイトでしょう。

http://lab.hakim.se/reveal-js/#/

Reveal.jsの紹介自体がReveal.jsで作られたスライドで紹介されています。
これ見ればだいたい何ができるかはわかると思います。

個人的に良いと思うのは

マークダウンだけでスライドが作れる
HTMLやJavaScriptとの組み合わせも可能
スタイルやレイアウトはCSSで調整可能
jsオンリーなのでGitHub.ioで公開可能
ローカルではGruntで起動するnode.jsのサーバでライブリロードで動作確認できる
PC上のスライドをスマホで操作できる

というあたりです。
一番驚いたのは最後のスマホ連携で、これは最近すっかりおなじみのWebSocketですよ。

PCでスライドを表示すると画面右にちょっと邪魔な感じで電源マークみたいなのが表示されていると思いますが、ここをマウスオーバーするとQRコードが表示されそれをスマホで読みこむとリモートにあるWebSocketサーバを介してスマホとPCが接続され、スマホでのスワイプ操作によってスライドのページ送りができるという仕組みです。

なるほど。WebSocketにはこういう使い方もあるわけですね。今ならWebRTCでもできそうですけど、これはこれで面白い使い方だと思います。

で、それ以上に面白いと思ったのはこの機能がReveal.js単体で実現されているのではなく別サービスとの組み合わせで実現されているという点です。

★ Remotes.io

その組み合わせとして使われているサービスがRemotes.ioです。

http://remotes.io/

これはWebSocketで接続されているホストに対してスマホで発生したイベント(右スワイプとかタップとか)を通知するだけのサービスです。

Remotes.ioを利用するサイトはまずRemotes.ioが提供するJavaScriptをページにインクルードします。

そうすると先に見たようなQRコードが画面に組み込まれます。
そこにスマホが接続されるとRemotes.ioによってスマホ側で発生したイベントが通知されるので後はサイト側でそれらのイベントに対応するイベントハンドラを書けばOKです。(Reveal.jsではスワイプイベントをスライドのページ送りに対応させています。)
QRコードはスマホとの接続が確立されると画面から消えるので複数のスマホが1台のPCに接続されることはありません。

いやー、これは本当に驚いたアイデアです。
WebSocket、使い方次第で色々と面白いことができそう！ということを最近色々なところで主張しているんですがその可能性を示してくれる事例だと思います。(^^v