App::revealupを試してみた
補欠としてですが、行ってきたyokohama.pm #11で@yusukebeさんが開発・紹介してくださったApp::revealupを試してみました！
導入
$ mkdir slide $ cd slide $ vi cpanfile
まず適当なディレクトリを作って、その中にcpanfileを置きます。
そしてcpanfileに以下を記述します。
requires 'App::revealup'
書けたらcarton installで./local以下にインストールします。
$ carton install
そうしたらスライドの内容を書いていくMarkdownファイルを作って、
$ vi slide.md
中身は適当にこんな感じにすると、
##slide1 hoge --- ##slide2 fuga
後は以下のコマンドを実行して、ブラウザから"localhost:5000"にアクセスすればスライドが見られます！
$ carton exec revealup serve slide.md --port 5000
オプション
-p --port
$ carton exec revealup serve slide.md --port 5000 $ carton exec reveal serve slide.md -p 5000
ポート番号の指定が出来るオプションです。
--theme
(追記:2014/06/03) コピらなくても普通に出来ました。
$ carton exec revealup serve slide.md --theme beige.css
なので下記は間違いです。
$ cp -r local/lib/perl5/auto/share/dist/App-revealup/revealjs/css/theme theme
まず./themeにコピっておくと楽です。
$ carton exec revealup serve slide.md --port 5000 --theme theme/beige.css $ carton exec revealup serve slide.md --port 5000 --theme theme/blood.css $ carton exec revealup serve slide.md --port 5000 --theme theme/moon.css $ carton exec revealup serve slide.md --port 5000 --theme theme/night.css $ carton exec revealup serve slide.md --port 5000 --theme theme/serif.css $ carton exec revealup serve slide.md --port 5000 --theme theme/simple.css $ carton exec revealup serve slide.md --port 5000 --theme theme/sky.css $ carton exec revealup serve slide.md --port 5000 --theme theme/solarized.css
cssを選んで、色々なテーマのスライドにすることが出来るオプションです。
(絶対やり方違う...)
記法
一部ですが、紹介します。
見出し
# 見出し1 ## 見出し2 ### 見出し3
#の後に文字を書けば、それが見出しになります。上から大きな順になっています。
ページ分け(横)
---
ハイフンを3つ書くことで、そこでページを分けることが出来ます。
ページ分け(縦)
___
アンダーラインを3つ書くと、縦に遷移するページ分けが出来ます。
コード
#!perl use strict; use warnings; use utf8;
先頭にスペース4つ分の空白を入れることで、コードを挿入出来ます。
リンク
[タイトル](http://search.cpan.org/dist/App-revealup/lib/App/revealup.pm)
[ ]の中に文字を書いて、( )の中にURLを書くことで[ ]内の文字に( )内のURLへのリンクを張ることができます。
リスト
* リスト1 - リスト2 - リスト2 + リスト3 + リスト3
*、-、+のどれかの後に空白を開けて文字を書くと、リストになります。
番号付きリスト
1. リスト 2. リスト 3. リスト
数字の後にドット、そして空白の開けて文字を書くと、番号付きリストになります。
数字は最初の１つだけで、後を * や - を続けても自動的に番号がつきます。
画像
先頭に!、その後[ ]の中に文字を書いて、( )の中に画像のURLを書くことで画像を表示出来ます。
[ ]の中の文字は画像が表示されなかった時、変わりに表示されます。
(ローカルの画像を表示する方法が分からない...)
強調
*斜体* **太字** ***斜体と太字***
アスタリスクで囲むと、文字を強調することが出来ます。
引用
>引用
>の後に文字を書くと、その文字は引用として扱われます。
最後に
他にも多くの記法がありますが、これだけあれば簡単なスライドはすぐに出来るかと思います。
テーブルの表現も試してみましたが、そちらはうまく表示してくれませんでした。おそらくここにあるようなことが原因かもしれないなーとか思ってます。
本モジュールに利用されている本家のreveal.jsではページ遷移時のアニメーションも選択出来たりします。
そこもオプション等で選択出来たりしたらさらにより良いものになりそうです。
