Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

ハイブリッドアプリの動作性能を飛躍的にアップさせるiOS 8の新ブラウザエンジンを検証する

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 毎年この時期は、米アップルが開催する年次イベント「WWDC」の話題一色になります。今年はMac OS Xの新バージョン「Yosemite」が、同時に発表された「iOS 8」よりも大きな話題をさらっている印象ですが、実はiOS 8の中に、HTML5でネイティブアプリを開発する、いわゆる「ハイブリッドアプリ」の実行速度を飛躍的に高める取り組みが行われています。本記事では、NDAに抵触しない範囲で、その詳細を説明したいと思います。

目次

新ブラウザエンジン「WKWebView」

 iOS 8では、これまで用いられていたブラウザエンジンであるUIWebViewに加え、「WKWebView」という新しいエンジンが追加されました。WKWebViewはその実行速度、安定性、そして機能面でも、UIWebViewを大幅に向上しています。要するに、WKWebViewを用いるだけで、アプリの実行速度が大幅にアップするのです。

 しかし、WKWebViewもUIWebViewも、ベースは同じWebKitエンジンです。また、PhoneGapやCordovaといったハイブリッドアプリ、iOS版Chromeなどのブラウザアプリには、例外なくUIWebViewが使われています。WKWebViewとUIWebViewがどう違うのでしょうか?

 筆者はこの疑問について、iOS 7のUIWebView、iOS 8のUIWebViewとWKWebViewを比較対象として検証してみました。以降では、その検証結果を紹介します。

ベンチマーク結果

 iOS 8におけるWKWebViewとUIWebViewの違いを確認するため、ベンチマークを動かす簡単なハイブリッドアプリを作り、実行しました。すべてのベンチマークは、iOS 7.1.1とiOS 8ベータ版がそれぞれインストールされたiPhone 5を用いています。

HTML5のサポート状況

 次の表は、HTML5の対応度を測定するベンチマーク「HTML5Test.com」を実施した結果です。面白いことに、WKWebViewだけで有効になっているAPIがあるようです。

HTML5の対応度
  iOS 8 WKWebView  iOS 8 UIWebView  iOS 7 UIWebView 
WebGL 3Dグラフィックス   
IndexedDB    
HTML5スコア 440/555 427/555 410/555

 

WebGLを正式にサポート

 iOS 7においても、「WebGL」は隠し機能として存在していましたが、開発者が自由に使えるものではありませんでした。iOS 8では、ついにWKWebViewとUIWebViewが正式にサポートされ、特別な設定をすることなく使えるようになりました。WebGLを用いると、ゲームなどで求められる高度な3D表現をとてもなめらかに描画することができるようになります。

IndexedDBが有効に

 「IndexedDB」はトランザクション機能などを有するデータベースエンジンです。Local Storageよりも高度な検索機能を持ち、充実したAPI群が提供されます。IndexedDBが使えるようになったことで、大量のデータを扱うようなアプリを、より簡単かつ標準的な技術で開発できるようになりました。

CSS3のサポート状況

 HTML5のほか、CSS3のサポート状況についても確認しました。ベンチマークには「CSS3Test.com」を用いています。

SS3のサポート状況
  iOS 8 WKWebView  iOS 8 UIWebView  iOS 7 UIWebView 
CSS3スコア  61%
722/1341
61%
722/1341
56%
644/1341

 WKWebViewとUIWebViewの間で、CSS3のサポートレベルに違いはありませんでした。しかし、iOS 8では前バージョンと比べて、いくつか新しい機能が追加されています。そのうちのいくつかを、次の表で紹介します。

新しいCSS3プロパティ
新しいCSS3プロパティ 説明
-webkit-object-fit 要素(画像やビデオ)が、親コンテナに対して、どのように配置されるかを指定。取り得る値: fill, contain, cover, scale-down
text-decoration-line
-webkit-text-decoration-style
-webkit-text-decoration-color
text-decorationプロパティに対して追加の装飾が可能となる
column-fill カラム内にあるコンテンツの配置を指定。balanceを指定すると、すべてのカラムのコンテンツは同じ高さとなる
-webkit-shape-outside フロートされているコンテンツの回り込みを指定。取り得る値: outside, text, wrapped

 また、リリース情報には「サブピクセル描画」が有効になったとあります。そのため、より美しく、はっきりとしたレンダリングが行われるようです(私たちが確認した範囲では特に違いを感じることはありませんでした)。ただ、その影響で、画面表示が少し崩れてしまう場合があるということなので、WKWebViewを用いる際には、既存コンテンツを確認する必要があるかもしれません。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 田中 正裕(アシアル株式会社)(タナカ マサヒロ)

    アシアル株式会社 代表取締役社長。 ユーザーインタフェース設計からインフラストラクチャー構築まで、最先端の技術を駆使したシステム構築を手がける。特にPHPをはじめとするOSSや、HTML5やJavaScriptといったオープンなアーキテクチャーを用いたシステムの構築に尽力している。モバイ...

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5