Yet Another Dynamic Presentation

Agenda

• 背景
• ツール紹介
• ソースレビュー
• まとめ

背景

プレゼンテーションもっと Web で共有したい

How ?

PowerPoint?

Keynote?

PDF?

でもやっぱ HTML と JavaScript がいいよな

相変わらず好きだね

Why HTML?

Search Engine

Crawler

microformats

GRDDL

Why JS?

Bookmarklet

Greasemonkey

Extensions

But...

JS は

重い...

軽く作るのが重要！

…というわけで

このツールの紹介

比較的軽い動作

比較的奇麗な HTML

比較的奇麗な HTML

<div>
  <h2>タイトル</h2>
  <p>Shibuya.JS</p><p>YAJC</p><p>JS Nite</p>
</div>

比較的奇麗な HTML

<div>
  <h2>タイトル</h2>
  <p>Shibuya.JS</p><p>YAJC</p><p>JS Nite</p>
  <script type="text/javascript>
  s6.page({/* ここに JSON を記述して
              アクションやスタイルを定義 */});
  </script>
</div>

拡張性が高い →

インデックスを作ってみた

さまざまな

エフェクト

や

アクション

X Browser

任意の要素に適用可能 →

ブログパーツ

ソースレビュー

クラス図

地道な高速化 1

// style も new 時にプロパティにいれておく
s6.Constructor = function(element) {
    this.element = element;
    this.style = element.style;
};

地道な高速化 2

// コールバックを受ける関数では this 
// や引数を受けるようにしとく
s6.hoge = function() {
    var shift = Array.prototype.shift;
    // ↓ Opera ではバグるので回避しなきゃダメ
    var f = shift.apply(arguments);
    f.apply(shift.apply(arguments), arguments);
};

DOM の空きプロパティ

// DOM の要素の空きプロパティの
// アクセス速度は普通のハッシュとほとんど変わらない
s6.Constructor = function(element) {
    this.element = element;
    this.element.__s6object__ = this;
};
// 循環参照が気になる人は this じゃなくて
// id にするなりなんとかする＞＜

Event 制御

// ハンドラは element の
// 空プロパティに保持しとく
s6.attach(element, 'click', function(e) {
    alert('click');
});

// これで任意のイベントを発火できる
// テストを書くのにも便利
s6.fire(element, 'click', { button: 0 });

起動ラグ防止 Fx Opera

document.addEventListener(
       'DOMContentLoaded', s6.load, false); 

起動ラグ防止 IE

// defer 属性の script 要素の
// readyState が 'loaded' → 'complete' 時に実行
document.write('
    <script
        src="//:"
        defer="true"
        onreadystatechange="
            readyState != \'complete\' || s6.load()" >
    </script>');

まとめ

プレゼンはやっぱり JS ！

みなさんも

アッと驚くようなプレゼン

作ってみませんか？

ライブラリ名募集中！

ご清聴

ありがとう

ございました