素敵なjavascript ~Firefox編 ~

2,539 views

Published on

firebugやらアドオンやらをjavascriptカテゴリでまとめてみました

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,539
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

素敵なjavascript ~Firefox編 ~

  1. 1. 素敵な javascript Firefox 編 Hisatoshi Kikumoto
  2. 2. 今更ですが Firefox です
  3. 3. Firefox 使ってる?? <ul><li>未だに IE とか使ってない?? </li></ul><ul><li>IE と比べてこんなにメリットがありますよ </li></ul><ul><ul><li>セキュリティ脅威の解決に向けた迅速な対応 </li></ul></ul><ul><ul><li>ブラウザの機能やデザインを自由にカスタマイズできる数千もの無料のアドオン </li></ul></ul><ul><ul><li>スマートなブラウジング環境の採用 </li></ul></ul><ul><ul><li>Web の改善をミッションに掲げるボランティアによるグローバルなコミュニティの成果 </li></ul></ul>Firefox 他ブラウザとの比較より抜粋
  4. 4. 本当に今更ですが Firefox の便利な使い方を紹介します
  5. 5. 業務効率化出来たらいいね
  6. 6. その 1 アドオン入れよう <ul><li>仕事が効率化できそうなアドオンです </li></ul><ul><ul><li>FireBug </li></ul></ul><ul><ul><li>User Agent Switcher </li></ul></ul><ul><ul><li>ColorZilla </li></ul></ul><ul><ul><li>Selenium IDE </li></ul></ul><ul><ul><li>IE Tab </li></ul></ul><ul><ul><li>Greasemonkey </li></ul></ul>ここは特に詳しくは触れません。好きに探してみてください
  7. 7. Firebug おさらい <ul><li>Firebug は以下の機能で HTML 、 CSS 、 Javascript の開発にとても役立ちます </li></ul><ul><ul><li>コンソール </li></ul></ul><ul><ul><li>HTML 解析 </li></ul></ul><ul><ul><li>CSS 解析 </li></ul></ul><ul><ul><li>スクリプト解析 </li></ul></ul><ul><ul><li>DOM インスペクタ </li></ul></ul><ul><ul><li>ネットワーク監視 </li></ul></ul>
  8. 8. Firebug おさらい おまけ <ul><li>次の Firebug 用アドオンでさらに便利です </li></ul><ul><ul><li>FireRainbow </li></ul></ul><ul><ul><li>CodeBurner </li></ul></ul>
  9. 9. その 2   Javascript で便利に <ul><li>例えばロケーションバーに javascript:alert(‘hello world’) と入力して実行してみてください。アラートが表示されます。 </li></ul><ul><li>これを利用してブックマークレットとして javascript を登録しておけば簡単にページの情報を取得したり、使いやすくしたりできます。もちろん試す時は Firebug で実行してみてください (Greasemonkey のほうがいいかも。。) </li></ul>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. 10. その 2   Javascript で便利に <ul><li>サンプル 1 カンマ区切りを外すスクリプト </li></ul>document.body.innerHTML = document.body.innerHTML.replace(/([0-9]{1}),([0-9]{3})/g, &quot;$1$2&quot;);
  11. 11. その 2   Javascript で便利に <ul><li>サンプル 2 テーブルデータをカンマ区切りで抽出 </li></ul>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, &quot;&quot;); str = str + text + &quot;,&quot;; } str = str + &quot;<br />&quot;; } } var element = document.createElement('div'); element.id = &quot;id&quot;; element.innerHTML = str; element.style.backgroundColor = '#FFFFFF'; element.style.border = '1px solid #000'; element.style.position = &quot;fixed&quot;; element.style.top = &quot;0px&quot;; element.style.left = &quot;0px&quot;; var objBody = document.getElementsByTagName(&quot;body&quot;).item(0); objBody.appendChild(element);
  12. 12. 以上です
  13. 13. これじゃつまらないので アドオンの作り方
  14. 14. その 3  アドオンを作ろう <ul><li>Firefox のアドオンは以下の技術で chrome や XPCOM を以下の技術からいじっていきます </li></ul><ul><ul><li>XUL(UI 定義 ) </li></ul></ul><ul><ul><li>javascript </li></ul></ul><ul><ul><li>css </li></ul></ul><ul><li>chrome とは Firefox のアプリケーションウィンドウの UI 要素のセットであり、 XPCOM は Firefox のコア機能になります </li></ul>
  15. 15. 作ってみました
  16. 16. 「うっかりググったー」
  17. 17. その 3  アドオンを作ろう 開発環境 <ul><li>firefox -ProfileManager を起動して dev とかでプロファイルを作成 </li></ul><ul><li>firefox -no-remote -P dev で起動 </li></ul><ul><li>about:config から以下のパラメータを true に設定 </li></ul><ul><ul><li>javascript.options.showInConsole (chrome のエラーをコンソール出力) </li></ul></ul><ul><ul><li>nglayout.debug.disable_xul_cache ( XUL キャッシュの無効 ) </li></ul></ul><ul><ul><li>browser.dom.window.dump.enabled (dump 文の使用 ) </li></ul></ul><ul><ul><li>javascript.options.strict ( コンソールの厳密な警告 ) </li></ul></ul>
  18. 18. その 3  アドオンを作ろう 実装 <ul><li>Firefox のアドオンウィザードページがあるのでここから雛形を作ると早いです </li></ul><ul><ul><li>http://ted.mielczarek.org/code/mozilla/extensionwiz/ </li></ul></ul><ul><li>適当なフォルダに解凍したら C:Documents and Settings ユーザ名 Application DataMozillaFirefoxProfiles ホニャララ .devextensions にアプリケーション ID 明のファイルを作成し、ファイルの中にソースのルートフォルダの位置を書いて完成です </li></ul><ul><li>起動するとインストールされているので、あとは XUL や javascript を適宜修正していけば簡単に作成できます </li></ul><ul><li>ちなみに XUL の編集とかはアンインストールして再度やらないといけないのでちょっと面倒です。 </li></ul>
  19. 19. Firefox の今後 <ul><li>次期バージョンから「 Jetpack 」という機能が搭載され、 javascript だけで機能拡張が出来る仕組み (Feature) が用意されます </li></ul><ul><li>現在 Jetpack はアドオン提供されています </li></ul><ul><li>その他、軽量テーマの実装や OS との融合等も進められます。 </li></ul><ul><li>2010Q1 ~ 3 の間でリリースされる予定です </li></ul>
  20. 20. 今では色々なブラウザがありますが
  21. 21. 簡単で便利な Firefox を 使いましょう!!
  22. 22. 次回予告 素敵な javascript Google Chrome 編
  23. 23. おまけ <ul><li>Firefox はメモリをかなり食って重たくなるのでチューニングするといいですよ </li></ul><ul><li>SQLite Optimizer インストール </li></ul><ul><li>about:config から network.dns.disableIPv6 を false に設定 </li></ul><ul><li>MetaboFix を入れる </li></ul><ul><ul><li>http://feed.designlinkdatabase.net/feed/outsite_312966.aspx </li></ul></ul>

×