A Day in the Life

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 拡張の裏側

アジェンダ

  • はてなブックマーク拡張
  • 機能とこだわり
  • はてなブックマーク拡張ことはじめ
  • はてなブックマーク拡張実装 (nanto_vi)

[ 空白.38 ]

の前に

自己
紹介

自己紹介

はてなブックマーク拡張

  • 2009/04月リリース
  • 150,000ダウンロード
  • 30,000人強のアクティブユーザ
  • 約12,500行の js コード
  • 約3,500行の XML(xul/xpi)

なぜ Firefox を拡張を作ったか

  • はてブユーザとの親和性
  • 拡張でしかできないこと
  • ブラウザプラットフォームの選択

はてブユーザとの親和性

  • はてなブックマークユーザ統計
  • Firefox が35%
  • 35% のユーザがより便利に

拡張でしかできないこと

特に…

  • ブラウザの UI の作成
  • 権限アクセス ( chrome 権限 )
    • ローカルへのデータ保持
    • cookie 等の取得
    • 他の拡張のデータを利用
  • データ処理の継続

ブラウザプラットフォームの選択

  • IE or Firefox
  • 決め手は…
    • 言語
    • オープンな情報

言語

  • IE - .net (C++/C#/VB.net ...)
  • Firefox - JavaScript

[ 空白.77 ]

JavaScript

Rediscover the JavaScript

Rediscover the JavaScript

10 年。
世界が JavaScript の真の実力を発見するのに要した時間である。
1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。
JavaScript は、Web の「あちら側」と「こちら側」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 10 年を自らの手で創り出すために、我々は Shibuya.js を結成した。

Web 開発者の共通言語

オープンな情報

情報源

  • IE
    • MSDN
  • Firefox

    • MDC (ja)

    • Firefox ソース

    • AMO で公開されている拡張コード

      • あとで説明

以上により Firefox を選択

  • 言語: JavaScript

  • オープンな情報

  • オープンソースライセンスなコードがずらり

Web 開発者にやさしい

[ 空白.101 ]

機能とこだわり

機能とこだわり

  • ブックマークの保存
  • 高速な同期
  • 検索
  • Web との連携

[ 空白.107 ]

ブックマーク保存

ブックマーク保存

  • ブロックしないUI
  • ユーザ体験的に最速を目指す

[ 空白.112 ]

実現するために…

  • データのロード
  • データの保存
  • 処理の継続

データのロード

必要な情報

  • 自分のブックマークデータ
    • 自分のコメント、タグなど
  • はてブ上のデータ
    • おすすめタグ、タイトルや画像、お気に入り

データのロード

  • ブックマークデータ
    • あらかじめデータをローカルに持っているので一瞬
  • はてブ上のデータ
    • 非同期ロード、ロード完了時にデータを表示
    • ロード完了時にレイアウトがほとんど変化しないように
    • レイアウトがずれると非常に違和感

ダイアログ表示は一瞬で

データの保存

  • 保存ボタンを押した瞬間にウィンドウを消去
    • ユーザ体験的には、ここで保存完了
    • demo
  • サーバからレスポンスは待たない
    • サーバからのレスポンス後に、ローカルデータの更新

データの保存

サーバがエラー

  • 透過的なリトライ
    • リトライも失敗
    • ユーザに編集ダイアログで通知

処理の継続

  • ブックマーク保存処理で UI待ちを発生させる必要は無し

  • bookmarklet 等では、HTML をまたいで処理が不能

    • リロード、ページ移動、ページを閉じる、で処理がストップ

  • 拡張では、処理の継続が可能

ブロックしない

[ 空白.161 ]

高速な
同期

高速な同期

  • インストール後に、サーバのデータと全同期
  • 他の拡張に比べ高速
    • 3000件のデータ同期に約30秒弱
    • サーバサイドからの転送コスト\d秒
      • plain text を split
      • XML/JSON のデータ構造では重い
    • その後 DB との同期処理

UI ブロックしないデータ処理

  • 一気にデータ処理をすると Firefox の UI が止まる
  • 200件処理で1秒ごとの wait を
    • 200件処理に数10msかかる
  • Firefox が少し重くはなるが、UI ブロックはしない

バックグランド処理とスレッド

  • 拡張ではスレッドを利用可能
  • スリープ処理にスレッドをは使っているが、バックグラウンド処理には使わず
    • スレッドを使いこなすのが難しい
      • DOM はスレッドセーフではない
      • バックグラウンドスレッドから UI 処理をしてしまうと落ちる

バックグラウンドスレッドとUI

  • F: そんなに落ちるんですか？
  • Q: 落ちます
    • Application.console.log('mes');
    • alert('mes');
  • その他意図しないところで

[ 空白.195 ]

検索

検索

  • 複数の UI
  • それなりな速度で検索

検索の UI

選べる三タイプ

サイドバーからの検索

  • 一般的に利用されている

アドレスバーからの検索

  • アイコンクリック
  • Ctrl - Shift を押してトグル

Vimperator からの検索

  • 一番利用している(僕が)

[ 空白.231 ]

SQLite

SQLite

  • Firefox に内蔵の RDB
  • Q: 数万件のデータって Like 検索で実用できる速度？
    • A: できます
  • 50000件のデータ
    • 1件もマッチしない Like 検索で 200ms ほど
  • はてブ拡張では問題ない速度なので、SQLite をベタに利用

[ 空白.242 ]

Web との連携

Web との連携

  • Web 上の B! クリックで
  • Web からのデータ変更
  • Web 上にデータを表示

B! を押すと…

  • 拡張ダイアログの表示
    • シームレスな連携を
  • B! でなく、追加リンクなら何でも

Web 上からのデータの変更

  • Web サイト上でブックマークを追加/削除
  • 拡張のデータも変更
    • URL をフックし、適宜データ更新

HTML 上にデータを表示

  • Google / Yahoo
    • 当初は決めうち

HTML 上にデータを表示

様々なサイトで

  • HatenaStar の SiteConfig
  • wedata の LDRize SiteInfo
    • どこがタイトルで、どこが Permalink か
    • 集合知の利用

[ 空白.281 ]

はてなブックマーク拡張
ことはじめ

はてなブックマーク拡張ことはじめ

  • Firefox 拡張事始め
  • テスト

Firefox 拡張事始め

  • 拡張初体験・・・
  • 最初は手探り
  • 参考になった情報等いろいろ

ドキュメント

ソースコード

  • addons.mozilla.org (AMO)
    • 拡張たくさん！！！
    • 実装したい機能 -> 実現してる拡張のソースを見る
  • Firefox 本体
    • browser.js utilityOverlay.js
  • Piro さんの拡張全般
    • 読みやすい
  • Tombloo
    • いろいろなテクニック・エッセンスが固まっている

拡張開発用拡張

  • DOM Inspector
    • 基本だけど大事
  • QuickRestart
    • Firefox を即座に再起動
  • Console2
    • コンソール強化
  • SQLiteManager
    • SQLite データの確認に
  • UxU
    • 拡張テスティングフレームワーク

[ 空白.327 ]

テスト

テスト

コア部分の実装、の前にテスト環境を

  • 12,500 行のコード中
    • 1,600 行がテスト
  • 初めての環境でのベストなテスト手法なんて解らない！
  • 最低限のユニットテストを

UxU

  • 渦
  • 拡張のために作られた xUnit テスティングフレームワーク
  • UI からの実行、yield を利用した非同期テストなど
  • xUnit 互換、学習コスト低
  • 拡張作成時には必須

[ 空白.346 ]

  • 実装の手前まで
  • next: nanto_vi

はてなブックマーク Firefox 拡張の裏側

  • はてなブックマーク拡張
  • 機能とこだわり
  • はてなブックマーク拡張ことはじめ
  • はてなブックマーク拡張実装 (nanto_vi)

[ 終わりに ]

ご静聴有り難うございました

すべての Firefox, Mozilla に関わる方々

ありがとうございます

記事の一覧 ＞

書いている人

Yuichi Tateno (舘野 祐一)。ソフトウェアエンジニア。Kaggle Competitions Master。インターネット上では id:secondlife(セコン)、@hotchpotch のニックネームを利用している。

おたよりを送る

おたよりをおまちしてます。お気軽に送りください。
お返事はメールアドレス入力があればメールで、メールアドレスがなければ日記上で行うことがあります。

https://secon.dev/entry/20091109/1257741302/

このサイトは reCAPTCHA と Google のプライバシーポリシーおよび利用規約が適用され、保護されています。