Archive for the ‘Firefox’ Category

« Older Entries
Newer Entries »

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

3月 1st, 2011

JavaScriptやWeb開発に興味を持っている人はブラウザ周りの新しい情報も知っておくと良い場合も多いです。
なのでブラウザ周りに絞ってブラウザ別のブログなどを紹介。

Internet Explorer(IE)

Mozilla(Firefox)

  • Bit Stampede
    MDCの更新情報を書かれています。
    Firefoxの最新情報が把握しやすいので是非購読しておくといいです。
  • A Better Project＠はてなダイアリー
    MDCのローカライズ情報を書かれています。
    MDC-ja 通信など最近の起きたことが分かりやすいです。
  • Mozilla Hacks – the Web developer blog
    Mozillaについてだけではなく最新の技術などについても扱っているのでとても重要です。
  • Mozilla Flux
    Firefox/Mozillaについてについて、幅広い情報から書かれているブログ。
    情報をしっかり取り込んでから書かれていると思われるため、内容も深いものとなっていてとてもいい。
    筆者id:Rockridge のはてなブックマークもおすすめです。
  • Mozilla Developer Street (modest)
    “Mozilla 関連の開発者や利用者が集まり 知識・アイディア の共有とコミュニケーションの場”
    アドオン開発者向けの情報やMozilla Add-ons Blogの翻訳記事などが掲載されています。
  • Mozilla Japan ブログ
    名前の通りです。
  • MozillaZine.jp
    Mozilla関係のリリース情報を扱っています。
  • Scene Side B
    Firefoxのリリース情報やbug fixの情報を書かれています。
    どのような変更が行われたかがまとめて見られます。
  • Firefox Hacks 翻訳日記/ウェブリブログ
    Mozilla WikiなどからのFirefoxについて情報を書かれています。
  • もずはっく日記 – WebStudio
    “Mozilla Japanのプロダクトへの貢献を中心に書いています”
    最近はIME周りのお話が多いです
  • alice0775のファイル置き場 – Yahoo!ジオシティーズ
    Friends of the Treeに掲載されるほど多くの貢献をされている方です。
    bugzillaの情報をメインに載せています。またuserChrome.jsスクリプトを多数書かれていることでも知られています。
  • @dynamitter
    Mozilla Japanの浅井さんのアカウントです。
    Firefoxだけではなく、W3Cなどの仕様に関しての情報も多いので参考になると思います。

他にもMozilla本家にはセキュリティとかいろいろブログがあったと思います。
(なのでちょっと本家の方は省き気味です)

Webkit系(Chrome,Safari)

OperaはきっとOperaを愛する人がやってくれるはずです…
追記: Opera版 Operaの最新情報を知るために、Web開発者が読んでおくべきブログ – あまたの何かしら。

その他

いろいろなサイト(主にブログ)を乗せましたが、一個づつRSS購読するのは面倒だという人は、LDRならこのページのリンクをまとめて購読する機能があるのでそれを利用するといいですよ。

まとめて購読機能は、リンク集から一括登録できて便利 – livedoor Reader 開発日誌

おまけ

Planetシリーズ
原点はよくわかりませんが、様々なFeedを集めてまとめたアグリゲートブログのようです。
(ちょっと強欲すぎるので、Planet Chromiumのような公式系でまとまったもの以外は破綻する感じがします)

etc..

おわり

他にこのブログ忘れちゃだめだなどのご指摘があったらお願いします。

Posted in Firefox, まとめ | Tags: , , , , , , | 1 Comment »

Google Tasksをサイドバーに表示するボタン作ってみた

2月 23rd, 2011

要Custom Buttonsで、Google Tasksをサイドバーに表示するボタンを作ってみました。
いつもはGoogle の公式 ToDo リスト ガジェットを使ってサブのTodoしてGoogle Tasksを使っています。
操作が軽快でツリー上にTodoを書いていけるので直ぐに消化するタイプのTodoに向いていると思います。

上記のボタンをクリックしてインストールできます。

アイコンはGoogle TasksのFluid用アイコン作った – ( ﾉ・ω・)ﾉ⌒○・。から拝借しました。

Posted in アドオン | Tags: , , | No Comments »

サイトの最終更新日をステータスバーに表示するアドオン「Google Date」

2月 18th, 2011

よくTwitterやSBMなどからURLに飛んで、それが書かれたのが結構昔だったりして誤解を生むことがあったりします。
なのでそのサイトの最終更新日を直ぐに確認できるようにした方がいいのですが、意外と日付が書いてないサイトも多いです。
そこでGoogle Dateを使うと、Googleのクロールによる更新日をステータスバーに表示することができます。

元々はGoogle検索の結果に日付を表示するアドオンだった気がしますが、いつの間にかサイト内でも更新日を表示する機能がついていました。

