自己紹介

← これ

Vimp( ﾟ∀ﾟ)o彡゜Vimp( ﾟ∀ﾟ)o彡 ...

自己紹介(少し真面目に)

• 続きはWebで
  • d.hatena.ne.jp/teramako/
  • vimperator.g.hatena.ne.jp/teramako/
  • teramako.github.com
  • twitter.com/teramako

Index

1. Vimperatorとは
2. slコマンド
3. VimperatorプラグインでSLコマンドを
4. JavaScriptでの再現方法
5. Canvas
6. まずはHTML上に
7. より面白さを求めて
8. 最後に

Vimperatorとは - 1

• Mozilla FirefoxのAddon(拡張機能)
• Vimperator = VIM + operate + er
  • テキストエディタのVIMの様な操作を実現するもの
  • キーボード主体でFirefoxの操作をしたい人向け
  • テキスト文化的
• VIMの様なキーバインド
  • j,kで上下スクロールなど
• EX コマンド
  • 100を超えるコマンド数
  • :open url or keywords,:tabopen url or keywordsでページを開く
  • コマンドやコマンド引数のTab補完機能
• Hit-a-hint
  • f,Fからリンクを開く機能

Vimperatorとは - 2

• VIMのような豊富なカスタマイズ性
  • キーバインドの追加・変更
  • RCファイルによる初期設定($HOME/.vimperatorrc)
• Vimperatorプラグインによる拡張性(外部JavaScriptファイル)
  • userChrome.js + API の様な感じ
    • EX コマンドの追加
    • キーバインド(map)の追加
  • 日本のユーザにとってかなり重要
    • 有志によって150を超えるスクリプトがCodeReposにアップされている

slコマンド

• UNIX系OSのジョークソフト
• lsコマンドを間違ってslとtypoしてしまう
• コンソール上をD51型蒸気機関車がアニメーションで動く
• 説明では、「キータイプ矯正ソフト」である
• ソース: 豊田正史とslコマンド (Masashi Toyoda and SL command)

                    (@@) (  ) (@)  ( )  @@    ()    @     O     @     O      @
               (   )
           (@@@@)
        (    )

      (@@@)
      ====        ________                ___________
  _D _|  |_______/        \__I_I_____===__|_________|
   |(_)---  |   H\________/ |   |        =|___ ___|      _________________ 
   /     |  |   H  |  |     |   |         ||_| |_||     _|                \_____A
  |      |  |   H  |__--------------------| [___] |   =|                        |
  | ________|___H__/__|_____/[][]~\_______|       |   -|                        |
  |/ |   |-----------I_____I [][] []  D   |=======|____|________________________|_
__/ =| o |=-~~\  /~~\  /~~\  /~~\ ____Y___________|__|__________________________|_
 |/-=|___||    ||    ||    ||    |_____/~\___/          |_D__D__D_|  |_D__D__D_|
  \_/      \__/  \__/  \__/  \__/      \_/               \_/   \_/    \_/   \_/

VimperatorプラグインでSLコマンドを

• Vimperatorのコマンドでlsコマンドがある
  • Firefoxのタブをリスト表示するもの(vimでは開いているバッファをリスト表示
• lsコマンドがあるならslコマンドもないとね!!!(ぉ
  • JavaScriptでSLを動かすVimperatorプラグインを作成しよう

JavaScriptでの再現方法

• HTML
  • 通常のDOM操作
  • 既に実装がある
  • JavaScriptでSLを走らせる「SL.JS」を作りました [C!]
• SVG
  • 実装方法がHTMLの場合と大差なさそうで面白くない
• Canvas
  • Text APIは新しい感じで受けが良いかも。採用

JavaScriptでの再現方法(番外編)

• ターミナルのエスケープシーケンスを使用して、コンソール上で
  • Spidermonkey
  • Rihno
  • xpcshell(Mozilla Xulrunner)
• コンソール上では既にbashスクリプトだが拙者がやってしまった
  • shell/sl.sh at master from teramako's scripts - GitHub

Canvas Text API

• Firefox 3.1 以降からはHTML5のドラフト版のText APIが実装されている
  • context.fillText
  • context.strokeText
  • context.measureText
  • など
  • 詳細はFirefox 3.1で強化されるHTML 5対応--Canvas Text APIを検証 - builder by ZDNet Japanを参照
• また、実験的なAPIの名残である以下のメソッドも使用可能
  • context.mozDrawText
  • context.mozMeasureText
  • context.mozPathText
  • context.mozTextAlongPath
  • 詳細はDrawing text using a canvas - MDCを参照

Canvasによるアニメーションの基本

• 定期的な描画はDOMのwindow.setTimeoutやwindow.setIntervalを使用
• 一度描画したものは描画されっぱなし → 事前にクリアする必要あり
  • context.clearRectの使用

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var interval = window.setInterval(draw, 1000);
function draw(){
	context.clearRect(0, 0, canvas.width, canvas.height);
	// 以下に描画のコード
	// ...
} 

clearRectをした例

clearRectをしない例

まずはHTMLで

普通にHTML上に実装してみた

Start Stop

• : fly
• : logo

より面白さを求めて

単にブラウザ上で動作するだけでは面白くないよね!?
もっとうざったくしよう

• フルスクリーンで動かそう
• せっかくcanvasなんだから+αなアニメーションを入れよう

フルスクリーン

• XULのpanel要素を使用
  • ウィンドウ装飾を持たないポップアップが可能
    • panel.openPopupAtScreen()
    • 詳細: panel - MDC
  • CSSのbackground-color: rgba(...)を用いて半透明に
    • UNIX系のX Windowでは動作しない
    • Bug 408284 ? Support for translucent windows on Linux
• canvas要素のwidth,heightを最大値まで広げる