あの reveal.js でのプレゼンを Markdown で簡単に書けるようにした
2013年2月9日
@nqounetです。
Namba.pmに参加した時にもプレゼン作成ツールとして紹介したのですが、改めてブログ上でも紹介したいと思います。
reveal.js って何?
見ていただくのが一番早いです。
ひとことで言うと、HTMLで書けるプレゼンツールです。
何と言ってもエフェクトがカッコイイ!
ここ2回ほどのPerl入学式のスライドも、このツールで書いています。
- perl-entrance-org.github.com/presentation/perlentrance10.html#/
- perl-entrance-org.github.com/presentation/perlentrance11.html#/
これの元ネタは以下のMarkdownで書かれたファイルです。
- workshop/markdowns/perl_entrance_10.md at master · perl-entrance-org/workshop · GitHub
- workshop/markdowns/perl_entrance_11.md at master · perl-entrance-org/workshop · GitHub
HTMLのプレゼンツールは便利なのですが、いちいちタグを書いたりするのって面倒なので、Markdownで簡単にかけたらな〜、と思って作りました。
Markdownで書いたファイルをプレゼンテーションにする
Markdownで書いたファイルをプレゼンテーションとして表示するにはいくつか必要なステップがあります。
まずはMojolicious
です。
Perl
が入っていれば細かいことはいいので、以下の二行をターミナルを起動してコピペしましょう。
1 | curl -L http://cpanmin.us | perl - --self-upgrade |
うまくいかなかった人は、なんとかMojolicious
をインストールしてください。
ツールの本体はgithubで公開しています。
とりあえず使ってみたい方は、以下のコマンド群をコピペしてください。
1 | git clone git://github.com/nqounet/p5-md2reveal.git |
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 | { |
transitionはcube
、page
、concave
、zoom
、linear
、none
、default
から選べます。
themeはsky
、beige
、simple
、serif
、night
、default
から選べます。
色々試してみてください。
画像などを使いたい場合は、public
というディレクトリにimages
というディレクトリを作り、そこに例えばhoge.png
をコピーすると、
というようにすれば表示されます。
Markdownだと
という感じですね。
Markdownを使うのが面倒な人は
もっと簡単にreveal.js
を使ってみたい方は、便利なサービスがあります。
作ったものをそのまま公開できるのも便利ですね。
こんなツールがあれば、プレゼン資料は簡単に作れるので、LTも怖くないですね!
このイベントは
LTの内容に関しては技術系が望ましいですが,特に指定は致しません.自らの生い立ち,生活の悩み,生活の知恵,旅の体験記などなど
という事なので、とりあえず作って発表してみてもいいんじゃないでしょうか?