Experts.jp日本に、もっとエキスパートを。I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。Apps(アプリのように振る舞うWeb)」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。今回のI/Oで取り上げるのもそのひとつ。interfaces」です。Apps」について、UIで起こりがちなパフォーマンス問題と、その改善方法について紹介しています。この講演、動画無しでは説明が難しかったり、前提知識も多かったりするので、私でかなりアレンジ・要約して紹介しています。詳細に内容を知りたい場合は、ソースをみることをオススメします!Webは時として、モバイルアプリのような体験が求められるモバイルにおいて、ホームスクリーンは重要な場所だ。人々はホームスクリーンから、目的を達成するためのアプリを起動する。Homescreenを使うことで、ホームスクリーンからWebサイトへアクセスすることができるようになった。このホームスクリーンをよくみてほしい。どれがWebで、どれがネイティブアプリなのかは見分けがつかないだろう。Mapsなんかはネイティブにみえるけれど、他はまったく想像がつかない。Mapsと同様にネイティブアプリにみえるなら、Webはネイティブアプリのように振る舞うことが求められている。パフォーマンスモデル、インタラクションモデルの2つによって、Webはモバイルネイティブアプリのような振る舞いをえることができる。Appsを実現することができる。今日はこの2つのモデルのうち、パフォーマンスモデルの話をしたい。Grigorikなどの私のチームのメンバーが、「RAIL」というパフォーマンスモデルについて話した。RAILとは、Responseは0.1秒、Animationは16ミリ秒、Idleは50ミリ秒、Loadは1秒で動作すべきというもの。それを聞いた人々は、たまに勘違いをする。この4つの要素は、どれも全て、最も重要なこととして語ってしまうのだ。Webサイトにおいて、タップした時に求められるのは、4つの要素のうちLoadが重要になる。Idleが重要になることはそこまでない。Appsでは、ResponseやAnimationが重要になる。Appsをつくるのでは、求められることが違う。そこに、3つのコンポーネントがある。これらを実現するセオリーを紹介しよう。Navigationまずは、このコンポーネント。メニューボタンをタップすると左からスライドインするバー。これは、2つのElementによって構成される。半透明の黒い背景と、サイドメニューを表示する領域だ。none;を指定する。auto;を指定する。左から右、あるいは右から左に移動させる際に、transformを使う。ブラウザがDOMの位置を変更する際に、CPUを使ったレイアウト変更してはいけない。GPUの力を借りて、描画位置を変更することで、最適なパフォーマンスを得ることができる。