技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

HTML5 All Starts 勉強会メモを今更晒す

そういや晒してなかったなと思って。

セッション1

ふろしきさん

日本US含む10ヵ国でモバイル検索する人はPC より多い:Google調べ で、下記の話をする

アニメーション ネットワーク モニタリング

アニメーション

初期:AnimationFrame方式

JS でフル制御する。具体的にはJSで60fpsをすべてレンダリングする方式。 しかしモバイル非力だからしんどい

JqueryMobileなんかがこれ

毎フレームで処理を呼び出す。

現在:CSS Animation 方式

OnsenUI, IonicFramework なんかがこれ。 ただし、性能が悪くて、ハックが多い

未来:Web Animations 方式

JSを使ってGPUを使う方式 Polymer なんかが使用する。

WebAnimation については、W3Cで策定中。 element.animation({ })

http://qiita.com/haribote/items/a8fc84d6cc2fd4abbf72

ネットワーク

モバイルの読み込み処理の敵は、ネットワークインターフェースのパワーオン処理。 これは、遅い上に、バッテリー消費もディスプレイの次に重い。 ネットワーク貼りっぱなしの為に、WebSocketつなぎっぱとかするけど、半日でバッテリ死ぬ。

つまり、どれだけ短いソケットを高速で繋いで通信を終わらすか

  • ResourceHints : Webページに含まれてない情報のヒントを先読みする。 IE11 なんかは搭載済み。 linkタグに属性つけて、pr (プライオリティ)を指定して、次のページが読み込まれる確率を指定しとくとか、 link の rel=preconnect で、これから接続しうるページへのコネクションを用意しておく。

  • ServiceWorkers ブラウザのタブに隠れても裏で処理できるようになる。 ここで FetchAPI と一緒に次ページをDLしたりとかする。

  • Fetch API:

  • Push API: Push で使う通信は普通のと通信の種類が違い、バッテリにやさしい

  • MonitoringAPI
    • FrameTimingAPI : アニメーションパフォーマンスをとるAPI
    • Performance Group: 特定のパフォーマンスを見えるようにする
    • PerformanceObserver: 特定のパフォーマンスが記録されたことを通知するAPI

アニメーションは WebAnimations になっていく。ネットワークは ServiceWorkers に期待。モニタリングは結構できる。

Cordova が現在最新の Blink を搭載されるので、多少古い Android でも強烈な機能が使える。

技評で「ふろしき」さん探すといい感じで記事が出る

ServiceWorker

やすださん

Chrome の中の人 ServiceWorker の新しいAPIの話とか。

去年までのWebは、サーバからDLして表示するという処理が基本だった。 ServiceWorker は、ブラウザの裏で処理を実行できるイベント駆動の実行環境で、ここでネットワークプロキシのようなこともできる。

例えば、「/」の URL でサービスワーカーを保存すると、それ以下のページ全てでサービスワーカーを利用できる。 最初のページロードを行うときにインストールできる。

  • 最新のChrome で 最初のページからサービスワーカーできる HTTPSかローカルホストしかできない AllowServiceWorker ヘッダで、指定したページからしかサービスワーカーできなくなる サービスワーカーからパフォーマンス取れます

で、今年からここに凄まじい数のAPIが入る。

  • CacheAPI: リクエスト・レスポンスをする為のオフラインストレージ。(K(Request)V(Response)S)
  • FetchAPI: ネットワークからリソースをfetchして response を返す。
  • ReadableStream: 仕様策定中。データを受けとるたびに処理する。オーディオや画像も使える。
  • PushAPI: ServiceWorker を使って、サーバからのプッシュ通知を受けることができる。ChromeForAndroid で使えるし、ブラウザ落としてても通知できる。
  • BackgroundSync: ネットに繋がってなくても後で通信したい。要するに送信予約API。定期的に通知を飛ばす、perioded:sync が策定中。

今後来そうなのも多数。 ServiceWorker は今日から、Chrome/FF(NightlyBuild)で使える。 IEガンバ!

セッション2

️ Offline web アプリの本命 JavaScript SQL-Like Database

よしかわさん

W3C でも オフラインは重要っぽくて、ApplicationCache という仕様ができた。 しかしこれが地雷で、使いにくかった。 で、サービスワーカーで息を吹き返し始めている。

IndexedDatabase API というものが実は ApplicationCache 時代に出たのだが注目されなかった。実は安定した仕様なんだけどね… で、これは KVS データベースなんだよね。 これはオフラインを利用したDBキャッシュの為に作ってた。

IndexedDatabase は 「非同期」「大量データに向き」「JSオブジェクトやバイナリ」も保存できた。 トランザクションも存在し、ServiceWorker上でも作成可能。

でもこれ扱いづらい。

  • SQL的な運用ができない
  • 複合キー検索なんぞマルチエントリー入れないとダメ
  • 索引作らないとソートできない
  • 集合関数?なにそれ美味しいの?

そのままでは使いづらい。 で、Google より Lovefield(in github) というRDB(ぽい)実装がある。

