素敵なjavascript ～firefox編～

素敵な javascriptFirefox 編

Hisatoshi Kikumoto

今更ですが Firefox です

Firefox 使ってる？？

未だに IE とか使ってない？？

IE と比べてこんなにメリットがありますよ

セキュリティ脅威の解決に向けた迅速な対応

ブラウザの機能やデザインを自由にカスタマイズできる数千もの無料のアドオン

スマートなブラウジング環境の採用

Web の改善をミッションに掲げるボランティアによるグローバルなコミュニティの成果

Firefox 他ブラウザとの比較より抜粋

本当に今更ですがFirefox の便利な使い方を紹介します

業務効率化出来たらいいね

その 1 アドオン入れよう

仕事が効率化できそうなアドオンです

FireBug

User Agent Switcher

ColorZilla

Selenium IDE

IE Tab

Greasemonkey

ここは特に詳しくは触れません。好きに探してみてください

Firebug おさらい

Firebug は以下の機能で HTML 、 CSS 、 Javascript の開発にとても役立ちます

コンソール

HTML 解析

CSS 解析

スクリプト解析

DOM インスペクタ

ネットワーク監視

Firebug おさらい　おまけ

次の Firebug 用アドオンでさらに便利です

FireRainbow

CodeBurner

その 2 Javascriptで便利に

例えばロケーションバーに javascript:alert(‘hello world’) と入力して実行してみてください。アラートが表示されます。

これを利用してブックマークレットとして javascript を登録しておけば簡単にページの情報を取得したり、使いやすくしたりできます。もちろん試す時は Firebug で実行してみてください (Greasemonkey のほうがいいかも。。）

javascript:(function(){ var d=(new Date); var s=document.createElement('script'); s.charset='UTF-8'; s.src='http://b.hatena.ne.jp/js/Hatena/Bookmark/let.js?'+d.getFullYear()+d.getMonth()+d.getDate(); (document.getElementsByTagName('head')[0]||document.body).appendChild(s);})();

サンプル：はてぶのブックマークレットを見やすく成形したもの


サンプル 1 カンマ区切りを外すスクリプト

document.body.innerHTML = document.body.innerHTML.replace(/([0-9]{1})\,([0-9]{3})/g, "$1$2");


サンプル 2 テーブルデータをカンマ区切りで抽出var classname = prompt(' クラス名？ ');var num = prompt(' 何番目？ ');var t=document.getElementsByClassName(classname)[num];var str = '';for (var i=0; i<t.tBodies.length; i++) { var b = t.tBodies.item(i); for (var j=0; j<b.rows.length; j++) { var r = b.rows.item(j); for (var k=0; k<r.cells.length;k++) { var c = r.cells.item(k); var text = c.innerHTML.replace(/<\/?[^>]+>/gi, ""); str = str + text + ","; } str = str + "<br />"; }}var element = document.createElement('div'); element.id = "id"; element.innerHTML = str; element.style.backgroundColor = '#FFFFFF'; element.style.border = '1px solid #000';element.style.position = "fixed";element.style.top = "0px";element.style.left = "0px";var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(element);

以上です

これじゃつまらないのでアドオンの作り方

その 3　アドオンを作ろう

Firefox のアドオンは以下の技術で chrome や XPCOM を以下の技術からいじっていきます

XUL(UI 定義 )

javascript

css

chrome とは Firefox のアプリケーションウィンドウの UI 要素のセットであり、 XPCOM は Firefox のコア機能になります

作ってみました

「うっかりググったー」

その 3　アドオンを作ろう　開発環境

firefox -ProfileManager を起動して dev とかでプロファイルを作成

firefox -no-remote -P dev で起動

about:config から以下のパラメータを true に設定

javascript.options.showInConsole (chrome のエラーをコンソール出力）

nglayout.debug.disable_xul_cache （ XUL キャッシュの無効 )

browser.dom.window.dump.enabled (dump 文の使用 )

javascript.options.strict ( コンソールの厳密な警告 )

その 3　アドオンを作ろう　実装

Firefox のアドオンウィザードページがあるのでここから雛形を作ると早いです

http://ted.mielczarek.org/code/mozilla/extensionwiz/

適当なフォルダに解凍したら C:\Documents and Settings\ ユーザ名 \Application Data\Mozilla\Firefox\Profiles\ ホニャララ .dev\extensions にアプリケーション ID 明のファイルを作成し、ファイルの中にソースのルートフォルダの位置を書いて完成です

起動するとインストールされているので、あとは XUL や javascript を適宜修正していけば簡単に作成できます

ちなみに XUL の編集とかはアンインストールして再度やらないといけないのでちょっと面倒です。

http://ted.mielczarek.org/code/mozilla/extensionwiz/

Firefox の今後

次期バージョンから「 Jetpack 」という機能が搭載され、 javascript だけで機能拡張が出来る仕組み (Feature) が用意されます

現在 Jetpack はアドオン提供されています

その他、軽量テーマの実装や OS との融合等も進められます。

2010Q1 ～ 3 の間でリリースされる予定です

今では色々なブラウザがありますが

簡単で便利な Firefox を使いましょう！！

次回予告素敵な javascriptGoogle Chrome

編

おまけ

Firefox はメモリをかなり食って重たくなるのでチューニングするといいですよ

1. SQLite Optimizer インストール

2. about:config から network.dns.disableIPv6 を false に設定

3. MetaboFix を入れる

http://feed.designlinkdatabase.net/feed/outsite_312966.aspx

素敵なjavascript ～firefox編 ～

Documents

素敵なjavascript ～firefox編～