素敵なjavascript ～Firefox編～

素敵な javascript Firefox 編 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 DataMozillaFirefoxProfiles ホニャララ .devextensions にアプリケーション ID 明のファイルを作成し、ファイルの中にソースのルートフォルダの位置を書いて完成です
起動するとインストールされているので、あとは XUL や javascript を適宜修正していけば簡単に作成できます
ちなみに XUL の編集とかはアンインストールして再度やらないといけないのでちょっと面倒です。

Firefox の今後
次期バージョンから「 Jetpack 」という機能が搭載され、 javascript だけで機能拡張が出来る仕組み (Feature) が用意されます
現在 Jetpack はアドオン提供されています
その他、軽量テーマの実装や OS との融合等も進められます。
2010Q1 ～ 3 の間でリリースされる予定です

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

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

次回予告素敵な javascript Google Chrome 編

おまけ
Firefox はメモリをかなり食って重たくなるのでチューニングするといいですよ
SQLite Optimizer インストール
about:config から network.dns.disableIPv6 を false に設定
MetaboFix を入れる
http://feed.designlinkdatabase.net/feed/outsite_312966.aspx

http://techknowledge.fractalist.jp	35
http://techknowledge.ngigroup.com	15
http://www.slideshare.net	12

素敵なjavascript ～Firefox編～

by ngi group. on Dec 21, 2009

Accessibility

Tags

Upload Details

Usage Rights

Embed Views

Statistics