IT Office Nishimiyahara

個人用スマホから商用プログラミングまでなんでもお任せ下さい

あの reveal.js でのプレゼンを Markdown で簡単に書けるようにした

      2014/06/20

@nqounetです。

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

reveal.js って何?

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

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

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

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

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

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

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

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

まずはMojoliciousです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

transitionはcubepageconcavezoomlinearnonedefaultから選べます。

themeはskybeigesimpleserifnightdefaultから選べます。

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

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

Markdownだと![画像](/images/hoge.png)という感じですね。

Markdownを使うのが面倒な人は

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

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

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

このイベントは

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

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

respo

respo link

ZenBackWidget

 - 情報技術について ,