@nqounetです。

Namba.pmに参加した時にもプレゼン作成ツールとして紹介したのですが、改めてブログ上でも紹介したいと思います。

reveal.js って何？

見ていただくのが一番早いです。

ひとことで言うと、HTMLで書けるプレゼンツールです。

何と言ってもエフェクトがカッコイイ！

ここ2回ほどのPerl入学式のスライドも、このツールで書いています。

これの元ネタは以下のMarkdownで書かれたファイルです。

HTMLのプレゼンツールは便利なのですが、いちいちタグを書いたりするのって面倒なので、Markdownで簡単にかけたらな〜、と思って作りました。

Markdownで書いたファイルをプレゼンテーションにする

Markdownで書いたファイルをプレゼンテーションとして表示するにはいくつか必要なステップがあります。

まずはMojoliciousです。

Perlが入っていれば細かいことはいいので、以下の二行をターミナルを起動してコピペしましょう。

1
2
curl -L http://cpanmin.us | perl - --self-upgrade
cpanm Mojolicious Path::Class Text::Markdown

うまくいかなかった人は、なんとかMojoliciousをインストールしてください。

ツールの本体はgithubで公開しています。

とりあえず使ってみたい方は、以下のコマンド群をコピペしてください。

1
2
3
4
5
6
7
8
git clone git://github.com/nqounet/p5-md2reveal.git
cd p5-md2reveal
mv md2reveal.conf.sample md2reveal.conf
mv assets/example.md.sample assets/example.md
mv assets/example.md.conf.sample assets/example.md.conf
git submodule init
git submodule update
morbo md2reveal

Server available at http://127.0.0.1:3000.みたいな文字が出たら、ブラウザでhttp://127.0.0.1:3000を開いてください。

それすら面倒な方はこちらのリンクをクリックしてください。

すると、こんな感じに見えると思います。

example.mdはとりあえずの見本で、クリックするとプレゼンモードになります。

二回目以降はp5-md3revealで以下のコマンドを実行すれば同じように起動します。

1
morbo md2reveal

ここで、おもむろにassetsディレクトリの中を見ていただくと、example.mdというファイルが見つかると思います。

このファイルと同じように、Markdownで書いたファイルをこのディレクトリの中に入れて起動するとあら不思議。

新しく追加したファイルがメニューに表示されますので、同じようにクリックすればプレゼンができます。

エフェクトを変更したい場合は、ファイル名の後ろに.confと書いた設定ファイルを作って、同じディレクトリにおくと自動的に読んでくれます。

example.mdはこのようにして設定を少し変更しています。

ファイルの中身は以下のような感じです。

1
2
3
4
{
  transition => 'zoom',
  theme => 'default',
};

transitionはcube、page、concave、zoom、linear、none、defaultから選べます。

themeはsky、beige、simple、serif、night、defaultから選べます。

色々試してみてください。

画像などを使いたい場合は、publicというディレクトリにimagesというディレクトリを作り、そこに例えばhoge.pngをコピーすると、<img src=”/images/hoge.png” />というようにすれば表示されます。

Markdownだと画像という感じですね。

Markdownを使うのが面倒な人は

もっと簡単にreveal.jsを使ってみたい方は、便利なサービスがあります。

作ったものをそのまま公開できるのも便利ですね。

こんなツールがあれば、プレゼン資料は簡単に作れるので、LTも怖くないですね！

このイベントは


LTの内容に関しては技術系が望ましいですが，特に指定は致しません．自らの生い立ち，生活の悩み，生活の知恵，旅の体験記などなど


という事なので、とりあえず作って発表してみてもいいんじゃないでしょうか？