5分で分かるQueryNoteの使い方

jQueryベースのプレゼンツール「QueryNote」の使い方

Author
37to

Enter:進む Shift+Enter:戻る

Agenda

  1. QueryNoteって何?
  2. 必要なもの
  3. チュートリアル
  4. まとめ

QueryNoteって何?

必要なもの

HTML

JSファイル

などと、JSファイルの用意が大変。

現状では依存しているファイルが多すぎるので、仕組みを分かってないと環境用意までに挫折しそう。

インストーラーみたいなのは作りたいところ。

CSSや画像

チュートリアル

HTMLでプレゼン内容を書く

  1. あまり細かい事を気にせずに、内容を書く
  2. スライド毎の先頭要素にidを振っていく「id="chapter1"」「id="chapter2"」...

QueryNoteの開発モードを読み込む

  1. 最初は何も見えない状態
  2. ダブルクリックでコンソールを起動
  3. 「skelton」と入力してアニメーションファイルのスクリプトを生成
  4. 生成したスクリプトを外部JSファイルにして読み込む
  5. これで、動くものが出来上がる

文字の大きさや位置を調整

  1. ダブルクリックでコンソールを起動
  2. 「edit」と入力する
  3. 各要素を自由に動かす事が出来るようになる
  4. マウスオーバー時に現れる「edit」をクリックする
  5. 文字サイズや、位置を入力する
  6. 編集を終えたら、コンソールで「skelton」と入力
  7. 出てきたソースをアニメーションファイルに上書き
  8. リロードすると、編集した状態が再現出来る

余力があればアニメーションに凝ってみる

  1. アニメーションファイルを直接触る事で、複雑なアニメーションも可能
  2. 今回は省きます

まとめ

ソースはCodeReposにあるので、興味のある人は好きにコミットして下さい。

http://coderepos.org/share/browser/lang/javascript/querynote

今回の資料も含めたそのまま使えるサンプル一式も置いているのでご自由にお使い下さい

example-0.01a.tar.gz

終わり