Skip to content

Instantly share code, notes, and snippets.

@Layzie

Layzie/chrome-tech-night-8.md

Last active August 29, 2015 14:25
Show Gist options
  • Save Layzie/8df4cb95de59f2b48834 to your computer and use it in GitHub Desktop.
Save Layzie/8df4cb95de59f2b48834 to your computer and use it in GitHub Desktop.
Download ZIP
Chrome Tech Night #8 メモ
Raw
chrome-tech-night-8.md

Chrome Tech Night #8

Chrome Tech Talk Night #8 - connpass
Chrome Tech Talk Night #8 を開催します - Google Developer Japan Blog

こちらのイベントに来ているので、メモ取っていく。英語の講演だから間違ってるかもしれないっす。

Future of web apps (Matt Gaunt)

Future of Web Apps by gauntface

New Feature

  • ChromedeWeb新しい機能が色々使えるようになってるよ
  • Chromeでホームスクリーン見せることできるようになってる
  • オフラインとか
  • フルスクリーンとか

Service Worker

ブラウザがWebページとやりとりするように、ブラウザ内のService Workerとやりとりできるようになっている

Offline

Service Workerだとオフラインでもキャッシュ持ってるんで、ちゃんと動作する

Push Notiication

サイトの方からブラウザにnoti出せる

Background sync

バックグランドでリソースのやりとりできる

WebApp Manifest

Service WorkerとManifestつかうとユーザーにとって便利

