HTML5オールスターズ勉強会 資料まとめ

6/13 (土) は htmlday ということで、こちらのイベントに参加してきました。
HTML5オールスターズ勉強会｜IT勉強会ならTECH PLAY［テックプレイ］
第58回 HTML5とか勉強会 - HTML5最新情報@Google I/O, de:code 2015｜IT勉強会ならTECH PLAY［テックプレイ］

とりあえず今の時点で公開されてるスライド資料やらキーワードやらをまとめ。
（随時更新します）

Twitter でのハッシュタグは #dotshtml5 , #htmlday , #html5j などなど。

（2015/06/15追記）
若狭さんの『ハードウェアこわい』、川田さんの『The next generation mobile web!』
のスライドを追加しました。

（2015/06/19追記）

• 『Edge だけじゃない! Build 2015 で発表されたそれ以外の Web 関連技術まとめ』 → ものえさんのブログ記事のリンクを追加しました
• 『Reactがいかに素晴らしいか語る20分』 →スライドを追加しました

（2015/06/22追記）

• 『Edge だけじゃない! Build 2015 で発表されたそれ以外の Web 関連技術まとめ』 → ものえさんのブログ記事(2)のリンクを追加しました

動画

スライドの下のキーワードはほんとにメモ書きです。。。

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

川田 寛さん（@_furoshiki）

あわせて読みたい

川田さんによる技評連載記事・ブログ記事

• モバイル時代を生き抜くためのWebパフォーマンスモデル「RAIL」 ～Response，Animation，Idle，Loadから来る「速さの目安」を知って改善しよう！～：連載｜gihyo.jp … 技術評論社
• Webのパフォーマンスモデル「RAIL」とは何か？ - ふろしき Blog

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

安田 絹子さん（@kinu）

Service Workerとその周辺API 駆け足紹介 from Kinuko Yasuda

• 最後の方で紹介された、Polymer で Service Worker 使うためのコード
  • GitHub - PolymerElements/platinum-sw: Service Worker Polymer element

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

吉川 徹さん（@yoshikawa_t）

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

• LoveField
  • https://github.com/google/lovefield

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

小松 健作氏（@komasshu）

• Polymer Elements のカタログ？
  • https://elements.polymer-project.org/

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

増井 雄一郎さん（@masuidrive）

• デモで紹介されたコード
  • http://codepen.io/masuidrive/ (React Todo - 1~4)

『今からはじめるECMAScript6』

泉水 翔吾さん（@1000ch）

http://www.slideshare.net/1000ch/begin-ecmascript6

ES6 の仕様、覚えてるだけ。

• Arrow Functions
  • 関数宣言の記述を簡易に
  • 関数の外の this を受け継ぐので注意
• import, export
  • JS には他の JS
• Rest Parameters
  • 可変長引数
• Default Parameters
• Template Strings
• Generator Functions
  • yield 使ったやつ
• Proxy
• Symbol
• Promise
  • http://azu.github.io/promises-book/
• トランスパイラ
  • Babel
    • https://babeljs.io/
• AltJS
  • TypeScript
  • Flow

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

物江 修さん（@osamum_MS）

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

あわせて読みたい

イベント後に書かれたものえさんのブログ記事

• DevBlogs - Microsoft Developer Blogs
• DevBlogs - Microsoft Developer Blogs

---

• build とは？
  • 新しい Windows の開発者向けイベント
  • Windows8 (2012) リリースから開催
  • 注目の技術
    • Universal Windows Platform
      • 1 個のバイナリがデバイスの垣根を越えて動く
    • Android,
• Visual Studio Code
  • https://code.visualstudio.com/
  • マルチプラットフォームで動作するコードエディタ
• Vorlon.js
  • http://vorlonjs.com/
  • Web ページをリモートデバッグするための JS
  • ［速報］マイクロソフト、Webアプリ用のリモートデバッガ「Vorlon」発表。Node.jsとSocket.io利用のオープンソースソフトウェア。Build 2015 － Publickey
• manifold.js
  • http://www.manifoldjs.com/
  • HTML5 と JS で作られた Web アプリを各種ブラウザの 'hosted' アプリに変換 (?)

『ハードウェアこわい』

若狭 正生さん（@wks）

ハードウェアこわい(字幕版) - HTML5オールスターズ from Wakasa Masao

• Bluetooth こわい
  • iBeacon
    • web で使う → Cordova にプラグインあり、node.js
  • Physical Web
    • http://physicalweb.jp/
• クラウドこわい
  • BaaS + IoT
  • Rasberry pi 2 + Windows 10
• VR こわい
• モーションこわい
  • Leap Motion
    • モーションで JS 実行、ブラウザ操作
  • リアルセンス
    • http://www.intel.co.jp/content/www/jp/ja/architecture-and-technology/realsense-overview.html
