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

tenjin.web javascript firefox firebug

２回目のtenjin.webに参加した。
今回は、id:brazilさんによる、firebugの活用法。
とても充実した内容で、firebugに限らず、どういう風にwebサイトを見ればいいのか勉強になった。


以下、自分まとめだけど、
http://tenjin-web.jottit.com/workshop/firebug
が、激しくまとまりまくり。必見。

はじめに

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

今回の趣旨

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で何ができるか何ができないのかの理解を深める
  • 受け取る情報を自分仕様に変える
  • canvas , svgって知らんな〜