hiragram no blog

iOSとか

HTML5オールスターズ勉強会に参加したメモ #dotshtml5

6月13日にHTML5オールスターズ勉強会(dots)に行ってきたのでメモ。

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

@_furoshikiさん

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

アニメーション

  • 過去: Animation Frame方式(JS->CPU)
    • ex: jQuery Mobile
    • 「モバイルの世界ではcpuでゴリゴリやるの良くない」
  • 現在: CSS Animations方式(CSS->GPU)
    • ex: OnsenUI, IonicFramework
  • 未来: Web Animations方式(JS->GPU)
    • ex: Polymer(0.5?)
    • 「今後はこれが流行る気がします」

これから先(1年後くらい)のしごとのやり方

ネットワーク

モバイル端末でディスプレイのバックライトの次に電池を消費するのはネットワークインタフェース。

  • だから普段オフになってる
  • モバイルの消費電力を抑えるにはネットワークインタフェースのパワーオン期間を短くしなくてはいけない

Resource Hints

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

最初Resource Prioritiesという名前で仕様策定が進められていたが、Resource Hintsに名前が変わった時lazyloadがなくなった。

lazyloadを復活させろという声も多い。

Service Workers

  • ライフタイムが変わる
  • Fetch APIとPush API
  • WebSocketでやりたがるようなことはモバイルはPush APIでやるよ
    • Pushは通信の種類が違うので電力消費が少ない

モニタリング

※ここちゃんとメモ取れてないので注意

クロスプラットフォームにパフォーマンス計測結果を取得できるjsのAPI

  • frame timing api
  • performance group
    • 特定のパフォーマンスが記録されたことを通知してくれる機能
  • performance observer

「frame timing api + performance observer でまともなfirst paint時間計測apiが作れそうな気がする」

まとめ

  1. アニメーションはWeb Animationsの時代へ
    • CSS Animationはなくならん
    • Googleがんばれ
  2. ネットワークはServiceWorkersに期待
  3. モニタリングはなんかもうごめんなさい

もっと詳しく

@_furoshikiさんのgihyoの連載

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

@kinuさん。Chromeの中の人。

今日のお話

  • 最近話題のServiceWorkerを中心に新しいAPIについて(偏った視点で)駆け足で紹介します

service worker

  • ブラウザの裏側で動くもの
  • service worker上でjsを動かす
  • apiたくさん増えすぎよくわからない
  • ページの裏側で動くイベント駆動型Yet another js環境
    • ページのセット(=scope)に対して登録され、バックグラウンドで動作
    • 対象ページからのロードリクエストをproxyのようにインターセプトして操作できる

Cache API

httpリクエスト・レスポンスのためのオフラインストレージ

  • Requestオブジェクトをキーに、Responseオブジェクトをキャッシュしておける
  • ゴリッとキャッシュしておけばWebページをオフライン対応にできる

Fetch API

ネットワークからリソースを'fetch'してResponseオブジェクトを返す

  • XHRよりCORS,cache controlなどをきめ細かく制御可能

ReadableStream

まとめてじゃなくてデータを受け取るための処理したい

  • 絶賛仕様策定中: Streams API
  • バイナリ・ストリームをちゃんと扱える
  • fetchと組み合わせてresponse.bodyをストリームとして読み出せる
  • ジェネリックAPI

Push API

ServiceWorkerを使ってサーバーからのpush通知を受け取る

  • GCMなどを使う(実装依存)
  • タブ閉じてても受けられる
  • Chrome for AndroidではChrome起動してなくてもok
  • まだ仕様変わったりしている

Background Sync

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

  • ツイートやメッセージをオフラインで書いて次につながったとき送る
  • 定期的にバックグラウンドで通信する'periodic sync'の仕様も策定中

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

@yoshikawa_tさん

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

W3Cに項目あり

  • 当時の構成要素あんまりはやらなかった
  • Application Cacheにいろいろ課題があり流行らなかった
  • 現在はService Workerが出てきてオフラインWebアプリケーションがより現実的になってきている

かつてIndexed Database APIというものがあった

Indexed Databaseとは

  • ブラウザに持つKVS型のローカルデータベース
  • オフラインWebアプリケーションを前提としたローカルでのデータアクセス
  • Application Cacheがコケたせいで、オフラインを前提としたIndexed DBが日の目を見ることがなかった
特徴(localstorageとの違い)
  • 非同期API(ブロックされない)
  • 大量のデータ保存に向いている(クォータはブラウザ依存)
  • jsオブジェクト(関数などは除く)やバイナリデータ(Blob)が直接保存できる
  • トランザクション対応
  • Worker上で動作可能(もちろんService Workerでも)

