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の実行とか試せなかったのであとで追試する。

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL