Experts.jp日本に、もっとエキスパートを。Experts.jp」。2013年は数々のHTML5を中心とした最新技術の動向や活用方法の解説、Web業界の著名人のインタビュー、事例やイベントレポートをお届けしてきました。Firtman氏(@firt)のブログから、Web制作者/開発者にとって重要と思われる情報を引用。Web技術者にとっても大きな影響を持つこのアップデートについて紹介しました。Experts.jp編集長)人気のCSSフレームワーク「Bootstrap」のバージョン3が正式リリースされたタイミングで、白石編集長が早速Bootstrap3をレビュー。グリッドシステムを掘り下げて解説し、大反響となりました。<3位>JavaからHTML5ヘ。フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかをレポートしました。直博マークアップシリーズの第2回。前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探りました。人気連載「Webサイト・アプリ高速化テクニック徹底解説」第2回。JavaScriptの高速化について、ユーザーの体感速度を向上させるための方法を紹介。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性を解説。泰延2010年前後から登場したJavaScriptを生成する中間言語「altJS」。スマートにコードを書くための仕組みが用意されており、開発効率を大幅に向上させることができます。Haxeについて解説しました。直博html5jマークアップ部が開催したた「MarkupCafe」第1回。”フッター”、”パンくずリスト”、”求人情報”のお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについてマークアップの最適解を探ったレポート。実はこれはみんなが使えば使うほど、得をする仕組みになっています。その仕組となるCDNやキャッシュの技術などについて解説しました。──JxckWebPは、Googleが開発した圧縮形式で、パフォーマンスを上げるために、従来の形式よりもファイルサイズを小さくすることを目的としています。そんなWebPの概要と使い方、注意点を取り上げました。Waveの人」や「おっぱいエンジニア」など「おもしろい感じの人」としても有名なあんどうやすしさんに、経歴や関心などをインタビュー。徹JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説。──JxckGoogleはWebを速くするための活動として、TCPのようなプロトコルレイヤの改善にも取り組んでいます。Openを取り上げ、解説と動作検証、簡単なベンチマークを行い、レポートしました。HTML5でのマークアップ、リッチ表現、SEO効果のあるh要素の使い方、HTML5で追加・削除・復活された要素などについて解説。祐也アニメーション/トランジションをより自然にスムーズに動作させるために知っておきたいレンダリングプロセスや、計測方法、アクシデント回避方法についてのレポート後編です。雄一郎wri.peでHTML5をどのように活用しているかの解説レポート後編。StorageのlocalStorage/sessionStorageを使い、Ajax通信部分と表示の高速化を行う手法を説明しています。裕介NHKが2013年9月2日よりサービスを開始したHybridcast(ハイブリッドキャスト)。放送とWebが融合した新しいサービスです。今回特別に入手したHybridcastのソースコードサンプルを始め、注目トピックを紹介しました。後編は、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説。Workersについても紹介しています。総史モバイル端末はきちんと最適化を行えば、その分比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。その最適化ノウハウについて6つのポイントから解説しました。徹createElement()やappendChild()などのDOM操作メソッドを使った方法では、単純にinnerHTMLによるコードを置き換えるだけでなく、さまざまなテクニックがあります。パフォーマンスを劣化させるパターンから、そのチューニング方法を紹介。晃浩HTML5に関連する技術のひとつで、ブラウザ上で3DCGプログラミングを実現できる「WebGL」。今回のレポートでは「WebGLでどんなことができるのか」など、WebGLプログラミングの基礎知識について紹介しました。本当にありがとうございました。