Posts Tagged ‘Firefox’

Mozilla Vision 2012 Conference Day アウトラインメモ

Mozilla Vision 2012 – Conference Day

Mozilla Vision 2012 Conference Dayに参加してきたので、その時のメモです。(いつも通り正確性は保証されません)

NewImage

Read the rest of this entry »

Mozilla 勉強会@東京 6thのアウトラインメモ

2011年10月1日に行われたMozilla 勉強会@東京 6thのメモ

イベントのページ: Mozilla 勉強会@東京 6th
Twitterのまとめ: Mozilla 勉強会@東京 6th – Togetter

  • 14:30 – 15:00: 開場、発表者準備
  • 15:00 – 15:10: Opening

自己紹介の流れ。

■15:10 – 15:50: Firefox for Developers – 開発者ツール&セキュリティ編
Firefox開発者ツール – Web Console
  • コマンドの補完

Inspector

  • DOM Inspectorみたいなもの
  • 要素を調査するツール
  • Style Inspector(開発中)
CSS Doctor
  • CSSの間違いとか
ScrachPad
  • エディタ
  • 選択行のコードだけを実行できたりする。
GCLI
  • ubiquityみたいな感じの
  • CUIとGUI
Source Map
  • CoffeeScriptのような変換コードと元コードをマッピングしたたものを作る
  • 変換前の言語
Tilt
  • DOMマップを3D化するアドオン
about:Firefox
セキュリティとプライバシーの話
Same Origin Policy
Content Security Policy
  • 次世代のセキュリティポリシー
    • XSSの攻撃防止
  • コンテンツ種別で読み込み制御
    • 画像やCSSやJSなども制御できるようにする
  • Webkitではほぼ開発されてる
  • デフォルトセキュリティポリシーがいろいろ強化される
  • CSPの使い方
    • X-Content-Security-PolicyのHTTPレスポンスヘッダを送信
    • HTMLのメタタグは書き換えできたりするものだからヘッダーで
    • Apache でCSPの設定
  • CSP対応に移行する
    • JS,CSSは外部ファイルに
    • evalを使わない
    • ポリシー違反レポートでどこがおかしいのかも確認できる
      • ヘッダーでレポートを報告するURLを指定してログを残せる
    • CSPブックマークレットもある

HTTP Strict Transport Security

  • HTTPSでの接続を要求するヘッダ
X-Frame-Options
  • クリックジャッキングとか
Cross-Origin Resource Sharing
  • クロスドメインでの読み込み許可
  • 他のドメインから読み込まれてもいい場合の設定
  • XHR2とか
ユーザ追跡拒否ヘッダ
  • Do-Not-Trackヘッダ
    • ブラウザ側でサイトに通知する
    • IE,Safariも対応
    • Chromeだけ非対応
  • 受け取ったらユーザー追跡をしない
■15:50 – 16:30: Pano って拡張機能 teramako
Panorama
  • Firefox4から導入された
  • タブグループを管理するビュー
    • アクティブなタブグループの切り替え
タブの種類
  • ピン止めタブ(AppTab)
  • グループの属するタブ
  • グループに属さないタブ(Firefox7で廃止)
Pano できること
  • グループの作成/削除
  • グループ名の変更
  • D&D操作
実装の仕組み
  • panoramade上で起こったイベントを拾ってビューを作ってる
    • tabopenなど
    • 起こらないイベントは上書きして起こす
  • 基本的にはビュー
頑張った所
  • アイコンはSVG
    • いろいろな場所で使われてる
    • 使いまわしたい -> SVGで作る
  • SVG
    • ベクターなので拡大縮小できる
    • ファイルサイズも小さい
  • about:addonsでアイコンが表示されてない
    • アイコンのサイズが指定されてなかった
    • SVG内にサイズの指定した
  • タブ、Panoramaから発生するDOM Eventを拾う
    • Panoramaから発生しないEvent
      • グループが作成された
      • グループから削除された
      • グループから移動した
    • 取れないEventは無理やり発行させる
      • Gropuが作成されたときに起きるイベントを上書きする
  • GroupItems.registerの上書き
    • 元関数を実行
    • DOM Eventを発行
    • コールバックシステムに関数を登録してDOM Eventを発行させる
