SleepyPresentation

デモとサンプル。この部分はターゲットじゃないのでプレゼン対象ではないです。

ターゲットは id="content" にしてあります。すなわち id="content" 以下の .section がそれぞれページになっています。

SleepyPresentation って？

HTML 系 JavaScript プレゼンツール。

右下の Switch をクリックでモード切替

を (思想的に) パクってる。

特徴

HTML + CSS + JavaScript
見た目は CSS で制御
そのまんまをウェブに公開できる。

むき・ふむき

以下のような人に向いています。

HTML を書きなれている。
CSS 書くのがめんどくさくない。
なんでも公開したい

むき・ふむき

逆に以下のような人には向いていません。

GUI で作りたい。
CSS めんどい。
使い捨てする。

マークアップ

ターゲット要素の子要素で、class="section" なやつがページになる。

<div id="content">
    <div class="section">
        <h2>ページ1</h2>
        <p>ほげほげ</p>
    </div>
    <div class="section">
        <h2>ページ2</h2>
        <p>ほげほげ</p>
    </div>
</div>

そのままウェブページ

ネストされた .section は無視する。

詳しい説明をそこに書けば、そのまま資料に。

<div class="section">
    <h2>ページ</h2>
    <p>ほげほげ</p>
    <div class="section">
        <h3>せつめー</h3>
        <p>ぷげぷげにょー ここプレゼンモードで表示されない</p>
    </div>
</div>

説明

こんな感じのネスト section は無視する。

キーバインド

特に代表的なもの

進む: Right, WheelDown
戻る: Left, WheelUp
最初に飛ぶ: Up
最後に飛ぶ: Down

上記以外のキーバインド

進む: PageDown, Enter, c
戻る: PageUp, BS, x
最初に飛ぶ: Home, z
最後に飛ぶ: End, v
モード変更: Shift+ESC
ページジャンプ: C-j, C-m
ブラックアウト: S-b

一部のキーは Opera で効きません。

いろいろ

モードを切り替えてもちゃんとスクロールして表示。
見出し横の数字クリックすると、そのページに移動
文字の大きさ可変
せいかくじゃないタイマー
中途半端

タイマー

setInterval のみでやっているので正確じゃない。

Time を使って差分で更新すべき。

ブラックアウト

一時的に画面をブラックアウトできます。

特に注目させたいときに使うと効果的かもしれません。

使いすぎるとじゃまったらしく。

依存スクリプト

以下のスクリプトに依存している。

wheel_event.js の改変

wheel_event.js は以下のように改変しました。

インターフェイスの変更 (リスナーに渡すオブジェクトを一つに {element: element, wheel: wheel_count})
IE で unload 時にエラーがでるのを回避 (スコープのバグっぽい)

$ diff -uw wheel_event.js.org.js wheel_event.js
--- wheel_event.org.js	2006-02-24 11:02:41.015625000 +0900
+++ wheel_event.js	2006-02-24 11:01:57.500000000 +0900
@@ -30,7 +30,7 @@
         var wheel_count = event.wheelDelta?
           (event.wheelDelta > 0 ? 1 : -1) : // IE, safari
           (event.detail > 0 ? -1 : 1);    // Firefox
-        _observer(element, wheel_count);
+        _observer({element: element, wheel: wheel_count});
         event.preventDefault ? 
           event.preventDefault() : (event.returnValue = false);
       }).bindAsEventListener(this);
@@ -41,10 +41,10 @@
         // safari
         element.onmousewheel = observer;
       }else{
-        this._observeAndCache(element, name, observer, useCapture);
+        Event._observeAndCache(element, name, observer, useCapture);
       }
     }else{
-      this.__observe__(element, name, observer, useCapture);
+      Event.__observe__(element, name, observer, useCapture);
     }
   },
 
@@ -68,7 +68,7 @@
         }
       }
     }else{
-      this.__stopObserving__(element, name, observer, useCapture);
+      Event.__stopObserving__(element, name, observer, useCapture);
     }
   }
 });
;

やってること (だいたい)

ページになる要素を列挙しとく
画面全体覆う要素作る
イベントに応じて cloneNode(deep)

宣言されるクラス

SleepyPresentation: ほんたい
TrackTracer: 一番下の表示位置をしめしてるやつ。のベース
TrackTracerWithTimer: 一番下の表示位置をしめしてるやつ。

TrackTracer いんたふぇ☆ミ

var tt = new TrackTracer(parent_element, 10);
tt.addEventListener("change", (function (e) {
    window.status = e.position;
}).bind(this));

tt.setPosition(4);

まぁねぇ

OperaShow のように、CSS の media-type 機能を使うほうがスマートだろうなぁ。

結局のところブラウザが projection モードを高機能にサポートしてさえくれればよさげ。

ところでなんでSleepy?

なんとなく眠かったので。

最初 plain-f*ck という名前で作ったのですが、あまりにアレなので変えました。plain-f*ck もなんとなくてきとーです。

あきた。

秋田

SleepyPresentation