第49回 HTML5とか勉強会(自分メモ)


HTML5最新情報 @Google I/O

## 1. Google I/O summary(@takoratta)

目玉

- Material Design
-- 様々なデバイスに対応した統一されたデザイン

I/O bytes

- Google I/Oのセッションを見れる
- youtubeで公開されている。キャプションONで字幕でるはず
    - https://www.youtube.com/playlist?list=PLOU2XLYxmsIIwGK7v7jg3gQvIAWJzdat_

### Chrome/HTML5関連の話

- Chrome Dev Editor
- Chrome devtools
- Mobile performance
- Bridging gaps/performance
- page speed insight(desktop, mobile, uxに関する点数、改善事項一覧を表示してくれる。サイトの調査に使える)
    - https://developers.google.com/speed/pagespeed/insights/?hl=ja
- audio/video関連の話題のセッションが面白かった(Web audio api/webRTC)
    - リモートでジャムセッション->youtubeでアップロード
- Dart関連
    - ECMAScriptに採択が進んでいる
    - ブラウザで使うだけでなく、サーバーサイドでもつかえるように実装を進めている

### オフラインファースト

アプリとwebのgapを縮める

#### オフライン対応

- webだと従来完全に対応するのが難しかった
    - よくできたネイティブアプリだと、キャッシュから取得して、裏でデータをポスト処理などを行っている
    - ネットワークの状態を意識させない
- Appcacheってファイルキャッシュする機能があったけど使えない(細かい制御ができない)
- navigatorオブジェクトのonline/offline apiってあるけど、細かい情報はとれない(DNS解決できるかどうかなど)
- 柔軟なオフライン制御(オフラインファースト)
    - http://www.slideshare.net/shumpei/thought-and-practice-of-offline-first

#### Service worker

- 重いDOMアクセスなし
- 別スレッドで動作
- Promiseに対応(JS deferred)
- ネットワーク状態に応じた処理
    - https://jakearchibald.github.io/isserviceworkerready/
- 参考: http://html5experts.jp/myakura/8365/

使い方のデモ

1. インストール: アプリ側(app.js)
2. Fetch処理
3. キャッシュの利用

### 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など