起動速度の改良
  • 起動時のスクリプトは最小限
    • 必要なときにロードさせる
    • mozUSSubScriptLoaderの使用
  • 必要なときに取得
    • getterの使用
  • 速い読み込み
    • Firefox8 から mozUSSubScriptLoader もキャッシュされる
実装方法
  • 最初の読み込みは必要最小限
    • 40行ほど
    • 最初はロードするものを書いておいて、ロードしたときにそれを上書きする
  • getterの使用
    • XPCOMUtil.jsmを使用してgetterを使いやすくする
    • defineLazyGetter
コンテンツの遅延読み込み
  • bartab
    • 起動したときはタブはできるが、ロードはされない
    • タブが選択されたときに初めてロードされる
  • nsISessionStoreが鍵
    • 短いコードで実現する
非アクティブなグループ内に開くには
  • Panoramaとバッテングして上手く行かなった
  • 上手い解決方法が見つからない
    • setTimeoutでぐるぐるー
パネルでD&Dするために
  • パネルをドラッグする前に閉じないようにする
    • noAutohide = true
  • メニューボタンを押したときは閉じない様にする
■16:40 – 17:20: restartless – 再起動不要なアドオンをSDK無しで作るフレームワーク – Piro
Add-on SDKの目的
  • 誰でも開発できるようにする
  • 高機能なアドオンの開発は目的ではなかった
  • 今までのアドオン開発
    • 自由すぎた
    • 敷居高い
    • 何でもできた
  • SDKを使えばある程度制限された状態で簡単作れるようになる
Add-on SDKはGreasemonkeyスクリプトと同じような立ち位置
restartlessの目的
  • 再起動不要なアドオンを今までの開発と同じ方式で作れるように
  • Mozilla特有の事情を必要なのも従来方式
  • 対象も従来の開発者向け
restartlessの使い方
  • main.jsの内容
    • startup()で読み込まれる
    • 専用の名前空間で実行される
    • shutdown()を定義
  • ユーティリティ
    • location.href
    • load関数 = Cu.importと互換
    • require関数
    • existsでファイルの有無を調べる
    • resolve 相対パスの解決
    • EXPORTED_SYMBOLS
    • doAndWait
      • 非同期処理を同期的に扱うときに使用
    • jstimer
    • pref
    • locale
      • 国際化
    • config
    • WindowManager
      • DOMWindowにアクセスする
      • ウィンドウのopenを監視
    • KeyboardShortcut
      • ショートカットの定義
    • jsDefferred
restartlessの利用例
  • ALT
  • back to owner tab
  • Fox Splitter

restartlessのコードリーディング

  • index.rdf
    • bootstrap=”true”で再起動不要と認識される
  • bootstrap.js
    • モジュールのロードとか
  • loader.js
    • ユーティリティとかが定義されている
    • doAndWait
      • スレッドをたててメインループを回す実装
  • main.js
    • 各アドオンのコード
  • module
    • 各ライブラリが入ってるので、削除すれば消える
