Download to read offline
![その 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); })(); サンプル：はてぶのブックマークレットを見やすく成形したもの](https://image.slidesharecdn.com/javascript091208-091221004353-phpapp02/85/javascript-Firefox-9-320.jpg)
![その 2 Javascript で便利に サンプル 1 カンマ区切りを外すスクリプト document.body.innerHTML = document.body.innerHTML.replace(/([0-9]{1})\,([0-9]{3})/g, "$1$2");](https://image.slidesharecdn.com/javascript091208-091221004353-phpapp02/85/javascript-Firefox-10-320.jpg)
![その 2 Javascript で便利に サンプル 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);](https://image.slidesharecdn.com/javascript091208-091221004353-phpapp02/85/javascript-Firefox-11-320.jpg)
素敵なjavascript ～Firefox編 ～
- 1. 素敵な javascript Firefox編 Hisatoshi Kikumoto
- 2.
- 3. Firefox 使ってる？？ 未だにIE とか使ってない？？ IE と比べてこんなにメリットがありますよ セキュリティ脅威の解決に向けた迅速な対応 ブラウザの機能やデザインを自由にカスタマイズできる数千もの無料のアドオン スマートなブラウジング環境の採用 Web の改善をミッションに掲げるボランティアによるグローバルなコミュニティの成果 Firefox 他ブラウザとの比較より抜粋
- 4.
- 5.
- 6. その 1 アドオン入れよう 仕事が効率化できそうなアドオンです FireBug User Agent Switcher ColorZilla Selenium IDE IE Tab Greasemonkey ここは特に詳しくは触れません。好きに探してみてください
- 7. Firebug おさらい Firebugは以下の機能で HTML 、 CSS 、 Javascript の開発にとても役立ちます コンソール HTML 解析 CSS 解析 スクリプト解析 DOM インスペクタ ネットワーク監視
- 8. Firebug おさらい おまけ 次のFirebug 用アドオンでさらに便利です FireRainbow CodeBurner
- 9. その 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); })(); サンプル：はてぶのブックマークレットを見やすく成形したもの
- 10. その 2 Javascript で便利に サンプル 1 カンマ区切りを外すスクリプト document.body.innerHTML = document.body.innerHTML.replace(/([0-9]{1})\,([0-9]{3})/g, "$1$2");
- 11. その 2 Javascript で便利に サンプル 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);
- 12.
- 13.
- 14. その 3 アドオンを作ろうFirefox のアドオンは以下の技術で chrome や XPCOM を以下の技術からいじっていきます XUL(UI 定義 ) javascript css chrome とは Firefox のアプリケーションウィンドウの UI 要素のセットであり、 XPCOM は Firefox のコア機能になります
- 15.
- 16.
- 17. その 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 ( コンソールの厳密な警告 )
- 18. その 3 アドオンを作ろう 実装Firefox のアドオンウィザードページがあるのでここから雛形を作ると早いです http://ted.mielczarek.org/code/mozilla/extensionwiz/ 適当なフォルダに解凍したら C:\Documents and Settings\ ユーザ名 \Application Data\Mozilla\Firefox\Profiles\ ホニャララ .dev\extensions にアプリケーション ID 明のファイルを作成し、ファイルの中にソースのルートフォルダの位置を書いて完成です 起動するとインストールされているので、あとは XUL や javascript を適宜修正していけば簡単に作成できます ちなみに XUL の編集とかはアンインストールして再度やらないといけないのでちょっと面倒です。
- 19. Firefox の今後 次期バージョンから「Jetpack 」という機能が搭載され、 javascript だけで機能拡張が出来る仕組み (Feature) が用意されます 現在 Jetpack はアドオン提供されています その他、軽量テーマの実装や OS との融合等も進められます。 2010Q1 ～ 3 の間でリリースされる予定です
- 20.
- 21. 簡単で便利な Firefox を使いましょう！！
- 22. 次回予告 素敵な javascriptGoogle Chrome 編
- 23. おまけ Firefox はメモリをかなり食って重たくなるのでチューニングするといいですよSQLite Optimizer インストール about:config から network.dns.disableIPv6 を false に設定 MetaboFix を入れる http://feed.designlinkdatabase.net/feed/outsite_312966.aspx