InnerJoin, Outer, Group, Avg,,,, 殆ど用意している。

ついに着たぞ Polymer1.0

こまつけんさくさん

GoogleI/O2015 の keynote で紹介された数少ない web 技術 独自のタグが定義できて、動作も指定できる WebComponent を定義できるアプリケーション。 現状は Chrome のみだが polyfill でクロスブラウザを狙ってる。

1.0 になって高速化。サイズも随分小さくなった。最小限 19kb 最大 43kb。 新しい機能が追加。ShadyDOM : ShadowDOM を簡素化したもの。Theming : テーマを簡単に変更するCSSカスタムプロパティ。

1.0 でそれまでのやつと互換性なくなりました!それが Google らしい。

Polymer は Framework ではない。なので、フレームワーク共存して作ればいい。

ポリマーエレメントが既に結構公開されている。 Polymer Catalog 眺めると、 IronElements とか PaperElements(Material design)、GoogleWebComponents、PlatinumElements(ServiceWorker近辺) などが使える。

で、salesforceとか vaadin, atavist なんかで採用してる。

Polymer Starter Kit というアプリケーションテンプレートが公開されている。

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

IT芸人 ますいさん Pukiwiki の製作者

DOM操作って相当難しい。

  • DOM はどこからでも書き換えできてしまう。
  • 表示・非表示状態を DOM が持ってる。
  • しかも ID 振ってボタンとかイベントを作ると、どこで処理してるかわからない。

Reactの virtual dom と Polymer の shadow dom はおそらく直交するので、共存できない可能性が高い。

ECHMA6

フロントエンドエンジニア要請読本、WEB+DB PRESS Webフロントエンド最前線

https://frontendweekly.tokyo/

どうも ECHMA 6 -> 2015 に変更

var 以外に、 let, const が追加、定数などが亜つけるように。 ArrowFunction: ラムダ式追加、this ポイントは親スコープに import, export: キーワード追加 Rest parameters: ぶっちゃけ可変長引数 Default parameters: 引数にデフォルト値を設定 Template Strings: 文字列埋め込み Class: クラスで型宣言 GeneratorFunction yield: リターンキター! Proxy: メソッドの外部拡張 Symbol: Promise: Set, WeakSet: Map, WeakMap:

で、実装が進まないと使えないかというとそうでもない。

1.ES6 をコンパイルしてES5 にしてしまう。 * TracerCompiler: Google * Babel: nodejs のやつ 2. Chrome/FF なら普通にいける 3. AltJS 使う(TypeScriptとか) 4. node.js(-harmony フラグ)、iojs

ぶっちゃけES6が普及してない…っても普及する頃には ES7,8 がどうせ出てる

ハードウェアこわい

若狭 正生氏

Bluetooth こわい

iBecon とか出てきて、使おうと思うと、Cordova+Plugin か node.js が使わんといかん。 温度情報とかいろいろ飛ばせる。

で、ビーコンでURL飛ばしまくって、受け取った端末で URL を参照したりとかどうよって話。

IoT 怖い

RasberryPi とか、いろんなものがネットに繋がってる。

VR こわい

cardbord とか、3d でごそごそできる。 Unity + asm.js + oculus.vr でひゃはーできる

モーション怖い

Leapmotion でキャプチャできたりするし、Realsense という正面カメラから人の動きを認識する(表情、動作、心拍、音声など)。

通信こわい

SPDY/HTTP2 とか MQTT (軽量なHTTPライク通信) WebRTC、最近はSkyWayというサービスの影響で、広がりを見せてる。Bushido というロボット制御通信ライブラリなんてのもある。 Bluetooth が router 経由でネットに飛ぶ 6LoWPAN とか

TV がこわい

FireFoxOS がテレビに乗り始めた。 Vravia にも android 乗った。

JavaScript こわい

様々なデバイスが JavaScript で制御できるように…

MIDI がサポート

Chrome43 でMIDI機器に繋がるように。 しかもこれでブラウザ操作ができるように…下手すれば自分でいろいろ作れる!

ハードウェアこわい

ブラウザからのハード操作やデータを見ることが増える。 どんなデータがフォーマット何で飛ぶのかを真面目に理解しないと何もできない。

ハードと連動する Web こわいでしょ? JavaScript で動くロボット怖いですね〜

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

build とは

開発者に公開される正式リリース前の技術イベント。 Windows10 は全てのバージョンで同じカーネルで動く。UWP というもので作られると、同一環境全てで動く。 * Astoria -> Android アプリがそのまま動く * Islandwood -> XCodeアプリがそのまま… * Centernial -> Win32 コンバートできる。

VisualStudioCode は Windows,Mac,Linux で普通に動くし、様々な言語・環境で動く。 node.js でインスペクタできるらしい。まじか

Vorlon.JS

DOM のリモートデバッグを可能にする。 スマートフォンとかで見ているクライアントやブラウザをリモートから見てデバッグ

HostedWebApp

manifold.js

web 上のアプリを hosted アプリに変換する。

Winjs 4.0

http://try.buildwinjs.com/#listviewinteractions