Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

HTML5最新情報 @Google I/O

1. Google I/O summary(@takoratta)

目玉

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

I/O bytes

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

使い方のデモ

  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

shadow DOM

Templates

  • JSテンプレートのようなのを、ネイティブで提供する機能(クライアントサイドテンプレートの標準化)
  • http://www.html5rocks.com/ja/tutorials/webcomponents/template/
  • <script type="text/template">のようなハックは必要なくなる
  • DOMとして扱える
  • パースされても、描画はされない
  • 追加されて初めて描画される

HTML 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

構成要素

Core Elements

デザインを伴わないElement(Button, tabなど), AjaxなどUI以外の機能)

Paper Elements

Visual, motionなど

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away