一応、仕組みの方が気になったのでコードを見てみると

doGetDate: function() {
    var doc = gBrowser.selectedTab.linkedBrowser.contentDocument;
    if (doc.location.href != "about:blank" && doc.location.href.match(/^http:\/\//i)) {
        if (typeof this.reqUrl[doc.location.href] != "undefined") {
            document.getElementById("googledateStatusDate").value = this.reqUrl[doc.location.href];
        } else {
            var uri;
            if (this.reqCnt % 2 == 0) {
                uri = "http://www.google.co.jp/search?num=1&tbs=qdr%3Ay15&q=site%3A" + encodeURIComponent(doc.location.href);
            } else {
                uri = "http://www.google.com/search?num=1&tbs=qdr%3Ay15&q=site%3A" + encodeURIComponent(doc.location.href);
            }
            this.reqCnt++;
            var httpOj = new XMLHttpRequest();
            httpOj.open('GET', uri);
            httpOj.onreadystatechange = function() {
                if (httpOj.readyState == 4 && (httpOj.status == 200 || httpOj.status == 304)) {
                    var str = httpOj.responseText.match(/<span class="f std">.*?<\/span>/i)[0].replace(/<\/?[^>]+>/gi, "");
                    document.getElementById("googledateStatusDate").value = str;
                    googleDateHttpRequestObserver.reqUrl[doc.location.href] = str;
                }
            }
            httpOj.send(null);
        }
    }
}

site:http://efcl.info/2011/0218/res2272 – Google 検索みたいな感じでサイト内検索の検索結果から日付部分を正規表現で切り取ってる感じでした。
Googleにクロールされてないサイトでは日付取得ができませんが、日付の精度自体は使ってて問題ない感じになること多いのでとても便利です。

Google Date :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/google-date/
Posted in アドオン | Tags: , , , | 1 Comment »

Mozilla勉強会@東京 5thで「世界のJavaScript情報を読もう」という発表をしました

1月 17th, 2011

Mozilla 勉強会@東京 5thでのLT枠で「世界のJavaScript情報を読もう」というタイトルで発表してきましたので、その補足などの記事。
以下が発表に使ったスライドとなります。

Read the rest of this entry »

Posted in Firefox, Jetpack, アドオン | Tags: , , , , , | 1 Comment »

JavaScriptからメモリ情報を取得する方法

12月 26th, 2010

JavaScriptにおいてメモリ管理は基本的にエンジン任せなのであまり意識することは無いかもしれませんが、メモリリークの調査やパフォーマンスの実験のためにメモリ情報をJavaScriptから扱いたいときがあると思います。

Read the rest of this entry »

Posted in javascript, userChome.js | Tags: , , , | 1 Comment »

LDR上ではてなブックマーク拡張を使ってはてブコメントを見るuserChrome.js

12月 11th, 2010

以前書いた、LDRではてなブックマーク拡張を通してはてブのコメントをみるTomblooパッチをuserChrome.jsを使って書き直してもっと使い易くしたものです。
概要的にははてなブックマーク拡張のコメントビューアー機能をuserChrome.jsからよびだしてLDRの記事についてるはてブコメントを表示するものです。(なのではてなブックマーク拡張はインストールしてないと使えません)

記事にフォーカスがあった状態でmを押すとはてなコメントビューアーが開きます。
jを押すと(次の記事に移動ショートカット)コメントビューアーが開いてたときは閉じるようにしてあります。

以下、技術的な話

まず、userChrome.jsをどうデバッグすればいいのか忘れたので、とりあえずFirebugのコンソールへ吐くlog関数を用意した。

// firebugのコンソールに出力
function fbug(x) {
    var windowManager = Components.classes['@mozilla.org/appshell/window-mediator;1'].getService(Components.interfaces.nsIWindowMediator);
    var Firebug = windowManager.getMostRecentWindow("navigator:browser").Firebug;
    if (Firebug.Console.isEnabled() && Firebug.toggleBar(true, 'console')) {
        Firebug.Console.logFormatted(Array.slice(arguments));
    }
    return x;
}

もっと手軽に呼べたような気がしたけど…

次はChrome側とContent側でやりとりする方法
Chrome側ってのはuseChrome.jsや拡張機能などのいわゆる特権持ってて何でもできてしまう実行範囲のこと
Content側ってのは通常のWebサイトの実行範囲のこと。

Chrome側からContent側をいじろうとすると、XPCNativeWrapperでラップされているのでそのままではアクセスできません。
wrappedJSObjectを使って回避するのはあまり望ましいやり方ではないと思うので、今回はMessageEventを利用してChromeとContentを行き来してみました。
コードの真ん中ら辺のメイン部分だけ取り出してみると

    // docはchrome側のdocument
    // Chrome側 - 受信
    doc.addEventListener("hatenaPingMessage", function (request) {
        var res = request.data;
        if (res === "hide") {
            hBookmark.CommentViewer.hide();
        } else {
            hBookmark.CommentViewer.toggle(res);
        }
    }, false);
    // Content側 - 送信
    evalInPage(function() {
        window.addEventListener("load", function() {
            window.Keybind.add('m', function(evt) {
                var item = window.get_active_item(true);
                var permalink = item.link.replace(/#/, '%23');
                pingToChrome(permalink);
            });
            var _j = window.Keybind._keyfunc.j;// jを保存してから書き換える
            window.Keybind.add('j', function(evt) {
                _j();
                pingToChrome("hide");
            });
        }, false);
        // Chrome領域へ通知
        function pingToChrome(message) {
            var request = document.createEvent("MessageEvent");
            request.initMessageEvent("hatenaPingMessage", true, false,
                    message,
                    location.protocol + "//" + location.host,
                    "", window);
            document.dispatchEvent(request);// =>hatenaPingMessage
        }
    }, []);
}
function evalInPage(func, args) {
    var argStr = JSON.stringify(args || []);
    safeWindow.location.href = "javascript:void " + func + ".apply(null," + argStr + ")";
}

まずはChrome側のdocumentにイベントを待ち受けるhatenaPingMessageというeventを受け取れるにします。
そして、Content側でスクリプトを実行するためにJavaScript:プロトコルハックを使ってブックマークレット的に実行します。
その中で、hatenaPingMessageというオレオレイベントを発火させるpingToChromeを作って、pingToChromeで発火したイベントをChrome側でキャッチしてChrome権限が必要な処理(はてなコメントビューアーを呼び出す)をしています。
Google Chromeの拡張とかで似たような仕組みになってた気がします。

MessageEventとJavaScript:プロトコルハック

Google Chrome関係のメモ

FirefoxのChromeについてのメモ

pingToChrome
Posted in userChome.js | Tags: , , , | No Comments »

Post Now browsing to Twitterで設定画面が開かないバグ修正

12月 7th, 2010

Post Now browsing to Twitterで設定画面がうまく開かない現象が起きていたみたいで、以前はGM_configというGUI用のライブラリを使っていたのですが、今回usconfigに移行しました。
なので、今まで設定画面が開かないなどの現象が起きていた人はインストールしなおしてください。
(おかしいときは ツール→Greasemonkey(もしくはステータスバーの猿アイコン)→ユーザースクリプトの管理→Post Now browsing to Twitterを選択→✓関連付けられた設定も削除にチェック→アンインストール → インストール)

こっからはGM_configからUSConfigへ移行方法について。

GM_configは前から少し不安定な感じがあったので、同種のライブラリであるUSConfigに変えました。
GM_configとUSConfigの違いを簡単に挙げてみると(移行するに当たっての変更点)

まずはGUIの書き方が別物なので、そこはすべて書き直す必要があります。

GM_configの場合

GM_config.init('Configuration for Post Now browsing to Twitter', {
    'defaultTag': {
        'label': 'Prefix:',
        'type': 'text',
        'default':'Now browsing: '
    },
    'isSelection': {
        'label': 'Use selectionQuote',
        'type': 'checkbox',
        'default':true
    },
    'ShortURL': {
        'label': 'Short URL',
        'type': 'select',
        'options': {
            'bit.ly': 'bit.ly',
            'j.mp': 'j.mp',
            'goo.gl': 'goo.gl',
            'is.gd': 'is.gd',
            'tinyurl.com': 'tinyurl.com'
        },
        'default':'bit.ly'
    },
    'ShortCutKey': {
        'label': 'ShortcutKey:',
        'type': 'text',
        'default':'CS-Enter'
    },
    'PostWithCtrl': {
        'label': 'Post with Ctrl+Enter:',
        'type': 'checkbox',
        'default': false
    },
    'bitlyUserName': {
        'section': ['bit.ly'],
        'label': 'bit.ly Username:',
        'type': 'text',
    'default':
        'remiko'
    },
    'bitlyAPIKey': {
        'label': 'bit.ly APIKey :',
        'type': 'text',
        'default': 'R_fa2240c646c07b2091x'
    }
}, configStyle , {
    open: function () {
        // ショートカットの入力補助
        var iframe = document.getElementById("GM_config");
        var iframeDoc = iframe.contentDocument;
        iframeDoc.getElementById("field_ShortCutKey").addEventListener('keydown', function (evt) {
            evt.preventDefault();
            this.value = shortcut.get(evt);
        }, false);
        // OAuth Setting
        if (TWOauth.isAuthorize()) {
            TWOauth.injectToConfig();
        } else {
            XHRloading.createText(iframeDoc);
            TWOauth.getRequestToken(TWOauth.injectToConfig);
        }
    },
    save: function () {

    } // reload the page when configuration was changed
});

USConfigの場合

Config.define('usc_basic', function() {
	with (this.builder) {
		var shortURL_opt = [
			'bit.ly',
			'j.mp',
			'goo.gl',
			'is.gd',
			'tinyurl.com'
		]
		dialog(
			"Post Now browsing to Twitter Settings",
			{ width: 600, height: 700 },

				section(
						"User options",
						"Behavior/keyboard Preference",
						grid(
								text("Prefix:", 'defaultTag', "Now browsing: ", { size: 20 }), '\n',
								checkbox("Use selection quote", 'isSelection', true), '\n',
								checkbox("Post with Ctrl+Enter", 'PostWithCtrl', false), '\n',
								text("ShortcutKey:", 'ShortCutKey', "CS-Enter", { size: 16 })
								)
						),
				section(
						"Short URL options",
						"select used Short URL service",

						grid(
								select("Short URL Services", 'ShortURL', shortURL_opt, "bit.ly"), '\n',
								text("bit.ly Username:", 'bitlyUserName', "remiko"), '\n',
								text("bit.ly APIKey :", 'bitlyAPIKey', 'R_fa2240c646c07b2091c6bc6d109089ef', { size: 30 })
								)
						),
				section(
						"OAuth Authorization",
						"Sign in with Twitter"
						)
				);
	}
}, {
	saveKey: 'GM_config',
	aftersave: function() {

	},
	afteropen : function() {
		// ショートカットの入力補助
		var iframeDoc = this.frame.contentDocument;
		iframeDoc.getElementById("control_ShortCutKey").addEventListener('keydown', function (evt) {
			evt.preventDefault();
			this.value = shortcut.get(evt);
		}, false);
		// OAuth Setting
		if (TWOauth.isAuthorize()) {
			TWOauth.injectToConfig();
		} else {
			XHRloading.createText(iframeDoc);
			TWOauth.getRequestToken(TWOauth.injectToConfig);
		}
	}
});

二つを見比べると、GM_configはオブジェクトを定義する感じだけど、USConfigはその都度関数を呼び出す感じになってる。レイアウトの自由度はUSConfigの方が上ですが、ちょっとインデント管理が大変で書きにくい。
またUSConfigではselectに連想配列っぽいオブジェクトを使えないので、配列に直す必要があります。
後、Text() のデフォルトサイズが少し小さいので第4引数で属性にsizeを追加してます。
最後の空sectionはafteropen時に書き換えるようにしてるので、本質とはあんまり関係ないです。
USConfigの方がConfig.define()でのコールバック(afteropenなど)が豊富なので、細かい制御がしやすいと思います。
そのコードバックで設定画面のiframeをとるにはthis.frameとすればよいみたいです。

次に設定情報の取り出し方
GM_configがそのつど、keyを指定してvalueを取り出す感じだったのが(GreasemonkeyのGM_getvalueに近い)

GM_config.get(key);// value

USConfigでは設定全部をまとめたオブジェクトを最初にロードする感じになっています

var settings = Config.load();
settings.key;// value

また、設定を保存するキーの初期値はGM_configと違うのでそのまま移行させるためにはsaveKeyを’GM_config’にします。

Config.define('dialog_name', function() { with (this.builder) {
  dialog(...);
}}, {
  saveKey: 'GM_config',
  aftersave: function() {...},
});

後はGM_config.*()がConfig.*()など細かい違いあるので、それを手直しすれば移行できました。
(GM_config.close()がConfig.remove()だったのが少しはまった)

USConfig
Posted in Greasemonkey | Tags: , , | No Comments »

im.kayac.comを使って今見ているサイトをFirefoxからiPhoneへ送る

12月 4th, 2010

im.kayac.comというiPhoneへの通知を行うサービスがあるので、それを利用してFirefoxから今みているサイトのURLを送ってiPhoneからも簡単に開けるという感じのものを作ってみました。

準備するもの

  1. iPhoneのim.kayac.comアプリをダウンロード
  2. 登録してパスワードを設定する

インストール

Custom Buttonsのアドオンとして作ったので、Custom Buttons(Custom Buttons²)をインストールしておいて、下のボタンをクリックするとインストールできます。

URL to im.kayacURL to im.kayac

インストールしたら、Edit Buttonから

var username = "";
var password = "";

を自分の情報にあわせて入力すれば完了。

iPhoneへ送りたいサイトを開いた状態で、ボタンを押せばiPhoneへプッシュ通知ができます。

im.kayac.comのAPIがシンプルだったので10分ぐらいで作れましたが、かなり適当な作りしてます。

Posted in Firefox, iPhone | Tags: , , | 1 Comment »

Firefox Developers Conference 2010 アウトラインメモ

11月 21st, 2010

去年に引き続きFirefox Developers Conferenceに参加してきました。
一応メモをとりながら聞いていたのでとても読みにくいですが公開。
内容がまとめきれないのは仕様です。

公式に動画と各発表者の資料リンクをまとめたものが公開されました(2010/12/22)

Firefox Developers Conference 2010
http://mozilla.jp/events/2010/fxdevcon/

Twitterのハッシュタグ#fxdevconを保存しておいたもの。

Togetter – 「Firefox Developers Conference 2010」
http://togetter.com/li/71239

@teramakoさんによる発表者の資料や参加者の感想などをまとめたブクマ

はてなブックマーク – 特別でないただのブックマーク – fxdevcon
http://b.hatena.ne.jp/teramako/fxdevcon/

takanoさんによる動画(一部は著作権上の問題などがあるためない)

YouTube – fxdevcon2010
http://www.youtube.com/results?search_query=fxdevcon2010&search=tag

キックオフ

瀧田さんによる挨拶から始まる

基調講演 Browsing Without Borders

Jay Sullivan (ジェイ・サリバン、Mozilla Corporation 製品担当バイスプレジデント)

Firefox1.0から6年が経った。
Mozillaはユーザーの立場に立って努力できる。(他は企業なのでできることとできないことがある)
6年か変化(4回)したFirefoxのロゴ
インターネットの環境も大きく変わってきたので、Mozillaのロードマップも考えていく必要性。

問題
mobile
    中立性をどう持つのか
クラウド
    コスト
    個人情報を何も考えずに入れちゃう人が多い
アプリ(apps)
ソーシャル
    法律とかが追いついてない
    Mozillaはユーザーに立場に立って何が起きてるのかを考える。
    共通基盤がないので、デベロッパーとしてはどうなのか。

mobile
    多種多様な端末が存在するので対応が大変。
    HTML5はその中はネイティブアプリの80%はできる。
クラウド
    同期がまず第一歩
    暗号化や安心などの点から選択が生まれる
アプリ
    mobileアプリはシンプル
    HTML5のアプリケーションを作るのに問題点としてビジネスサイドの問題がある。
    →app storeのような販売する場所が整ってない
ソーシャル
    ブラウザは立ち上げ台になるかも
    シンプルなAPIが欲しいとこ

ミッションに対する課題はインターネット環境の変化に伴って変化しているので
Mozillaもそれに対応していかないといけない。
その中心にブラウザはあるもの

最も高性能なものとしてでるのは「ゲーム」がある。

mobile
    モバイルブラウザ
    Android1.xにバックポートはしない
    ユーザーはモバイルとPCで同じUXを求めてるのかは疑問的
アプリ
    モバイルと密接な関係
    アプリは収益化のモデルが必要とされてる
    Open Web Appsを開始した理由
    まだ販売環境が整ってない感じなのでスタートアップしにくい。
    これのアプローチを探るためにOpen Web Appsの着手。
    現実世界の例をWebのapp storeに適応したらどうなるか?- 返品、競争 - apps store同士の競争
クラウド
    同期の重要性(Sync)
    データはクラウドに格納してどこでもアクセスできるユキビタスになると思ってる。
ソーシャル
    F1は手順を考える必要を省く手軽さを求めた

Love Hack!!

質問
幾度も繰り返された質問だけどiDeviceへのFirefoxの搭載について
    appleは許してくれない
    Firefox Syncとかの探り
アプリストア
    唯一のストアにはなるわけではない
FirefoxをOSに昇華してみては?
    市場出る必要があるので、投資が必要になる。
    Google Chrome OSとアンドロイドの場合は市場がAndroidを選んだ。
    市場をよく見る必要がある。
    FirefoxPhoneを考えたことはあった。そこからHTML5の課題を学ぶことができた。

John Resig feat. Shibuya.js

ライトニングトークいろいろ

ECMA4の話 - John Resig
    クラス、継承など今まで全く違ったJavaScriptと別物だった。
    →これは多すぎるんじゃないかという問題
    Firefox、Adobeは賛成 　VS　ダグラス様、Google、MSは反対
    ECMA4のほとんどを削ってEMCA5が誕生した。

LLTiger報告 - gyuque

JS Modulatoreの話
    まだdevice要素がないので、送信しかできない

iPhoneをアレコレする - ku
    iEがない
    だけどデバッガーがないので、デバッグしにくい
    もっとデバッグを便利にしたい
    →Peekというアプリの誕生
    ソースコードの表示、インスペクト、

http://github.com/ku/peek

pixiv-tan - yksk
    pixiv wonderlandの解決(自分もpixivの中、直したいです…)
    prototype.jsとjQueryが混在してる
    →jQueryにまとめる
    まずグローバル関数の解決
    テストが余り書かれてない
    URL ディスパッチャー + LAB.js

processing.js  -John Resig
    exCanvasを使ったIE対応
    マウスストロークを追うコードが3行で書ける
    1.0ではWebGLもサポートしてる

JavaScriptをテストするときに考える10のこと - t_wada
    カスタムイベントでまとめることで、ロジックは同じものが使える
    ブラウザなくてもテスト可能にする
    テストの自動化
    まだテストの決定的なものがないなり

Chrome As A Server -kato kazuyoshi
    ChromeでMozRepl
    V8Debuggerを使ってる。
    Emacs上からブレークポイントをうてる

Node.jsにまつわる7つの誤解 - meso
    サーバーサイドJS
    イベント駆動I/Oのブロック問題はNode.js側が解決する。
    Node.jsは個人管理を脱却した

jQuery Mobile - John Resig
    いろんなモバイルデバイスをサポートする
    jQueryをモバイルに分けることはしたくなかったのでJQuery Coreを改良
        TestSwarmというツールを使用
    jQuery Mobieのフレームワークを作成
        UI、デバイスの幅に対応して"機能する"ものを作る

NetFront4のJavaScriptエンジンについて -ACESS

http://ja.wikipedia.org/wiki/NetFront_Browser

    レジスタベース(NO JIT)
    Inline Cache
    組み込みデバイスのスタックサイズの制限
    エラーしても強制的に落ちないように
    C言語で書かれていて、コンパイラによる違いを回避するため柔軟性持たせる
    SpiderMonkey < NetFront 4(No JIT) < TraceMonkey(JIT)
    時間かかかるしょりがあるとウォッチドックに引っかかるかもしれない
    → VM Executorを介して実行させる

Java MIP on HTML5 and Flash - yukoba
     JavaのクラスファイルからJavaScriptとFlash
    画面共有は命令だけを送って高速化

ECMA5の実装 - Constellation
    ECMA5の判断基準
    iv / lv5 (C++)
    仕様書に忠実なものを書きたい
    Shellを書いた
    ステートメントの区切りを管理して複数行継続が行える
    Spidermonkeyは脱ぐとスゴイ(JITなしで比較するとすごく早い)

Firefox 4 & Mobile

加藤 誠 (Mozilla Japan テクニカルアドバイザ)

Firefox4とスピード
起動時間
    汚いプロパティでボトルネックの調査(Talosテスト)
    メインスレッドのI/Oを減らす
     * 可能な限り非同期処理
     * Omni JAR
    StartUp Cache
        利用するJavaScriptファイルをJARにまとめる
WebGL
    OpenGLサポート
    Direct 3D 9
GPUアクセラレーション
    GPUアクセラレーションの利点は速度ではなく、CPUが空くことと電力効率の高さ
DirectWriteのサポート
    文字のジャギがきれいになる
    DirectWriteはα値が入ってるので少し薄く見える
Composition
    ハードウェアアクセラレーション
    Canvas
    CSS Transition
Video
    色空間変換(YUV->RGB)をGPUで行う
    動画はRGBではないので
    ブラウザにシェーダーが入ってる
JavaScript
    TraceMonkey
    jaegerMonkey
        x86プロセッサではSSE2サポートが必須
        Chrome上に対してはオフ
    Krakenというベンチマークで比較
Firefox 4 UI
    タブの位置
    Firefoxメニュー
    リロードボタンはsafari風
    ステータスバーが無くなってる。
    →リンクはアドレスバーに移動した
    →代わりにアドオンバーになった
Firefox Syncはデフォルトに
Panorama
Addon Manger
    アドオン管理画面の変更
Networking
    HTTP Strict Transport Secrity
XSS
    Content Security Policy
バリデーション
    ダウンロードしたコンテンツから悪意を防ぐ

モバイルFennec
    デスクトップと同じレンダリングエンジンを使用
    UIはUXのために変更してる。
    モバイルは画面サイズが違うのでPCそのままは残念なものになる
    FennecはChromeとContentでプロセス分離してる。
    →PCのFirefoxでもやるよ。

Firefox Panorama

mitcho (アーリーワイン・マイケル芳貴)

タブの管理は面倒
人は空間というメタファを記憶することができる
    どこに何があるかを空間で把握してる
AzaがいくつかのUI実験を繰り返して作ってみた。
タブをグループ管理、Undo、Redo
→何かの作業に集中できる

Panoramaの開発
    TabCandyアドオンの開発(jQuery使ってた)
    jQueryをアドオン専用のiQというものにフォーク
    TabViewという名前になって、Panoramaという名前に正式決定。
    iframeのtabview.htmlが本体
    つまりPanoramaの中身はDOM的なもの

iQ
    邪魔なものは排除、Firefox/Gecko向けに特化したライブラリ
タブの整理の仕方
    溝を作ってタブグループの吸着をよくする
    場所が無くなったら縮小
    ウィンドウを小さくするとグループを縮小して空間の間隔を維持する

Jetpack SDKからrquire("panorama")
    TabItemsとiQオブジェクトにアクセスできる

Jetpack に乗っかれないロートルのための、再起動いらずなアドオンの作り方 ～ Bootstrapped Add-on 詳説 ～

再起動なしのアドオン作成の作り方
Jetpack prototype
    再起動の仕組みはGreasemonkeyと似てる
Jetpack SDK
    ライブラリ+ビルト環境+テスト環境
    再起動なしの反映
        Bootstrapped ExtensionsというFirefox4からの仕組み
        3.6と4.xで再起動なしの仕組みが違う
Bootstrapped Extensionsの話
自分でinstallからuninstallまで管理しないといけない。
関数の書き換え系は危険なのでDOM 0なイベントの書き方はアウト。

loadOverlayはunloadできないのでJetpackでは使えない。
要素の変更は順番で駄目だったりすることがある。
=>元に戻せるならOK、可逆的な変更のみ
「完全には元に戻せない時の不整合が蓄積」=>これまで問題では無かったところが問題になることがある。
結論的にはJetpack SDKを使いましょう。

トークセッション: HTML5 時代の技術で Web プラットフォームはどう変わるのか

*矢倉 眞隆 (株式会社 ミツエーリンクス、W3C HTML5 Japanese Interest Group 議長)
*村岡 正和 (HTML5-WEST.jp 共同設立者)
*浅井 智也 (Mozilla Japan テクニカルマーケティング)

"HTML5時代の技術" => HTML5の関連の技術という意味ではない。

*矢倉
TPAC 2010(W3Cの総会)についての話
    CSS WG - レイアウトの話
    HTML WG  - アクセシビリティ
    WebApps WG - 多種多様活発
        DOM 、Eventとかいろいろ
        Web DOM Coreを現実的な仕様へ
    DAP WG

WebApps WGとDAP WGが面白い

*村岡
    関西で活動

大ライトニングトーク

途中で電池切れました
メモできてないけど、ES Hamony の Proxy について #fxdevcon で LT してきました – mooz deceives you よかった。

*swdyh - クロスブラウザ拡張ライブラリ
     * Chrome
     * Firefox(Jetpack SDK)
     * Safari
     * Opera　それぞれに拡張機能ができた
    それぞれブラウザでやり方が異なる。
    →それを吸収するライブラリを作成する
    Extension.js
    ブラウザ拡張の互換性を吸収するライブラリ

*齋藤幸士 - モダンブラウザによるWebサービス拡張
    ソーシャルメディア時代
    Webサービスをもっとリッチにする(Twitter)
    オレオレ短縮URL

*kawanet - 3D JavaScript
    3次元の世界
    CSS3で実装
    トグルが実装されてた

*Takesako - Firefox HTML Parserの歴史
    ブラウザ毎に認識が違う
    IMGタグの認識で振り分け

*Gomita - Tab Scope 1.0 ~ CSS transition で魅せるXUL拡張機能 ~
    Firefox4向けにTab Scope拡張
...

メモ感想

去年と比べると全くの聞いたことないようなものってはかなり少なくなった。
どこかで一度聞いた、誰か言ってた気がするみたいな浅いレベルの情報があった感じが多かった。
仕様書はあまり読んでなかったので、知らないことがあった。
NetFront4のJavaScriptエンジンの話は何か新鮮だったので、もっといろんな話が聞けたら良かったと思う。
John Resigさんに書いてる本がNinjaなのに表紙がSamuraiな件なのを聞くの忘れました。
ライトニングトークが多すぎる気がするので、もっと他の事に機会(時間)を与えた方がいい気がした。

はてなブックマーク – 特別でないただのブックマーク – fxdevcon
http://b.hatena.ne.jp/teramako/fxdevcon/
Togetter – 「Firefox Developers Conference 2010」
http://togetter.com/li/71239
Firefox Developers Conference 2010
http://mozilla.jp/events/2010/fxdevcon/
Posted in Firefox, イベント | Tags: , , , , , | 1 Comment »

Firebugを拡張するアドオンをまとめてみた

11月 19th, 2010

Firebugを拡張するアドオンを紹介

Firecookie

クッキーの編集や削除をする
クッキーの変更に反応してログを吐いてくれる

Software is hard | Firecookie

NetExport

通信タブの記録をHTTP Archive 1.1 (HAR)形式で保存
通信タブの表示を画像としてクリップボードにコピー

Firebug Autocompleter

FirebugのCommand EditorにJavaScriptのコード補完機能をつける。
(Firebugにもデフォルトで補完機能はあるが、一行Command Lineにしか反応しない)

Firescroll for Firebug

“Auto-Scroll” 自動でFirebugのログをスクロール
“Log to top” Firebugのログで上が最新になるようにするTweak

Widerbug

Firebugを縦置きにするTweak

Firebugmonkey

Greasemonkeyをスクリプトタブでデバッグする
UxU（うず）のように内部でGreasemonkey APIのエミュレートをしてる
Greasemonkeyはスクリプトタブに表示されずブレークポイントをうつなどのデバッガーを使ったデバッグが行えない
デバッガーでデバッグできない理由はevalInSandboxで実行されていて、evalInSandboxはC++実装だから。(多分Firebugでも同じ)
Greasemonkey のユーザスクリプトは Venkman the JavaScript debugger でデバッグできない：experiment：So-net blog

JavaScript Deminifier

Firebugのスクリプトタブで表示するJavaScriptを整形表示する
整形表示した状態でブレークポイントを打てるので圧縮されたファイルでもブレークできる
IE9 PP6 F12 開発者ツールのJavaScript整形みたいな機能
整形はjs-beautifyを使用、FireRainbowと競合する

FireRainbow

FirebugのスクリプトタブでJavaScriptのシンタックスハイライト表示を行う
HTML、CSSも一応対応

Eventbug

要素に適当されているイベントハンドラを表示する
clickしたらどの関数が実行されるかなどが分かる
(バージョンで動かない事が多い)

FireQuery

jQuery言語の表現をFirebugでも認識できるようにする
jQueryがないページでもCommand LineからjQueryを使える要にする
jQuery Lintの有効化

YSlow

ページ表示にかかる時間を計測
ページのボトルネックを調査

Firepicker

FirebugのCSSタブでカラーピッカーを使えるようにする

FireXPath

FirebugにXPathとCSSセレクタの確認ができるタブを追加する

Firequark

Firebugに選択要素のCSSセレクタをコピーできるようにするアドオン
(デフォルトはXPathしかないのでね)

CodeBurner

FirebugにHTML+CSSのリファレンスを追加する
他のソフトウェア向けにも出している

Adobe BrowserLab for Firebug

Firebugで加えた一時的な変更をAdobe BrowserLabを使ってプレビューする。
ページを変更してスクリーンショットで各ブラウザ表示を確認できる。

Pixel Perfect

指定した画像をFirefox上に重ねて表示してデザインがずれてないかを確認する

Arboreal

DOMツリーを視覚化して表示する
似たようなものとしてはView Source Chart

Illumination for Developers

ExtJSやjQuery UIなどのコンポーネントやデータの状態を表示する
現在はExt JSとSencha Touchに対応してて、有料で正式リリースする
Illumination for Developers によるとクロスプラットフォームを目指している

XRefresh

ファイルを監視してエディタで編集されたらブラウザをリロードする
クロスプラットフォーム対応

CSS Usage

読み込んだCSSで、それぞれのstyleが閲覧ページ内で本当に適用されているかどうか確認する
使われてないstyleを見つける

Firefocus

閲覧ページのどの要素にフォーカスがあるのかをHTMLタブに表示する

FireFile

サーバーサイドにスクリプトを用意(FireFile Instructions)することで、Firebugで変更した内容を反映させる事ができる。
また、Firebugで変更を反映したファイルをダウンロードすることができる。

FireUnit

Firebugで使えるユニットテスト
何か放置されてるような気がする

Log to Netpanel

JavaScriptから通信タブにマーカーを挿入可能になる
Teun.ToString(): Announcing Log to Netpanel – by Teun Duynstee

Omnibug

Omniture、WebTrends、Google Analytics、Urchin、Moniforceなどの計測データを確認。
utm_*などのアクセス解析のログを見やすく表示する

FireLogger

Python、PHP、RubyからFirebugへログを吐く

Flashbug

FlashのログをFirebugに表示することができる。
1.6からAMF dataにも対応

FlashFirebug

AS側にO-Mindsを仕込んでおくことでFirebugを使ったデバッグをできるようにする


書いてる途中でWikiがあるのを思い出して、大体被ってた気がしたけど問題ない。

Firebug Extensions – FirebugWiki
http://getfirebug.com/wiki/index.php/Firebug_Extensions
Posted in アドオン | Tags: , , , | 2 Comments »
« Older Entries
Newer Entries »
プロフィール: azu(ｱｽﾞ)
Firefoxの事やソフトウェアの紹介や使い道、Greasemonkeyの作成
  • OS:Windows Vista, 7
  • ブラウザ:Firefox
  • Twitterのアカウントはこちら
    • azu_re
  • メールアドレス(Twitterの方が確実)
    • info@ドメイン名
リンク

^ ページトップへ | このサイトについて | サイト管理
Copyright © 2009 Web scratch. All Rights Reserved.

Powered by WordPress and WordPress Theme created with Artisteer.