雨ブロ【yusukixsのブログ】

アドテク関連の業界で働くエンジニアです。最近はKubernetesでコンテナクラスタを構築してサービス開発することに力を入れてます。

HTML5オールスターズ勉強会 - htmlday 2015 -　参加メモ

イベント参加報告

HTML5オールスターズ勉強会に参加してきました。

gloops株式会社にて、350人も収容できる大会場にて盛大に実施されたhtmlday 2015のお祭りです。

その講演内容とメモをまとめます。

『いつになっても議論が終わらないパフォーマンス関連のWeb標準たち』

川田 寛氏（@_furoshiki）

スライドが見つからないので当日メモ

US、日本を含む10カ国ではモバイルからのGoogle検索者数は多種のコンピューターよりも多い。

モバイルWebを支える標準技術の進化

  1. アニメーション
  2. ネットワーク
  3. モニタリング

Android2系はIE6くらい大変

アニメーション

ロードマップ 過去）Animation Frame方式（JS→CPU) jQuery Mobile

現在）CSS Animation方式(CSS→GPU) onsenUI, IonicFramework

未来）Web Animation方式（JS→GPU） が今年来るんじゃね？と思っている

SVGアニメーション(SMIL)も統合される

難点：Android5.x系にならないと使えない

ネットワーク

モバイルの読み込み処理の敵はネットワークインターフェースのパワーオン処理がボトルネックになっている

モバイルの消費電力を抑えるには、ネットワークインターフェースのパワーオン期間を短くしなくてはいけない Wi-Fiだと大丈夫

Resource Hints

Webページに含まれていないリソースを取得して先読みする。サーバと接続するためのスペック。IE11でも実装されている。

事前にサーバとTCP接続（鍵交換）することもできる。

だが、色々なツッコミがある Lazyload属性がなくなった

バッテリー消費を考えると、WebSocketではなくPUSH APIを使うようにシフトしていかないといけない。LINEはバッテリー消費が少ないので工夫されている。

モニタリング

Performance Group

The Performance Observer 特定のパフォーマンスが記録されたことを通知してくれる機能を追加しようとしている

Frame Timing API + Performance Observer でまともなFirst Paint時間計測APIができそうな気がしている

『まだまだ ServiceWorker のはなし。Background Sync も来るよ！』

安田 絹子氏（@kinu）

メモ

Service Worker ネットワークのプロキシのようなことがJSでできるようになる

ページの裏側で動くイベント駆動型Yet another Javascript環境

  • ページのセットに対してインストールされ、バックグランドで動作
  • 対象ページからのロードリクエストをproxyで横取り

Push API

ServiceWorkerを使ってサーバからプッシュ通知を受け取れる。Android版Chromeだとブラウザを閉じていても受け取れる

Background Sync

今ネットにつながってなくても後でつながったときに通信してほしい

例)オフライン時に書いたツイートをオンラインになったら送る。

定期的にバックグラウンドで通信する'periodic sync'の仕様も策定中

Cordova 2.0でクロスウォークプラグインを使うと、Android4.0でもBlinkが使える

『オフラインWebアプリの再到来で今、再び注目されるAPIの本命　ーJavascript SQL-like database』

吉川 徹氏（@yoshikawa_t）

オフラインWebアプリケーションとは？

  • かつてはHTML5の大きな目玉要素のうちの一つだったが普及しなかった
  • Application Cacheに課題があった

ServiceWorkerの登場でオフラインWebアプリケーションが盛り返してきている。

Indexed Databaseも普及してない

Indexed DBの特徴

  • 非同期APIでメインスレッドをブロックしない
  • 大量のデータ保存に向いている
  • JSオブジェクト(関数などを除く)やバイナリデータ(blob)が直接保存可能
  • トランザクション対応
  • Worker上で動作可能（ServiceWorkerでも）
  • APIが複雑で難解
  • RDBMSであいのでSQL的操作がNG
  • なにかのプロパティで検索したければ、あらかじめ索引を作っておく必要がある
  • 複合検索、ソートもあらかじめ)ry

LovefieldというGoogleのライブラリでIndexed DatabaseをSQLライクに扱うことができる

github.com

ServiceWorkder + Indexed Database(Lovefiled) = Offline Application

『ついに来たぞ！Polymer1.0!!!』

小松 健作氏（@komasshu）

docs.google.com

Polymer 1.0とは

Google I/0 2015 Keynoteで紹介された数少ないWeb系技術の一つ

※ただし30秒しか触れられなかった（笑）

Web Componentsを使いやすくする

1.0になって速度が速くなった サイズがsmallになった。35％のコードを減らした。19kb - 42kb CSSのCustom Propertyを使って、色を変えたりできる Polymer0.5との互換性はない

Polymerはフレームワークではない。Web Compornent Built with Polymer

Polymer Starter Kitで実装すると、知らず知らずのうちにオフラインWebアプリに対応してる

『Reactがいかに素晴らしいか語る20分』

増井 雄一郎氏（@masuidrive）

※スライド見つからず

AngulerJSやBackbone.jsにしっくりこない人にReactはオススメ

jQueryだとDOM操作は難しい

  • DOMはどこからでも変更可能
  • DOMが状態を持っている
  • DOMとソースが離れすぎ

JSの中でHTMLを生成する

ソースはcodepen/masuidriveで公開中

Yuichiro MASUI on CodePen

Reactはコード量は多いが、DOMをいじれないために可読性が高くなることがメリットとなる

VirtualDOMを作って、実際のブラウザ上のDOMは差分だけを更新するので、そこまで表示は遅くない

React.jsのDOMはWrite1回だけ。読み込みも変更もできない。その代わりコンポーネント化して再利用しやすく、保守性が高い。製品寿命の長いプロダクトには採用を検討してほしい。

『今からはじめるECMAScript6』

泉水 翔吾氏（@1000ch）

色々な意見がJavaScriptに影響してきた CoffeeScript, node.js, AngularJS

現時点でIEとSafariはECMAScript6に対応していない

サポートしていないブラウザに対しては、トランスパイラを使って、ES6のコードをES5のコードに変換できる

ハードウェアこわい』

若狭 正生氏（@wks）

たぶん、ハードウェアのことを色々と考慮して実装しないといけない時代になったから大変だねってことかと。

『Edge だけじゃない! Build 2015 で発表されたそれ以外の Web 関連技術まとめ』

物江 修氏（@osamum_MS）

Universal Windows Platform

Windows10はPCもスマホもタブレットもIoTもカーネルが同じになるので、アプリがそのまま動く

XcodeのObjective-CのコードをVSでWindowsアプリ用コードに変換できたりする

Windows10ではDockerが動く

Visual Studio Code マルチプラットフォームで動作するコードエディタ

Vorloan.js リモートデバッグ用のツール

総評

色々とバラエティに富んだ内容で勉強になりました。 まだまだ自分のアンテナの張り方が足りていないことも反省。 もっとHTML5について詳しくなれるように、日々精進していきます。

Indexed DB使いたいけど、スマホの場合はiOS8以上とAndroid4.4以降に限定されるっていうのがネックですね…