いがにんのぼやき

若手WEBエンジニアのブログ。IT、WEB、バンド、アニメ。

HTML5 Conference 2017に参加してきた

html5j.connpass.com

参加してきました。
その時の雑な自分用メモを公開します。

公式サイトは今は見れないっぽい。 http://events.html5j.org/conference/2017/9/

以下に発表スライドをまとめてくれている人がいます。
qiita.com

任天堂

html5experts.jp

2011年入社 津田 宗孝 2013年入社 堀川 雄司

任天堂とWeb?

公式サイトだけじゃない!

世界中の人と繋げるためにスマートフォンとWEB
Webkitをベースのブラウザコンポーネント

ニンテンドーアカウントの作成はウェブ画面
メールアドレスだけ入力すれば、スマートフォンから他の情報の登録ができるようになる

Nitendo SwitchとWeb

Switchのスクリーンショットで、投稿する画面はウェブアプリケーション スプラトゥーンの武器の説明はHTML、試し打ちのスーパーの説明やバトルのルール説明など 文字が多いところはWEB、WEBだと多言語対応がしやすいため アームズのキャラクターのところも?

みまもりSwitchは普通のネイティブ

Nintendo eShopができるまで

2015年末
eShopのプロジェクト発足

すぐに

  • すぐに出会える
  • すぐに買える
  • すぐに改善
出会える

eShopを見なければ目につかないのであれば意味がない
商品のプロモーションはゲームニュースに切り出した
スリープ復帰時に必ず目につくようになっている

買える

書いたいと思ったらすぐに買えるための導線を増やす
買いたいと思う熱を冷まさない

ソフトとサーバーサイドが連携してeShopの色も自動で変わるように対応

すぐに改善

ライブラリ選定
SPAを前提
コンポーネント指向
シンプルな状態管理、決済や言語などに対応するため

React + Redux

react redux react-router axios

文脈に沿って追加/習性が可能

コンポーネント化の誤解

ここは価格を目立たせたい
価格、同じコンポーネントだけどどうするの?
デザイナーはWhat、エンジニアはHow

全体を俯瞰できるモックアップの開発に立ち返った
検索は非同期で一部描画
描画コストの高い画像に関しては商品のキーカラーを表示
描画領域以外の箇所を後からレンダリング
React-storybookを活用して認識を共有、コンポーネントカタログを作成

開発と検証の溝

国、言語、法律、通過、決済

ユーザーストーリの作成

エピック
ニュース→eShop→ゲームの購入
品質目標

  • Never
  • Must
  • Want

開発序盤からのテスターとの協業
長期的な安定稼働
すぐに改善

終盤、ローンチまで半年を切ったところ

eShopが不安定、起動が遅い
フロントエンドエンジニアからのヘルプ
サーバー、ブラザ、アプリ、SDK/OSプログラマ、デザイナ、一つの会社、一つの建物にいるのでできる

Yahooのプロキシとプロトコル

新部 長則
2010年 HDDからSSDへの変更
2011年 帯域不足 NW増強、データセンター追加
2013年 pushスパイク問題、Proxy、origin共に増設
2015年 SSL、CPU性能不足 システム入れ替え

AOSSL対応

2015年10月 全社の代表者が集まり発足
サービスが100以上、ドメイン1000以上なのでなるべく収まるよう減らして言った
またワイルドカード証明書を活用

共有Proxy Hardware 500以上のサーバー
リクエスト200万rps
Traffic 300Gbps

EV SSLだとワイルドカード証明書が使えない
SNIによる証明書の出し分けで対応

HTTP/2の現実

大津 繁樹
ATM

HTTPリクエストを仮想的に多重化
待ちが他のリクエストに引きずられない

サーバー側から見る速度

大きめのファイルのダウンロードは確かに早くなった
アクセスしているOSやクライアント環境によるものかもしれないのでHTTP2のおかげで早いのかは分からない

小さいファイルはほぼ変わらなかった

クライアント側から見る速度

DOMContentLoaded
HTTP 1.1 1.15s
HTTP 2 1.14s
ほとんど変わらなかった
画像の読み込みは早いがそれ以外の要因で変わらなくなっている??

新規接続:再接続
http/2 11:89
1.1 42:58

サーバーのSSLの暗号化処理の分が軽くなるのでサーバー側に影響が以外にもあった

TLSの現実

TLS1.0はオワコンだがWin7 IE9、IE10、IE11やAndroid4.x 標準ブラウザ
今はTLS1.2

TLS1.3

HTTPというものはブラウザからも信用されない時代がくる
中間経路がTLS1.3に対応していないとそこでブロックしてしまう可能性があるので調査が必要

QUIC

クイック
UDP

モダンウェブアプリケーション5カ年計画

Rendering on Googl Search
V41のクロームでSPAもSEO解釈されるようになっている
Isomofic JavaScript = Universal JavaScript

全アプリに向かない(参照系に向く)
管理画面などは複雑性が高いから難しいかも
Code-Splicting
SSRは意外にも表での処理がとても長くなる(操作開始まで)
WebpackのDynamic Importsで解決
React Fiberでバックエンドの処理もさらに細かく

※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。