Download
1 / 17
170 likes | 316 Vues
今月の技術トピックス. 株式会社フォアフロンティア 2013/01 帰社日. 1. 今月の技術トピックス. 今月のトピックスは以下の通り HTML5 関連 JQuery 関連 ※ 今月は発表が多いので少なめで. 1-1-1. HTML5. W3C が 2012/12/17 に HTML5 の仕様策定が完了したことを発表 →これにより大幅な変更はされない予定 同時に「 Canvas 2D 」も仕様策定が完了 2014 年に勧告予定 HTML5.1 は 2016 年に勧告予定 → 2 年サイクルでバージョンアップしていく予定.
E N D
今月の技術トピックス 株式会社フォアフロンティア 2013/01 帰社日
1. 今月の技術トピックス • 今月のトピックスは以下の通り • HTML5関連 • 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-making-of-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-2-2. セレクタパフォーマンス • 例えば、以下のセレクタ指定をした場合、どれが一番早いでしょうか？ • $(“#hyuga”); // IDセレクタ • $(“p”); // タイプセレクタ • $(“.toru”); // classセレクタ • $(“[hyuga=‘sasa’]”); // 属性セレクタ • 内部でどのような処理がされているかを考えればわかります！
1-2-3-3. セレクタパフォーマンス • 以下の順番で速度が速いです！ • $(“#hyuga”); // IDセレクタ • $(“p”); // タイプセレクタ • $(“.toru”); // classセレクタ • $(“[hyuga=‘sasa’]”); // 属性セレクタ • ここで何を思いましたか？
1-2-3-4. セレクタパフォーマンス • 先ほどの順番だけ覚えている人は伸びない →コーディング能力は暗記ではなく、数学的能力（公式を元に応用）が必要 • このタイプは以下の弊害が発生 • どうしての説明ができない • 予期せぬ問題が発生すると解決不可能 • ではどうする？
1-2-3-5. セレクタパフォーマンス • では何が重要でしょうか？ 【ここ重要】順番ではなく、論理的に調査する！ • 何故？差が出るかについて根拠が必要 →つまり、ソースを解析 or 実証して根拠を導きたすことが大切 • これにより以下のプラス要素がある • ソース解析により、内部動作を理解できて最適な使用方法がわかる • 問題が発生しても問題個所の特定が可能
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/
