reveal.jsとsocket.ioでドヤ顔プレゼンテーション
reveal.js
reveal.jsとは
HTMLを使って簡単に美しいプレゼンを作ることができるフレームワーク。
とりあえず環境構築
- node.jsのインストール
- gruntのインストール
- gitからreveal.jsをダウンロード
- 実行確認
- socket.ioの有効化
- index.htmlの編集
node.jsのインストール
注:ubuntu14.04の環境を想定してるよ
参考: How To Install Node.js on an Ubuntu 14.04 server | DigitalOcean
普通にaptでインストールするとちょっと古いパッケージがインストールされちゃうので以下のコマンドを実行する。
|
1 2 |
$ curl -sL https://deb.nodesource.com/setup | sudo bash - $ sudo apt-get install nodejs |
これでnodejsとnpm（nodejsのパッケージマネージャー）がインストールされます。
gruntのインストール
参考: Getting started – Grunt: The JavaScript Task Runner
|
1 |
$ sudo npm install -g grunt-cli |
gitからreveal.jsをダウンロード
参考: hakimel/reveal.js · GitHub
|
1 |
$ git clone https://github.com/hakimel/reveal.js.git |
実行確認
これでreveal.jsという名前のディレクトリができているはずなので、そのディレクトリに入ったあと、
|
1 2 |
$ sudo npm install $ grunt serve |
を実行してください。
その後、お使いのブラウザから http://localhost:8000 にアクセスすればreveal.jsのサンプルが動くと思います。
socket.ioの有効化
さて、ここからがドヤ顔プレゼンテーションのための最も重要な部分です。
まずはindex.htmlをお使いのエディタで開いて、最後の方のReveal.initialize内のdependenciesの部分に以下の記述を追加しましょう。
|
1 |
{ src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } } |
これでもう一度ブラウザから確認すると右横にバーコードがでてくるはずです。
これをスマホ等で読み取ってそこにアクセスすると、なんとスマホからプレゼンが操作できます！！！
これぞドヤ顔プレゼンテーション！！！
index.htmlの編集
あとはindex.htmlをご自分の好きなようにいじりまくってプレゼンを作成しましょう。ｲｪｲ
最近のコメント