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 もなんとなくてきとーです。
あきた。
秋田