firebugやfirefoxは使いまくらないと、生きていけない><

2008-01-12

■[tenjin.web][javascript][firefox][firebug]firebugやfirefoxは使いまくらないと、生きていけない><

２回目のtenjin.webに参加した。

今回は、id:brazilさんによる、firebugの活用法。

とても充実した内容で、firebugに限らず、どういう風にwebサイトを見ればいいのか勉強になった。

以下、自分まとめだけど、

http://tenjin-web.jottit.com/workshop/firebug

が、激しくまとまりまくり。必見。

はじめに

会の目的
- JavaScriptもりあがっているね。
- でも、開発が効率的でないね。
- 楽しいけど、どう伝えればいい？
- だめ本をもっていて、いまいち使いこなせていない人が対象
- Ajax
  - アジャックス
  - エイジャックス？
- SICPみたいな濃いのを教えたいよ
- 簡単に書けるから、逆にどう書けばいいか分からない
- みんなで集まって知識を共有・血肉化しようね。
今後
- greasemonkeyとか

今回の趣旨

java環境として、firebugを使おう

firebugとは？

firefoxのアドオン
開発補助ツール
firebug=蛍

ワークショップ本題

html機能
- DOMツリー表示
- htmlをリアルタイム表示
- JavaScriptで変わったときとか
- options -> Scroll Changes IntoView
- options -> Highkight Changes
- インスペクトしたところを右クリック
- いろいろ機能
css
- inspectすると、firebugの右側にcssの情報がでてくる
- 補完が効く
- 色のプレびゅー
- stylishで書き換えたcssを保存して、利用
ネットワーク
- webサイトを読み込んだとき、どのようにファイルが読み込まれているかを表示
- 色が濃い：キャッシュ
- 色が薄い：ネットから
- webサイトの読み込み方は、どうなっているでしょうか？
- javascript１つ読み込むまで、読み込まない
- 画像　同時に読み込む
- 画面の高速化するときに、どの処理を効率化するかを予想できる。
コマンドライン / DOM
- javascriptの文法練習
- 1 + 2 + 'A'
  - 左側が優先
- '11' < 3
  - false
- '11' < '3'
  - true
- 100 || 200
  - ||演算子
  - 左側が、trueになるなら、左側の値をそのまま変換できずに返します
  - オプションの引値
- 100 && 200
  - 200
- null == undefined
- null === undefined
- 文字列への変換
  - '' +
- オブジェクト->真理値
  - !!
- 3+true
  - 4
- typeof
  - 変数が宣言されているかどうか？
  - typeof(aa)->"undefined"
- document.links=document.getElementsByTagName('a')
- inspect in DomTab
  - Domのtree構造
- document.body.innerHTML に何度もアクセスするのは重い
  - getしてsetするから遅い
  - いっぱいプロパティがある
- firefox特有のJavaScript
- copy関数
  - クリップボードに貼り付け
- Array
  - foreach
  - map
- Array.map便利すぎ
- copy(Array.map(document.links, function(link){return link.href;}).join('\n'))
  - リンク先をすべて、クリップボードに貼り付けられる。
- IEにはない
- jQueryのmapは死ぬほど遅い
コンソール / エラー / デバッグ
- console.logの活用
- サイトのjavascriptにうめこんで、log出力に利用
- input textにinspect
- inspectでLog Events
正確なベンチはない
- 自分で利用しているアプリケーションでベンチを取る
- ユーザーインターフェースの世界は時間を短くしないとだめ
bookmarklet

便利なサイト・ツール

拡大鏡
- プレゼンのときに、画面の一部を大きく表示できる
jottit
- 簡単に作れるwiki
- tenjin-web.jottit.com
Lingr
- チャットが簡単にできます
Flickr
- 写真共有サイト
- zoomrとかもあるよ
Yahoo Pipes
- feedをパイプ処理
- いつも購読するサイトから、必要のない情報（広告とか）を消して、整理
- 無駄なことを考えなくてよい

firefoxの話題

リンク先を別タグで開きたい
- Ctrl-クリック
- 右クリックメニュー
firebugが重い件について
- firefoxのprofileを切り分ける。
- allowed sitesで使用するサイトを分けておく

感想

id:brazilさんのワークショップ・準備資料がすばらしすぎる！！！
おもしろそうな動きをするサイトがあったら。。。
- どうやって動いているのか調査する
- ネタ帳にメモしておいて、webで何ができるか何ができないのかの理解を深める
受け取る情報を自分仕様に変える
- firebugで試す
- bookmarklet
- grease monkey
canvas , svgって知らんな～