スライドをスマフォでリモート操作できる Reveal.js

html ベースのプレゼンライブラリはだいぶ前からいくつも出ているのでもはや珍しいものではなく、できることは大体一緒なので、手を掛けないためにデフォルトで入っているテーマで選んでも良いのですが、reveal.js には他にはない、欲しかった機能がありました。

それはスマフォでプレゼンテーションをリモート操作できる機能です。

私はプレゼンを大きなモニタやプロジェクタに macbook を接続し、ブラウザを全画面表示しているのですが、操作は本体のキーボードを使っていました。

手元で操作出来る、いまあるものでどうにかできないかと調べていたところ、reveal.js には WebSocket 経由でスマフォをコントローラ代わりにできるプラグインが同梱されていました。

セットアップ

github より、reveal.js をクローンします。

index.html を開いたら、下の方の javascript で dependencies という配列にプラグイン読み込みの定義が行われているので、 remotes/remotes/js を追加します。

// 配列の中に追加する
 { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }

動作

Grunt のタスクが定義されているので、grunt serve でローカルサーバを立ち上げ、localhost:8000 にアクセスすると、デモプレゼンが表示されます。

ここで、画面右上よりも少し下の辺りにマウスカーソルを持っていきます。(勝手に出てきたり、クリックしたりするとでる場合もある?)

するとこのようなQRコードが表示されます。

reveal-remote-01

これをスマフォのバーコードリーダで読み込み、URL をブラウザで開きます。

reveal-remote-03

このような画面が表示されるので、タップします。

reveal-remote-02

接続されると、PC 側のプレゼン画面で Synced! と表示され、スマフォで操作できるようになります。

ただし、remotes.io というサービスを利用しているので、インターネットへの接続が必要です。(LANだけで解決できればもっとよかったのですが)

他のプレゼンテーションライブラリにもリモート操作を備えたものがあるかもしれませんが、デフォルトで markdown でも書くことが出来たりと、reveal.js 自体かなり高機能なので、かなりおすすめのライブラリです。

それと、もし インターネットが不要な、LAN 内だけでリモート操作できるライブラリがあればご紹介いただけると幸いです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする