Firefox Developers Conference 2009 発表資料
2009年、11月9日に開かれた、 Firefox Developers Conference 2009 で、はてなブックマーク Firefox 拡張の話をしてきた資料です。実装についての話は、nanto_vi さんが資料を公開してくれると思います。
資料の最後にも載ってますが、本当に Firefox 拡張開発に当たり、Mozilla/Firefox に関わる方々が公開してくださっている資料やコミュニュティの成果物に非常に助けられ、それらが無ければ開発は行えなかったと思います。Firefox Developers Conference に参加された方々、Mozilla Japan やその他 Mozilla コミュニュティの方々、Mozilla/Firefox に関わるすべての方々、どうもありがとうございます。
はてなブックマーク Firefox 拡張の裏側
- はてな 舘野祐一(id:secondlife)
- 外山真 (id:nanto_vi)
[ 空白.38 ]
の前に
自己
紹介
自己紹介
- 舘野祐一 (id:secondlife)
- Firefox 歴
- メインブラウザ 1.5 年
- 好きな拡張
- Vimperator
ブラウザプラットフォームの選択
- IE or Firefox
- 決め手は…
- 言語
- オープンな情報
Rediscover the JavaScript
10 年。
世界が JavaScript の真の実力を発見するのに要した時間である。
1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。
JavaScript は、Web の「あちら側」と「こちら側」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 10 年を自らの手で創り出すために、我々は Shibuya.js を結成した。
Web 開発者の共通言語
[ 空白.101 ]
機能とこだわり
機能とこだわり
- ブックマークの保存
- 高速な同期
- 検索
- Web との連携
[ 空白.107 ]
ブックマーク保存
ブックマーク保存
- ブロックしないUI
- ユーザ体験的に最速を目指す
[ 空白.112 ]
実現するために…
- データのロード
- データの保存
- 処理の継続
データのロード
- ブックマークデータ
- あらかじめデータをローカルに持っているので一瞬
- はてブ上のデータ
- 非同期ロード、ロード完了時にデータを表示
- ロード完了時にレイアウトがほとんど変化しないように
- レイアウトがずれると非常に違和感
ダイアログ表示は一瞬で
データの保存
- 保存ボタンを押した瞬間にウィンドウを消去
- ユーザ体験的には、ここで保存完了
- demo
- サーバからレスポンスは待たない
- サーバからのレスポンス後に、ローカルデータの更新
データの保存
サーバがエラー
- 透過的なリトライ
- リトライも失敗
- ユーザに編集ダイアログで通知
処理の継続
- ブックマーク保存処理で UI待ちを発生させる必要は無し
- bookmarklet 等では、HTML をまたいで処理が不能
- リロード、ページ移動、ページを閉じる、で処理がストップ
- 拡張では、処理の継続が可能
ブロックしない
[ 空白.161 ]
高速な
同期
高速な同期
- インストール後に、サーバのデータと全同期
- 他の拡張に比べ高速
- 3000件のデータ同期に約30秒弱
- サーバサイドからの転送コスト\d秒
- plain text を split
- XML/JSON のデータ構造では重い
- その後 DB との同期処理
UI ブロックしないデータ処理
バックグランド処理とスレッド
- 拡張ではスレッドを利用可能
- スリープ処理にスレッドをは使っているが、バックグラウンド処理には使わず
- スレッドを使いこなすのが難しい
- DOM はスレッドセーフではない
- バックグラウンドスレッドから UI 処理をしてしまうと落ちる
- スレッドを使いこなすのが難しい
バックグラウンドスレッドとUI
- F: そんなに落ちるんですか？
- Q: 落ちます
Application.console.log('mes'); alert('mes');
- その他意図しないところで
[ 空白.195 ]
検索
検索
- 複数の UI
- それなりな速度で検索
検索の UI
選べる三タイプ
サイドバーからの検索
- 一般的に利用されている
アドレスバーからの検索
- アイコンクリック
- Ctrl - Shift を押してトグル
Vimperator からの検索
- 一番利用している(僕が)
[ 空白.231 ]
[ 空白.242 ]
Web との連携
Web との連携
- Web 上の B! クリックで
- Web からのデータ変更
- Web 上にデータを表示
B! を押すと…
- 拡張ダイアログの表示
- シームレスな連携を
- B! でなく、追加リンクなら何でも
Web 上からのデータの変更
- Web サイト上でブックマークを追加/削除
- 拡張のデータも変更
- URL をフックし、適宜データ更新
HTML 上にデータを表示
- Google / Yahoo
- 当初は決めうち
HTML 上にデータを表示
様々なサイトで
[ 空白.281 ]
Firefox 拡張事始め
- 拡張初体験・・・
- 最初は手探り
- 参考になった情報等いろいろ
ドキュメント
ソースコード
- addons.mozilla.org (AMO)
- 拡張たくさん！！！
- 実装したい機能 -> 実現してる拡張のソースを見る
- Firefox 本体
- browser.js utilityOverlay.js
- Piro さんの拡張全般
- 読みやすい
- Tombloo
- いろいろなテクニック・エッセンスが固まっている
拡張開発用拡張
[ 空白.327 ]
テスト
UxU
- 渦
- 拡張のために作られた xUnit テスティングフレームワーク
- UI からの実行、yield を利用した非同期テストなど
- xUnit 互換、学習コスト低
- 拡張作成時には必須
[ 空白.346 ]
- 実装の手前まで
- next: nanto_vi