indexed databaseの難解さ

  • RDBMSじゃないからSQL的な操作方法はできない
  • 何かのプロパティで検索したければ予めインデックスを作っておく必要がある
  • 複合検索をするには予め 略
  • ソートをするには、予め 略
  • 集合関数?なにそれ

そのまま使うのは辛いのでLovefieldというライブラリを使いましょう

Lovefield

  • SQLライクにデータベースを操作可能
  • 今のSQLでできる機能がふんだんにある
    • 集合関数、joinなど

Google IOで結構大きく取り上げられた

Service Worker + Indexed Database(lovefield) = Offline web application

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

Google Developer Expertの@komasshuさん

polymer

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

  • Web Componentsを使いやすく
    • custom tag
    • template
    • shadow dom
    • html import
  • クロスブラウザでも使えるように
    • polyfill

1.0でProduction ready

Polymer is NOT a Framework

Polymerについてはよく知らないので要勉強……

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

@masuidriveさん

BackboneやAngularはどうも馴染めずにいて、年末にReactの公式Tutorial開始してすばらしいとなった。

独自のjsフレームワーク作ってたairbnbがそれを捨ててfacebookのReact.jsを採用した点からもアツいっぽいことがわかる。

DOM操作はなぜ難しいのか

  • いつどこで書き換えるのかわからない
    • DOMはどこからでも変更可能
  • このタグは見えてる?
    • DOMが状態を持っている(hiddenとかvisibleとか)
  • どこで処理するかわからない
    • DOMとコードが離れすぎ

もっと簡単にやろう

  • DOMを書き換えないで常にHTML全体を生成
  • EventListenerやめてonXXX使おう
  • HTMLとjsをまとめよう

  • jsx

  • jsの中にhtml

サンプル→codepen.io/masuidrive

  • 昔→サーバーはdomの中身を直接知ることはできなかった
  • react→いままでサーバーがやってた部分をreactがやるけど、サーバーがやってた部分ではdomを直接知れない
    • 昔と同じ!

Reactはコード量は多いけど、読みやすくメンテしやすい。

ロジックとビューを切り離せる。

virtualDOM

  • Reactが変更前のdomを持ってる
    • 差分だけ変更する

問題点

  • コードを書く人がHTMLも書く
  • 既存のjs部品が使えない
  • Twitter widgetとか外部jsは苦手らしい

Flux

  • 考え方の名前(MVCとかと一緒)
  • ReactではDataさえ変更すれば画面に反映される

Wrapping up

  • reakt.jsのDomはwrite once
  • 読み込みも変更もできない
  • コードは書くより読むが多い
  • 部品(コンポーネント)化して再利用しよう

『今からはじめるECMAScript6』

@1000chさん

javascriptecmascript

ECMAScript = 標準化された規格

  • いろいろな意見がjsに影響してきた
    • cofeescript
    • node
    • angularjs
    • etc...

ECMAScript6は正式にECMAScript 2015という名前になったらしい。

ecmascript6

  • 変数宣言(var)
  • Arrow Functions
    • thisを関数の外のthisから引き継ぐ?
    • 1文だったらbraceも省略できる?
  • importとexport
    • 他のモジュールを読み込む仕組みがなかった
  • Rest Parameters
    • 可変長引数
    • 配列作ってから渡さないといけなかったのが配列で渡さずとも関数側では配列として受け取ることができる
  • Default Parameters
    • デフォルト引数
  • Template Strings
    • stringリテラルの中に変数埋め込める
    • 関数も入れれる
  • Class
    • ただの糖衣構文ではある
  • Generator functions
  • Proxy
  • Promise
    • 非同期処理をthenで
    • ネイティブサポート
  • set weakset
  • map weakmap

以上は一部。他にもあるよ。

ECMAScript6とのつきあいかた

ECMAScript 6 compatibility table みればブラウザの対応状況が見れる

ES6がいかに素晴らしくてもサポートが進まないことには導入できない? -> 半分x

  • トランスパイラを使う
    • es6のコードを古いコードに変換して実行できるようにする
      • Babel
  • 限定された環境で使う
  • altjsで取り入れていく
    • TypescriptやFlow
  • Node.js 0.12~

『ハードウェアこわい』

midi

midiでブラウザ制御できるよ

スライドに夢中でメモ取れませんでした。

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

@wksさん

  • Universal Windows Platform
    • PC上で開発したアプリを同じバイナリで複数のプラットフォームで動かせる
  • Docker on Windows
  • Windows 10 IoT core
  • HoloLens

Visual Studio Code

Vorlon.js

リモートデバッグの。 Vorlon.jsはトイレ行っててメモ取れませんでした