jQueryベースのプレゼンツール、QueryNoteの紹介
Enter:進む Shift+Enter:戻る
α版なので、今後大きく変化する可能性あり
ライセンスはとりあえずMITの予定
ドキュメントと見栄えを分離するのが基本
<div class="slide">
<h1>title</h1>
<p>description</p>
<ul class="incremental">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
<div>
<h1>title</h1>
<p>description</p>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
class属性がなくなってすっきり
<h1 id="chapter1">title</h1> <p>description</p> <ul> <li>list1</li> <li>list2</li> <li>list3</li> </ul>
<div>も必要のないシンプルHTML
ウィンドウサイズを変えると、文字サイズも自動変化
<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属性にエフェクトを定義
手軽に書ける分、柔軟性に欠ける
<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を使った柔軟な定義が可能
記述量が多いのが欠点
//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の欠点を挙げると、
柔軟に書ける分、コードの記述量が多い事
そこで登場するのが開発モード
skeltonと入力すると、コードスケルトンが出てくる基本的にNo planです。
Operaで開発モードのシェルのスクロールが上手くいかない件
9.5でOperaのバグが直るようなので、様子を見る
試行錯誤しながら開発中なので、今後にご期待下さい。
Enjoy presentation!
Thank you.
ご清聴ありがとうございました。