Transcript 技術トピックス - 株式会社フォアフロンティア

今月の技術トピックス
株式会社フォアフロンティア
2013/01 帰社日
1. 今月の技術トピックス
• 今月のトピックスは以下の通り
(1) HTML5関連
(2) JQuery関連
※今月は発表が多いので少なめで
1-1-1. HTML5
• W3Cが2012/12/17にHTML5の仕様策定が完
了したことを発表
→これにより大幅な変更はされない予定
• 同時に「Canvas 2D」も仕様策定が完了
• 2014年に勧告予定
• HTML5.1は2016年に勧告予定
→2年サイクルでバージョンアップしていく予定
1-1-2. Facebook for Android2.0
• 2012/12/13にFacebook for Android2.0がリ
リース
• HTML5版からネイティブアプリへ変更
• iOSは既に8月の時点でネイティブへ変更済
→1.5から4.0へ評価上昇
• Android版の評価はスピードについてはまず
まずの評価
1-1-3-1. Fastbook
• Sencha TouchのチームがHTML5が使用して、
Facebookアプリを実装
→皮肉なもので結構早い・・・
• こういうアプリが出るとFacebook社の技術者の面
目が・・・
• 動画を見る限りだとネイティブとほとんど差が無
いように見えます！
【URL】 http://www.sencha.com/blog/the-makingof-fastbook-an-html5-love-story/
1-1-3-2. 速度向上のテクニック
• DOMツリーを分離して小さくする
→これによりレンダリング速度を確保
→「Sandbox Container」っていうテクニックを用いた
らい
• 不必要なレイアウト処理を停止
→高速スクロール時にイメージロードなどのレタリ
ングを一時停止など
• WebWorkersでUIと処理部分を分離
【参照】
http://www.publickey1.jp/blog/12/facebookhtml5sencha_touch3.html
1-1-4. Navigation Timing API
• 2012/12/17にNavigation Timing APIが勧告
• HTML5のAPIでWebブラウザが画面表示するの
にどれだけ時間がかかっているかを取得できる
APIです（うーん、マニアック・・・）
• 以下のサイトで解説あり
【URL】 http://www.hcn.zaq.ne.jp/___/WEB/navigation-timing-ja.html
【サンプル】（onloadで実行）
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
alert("User-perceived page loading time: " + page_load_time);
1-2-0. JQueryセレクタ概要
• これから、JQueryのせクレタについて説明しま
すが「技術者が調べる」とはどういうことかに
ついても触れます
→意外と「調べる」について勘違いしている
• 技術能力に差が出るところですね！
1-2-1. JQueryセレクタ概要
• セレクタとはHTMLから指定した特定の要素を
取得する処理
• 文法は$（”ここに対象セレクタを記述”）
• もちろん、このセレクタ処理はJavaScriptで処
理されている
• JavaScriptではクライアント端末の影響を受け
るため、よりパフォーマンスに気を使う必要が
ある
1-2-2-1. セレクタパフォーマンス
• まず、パフォーマンスについて気にすることが
あれば技術者としての素質があります。
• もし、「サイトに載っている」 or 「書籍に載って
いる」内容をコピーしているのであれば、サン
プルがないと作れない人です。
• このパターンの人は以下の弊害
(1) サンプルがないとコーディングできない
(2) 問題が発生すると解決できない
1-2-2-2. セレクタパフォーマンス
• 例えば、以下のセレクタ指定をした場合、ど
れが一番早いでしょうか？
(1) $(“#hyuga”);
// IDセレクタ
(2) $(“p”);
// タイプセレクタ
(3) $(“.toru”);
// classセレクタ
(4) $(“[hyuga=‘sasa’]”); // 属性セレクタ
• 内部でどのような処理がされているかを考え
ればわかります！
1-2-3-3. セレクタパフォーマンス
• 以下の順番で速度が速いです！
(1) $(“#hyuga”);
// IDセレクタ
(2) $(“p”);
// タイプセレクタ
(3) $(“.toru”);
// classセレクタ
(4) $(“[hyuga=‘sasa’]”); // 属性セレクタ
• ここで何を思いましたか？
1-2-3-4. セレクタパフォーマンス
• 先ほどの順番だけ覚えている人は伸びない
→コーディング能力は暗記ではなく、数学的能
力（公式を元に応用）が必要
• このタイプは以下の弊害が発生
(1) どうしての説明ができない
(2) 予期せぬ問題が発生すると解決不可能
• ではどうする？
1-2-3-5. セレクタパフォーマンス
• では何が重要でしょうか？
【ここ重要】順番ではなく、論理的に調査する！
• 何故？差が出るかについて根拠が必要
→つまり、ソースを解析 or 実証して根拠を導きた
すことが大切
• これにより以下のプラス要素がある
(1) ソース解析により、内部動作を理解できて最適
な使用方法がわかる
(2) 問題が発生しても問題個所の特定が可能
1-2-4-1. 内部解析
• (1)～(3)はgetElementBy系で処理しているの
に対し、(4)はquerySelectorAllで処理する
• 次にclassセレクタはgetElementsByClassName
が対応していないブラウザ（IE8等）の場合、
JQuery独自（Sizzle）の処理を行なう
• 属性セレクタについても未対応ブラウザには
JQuery独自（Sizzle）の処理を行なう
1-2-4-2. 内部解析
• 「getElementBy」とSizzleって何が違う？
• もし、上記に気が付くようであれば伸びる要
素が高い
• 「getElementBy」はJavaScriptネイティブなAPI
→つまり、ブラウザ実装（FireFoxなどはC実装）
• 「Sizzle」はJavaScriptでJQueryが独自実装
• これ以上は長くなりそうなので興味があれば
【参考】 http://dresscording.com/blog/jquery_performance.html
2. おまけ
• LINE GAMEコンテストを2013年に実施
• 対象はLINEと連携しているプラットフォーム
「LINE GAME」で提供するゲーム
• 対象受賞作には1,000万円
• 応募開始は2013/01/21～3/19
• 応募条件はLINEにあったらいいなと思うゲー
ムでiPhone or Androidアプリ
【参照】http://gameapp.line.naver.jp/contest/