脱・コピペプログラマー 〜Google Analytics 編〜

Transcript

1. 脱・コピペプログラマー ～ Google Analytics 編 ～
2. コピペプログラマーとは？ • ググる → 見つけたコードをコピペ → OK. 動いた！ Google検索から望みのコードを発掘して、コピペでソースファ イルを埋め尽くすこと（通称、スクラップブックコーディング - 筆者命名）によって様々な難易度の高い処理を実現すること ができる。張り付けているソースを100%理解した上で使用して いる人はコピペプログラマとは呼ばない。なんとなく張り付け てなんとなく動いたというやっつけ仕事をする人を指す。 出典）プログラマのクラスチェンジ表（草稿） http://blog.mwsoft.jp/article/29852520.html
3. ネットに落ちてるコードを理解してますか？ qsort [] = [] qsort (p:xs) = qsort lt ++ [p] ++ qsort gteq where lt = [x | x <- xs, x < p] gteq = [x | x <- xs, x >= p] このコードはなに？ クイックにソート してくれる奴です。 速いっぽいッス。
4. <script> (function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); </script> 何も考えずにコピペしてませんか？
5. Google Analytics は誰の担当？ KPI を見える化 したいなー 経営者 GA 入れてー マーケター アッチとコッチ（現場）の 境界線 もっと 先進的なUIに デザイナー 表と裏（黒い画面の向こう）の 境界線 エンジニア 優先順位が わかんない。。 プロデューサー 新機能追加！
6. JavaScript は誰が書く？？ ビジネス 検討 要件定義 デザイン HTML/CSS システム開発 テスト 経営者 プロデューサー デザイナー エンジニア JavaScript JavaScript 何となく浮き球になるフロントエンド技術 ※エンジニアはもちろん、デザイナーも理解しておいたほうが良い分野 Backbone, Angular とかメリデメ考えずに入れるとサービス品質や開発効率を下げるので注意
7. <script> (function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); </script> 本題、Let’s コードリーディング
8. スクリプトの読み込み処理 <script> (function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); </script> <script src="//www.google-analytics.com/analytics.js"></script> って書いたらダメなの？
9. スクリプト実行中のダウンロードブロック • src 属性で読み込むと実行完了までブロックされる JavaScript のあとに読み込み待ちのファイル （画像や別のスクリプトファイル）が出来てしまう ※近頃のモダンなブラウザーは賢いので、src 属性指定のべた書きであっても、 実は良い感じに並列化したり実行順序を考慮してくれたりします。 ※async 属性が仕様上には存在するけど、非同期になるかはブラウザの実装次第みたいです。
10. DOM Injection による非同期ロード • script タグを動的に document に挿入する手法 • 画像などの外部ファイルを並列ダウンロードできる • Google 先生曰く 出典）Google Analytics launches asynchronous tracking http://analytics.blogspot.jp/2009/12/google-analytics-launches-asynchronous.html ブラウザの実行順序改善によるレンダリング高速化 データの収集・精度の向上 JavaScript のロード完了前の依存性によるエラーの除去
11. 細かい話はさて置き、とりあえず速くなる！ 1章 Ajaxアプリケーションとパフォーマンス 2章応答性の高いウェブアプリケーション 3章初期ロードの分割 4章実行をブロックしないスクリプトのロード 5章非同期のスクリプトの組み合わせ 6章インラインスクリプトの適切な位置 7章効率的な JavaScriptコード 8章 Comet 9章 gzip圧縮再考 10章画像の最適化 11章主ドメインの細分化 12章ドキュメントのフラッシュ 13章 iframeの取り扱い 14章 CSSセレクタの単純化 1章 ルール1：HTTPリクエストを減らす 2章 ルール2：CDNを使う 3章 ルール3：Expiresヘッダを設定する 4章 ルール4：コンポーネントをgzipする 5章 ルール5：スタイルシートは先頭に置く 6章 ルール6：スクリプトは最後に置く 7章 ルール7：CSS expressionの使用を控える 8章 ルール8：JavaScriptとCSSは外部ファイル化する 9章 ルール9：DNSルックアップを減らす 10章 ルール10：JavaScriptを縮小化する 11章 ルール11：リダイレクトを避ける 12章 ルール12：スクリプトを重複させない 13章 ルール13：ETagの設定を変更する 14章 ルール14：Ajaxをキャッシュ可能にする 15章 米国トップ10サイトの分析 フロントエンド （HTML/CSS/JavaScript）で Web は速くなる
12. ベタ書き（同期） DOM Injection（非同期）
13. <script> (function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); </script> 非同期にすると発生するアレ 読み込みが遅れたら、どうするの？ そもそも、読み込みエラーしたら・・・。どうなるの？
14. <script> (function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); // スクリプトが読み込まれるのを待つ処理が必要？？ while (true) { if (ga) { ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); break; } } </script> ベタベタな同期処理
15. <script> (function(i,s,o,g,r,a,m){ i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date(); a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXX-XX', 'yulii.net'); ga('send', 'pageview'); </script> カッコいい同期処理 実は、同期処理がすでに考慮済み。
16. 読み込み完了前の ga 関数
17. まとめ • JavaScript ロード中は、他のダウンロードがブロック – モダンブラウザは賢いので、うまく並列化されることも • 同期処理には、引数のキューを利用すると良さげ – Google Analytics の ga.q の様に、配列に push しておく • 何気ないコードの中に使えるテクニックがあるよ – 何となくコピペしてしまったコードを読んでみよう