■17:20 – 18:00: Lightning Talk
  • アドオン SDK を利用した初めてのアドオン開発– by knagato
    • 初めてアドオン開発する人が対象
    • SDKを使ったアドオン開発を特徴
      • HTMLやJavaScriptなどが中心で、XULやXPCOMなどMozilla特有の機能を使わなくても開発できる
    • 開発環境の種類
      • Add-on BuilderをWeb上での開発
        • 再起動不要なのでその場で試せる
      • Addon SDKを使った開発
        • コマンドラインベース
    • Add-on SDKのチュートリアル
  • Thunderbirdアドオンによるワークフロー開発について– by Nakashima
    • 提案するツール
      • 自分自身でのプロセス改善が可能
      • やり取りの簡略化ができる
    • http://www.p2pwf.com/ に仕様の詳細
  • Forking Secure Login – by saneyuki_s
    • Secure Loginアドオンのフォークの話
      • 現在はメンテナンスアップデートのみになってる
      • 全面改装してる
    • 一部機能の省略
    • レガシーコードの除去
    • doorhanger対応
      • Firefoxに入ってるSSLのポップアップするやつ
  • jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること – by kyo_ago
    • requestAnimationFrame
      • setIntervalの問題点としてアニメーション向けではない
    • jQuery 1.6から削除された
      • setIntervalとrequestAnimationFrameが衝突してキューがたまる
      • タブがバックグランドにあるときの挙動
  • ES.next WeakMap– by mooz (@stillpedant)
    • WeakMap = 連想配列
    • Firefox6から利用可能
    • {}やObject()と比較して
      • keyにオブジェクトが指定可能
        • ハッシュはkeyに文字列しか指定できない(toStringされてる)
        • WeakMapはkeyにオブジェクトが指定可能
          • オブエジェクトしか指定できない
          • プリミティブ値はエラー
        • オブジェクトの外部拡張
          • DOMノードに独自プロパティは危険
          • ES5ではオブジェクトの拡張がfreezeできる
          • オブジェクト自体は拡張しないで、外部に付加情報を持つ
          • WeakMapを利用する
            • キーとして外部情報をもたせる
      • keyに指定されたオブジェクトを弱く参照
        • CGにたいして
  • Firefox4以降のE4X– by teramako
    • ワイルドカード
      • *が指定子に使える
    • 属性アクセス
      • @が使える
    • Firefox3.6までは上記のものがE4X以外でも使えた
      • Firefox4以降は禁止された
      • ざんねんでしたね

第3回ブラウザー勉強会 アウトラインメモ

2011年8月20日開催された第3回ブラウザー勉強会に参加してきたので、その時のメモです。

TwittterのログはTogetter – 「第3回 ブラウザー勉強会(#BrowserWS)のまとめ」にまとまっています。

Read the rest of this entry »

Re:ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ

ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログの内容を更新した。

などを追加して更新しました。

後、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.

Read the rest of this entry »

Console2でJetpack SDKを使う

ConsoleのTabsでシェルにcmd+activateの実行をさせる

Shell

cmd.exe /k bin\activate

Startup dir

Jetpackのディレクトリ

clip_image001

こうすれば、タブを開くだけでJetpackのコマンドが読み込まれて便利。

clip_image002

Shellにnyaosとかを使う方法はよく分からない。

FirefoxのJavaScriptデバッガ拡張Firebugの進化がすごい

Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。
しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で)

現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。
特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います

Read the rest of this entry »

トラッキングパラメーターなど邪魔なものをURLが削除するGreasemonkey

ParamCleanerというURLからutm_*など不要なパラメーターを除去するGreasemonkeyを書きました。
すでに同じ目的のGreasemonkeyやアドオンなどがありますが、

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バーの表示が変わる

これを使って、今回はトラッキングパラメーターが存在する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動画内広告を消す方法もアップデートしました。

BENKIi
http://park2.wakwak.com/~benki/index.html

KeySnailプラグイン開発の方法とデバッグ

KeySnailついて

自分はEmacsユーザーでもありませんが、KeyConfigの代わりにKeySnailを使い始めました。
そもそもKeyConfigとは役割違うし、KeyConfigもFirefox4対応したので併用しています。
keysnailはuserChrome.jsのキー特化みたいな存在で、便利なAPIがある環境みたいなとらえ方でもいいかもしれないです。(emacsのキーバインドは一切使わないで、まっさらな状態で始めました)

Read the rest of this entry »

プロフィール: azu(アズ)
Firefoxの事やソフトウェアの紹介や使い道、Greasemonkeyの作成
  • OS:Windows Vista, 7
  • ブラウザ:Firefox
  • Twitterのアカウントはこちら
  • azu_re
  • メールアドレス(Twitterの方が確実)
  • info@ドメイン名
リンク

WebMoney ぷちカンパ