[イベント参加]HTML5 Conference 2017に行ってきた

9月24日（日）HTML5 Conference 2017が東京電機大学 千住キャンパスにて開催されました。今回は、簡単にレポートを書きたいと思います。

まずは戦利品から

ありがとうございます。サイバーエージェントさんのIRingとてもいいです！

セッション参加①
TV・車・ゲームに搭載されているブラウザってどうなってるの？

• Iモードのブラウザを作った会社
• Compct HTMLを提案
• 組み込みブラウザとは？
  • PC/スマホブラウザ
  • オープンインターネットの閲覧
• 組み込みブラウザ
  • プリンタなど
  • デバイスとその市場に特化した機能
  • TV向けサービス車向けのサービス
  • linuxやtron
• 組み込みブラウザをやっている会社は？
  • ACCESS（日本）：車 、TV、ゲーム
  • Obigo（韓国）：車
  • Esipial（カナダ）：TV
  • Vewd (ノルウェー 旧Opera）：TV
• ブラウザの移り変わりとは？
  • Chromiumの特色
    • googleのサービスへの追従が早い
• テレビのブラウザ
  • ｄデータボタンからブラウザを起動→HTMLで記述されている
  • メニューをHTMLアプリで再現
  • 東芝レグザでは、 CSSアニメーションのGPUレンダリングを使うことで実装
  • メニューから呼び出すHTMLアプリ
  • 番組表もHTMLアプリで実装
• Hybridcast Connect とは
  • 次世台のサービス
  • NHKが推奨
  • 通信部の仕様としてHTMLを使用
    • 例）サッカーの試合では
      • スマートフォンアプリと連携
      • 選手がゴールを決めると連携際に情報を通知
• TV向けブラウザの開発
  • 十字キーでどう動かすかについて考える必要がある
  • テレビは画面がおおきいので、アプリのチューニングが必要
  • 画面のコストが高いので、ソフトウェアにお金書けれれない＝内蔵RAMの容量が少ない
  • ユーザへの負担を無くし、レスポンスを早くするために、RAMを細かくチューニングする
• TTML
  • ネットフリックスで使われてる字幕の使用
• ゲームのブラウザ
  • モンスターハンター２ netfrontblowrを使用
• netfrontbrowser NXの開発での注意点
  • コントローラーで動かす
  • 裏でゲームが動いていても省メモリで動くようにする。ゲームを邪魔しない実装
• ゲーム機がブラウザを持つケース
• 車のブラウザ
  • HTMLとしてのUI、アプリ、マニュアル、ブラウジング
  • 天気予報を取得したりクラウドとの連携
  • 車両の情報
• IVI
  • 車のブラウザの新しい規格
  • 使い方は？
    • HTMLとネイティブを組み合わせる
    • WEBアプリケーションを作る。
• 車向けブラウザの開発
  • 安全最優先（過去にはプロジェクトでflashのソースのパッチを作った）
  • 走行性の利用制限
    • 運転者の気を散らさないこと
    • フォントサイズや位置画面の最大文字数等
  • ネットが走行中切れるので、ローカルでの動くアプリ開発
• 最近はWebSocketを使って情報取得
  • 例） Vehicle API（DRAFT）
    • ドアのロックを解除したい
    • WebSocketが車両の情報を書き換える
• 車両の開発は時間を要する（５年くらい）
  • オープンなものをつかってるとアップデートが多い
  • だからそこは、割り切ってWebSocketにしようという考え。
• 今後期待されてる機能
  • WebRTC
  • WebSocketを使ったデバイス連携（車との連携）
  • Amazon Alexa　（音声を使った命令）車でも音声を使った技術を最近取り入たい。
• 機能の標準化へ
  • 車載ではW3CでVehicle APIを各社で集まって定義
  • 標準化したAPIを提供することで新しいサービスが
• モバイルの独自性からオープン化へ
  • CompactHTML vs WAP　だった。
  • HTMLのサブセットであるcHTML
• Webと車のハッカソン
  • 総務省の主催
  • 今年度も１月か２月で開催予定
• 質問
  • 管理職を打診されてどうか？
    • 自分だけではできないことをチームで作る
    • 複数のチームを見ることになる
    • 自分たちの考える事で、どう最高のものをつくるのか（これを達成できると楽しい。）
    • 自身としては完全にマネジメントだとつまらない

セッション参加②
AMPで加速するモバイルウェブアプリケーション

• 歴史
  • 日本のインターネット需要だけ見ると理解が難しい
  • 欧州では広告がひどすぎてAd Blockerの導入率がすごく高い
  • メディア業界にも広告モデルにも良くない
    • これらを改善したいかないとならない
• 使いどころ
  • 回線事情はよくないけど、モバイルしかない国
  • なるべくコンテンツを早くユーザに提供
• メディア系サイトに必要な要素再考
  • 静的コンテンツが主
  • 収入源は広告
  • 広告の表示は静的なコンテンツの表示を妨げる。→良くないよね。
  • 原因は document.write()でレンダリングがブロックする要因
    • 上から読んだとき、document.write()で読み込みが止まる
• 静的ページを素早く
  • メインのコンテンツは素早く
  • 広告もきちんと表示
  • 表示が遅くなる原因
    • これらを簡単にチューニングするためにAMPが誕生
• Accelerated Mobile Pages（AMP）
  • オープンソースとして公開（２０１５年１０月）OSS化
  • ページを高速に表示するには
    • ページを簡潔にする
• javascriptやjqueryの読み込みに掛かる
  • 広告の読み込みがかかる
  • 表示を最適化
    • 画像の読み込みのために、ファーストビューができない
    • 遅延読み込みをする
    • 並列、遅延読み込み
    • 先読み、レンダリング最適化
• CDNの利用
  • HTTPだとTCPなので、ラウンドトリップの時間を短縮
• AMPの構成要素
  • AMP HTML・・・ページを簡潔に
  • AMP JS・・・表示を最適化
  • AMP Cache・・・CDN
• APMの面白いところは
  • クライアント側は簡潔
  • AMP HTML、AMP JSで簡単
• クライアントからサーバにどう取りに行くかまでをまとめて
  • 高速化よりも低速化しないことを主目的とした仕様が多い
  • カスタム要素を事前定義しせん限定な記述を強制
• 実際にどう書くのか？
  • 高さと幅を事前に書く→レイアウトの計算コストを無くす
  • HTMLの既存タグは使えない
  • JSもユーザが自分で書いたものを使えない。用意されてるものを使う
• 制約
  • 外部CSS禁止、Embed CSS禁止→レイアウトの計算の時間がもったいない
  • Styleタグに全て記述する
• AMP JS
  • これ以外のJSは一切読み込まない仕様
  • ユーザ定義のスクリプトが入り込めない
  • 高速化はAMPチームが担保。１００％コミットでやっている
    • 何もしなくても勝手に読み込みが早くなっている
    • ２０１５年から比較で、倍くらいに早くなっている
    • フェースビューも早い
• パープルパターン
  • Push
  • Render
  • Pre-chche
  • Lazy-load・・・後で読み込む
• なるべくファーストビューを早く表示
• AMP Cache
  • HTTP/２対応なのでアセットが多いページでの影響が多い
• AMPが正しいページが確認できる