script.aculo.usを使ったプレゼンテーションツール presentacular

社内でプレゼンテーションの機会がありましたので、presentacularというツールを使いました。

シーブレインに入る前にkeyjnoteというツールを使ったことがありましたが、presentacularはブラウザを使うプレゼンツールということで興味があったので使ってみました。

presentacularは次のような特徴を持つツールです。

• HTML+CSS+JavaScriptでつくる
• ブラウザでJavaScriptが使える環境なら動くのでマルチプラットフォーム
• S5がベースになっている
• 作成にオフィスアプリケーションがいらない。テキストエディタで編集
• プレゼンテーションの内容はすべてindex.htmlに書く

文章の書き方は、まずプレゼンテーション全体を<div class="presentatasion">で囲み、1枚1枚のスライドを<div class="slide">で囲みます。あとはスライドの中身をh1やp、ul、liといった要素で記述します。

そして、script.aculo.usを利用して文章などをアニメーションできるのが特徴です。(エフェクトと呼ぶ)

エフェクトはdiv,見出し(h1,h2…),ul,li,pなどのclass属性に指定することで適用されます。たとえばスライド全体をフェードイン(徐々に表示)させるときは

<div class="slide appear">
    <h1>フェードインします</h1>
    …
</div>

といった感じで書きます。

他にも10個くらいエフェクトが用意されていますので書き留めておきます。

秒数と書いているのはpulsate_0.5という感じで指定することでエフェクトを何秒で終わらせるかを指定できることを意味します。

pulsate_秒数

点滅

appear_秒数

徐々に表示(フェードイン)

shake

揺れます

shrink_秒数

右に消えます。

grow_秒数

画面中央から広がる

blindDown_秒数

上から徐々に表示

puff

飛びます

ulやolにincrementalと指定

子要素のliをひとつずつ表示していく

presentacularには他のエフェクトの情報もあります。

参考リンク

秋元@サイボウズラボ・プログラマー・ブログ: Ajax パワーポイント Presentacular