{
  "short_name": "Amaze App",
  "name": "Kinlan's Amazing Application",
  "icons": [
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "start_url": "index.html",
  "display": "standalone"
}
<link rel="manifest" href="/manifest.json">

HTTPS

  • Service Worker使うのには、全てのリソースがHTTPSじゃないと使えない

Building production Polymer apps on google.com (Eric Bidelman)

Building production Polymer apps on google.com

どうやってSPAでWeb Components使うの？

A: 全部Element使えばいいよ

ここ最近

  • Google I/O
  • バカンス
  • GmailモバイルをPolymer使ってリニューアル

Polymer

  • 1.0になりました
  • サンタトラッカーがPolymer使ってる <santa-app></santa-app>
    • github.com/google/santa-tracker-web
    • Polymerのデータバインディング便利
  • Google I/O Web App
    • events.google.com/io2015/
    • フォトギャラリーとか動画再生とかWebGL使ったコンテンツとか
    • Canvas使ってカウントダウンコンテンツ→会期中はライブ流す
      • これもElementで
    • 色々な技術をPolymer以外にもフル活用
    • 外部サービスとかあるけど、Service Worker使ってキャッシュしてる
      • GAEとかYouTubeとか
    • Google内のいろんな分野のスタッフで作った

Client Side Templating

  • 新しいIEでは<template>タグに対応してて、いいね！
  • Polymerの古いバージョンではできなかったref要素入れると中の要素を無視したりできるようになった
  • テンプレート呼び込むと、そのページ固有のjsなどを読み込むようになって回線に優しいね

Dynamic HTML Imports

  • Polymer1.0では動的にjsからHTMLをインポートできる

Material Design

  • レイテンシー0は正義
  • アニメーション制御
    • Promise使ってるよ
    • あんまり他の処理に気を使わないで済む

Service Worker

  • オフライン
    • オフラインでもコンテンツ読める
    • Webでコンテンツ更新あれば、"更新された"メッセージ出す
  • Notification
    • 対応ブラウザ以外で通知出すとか
    • 使うの簡単だよ
    • 例えばログインの状況とかをブックマークするときに通知すると、UXとしても良いんじゃない？

Q&A

  • Polymerの将来どうなんの？
    • 便利コンポーネントとか、APIをもっと増やしてく
    • WebComponentへの追従をもっと
  • 古いブラウザへの対応は？
    • 残念ながら新しい機能たくさん使うから、対応しないよ
  • パフォーマンスはどうよ？
    • 古いバージョンはマジクソでした
    • 新しいのはAPIの整理とかPolyfillとか整理してる
    • 開発者側でもうちょっとパフォーマンスをコントロールできるように
    • 6~7倍速いよ！

Material Design for the Web (Addy Osmani)

Material Design for the Web

Google Music

Web版はPolymer使ってるよ

プロダクションで使うには

  • 最初のステップで○作ったら大いなる力で、すっげえ絵になるよ！
  • Polymer Starter Kitとかで手助けになる

Polymer Starter Kit

  • マテリアルデザイン使った色々なパーツの詰め合わせ
  • テーマはCSSのカスタムプロパティ使ってる
    • アプリ全体で統一感あるテーマとして使える
  • モバイル対応がデフォルト
  • アイコン色々
  • Adaptive UI
    • レスポンシブに
    • マテリアルデザインも何回かブレークポイントあった
  • App Template 1.0
    • いろんなレイアウトに対応するのにラク
  • オフラインファースト
    • すごく重要
    • 東京以外はネットの調子悪くなると多いので
  • Polymer Elements Catalog
    • ServiceWorker使ったキャッシュとか簡単に
  • 良いビルドシステム
    • Gulp使ってる
    • テスト、圧縮、クロスデバイスでのリロードなど

実際のアプリ

  • RSSフィードリーダー作った
    • やっぱりElement重要
    • Element作ったらすぐにできる。簡単
    • Firebase使ってauthに対応
    • Notification送ってる
      • ネイティブアプリみたいに、スマホに通知できる
      • やっぱりElement

Material Design Lite

  • つい先日出た
  • Webサイト向けのマテリアルデザインのセット
  • ComponentsはIE9以上
  • TemplateはIE10以上
  • たった27kb！
  • いろいろなパーツがあります
  • タイポグラフィも豊富
  • レスポンシブデザインにも完全対応
  • Webサービス使えばテーマカスタマイズも簡単
  • もちろんアイコンもあります
  • andoroid.comで使ってる

これはどうやって使う？

  • html/pure css/jsというプレーンな構成
  • cdn/npm/bowerで使える

Questions

  • フラットデザインとマテリアルデザインの違いってなに？
    • フラットデザインはモーションとかない
    • マテリアルデザインは動きとかも含めてのデザイン
  • Googleのプロダクトで全部マテリアルデザインにしないのはなんで？
    • 新しいプロダクトでは使ってるよ
    • 古いのも順次変えていきたいと思う

Offline apps with Polymer and Service Worker (Jeffrey Posnick, Mat Scales)

Offline apps with Polymer and Service Worker - Google スライド

  • どちらの方もディベロッパープログラムエンジニアの方だそうです
  • オフライン対応とかパフォーマンス関連とかの仕事

なんでオフラインが必要なのか

  • 東京だとそうでもないけど、ロンドンとか他の地域だとネットが切れるなんて日常
  • アプリは早くロードされて、どこでも動くべきだし、これはWebアプリでも同じ
  • Gmailとかもオフラインで閲覧できないと
  • 自分のアプリがオフラインだからロゴとか見れないってありえんでしょ？

ServiceWorker!!

  • jsをバックグラウンドで動作させるとかできる
  • どんなリソースでもオフラインで見れるようにできる

index.jsではこんな感じに

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .then(function(registration) {
      // Listen for service worker lifecycle events and
      // display a message when caching is complete.
    })
    .catch(function(error) { // Display error. });
} else {
  // Offline support isn't available.
}

service_worker.jsでこういう感じのコードに

// 最初にサイトにアクセスしたときにリソースをキャッシュにつっこむ
self.addEventListener('install', function(event) {
  var urlsToPrefetch = ['image.jpg', 'results.json', 'page.html'];
  event.waitUntil(caches.open('mycache').then(function(cache) {
    return cache.addAll(urlsToPrefetch);
  }));
});

// キャッシュしたリソースのアップデート
self.addEventListener('fetch', function(event) {
  event.respondWith(fetch(event.request).catch(function() {
    return caches.match(event.request);
  }));
});
 
// ここからはsw-toolbox
importScript('path/to/sw-toolbox.js');
toolbox.prechche(['image.jpg', 'result.json']);
toolbox.router.default = toolbox.networkFirst;

GoogleChrome/sw-toolboxを使うととてもラク

index.htmlはこれ

<script src="webcomponents-lite.min.js"></script>
<link rel="import" href="platinum-sw-elements.html">

<platinum-sw-register auto-register>
  <platinum-sw-cache default-cache-strategy="networkFirst"
     precache='["image.jpg", "results.json", "page.html"]'>
  </platinum-sw-cache>
</platinum-sw-register>

Demo

Platinum Service Worker Elements Demo

オフラインでのブックリーダー

Next?

Questions

すいません、質問が頭に入ってこなかった…

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment