ShowOffでプレゼンテーション作成をためした
なんだか今年のRubyKaigiで使っていた人が多かったらしい。と聞いて興味がわいたのでちょっといじってみた。
なんぞや
テキストベースでプレゼンテーションスライドを作成できるツール。Sinatra製。
ページ遷移やリスト表示のアニメーションなどを手軽に定義することができるので、簡単にそこそこ動きがあって見栄えのするものが出来上がる。
Markdownの文書を
!SLIDE
という行で区切っていくとスライドができちゃいます、と言うことが理解できればShowOffの半分は制覇したと言える。たぶん。
JavaScriptやスタイルシートを埋め込むことができたり、コードのシンタックスハイライトも備えていて、プログラマ向けのプレゼンツールとしてはなかなかよさげに思える。
またテキストなので
- バージョン管理と相性が良い
- 別のプレゼンでのスライドの再利用が簡単
- スライドの再整理や削除がやりやすい
といったメリットを享受できる。
試してみよう
ShowOffを入れる
gem install showoff
又はGemfileを使ってもよいでしょう。
とりあえず動きを見てみる
サンプルを持ってきて動かしてみる。
git clone https://github.com/schacon/showoff.git cd showoff/example showoff serve
ブラウザでhttp://localhost:9090にアクセスするとプレゼンテーションが表示される。
スライドの操作方法
実行中に「z」を押すとヘルプが出てくる。
- スペース,→: 次のページ
- ←: 前のページ
- d: デバッグモード（イベント）
- c: 目次表示
- f: フッター表示/非表示
- z: ヘルプの表示/非表示
- ## <ret>: ページ移動（ページ番号を入力してEnter）
- r: リロード
ヘルプの内容にはないけど
- ↑: 次のページ
- ↑,バックスペース: 前のページ
といった操作も有効だった。
自分のスライドを作る
showoffコマンドを使う。
showoff create my_presentation cd my_presentation showoff serve
my_presentation以下にone/01_slide.mdというファイルができているので、これをいじっていく。
複数のファイルに分割することもできるが、とりあえず必要を感じるまではこの一つのファイルだけで十分だろう。
スライドの書き方
スライドに適用されるスタイルやページ遷移のアニメーションの定義の仕方について。
画像の埋め込みどうやるの、とかコメントどう書くのとか言った話はMarkdownの話なので適当にぐぐるとよい。
基本
!SLIDEでページが分かれる。
!SLIDEに続いてオプションを指定するとスタイルやアニメーションの定義ができる。
!SLIDE # First Page !SLIDE subsection transition=fade # Second Page
箇条書き
!SLIDE bullets
ベーシックな箇条書き。
!SLIDE bullets incremental
インクリメンタルに表示したい場合。
!SLIDE smbullets
箇条書きの文字を小さくしたい場合。
コマンドラインの表示
!SLIDE commandline
ベーシックなコマンドラインの表示。
!SLIDE commandline incremental
一文字ずつ入力されてる動きを表示したい場合。
長いコマンドほど速く入力されているように見える。
短いコマンドはちょっともっさり入力に見えてしまうが、コマンドの後ろに半角スペースの連続をくっつけることで速く表示するという某動画サイトの職人が使うみたいな技も有効。
対象のコードブロック（4文字インデント）は以下のように「$」で始まる必要がある。
$ ./configure
$ make
$ make install
見出しのスタイル
!SLIDE subsection
サブセクション。
帯がついて表示されるのでトピックが変わるときなどのアクセントになる。
!SLIDE command
見出し（h1）のフォントがmonospaceになる。
コマンドラインの表示とマッチして見える。
その他
!SLIDE small
スライドの文字サイズを80%に。
!SLIDE smaller
スライドの文字サイズを70%に。
!SLIDE execute
ハイライトしたJavaScriptのコードをクリックすると実行できる？
うまく動かなかった。
!SLIDE center
画像がセンタリングされて表示される。
!SLIDE full-page
画像をすべてのページに表示できる？
うまく動かなかった。
ページ遷移のアニメーション
!SLIDE transition=fade
のように指定する。
いろいろと指定できる。
- blindX
- blindY
- blindZ
- cover
- curtainX
- curtainY
- fade
- fadeZoom
- growX
- growY
- none (this is the default)
- scrollUp
- scrollDown
- scrollLeft
- scrollRight
- scrollHorz
- scrollVert
- shuffle
- slideX
- slideY
- toss
- turnUp
- turnDown
- turnLeft
- turnRight
- uncover
- wipe
- zoom
jQuery Cycle pluginを使っているとのこと。
コードのシンタックスハイライト
@@@ruby
a = "hoge"
@@@javascript
var a = "hoge"
「@@@」に続けてプログラミング言語の名前を書く。
いろんな言語のシンクタックスハイライトに対応している。
カスタムJavaScript
JavaScriptを好きなだけ使ってスライドの動きを制御できる。
スライドにscriptを直接埋め込む
!SLIDE
<script>
alert("OK");
</script>
# scriptタグで外部スクリプトを読み込む
以下のようにするとmy_presentation/one/custom.jsを読み込むことができる。
!SLIDE <script src="file/one/custom.js">
パスがちょっとわかりにくかった。
プレゼンテーションのルートディレクトリにjsファイルを置く
my_presentation/custom.jsを作ると自動的に読み込まれる。（ファイル名は任意）
カスタムスタイルシート
スタイルシートで見栄えを整えることができる。
div.content以下にh1とかpとかあるので、それに対してスタイルを当てていく。
linkタグで読み込む
以下のようにするとmy_presentation/one/custom.jsを読み込むことができる。
!SLIDE <link rel="stylesheet" type="text/css" href="file/one/custom.css">
プレゼンテーションのルートディレクトリにcssファイルを置く
my_presentation/custom.cssを作ると自動的に読み込まれる。（ファイル名は任意）
宿題
Rubyの実行とか試せなかったのであとで追試する。
