HTML5最新情報 @Google I/O
1. Google I/O summary(@takoratta)
目玉
- Material Design -- 様々なデバイスに対応した統一されたデザイン
I/O bytes
- Google I/Oのセッションを見れる
- youtubeで公開されている。キャプションONで字幕でるはず
Chrome/HTML5関連の話
- Chrome Dev Editor
- Chrome devtools
- Mobile performance
- Bridging gaps/performance
- page speed insight(desktop, mobile, uxに関する点数、改善事項一覧を表示してくれる。サイトの調査に使える)
- audio/video関連の話題のセッションが面白かった(Web audio api/webRTC)
- リモートでジャムセッション->youtubeでアップロード
- Dart関連
- ECMAScriptに採択が進んでいる
- ブラウザで使うだけでなく、サーバーサイドでもつかえるように実装を進めている
オフラインファースト
アプリとwebのgapを縮める
オフライン対応
- webだと従来完全に対応するのが難しかった
- よくできたネイティブアプリだと、キャッシュから取得して、裏でデータをポスト処理などを行っている
- ネットワークの状態を意識させない
- Appcacheってファイルキャッシュする機能があったけど使えない(細かい制御ができない)
- navigatorオブジェクトのonline/offline apiってあるけど、細かい情報はとれない(DNS解決できるかどうかなど)
- 柔軟なオフライン制御(オフラインファースト)
Service worker
- 重いDOMアクセスなし
- 別スレッドで動作
- Promiseに対応(JS deferred)
- ネットワーク状態に応じた処理
- 参考: http://html5experts.jp/myakura/8365/
使い方のデモ
- インストール: アプリ側(app.js)
- Fetch処理
- キャッシュの利用
Chrome dev editor
- Dartで作られている
- 沢山のテンプレートが用意されている
- 作ったものは、そのままchrome web appで公開できる
- Markdown対応+プレビュー機能
Chrome dev tools
- http://html5experts.jp/girlie_mac/8384/ が詳しい
- device modeを追加した
- レスポンシブ対応がやりやすくなった。
- デバイスアイコンをクリックすると使える
- いろいろなデバイスがリストアップされている
- ネットワークの接続状態のエミュレーションができる
Web Componentsが変えるWeb開発の未来(泉水翔吾（ @1000ch ）)
- Polymer and web components change everything...
- Web Components
- 再利用と簡単に使える
- スコープの存在
- 標準化
- HTML+CSS/JSの部品を再定義
- UIだけではなく、機能の抽象化も可能
- 外部に干渉しない(スコープ)
構成要素
Custom Elements
-
http://www.html5rocks.com/ja/tutorials/webcomponents/customelements/
- 開発者側で要素を定義できる(divやspanのように使えるようになる)
- 作成、変更、削除、属性追加、変更などのイベントコールバックも定義できる
- '-'を要素名に含める必要がある。
shadow DOM
- Document - HTMLElement - [Shadow Root] - HTML+CSS+JS(このスコープのなかだけで使える)
- http://www.html5rocks.com/ja/tutorials/webcomponents/shadowdom-201/
Templates
- JSテンプレートのようなのを、ネイティブで提供する機能(クライアントサイドテンプレートの標準化)
- http://www.html5rocks.com/ja/tutorials/webcomponents/template/
-
<script type="text/template">のようなハックは必要なくなる - DOMとして扱える
- パースされても、描画はされない
- 追加されて初めて描画される
HTML Imports
- 外部ファイルとしてHTMLが読める
- CSSやJSなどは
<link>や<script>などでインポートできてた - HTMLだけそういう機能がなかった
- iframeは近いけど、制限がきつかった
- http://www.html5rocks.com/ja/tutorials/webcomponents/imports/
Polymer
- Web Componentsに関するプロジェクト、ライブラリ
- http://www.polymer-project.org/
- 未対応ブラウザのpolyfill
- Web Componentsの差異を吸収(仕様が変わっても、Polymerチームが対応する)
- IEとSafariで対応するには、
platform.jsを使う- shadowdom対応は、不完全
- パフォーマンスが落ちる可能性がある
- PureなWeb Componentsとは若干初期化の方法が異なり混乱する
Polymer Design
- Web Componentsを作成できるGUIツール(作ったものはダウンロード可能)
まとめ
- 最初にPureなWeb Componentsを理解してから、Polymerを触った方がいい。(Javascriptを理解してから、jQueryを使うのと同じ)
- 牽引しているのは、Google(Chrome)/Mozilla(Firefox)/Opera
Material Design + Polymer(佐藤歩（ @ahomu ）)
Material Design
- http://google.com/design
- いろいろなデバイスで一貫性を持った体験をさせる(同じUIを使うという意味ではない)
- 統一されたデザイン
- z軸の深度や陰で関係性、重要度などを表現
- リアルさより自然さを感じさせるデザイン
伝統的なグラフィックデザイン+技術によるイノベーション
マテリアルはメタファ(比喩)である
Bold, graphic, intentional...
モーションで意味を表現
Polymer
- http://www.polymer-project.org/components/paper-elements/demo.html#core-toolbar
- bowerでインストール可能
- Web用には、Polymer+PaperElementsで使える
- Production readyではなく、Developer preview
構成要素
Core Elements
デザインを伴わないElement(Button, tabなど), AjaxなどUI以外の機能)
Paper Elements
Visual, motionなど