Posts Tagged ‘Firefox’
Mozilla Vision 2012 Conference Day アウトラインメモ
Mozilla Vision 2012 – Conference Day
Mozilla Vision 2012 Conference Dayに参加してきたので、その時のメモです。(いつも通り正確性は保証されません)

Mozilla 勉強会@東京 6thのアウトラインメモ
2011年10月1日に行われたMozilla 勉強会@東京 6thのメモ
イベントのページ: Mozilla 勉強会@東京 6th
Twitterのまとめ: Mozilla 勉強会@東京 6th – Togetter
- 14:30 – 15:00: 開場、発表者準備
- 15:00 – 15:10: Opening
自己紹介の流れ。
- コマンドの補完
Inspector
- DOM Inspectorみたいなもの
- 要素を調査するツール
- Style Inspector(開発中)
- CSSの間違いとか
- エディタ
- 選択行のコードだけを実行できたりする。
- ubiquityみたいな感じの
- CUIとGUI
- CoffeeScriptのような変換コードと元コードをマッピングしたたものを作る
- 変換前の言語
- DOMマップを3D化するアドオン
- 次世代のセキュリティポリシー
- XSSの攻撃防止
- コンテンツ種別で読み込み制御
- 画像やCSSやJSなども制御できるようにする
- Webkitではほぼ開発されてる
- デフォルトセキュリティポリシーがいろいろ強化される
- CSPの使い方
- X-Content-Security-PolicyのHTTPレスポンスヘッダを送信
- HTMLのメタタグは書き換えできたりするものだからヘッダーで
- Apache でCSPの設定
- CSP対応に移行する
- JS,CSSは外部ファイルに
- evalを使わない
- ポリシー違反レポートでどこがおかしいのかも確認できる
- ヘッダーでレポートを報告するURLを指定してログを残せる
- CSPブックマークレットもある
HTTP Strict Transport Security
- HTTPSでの接続を要求するヘッダ
- クリックジャッキングとか
- クロスドメインでの読み込み許可
- 他のドメインから読み込まれてもいい場合の設定
- XHR2とか
- Do-Not-Trackヘッダ
- ブラウザ側でサイトに通知する
- IE,Safariも対応
- Chromeだけ非対応
- 受け取ったらユーザー追跡をしない
- Firefox4から導入された
- タブグループを管理するビュー
- アクティブなタブグループの切り替え
- ピン止めタブ(AppTab)
- グループの属するタブ
- グループに属さないタブ(Firefox7で廃止)
- グループの作成/削除
- グループ名の変更
- D&D操作
- panoramade上で起こったイベントを拾ってビューを作ってる
- tabopenなど
- 起こらないイベントは上書きして起こす
- 基本的にはビュー
- アイコンはSVG
- いろいろな場所で使われてる
- 使いまわしたい -> SVGで作る
- SVG
- ベクターなので拡大縮小できる
- ファイルサイズも小さい
- about:addonsでアイコンが表示されてない
- アイコンのサイズが指定されてなかった
- SVG内にサイズの指定した
- タブ、Panoramaから発生するDOM Eventを拾う
- Panoramaから発生しないEvent
- グループが作成された
- グループから削除された
- グループから移動した
- 取れないEventは無理やり発行させる
- Gropuが作成されたときに起きるイベントを上書きする
- Panoramaから発生しないEvent
- GroupItems.registerの上書き
- 元関数を実行
- DOM Eventを発行
- コールバックシステムに関数を登録してDOM Eventを発行させる
- 起動時のスクリプトは最小限
- 必要なときにロードさせる
- mozUSSubScriptLoaderの使用
- 必要なときに取得
- getterの使用
- 速い読み込み
- Firefox8 から mozUSSubScriptLoader もキャッシュされる
- 最初の読み込みは必要最小限
- 40行ほど
- 最初はロードするものを書いておいて、ロードしたときにそれを上書きする
- getterの使用
- XPCOMUtil.jsmを使用してgetterを使いやすくする
- defineLazyGetter
- bartab
- 起動したときはタブはできるが、ロードはされない
- タブが選択されたときに初めてロードされる
- nsISessionStoreが鍵
- 短いコードで実現する
- Panoramaとバッテングして上手く行かなった
- 上手い解決方法が見つからない
- setTimeoutでぐるぐるー
- パネルをドラッグする前に閉じないようにする
- noAutohide = true
- メニューボタンを押したときは閉じない様にする
- 誰でも開発できるようにする
- 高機能なアドオンの開発は目的ではなかった
- 今までのアドオン開発
- 自由すぎた
- 敷居高い
- 何でもできた
- SDKを使えばある程度制限された状態で簡単作れるようになる
- 再起動不要なアドオンを今までの開発と同じ方式で作れるように
- Mozilla特有の事情を必要なのも従来方式
- 対象も従来の開発者向け
- main.jsの内容
- startup()で読み込まれる
- 専用の名前空間で実行される
- shutdown()を定義
- ユーティリティ
- location.href
- load関数 = Cu.importと互換
- require関数
- existsでファイルの有無を調べる
- resolve 相対パスの解決
- EXPORTED_SYMBOLS
- doAndWait
- 非同期処理を同期的に扱うときに使用
- jstimer
- pref
- locale
- 国際化
- config
- WindowManager
- DOMWindowにアクセスする
- ウィンドウのopenを監視
- KeyboardShortcut
- ショートカットの定義
- jsDefferred
- ALT
- back to owner tab
- Fox Splitter
restartlessのコードリーディング
- index.rdf
- bootstrap=”true”で再起動不要と認識される
- bootstrap.js
- モジュールのロードとか
- loader.js
- ユーティリティとかが定義されている
- doAndWait
- スレッドをたててメインループを回す実装
- main.js
- 各アドオンのコード
- module
- 各ライブラリが入ってるので、削除すれば消える
- アドオン SDK を利用した初めてのアドオン開発– by knagato
- 初めてアドオン開発する人が対象
- SDKを使ったアドオン開発を特徴
- HTMLやJavaScriptなどが中心で、XULやXPCOMなどMozilla特有の機能を使わなくても開発できる
- 開発環境の種類
- Add-on BuilderをWeb上での開発
- 再起動不要なのでその場で試せる
- Addon SDKを使った開発
- コマンドラインベース
- Add-on BuilderをWeb上での開発
- Add-on SDKのチュートリアル
- Thunderbirdアドオンによるワークフロー開発について– by Nakashima
- 提案するツール
- 自分自身でのプロセス改善が可能
- やり取りの簡略化ができる
- http://www.p2pwf.com/ に仕様の詳細
- 提案するツール
- Forking Secure Login – by saneyuki_s
- Secure Loginアドオンのフォークの話
- 現在はメンテナンスアップデートのみになってる
- 全面改装してる
- 一部機能の省略
- レガシーコードの除去
- doorhanger対応
- Firefoxに入ってるSSLのポップアップするやつ
- Secure Loginアドオンのフォークの話
- jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること – by kyo_ago
- requestAnimationFrame
- setIntervalの問題点としてアニメーション向けではない
- jQuery 1.6から削除された
- setIntervalとrequestAnimationFrameが衝突してキューがたまる
- タブがバックグランドにあるときの挙動
- requestAnimationFrame
- ES.next WeakMap– by mooz (@stillpedant)
- WeakMap = 連想配列
- Firefox6から利用可能
- {}やObject()と比較して
- keyにオブジェクトが指定可能
- ハッシュはkeyに文字列しか指定できない(toStringされてる)
- WeakMapはkeyにオブジェクトが指定可能
- オブエジェクトしか指定できない
- プリミティブ値はエラー
- オブジェクトの外部拡張
- DOMノードに独自プロパティは危険
- ES5ではオブジェクトの拡張がfreezeできる
- オブジェクト自体は拡張しないで、外部に付加情報を持つ
- WeakMapを利用する
- キーとして外部情報をもたせる
- keyに指定されたオブジェクトを弱く参照
- CGにたいして
- keyにオブジェクトが指定可能
- Firefox4以降のE4X– by teramako
- ワイルドカード
- *が指定子に使える
- 属性アクセス
- @が使える
- Firefox3.6までは上記のものがE4X以外でも使えた
- Firefox4以降は禁止された
- ざんねんでしたね
- ワイルドカード
第3回ブラウザー勉強会 アウトラインメモ
2011年8月20日開催された第3回ブラウザー勉強会に参加してきたので、その時のメモです。
TwittterのログはTogetter – 「第3回 ブラウザー勉強会(#BrowserWS)のまとめ」にまとまっています。
Re:ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ
ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログの内容を更新した。
- Hebikuzure’s Tech Memo
- Internet Explorer デベロッパーセンター
- Mozilla Flux
- Google Chrome OS & Chromebook Review Tips Themes How to Use Install and Learn
などを追加して更新しました。
後、alice0775さんのブログの内容(というかスクリプト群)がalice0775′s Profile – GitHubに移行していました。
Firebugを使ったページロード解析(Net panelの読み方)
Software is hard | Page load analysis using Firebug の記事を元に書いています。
January 18th, 2010に書かれた時点での例を使用しているため、現在のブラウザでは若干挙動が違うかもしれません。
また、著者のJan Odvarkoさんに翻訳許可は頂いていますが、翻訳というより意訳や自分の理解のために書いていたので、いろいろ書き加えたりしています。
Net panel(ネットパネル)について理解したいと思って書いたので、Net Panel自体の解説記事Software is hard | Introduction to Firebug: Net Panelも一緒に読むといいかもしれません。
翻訳許可のメールをわずか15分で返してくれた著者のJan Odvarkoさんに感謝を。
Thnak you, Jan Odvarko.
Console2でJetpack SDKを使う
ConsoleのTabsでシェルにcmd+activateの実行をさせる
Shell | cmd.exe /k bin\activate |
Startup dir | Jetpackのディレクトリ |
こうすれば、タブを開くだけでJetpackのコマンドが読み込まれて便利。
Shellにnyaosとかを使う方法はよく分からない。
FirefoxのJavaScriptデバッガ拡張Firebugの進化がすごい
Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。
しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で)
現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。
特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います
トラッキングパラメーターなど邪魔なものをURLが削除するGreasemonkey
ParamCleanerというURLからutm_*など不要なパラメーターを除去するGreasemonkeyを書きました。
すでに同じ目的のGreasemonkeyやアドオンなどがありますが、
- UrlCleaner for Greasemonkey
- FeedBurnerのトラッキングパラメータらしきものを削るGreasemonkey – ariyasacca(2009-11-18)
- URLのトラッキング用パラメータを無視するFirefox拡張 Through utm_ – SWDYH
history.replaceStateを使う事で他のものに比べて簡潔な処理でURLからトラッキングパラメーターなどを消せます。
またhistory.replaceStateを使ってるのでFirefox4以上向けで(一応Firefox3でも動くようにしてある)、Scriptish向けに最適化してあるので、できればScriptishで使った方がいいです(Greasemonkeyでも動きます)
history.replaceState(data, title [, url])の使い方
historyオブジェクトについてはgithubなどで話題になったので知ってる人も多いと思いますが、pushStateはブラウザの履歴に新規エントリを追加するAPIで、replaceStateは現在のエントリを入れ替えるAPIです。
引数はpushState()と同じで、
history.replaceState(stateプロパティに入る値, 状態識別用のタイトル, [現在の状態に対応するURL]);
という引数をとります。
第三引数を指定してSame OriginならURLバーの表示を書き換える事ができるので、以下のように実際に移動しなくても表示が書き換わります。
// http://example.com/ で実行 history.replaceState(null, "", "/hey"); // => http://example.com/hey とURLバーの表示が変わる
- history.pushState、history.replaceState – 素人がプログラミングを勉強するブログ
- Firefox 4 での History API の変更 « Mozilla Developer Street (modest)
これを使って、今回はトラッキングパラメーターが存在するURL(アイテム – データベース: UrlCleaner – wedataで管理)にアクセスしたとき、トラッキングパラメーターを除去したURLへhistory.replaceStateを使って書き換えているので他のGreasemonkeyのようなリロードがなかったり、アドオンのように通信を監視する手間が省けます。(以前同じ名前でアドオンを作ってたけど重すぎた)
UrlCleanerと同じWedataで管理されたものを勝手に使ってるので、処理自体は互換性があるようにしています(一部拡張してるけど) 気になったものがあったらSITEINFOを書いて、UrlCleaner – wedataに登録するとよいです。
- ParamCleaner for Greasemonkeyi
- http://userscripts.org/scripts/show/100611
Adblock++がFirefox4で動かなかったのでランタイムを更新
C++で書かれたAdblock++アドオンを使用していましたが、Firefox4で上手く動いてなかった(リストに空になるとか)ので、原因は何だろと探してみたらビルド環境がVisual C++ 2010 Expressに変わってたようです。
PCに入ってたランタイムは2008ぐらいのだったので、Microsoft Visual C++ 2010 再頒布可能パッケージからランタイムをダウンロードし、インストールし直したら動作するようになりました。
ついでに広告配信先が変わって動かなくなってたUstreamのFlash動画内広告を消す方法もアップデートしました。
KeySnailプラグイン開発の方法とデバッグ
KeySnailついて
自分はEmacsユーザーでもありませんが、KeyConfigの代わりにKeySnailを使い始めました。
そもそもKeyConfigとは役割違うし、KeyConfigもFirefox4対応したので併用しています。
keysnailはuserChrome.jsのキー特化みたいな存在で、便利なAPIがある環境みたいなとらえ方でもいいかもしれないです。(emacsのキーバインドは一切使わないで、まっさらな状態で始めました)

