読者です 読者をやめる 読者になる 読者になる

ゆーすけべー日記

はてなBlogってどーなの!?

一瞬でクールなスライドがつくれる「App::revealup」をリリースしました

タイトルは釣り気味ですが、実際に英語で紹介してくれているBlog記事「Create professional slideshows in seconds with App::revealup」を参考にタイトル付けました。最近CPANライブラリとしてつくって、Yokohama.pm#11とGotanda.pm#01で話した便利ツール「 App::revealup 」についてです。以下はそのBlog記事のスクショ!

App::revealup

勉強会などで用いるスライドなんだけど、ちょっとした資料の場合、Keynoteとかパワポを使いたくないってケースが結構あります。ただそれだといくつか問題があって

  • 専用のソフトを起動するのがだるい
  • 結果的にバイナリファイルだから diff がとれない
  • なのでレポジトリに入れることも含め管理しにくい
  • 手に馴染むエディタを使いたい
  • 簡単なプレゼンだと「タイトルと箇条書きと画像くらいでしょ?」

と思うところがありました。そこで個人的には記法にも慣れている Markdown 形式で内容を書いて、スライドショーが出来たらいいな〜と思い、探しだしたのが reveal.js です。

このreveal.jsはJS側でMarkdownのパースを行うのですが、それが賢くて、かつ、見た目がクール。表示に関する様々なコントロールも出来ます。外部のMarkdownファイルを読みこむことも可能なのがポイントですね。

reveal.js

通常、利用するにはGitHubのレポジトリページから clone するなりダウンロードするなりでJSやCSSを含むライブラリを取ってきてHTMLの雛形をカスタマイズします。

しかしちょいとこれを利用するには、上記の通り、ライブラリファイル群を取ってこなくてはいけないし、Markdownファイルを参照させるにはローカルホスト上などにHTTPサーバを立てなくてはいけなく面倒。そこで今回つくったのが App::revealup です。

App::revealupはreveal.jsのライブラリを内包していて、HTMLやJS/CSSなどの適応をヨシナにやってくれるHTTPサーバを立てる機能があります。例えば slide.md というスライド向けのMarkdownファイルがあったとして付属する revealup コマンドを使えばreveal.jsが適応されたスライドショーがlocalhostで立ちます。

$ revealup serve slide.md

お気に入りのブラウザで http://localhost:5000 にアクセスすればスライドショーが見れるでしょう。

ちなみに以下がスライド用のMarkdownのサンプルです。

# 大見出し

'---' と書くことで横方向へのページ遷移が可能です

---

## 中見出し

'___' と書くことで縦方向へのページ遷移が可能です

___

### 小見出し

以下がリスト表現

* アイテム 1
* アイテム 2
* アイテム 3

また、いくつかオプションがあって「5001番ポート」で立ち上げて、reveal.jsにデフォルトで用意されているテーマ「night」を使い、切り替えのエフェクトとして「zoom」を使う場合はこんな具合。

$ revealup serve -p 5001 --theme night --transition zoom slide.md

revealup

さらにオリジナルのCSSテーマを適応することも出来ます。上記のテーマ「night」をベースに original.css を生成しそれを参照させるためには

$ revealup them generate --base night --output original.css
$ emacs original.css
$ revealup serve --theme original.css slide.md

というような工程を経ます。



このApp::revealup。 イートマイドックフード しているのですが無駄なセットアップ無しにMarkdown書くだけでスライド準備出来ちゃうし、見た目カスタマイズしたければ雛形からCSS自分で書けばいいんで相当便利っすよ!よろしければ使ってみて下さい。 patchissue もウェルカムです。