QueryNote - jQuery based presentation tool

jQueryベースのプレゼンツール、QueryNoteの紹介

Author
37to

Enter:進む Shift+Enter:戻る

Agenda

  1. HTMLベースで作成されたプレゼンツール
  2. QueryNoteについて
  3. 特徴
  4. まとめ

1.HTMLベースで作成されたプレゼンツール

Slidy
http://hyper-text.org/archives/2007/02/slidy.shtml
W3C謹製のプレゼンツール
S5
http://meyerweb.com/eric/tools/s5/
Slidyと同様に有名なツール
S6
http://d.hatena.ne.jp/amachang/20071121/1195627344
id:amachang作成のプレゼンツール

Slidy

S5

S6

既存ツールへの不満

2.QueryNoteについて

目指す所

なぜjQueryか?

Prototype.jsと比べて軽い
DOM関連の操作が充実している
エフェクト効果が簡単に書ける
イベント処理や、クロスブラウザの対応等、
面倒な所を任すことが出来る

開発の状態

α版なので、今後大きく変化する可能性あり

ライセンスはとりあえずMITの予定

依存ライブラリ

jQuery1.2.*
中心にフル的に使用
jQuery Hot Key
キー操作に利用
jQuery UI
後述する開発モードで使用
Jsob
自作ライブラリ。
メソッドチェーンで書いた処理を任意のタイミングで遅延評価出来るライブラリ
Jarminal
自作ライブラリ。
JavaScriptのシェル(に進化する予定)

3.特徴

作成に必要なもの

ドキュメントと見栄えを分離するのが基本

ページという概念に束縛されない自由なHTML

Slidy and S5

<div class="slide">
  <h1>title</h1>
  <p>description</p>
  <ul class="incremental">
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    </ul>
</div>

S6

<div>
  <h1>title</h1>
  <p>description</p>
  <ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
  </ul>
</div>

class属性がなくなってすっきり

QueryNote

<h1 id="chapter1">title</h1>
<p>description</p>
<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

<div>も必要のないシンプルHTML

ウィンドウサイズが変わっても、レイアウトが崩れない

ウィンドウサイズを変えると、文字サイズも自動変化

エフェクトの定義

S5 Reloaded(S5にscript.aculo.usを加えた派生版)

<div class="slide">
  <h1>title</h1>
  <p>description</p>
  <ul class="incremental fs90">
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
  </ul>
</div>

class属性にエフェクトを定義

手軽に書ける分、柔軟性に欠ける

S6

<div>
  (HTML要素はそのまま)
</div>
<script>
  s6.page({
    styles: {
      'ul/li' : {display : 'none'}
    },
    actions: [
      ['ul/li[0]', 'fade in', 0.4],
      ['ul/li[1]', 'fade in', 0.4],
      ['ul/li[2]', 'fade in', 0.4]
    ]
});	
</script>

xpathを使った柔軟な定義が可能

記述量が多いのが欠点

QueryNote

//HTML要素はそのままで外部JSファイルに記述
$Q('#chapter1,#chapter1-1,#chapter1-2')
.hide()
.filter('#chapter1')
  .show()
  .css({fontSize:'2em'})
.end()
.filter('#chapter1-1,#chapter1-2')
  .fadeIn()
.end()

jQueryのセレクターを使って要素を選択

メソッドチェーンで繋げる

柔軟な分、記述量が多いのが欠点

プラグインとして、自由にエフェクトが書ける

$Q.addAction('show', 'laterAction',
  function(jq,args,actor){
    jq.queue(function(){
      jQuery(this).show.apply(jq,args);
      jQuery(this).dequeue();
    });
  }
);

と書くと

$Q('chapter1')
.show(1000);
//↑のように書ける。プラグイン化した関数には、
// * jq    = $('chapter1')
// * args  = [1000]
// * actor = $Q
//が渡されるのでそれを使って処理を書く

エフェクトは独立しているので、プラグイン化が可能

よく使うエフェクトはまとめておくと、使いまわしが効く

開発モードの存在

QueryNoteの欠点を挙げると、

柔軟に書ける分、コードの記述量が多い事

そこで登場するのが開発モード

  1. ダブルクリックでシェルが立ち上げる
  2. skeltonと入力すると、コードスケルトンが出てくる
  3. このコードスケルトンをベースにフォントサイズや位置、
    エフェクトを書くことで作成効率を上げる事が出来る

4. まとめ

今後の展望とか

基本的にNo planです。

操作性の向上
特定のページにスキップとか、パーマリンクとか
印刷ページ用ページの対応
クロスブラウザ対応
主にIEとか、IEとか、IEとか・・・

Operaで開発モードのシェルのスクロールが上手くいかない件

9.5でOperaのバグが直るようなので、様子を見る

ネタ機能の搭載とか
LT用に、制限時間が近づくと画面が暗くなるとか
よりプラガブルに
プラットフォームとしての完成度を高めていきたい
リポジトリもNo plan
サーバーを立てるか、Google codeか、codereposか

試行錯誤しながら開発中なので、今後にご期待下さい。

Enjoy presentation!
Thank you.
ご清聴ありがとうございました。