技術をかじる猫

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

HTML5 とか勉強会メモ

まともに整理するのめんどい

HTML5 とか勉強会

GoogleI/O 2015

隙間のあるエリア分けだけして出入りしやすいスペースでセッションをする。 一方通行の話というよりは双方向でいろいろ話をするというのが今回のコンセプトとのこと。

基本的に android な話。

世界で 150 万台毎日アクティベートで、1年で 70 億ドルの金が google play で動いてる。 Androidware がどんどん出てるぜ。 NexsusPlayer って TV との融合果たしたぜ! Porymer 1.0 でとうとうリリース開始。

  • AdaptiveUIを提唱。 各端末でUIが違うと苦労する。Mobile/Web/TV でユーザのエクスペリエンスを統一するという話。 250万人もの人がデザインのサイトを見てくれてる。 lolipop の 40%, material design のサイトが 10 万サイトある。 DeviceMetricsTo という情報で、各デバイスでどういうレイアウトがいいのかというガイドラインを出している。 アイコンもオープンソース web フォントで出した。 サーフェイス同士を衝突しないようにしろなどのガイドラインを出している。

Google I/O Codelab で全て公開されている

Polymer

WebComponents という機能そのものをタグとして作成する考え方の実現。

PolymerCatalog

既に様々なアイテムが公開されている。 その適用方法は、カタログから選んで、左メニューから利用を行うと、画面右上にDL方法が出る 基本的に bower で DL できる。

StarterKit

ZIP で DL できるので、npm install, bower install 叩く。 gulp serve でとりあえず動く。

ShadyDOM

裏で隠しDOM持ってバインドやら何やらを実現できる。ただし、他のDOM操作に対応できなくなる。 JQuery とか React とかは現時点では対応できない。 標準化によって、この考え方が標準実装になれば…多分いける

ExtensibleWeb との関わり

ブラウザ作ってんのは大体C/C++で、Webで何必要かはWebエンジニアでねーとわからんから、APIが非常に低レベル。 高レベルAPIとして利用可能とするための中間層としてポリマーが進んでいけばいいな的な考え。

完全負け組なMobile webがこれから復活する

モバイルWebの対応があまりにも残念すぎる。 なぜかというと

  • ブックマークが役に立たない デスクトップ時代は個々のアプリが様々なユースケースをカバーしてた。 モバイルになると、アプリが単一のユースケースを担うようになってる。
  • ブラウザ落としたら何もできない モバイルはアプリケーションを起動した時、前の状態を復帰したり、 その間のなんらかの通知を行うのが普通なのに、ブラウザではできない…。
  • パフォーマンス悪い PC に比べると非力だからねーしかも省エネ必要らしいし…

この問題を GoogleI/O でどうしようという話があった。

モバイルに適したUI ネイティブアプリかのように、アイコンをホーム画面に置こうよ! WebApplicationManifest という Web 標準がある。Cordovaで慣らされ、ManifoldJS でも使ってる。 Chrome32 からホームスクリーンに配置できるようになってる。 manifest.json をごりごり書く。 モバイルに適したライフタイム 通知機能。PushAPI, NotificationAPI かねぇ。言うまでもなくServiceWorkerで。 パフォーマンスチューンしよう ユーザがそれを意識しないことが目的なのですよ ブラウザの中の人はともかく早くする為の苦労をしている。 開発者は Reaction(responseとも言うどれだけ早く応答するか) Animation Idle Load を意識せよ。 Reaction は 100ms で何かしらはんのうして!Animation は60fpsで!Idle (停止時間)は 50ms 未満で!Load は 1 sec 未満で。

もっとも最大の敵は…フラグメントなんですけどね!

de:code (IE:edge)の話

物江修さん

de:code は build というイベントにignightという開発者イベント(海外)の内容を日本向けに変更してお送りしたというやつ。 今年で2回目。アホみたいに大量のセッションがあった。

MicrosoftVisualAcademy でセッションを公開している。 去年は参加費 10 万、今年は 8 万弱した。(たけー!)

Windows10 ではブラウザ二つ IE11 + Edge IE11 は旧バージョンの互換目的、マイナーアップデートはするけど、それ以外は放置。 標準ブラウザ、Web標準のデフォルトブラウザ。Webkit にとことん追従。

IE対応のサイトだと見れない。 AppleWebkit としてエージェント返してくる。Chrome 偽装w 一応最後にこっそり Edge の文字が。

ActiveX, VBScript, ブラウザヘルパ, VML, DirectX を全て排除。 Chrome, Firefox プラグインが動く、また、Flashとかは内臓。

相互運用性を重視する。

Reading List という保存をしておくと、メモと一緒に保存して参照できる。 また、それを Twitter などでシェアできる。 Reading View を使うと、タブレットなどの為にレイアウトを調整してくれる。 画面の部分ショットにも対応している。

edge をいち早く使う為に、RemoteIE で使える他、Technical Preview 使うとわかる。

PreviewRelease というふうに、次に入ってくる機能リストなどが確認できる。

隠し機能で、URL に about:flags を入力すると、実験的機能や、特殊機能を指定できる。 規定では、localhost に接続できない。コマンドプロンプトで特定コマンドを実行するとループバックアドレスを指定できる

StackoverflowでIE開発のディスカッションをしてる。 FAQ に、なんで「Blink 採用しなかったの?」とかいろいろ質問と回答がある。