• 通信こわい
  • SPDY / HTTP2.0
  • MQTT
    • IoT時代を支えるプロトコル「MQTT」（前編） (1/3)：CodeZine（コードジン）
  • WebRTC
    • SkyWay
• テレビこわい
• JS こわい
• MIDI こわい

---

---

ここから夜の部。

『Google I/O 2015 レポート』

鈴木 拓生さん（@taquo）

• Android M
  • Now on Tap
• Polymer
  • Design for device independence
  • Google I/O のサイトもフル Polymer 製
  • 2.5 M 人：Material Design のサイトへの訪問者数
  • 200 K+
• Adaptive UI
  • http://www.google.com/design/spec/layout/adaptive-ui.html
• Device metrics
  • http://www.google.com/design/tool/devices/
• Codelab
  • https://io2015codelabs.appspot.com/

『There’s an element for that!! Now, get ready for Polymer 1.0!!!』

小松 健作さん（@komasshu）

• Polymer Catalog の使い方
  • https://elements.polymer-project.org/
  • Web サイトで Add Collection した後右上から Download すると bower.json 生成できて便利
• Polymer Starter Kit の解説
  • https://developers.google.com/web/tools/polymer-starter-kit/
  • ユニットテストのフレームワークも用意されてるぽい
    • Selenium のドライバが入ってる
• Shady DOM について、その注意点
  • What is shady DOM? - Polymer Project
• Extensible Web との関わり

『The next generation mobile web!』

川田 寛さん（@_furoshiki）

完全負け組なモバイルWebが、これから復活する(多分) from Hiroshi Kawada

スライド内容を後日記事にしてくださったものはこちら：
負け組なモバイルWebは、これから本当に復活するのか？Googleが考える次のアーキテクチャ - ふろしき Blog

モバイル web

• ネイティブに比べると web はだめだめ

  1. ブックマークが役に立たない
  2. ブラウザを閉じられると何もできない
  3. パフォーマンスが悪い

• モバイルに適した

  1. UI
  2. ライフタイム
  3. パフォーマンス

が必要

• 1. UI
  2. ホームスクリーンへランチャーを追加し、タップ時はモバイルっぽい UI で表示
  3. Web Application Manifest
     • Web アプリでモバイル UI を扱うための Web 標準
     • https://developer.chrome.com/multidevice/android/installtohomescreen
• 1. ライフタイム
  2. これからのプラットフォームは通知機能！→ Service Worker/Notification/Push
• 1. パフォーマンス
  2. RAIL
     • R: Reaction 100ms 未満で！
     • A: Animation 16.67ms (60fps) 未満で！
       • CSS Animation または Web Animations で GPU 使おうね
     • I: Idle 50ms 未満で！
     • L: Load 100ms 未満で！

『Windows 10 のあたらしい Web ブラウザーについて』

物江 修さん（@osamum_MS）

• Windows 10 の Web ブラウザー
  1. IE 11
  2. 旧バージョンとの互換性目的
  3. Windows 7, 8.1 と同じもの
  4. マイナーアップデートはされる
  5. Microsoft Edge
  6. 他の Web ブラウザーとの相互運用性
  7. Web 標準
  8. Windows 10 の
  9. 既定のブラウザ
  10. UWP (Universal Windows Platform) で作ってるので同じものがモバイルでも動く
• Edge モードの userAgent
  • Chrome のふりをするので Chrome で動くようにすれば OK
  • Edge/12.0 って書いてる
• レンダリングエンジンが違う
  • EdgeHTML.dll と MSHTML.dll
• 廃止
  • ActiveX, VBScript, etc.
• Chrome と Firefox のプラグインが動くらしい！
• Edge にはペンでお絵描きする機能とか注釈機能が
• status.modern.ie

（おまけ）所感

Service Worker, Polymer1.0 あたりは前々から気になっててある程度知ってた分、
ノーマークだった Microsoft 関連の話が一番聞いててへえ〜ってなりました。
あと、川田さんの話は毎度毎度難しい内容なのにスライドが大変分かりやすくて勉強になります。

ほか。

• Indexed DB + LoveField で web アプリのオフライン対応やりましょう
• Polymer
  • Polymer Catalog のおかげでエレメント探しやすくなった感
  • Polymer Starter Kit に入ってるユニットテストフレームワーク気になる
• ES6 はそろそろ学んどかないとやばい（TypeScript やりたい）
• Microsoft 関連では便利そうなものがいろいろでてきた
  • Visual Studio Code
  • Vorlon.js
  • manifold.js
• リアルセンス、初めて聞いたので 日本語の記事 でも読んでみようか