gameEngine(仮)について

目次

1. はじめに
2. 課題1:スマートデバイスのニュルニュルするアドレスバーをゲーム中は隠したい
3. 課題2:PWA に取り組む
4. おまけ:HID 抽象化

話題にする技術や用語

PWA, SPA, A2HS, ServiceWorker, Cache, IndexedDB, Google Gears の ManagedResourceStore, ApplicatinCache, StorageManager

1. はじめに

gameEngine ではブラウザをゲーム配信プラットフォームとするにあたっての課題を挙げて解決します。多くの課題は PWA に取り組むことで解決しました。「スマートデバイスのニュルニュルするアドレスバーをゲーム中は隠したい」という課題だけが独自のこだわりでした。

この解決は SPA にも容易に適用され得るものです。一方で例えば Qiita のようなウェブマガジン等への適用は、オフラインキャッシュ戦略等でメディアの特性に合わせた更なる検討が必要です。

2. 課題1:スマートデバイスのニュルニュルするアドレスバーをゲーム中は隠したい

1. アドレスバー等を隠して Web アプリをネイティブアプリ風にする
2. アドレスバー等を隠す弊害と回避
3. STRETCH_BY_SCROLLING の実装

2.1. アドレスバー等を隠して Web アプリをネイティブアプリ風にする

多くのスマートデバイス用ブラウザは、文書の順方向のスクロールでアドレスバー等を隠してビューポートを拡大します。逆方向のスクロールで再びアドレスバーを表示してユーザーはタブの操作等が出来ます。

gameEngine ではこのギミックを備えるブラウザのリストを持っていて、ビューポートを拡大してからゲームを開始します。

2.2. アドレスバー等を隠す弊害と回避

ブラウザの中には、アドレスバー等を隠した状態にするとブラウザを再起動するまでタブの変更等の出来ないものが存在します。

gameEngine では、PAUSE 画面ではスクロールを許可することで弊害を回避しています。しかし一般的な Web コンテンツのフローではない為、ユーザーを混乱させストレスとなるかもしれません。

2.3. STRETCH_BY_SCROLLING の実装

おそらく各ブラウザで WebView ペーンの扱いが異なる上に、ニュルニュル動くもの(非同期で同時多発で GUI が変化する)を矛盾無く記述することが、人間には不得手。

Android + Presto Opera, Android + Firefox 6x?, それ以外で異なる実装。

3. 課題2:PWA に取り組む

1. プログレッシブウェブアプリ (Progressive Web Apps) とは?
   1. PWA 用例集
   2. 「プログレッシブ」な Web サイト
   3. PWA の原則、MDN より
   4. 新しい API で実現する PWA の原則
2. gameEngine の PWA 達成状況
   1. ホーム画面に追加
   2. オフライン化の効能
   3. オフライン化、ServiceWorker について
   4. ServiceWorker 周りの僕の工夫(1)
   5. ServiceWorker 周りの僕の工夫(2)
   6. オフライン化、StorageManager について

3.1. プログレッシブウェブアプリ (Progressive Web Apps) とは?

デザインパターン、仕様があるわけでは無い。

3.1.1. PWA 用例集

3.1.2. 「プログレッシブ」な Web サイト

Web サイトにとって「プログレッシブ」とは？MDN を覗いてみると。

「古き良き基本的なウェブサイト」から始めて、ブラウザーで利用できるかどうかを検出し、サポートが利用できない場合に発生するエラーを適切に処理しながら、新機能を徐々に追加します。 例えば、サービスワーカーの助けを借りたオフラインモードは、ウェブサイトのエクスペリエンスを向上させるための特別な特徴ですが、それがなくても完全に使用可能です。

3.1.3. PWA の原則、MDN より

強調表示は新しい API を使うもの。

ウェブアプリが PWA として見なされるために、いくつかの重要な原則があります。

Discoverable

コンテンツを検索エンジンで見つけることができる。

Installable

アプリは端末のホーム画面に追加できる。

Linkable

URL を送るだけでアプリを共有できる。

Network independent

オフラインか、あるいは貧弱なネットワーク環境でも使用できる。

Progressive

古いブラウザーでも基本的な機能は使用でき、最新のブラウザーではすべての機能が使用できる。

Re-engageable

新しいコンテンツがあるときには、通知を送ることができる。

Responsive

携帯電話やタブレット、ノートパソコン、テレビ、冷蔵庫など、画面とブラウザーを備える全ての端末で使用できる。

Safe

アプリからの通信が第三者からの攻撃に対して安全であり、機密情報を保護できる。

3.1.4. 新しい API で実現する PWA の原則

1. ホーム画面に追加(A2HS(Add to home screen))できる
2. オフラインでも使用できる
3. 通知を送ることができる

3.2. gameEngine の PWA 達成状況

1. ホーム画面に追加(A2HS(Add to home screen))できる ⇒ ✔済
2. オフラインでも使用できる ⇒ ✔済
3. 通知を送ることができる ⇒ 未

3.2.1. ホーム画面に追加

Android 用ブラウザでは、マニュフェストファイルを設定することで Web アプリケーションをモバイルのホーム画面に追加できるようになる。

Firefox のホームアイコンは "background_color" に設定した緑が意図せず表示されていた為、最終的に "theme_color" と "background_color" を同色の黄色とした。

iOS では Apple 独自の <meta> タグを使用する。

3.2.2. オフライン化の効能

様々な効能

SPA の内容によってはオフラインで完全に動作する。オンラインでもギガを節約し高速に起動する。Web サーバの負荷を抑える。

gameEngine にとって

ユーザーの所有という側面を強めたい。

3.2.3. オフライン化、ServiceWorker について

オフライン化には ServiceWorker という新しい API を使用します(*1)。 ServiceWorker は Web ページの javascript からインストールされ、ローカルウェブサーバーになります。

この ServiceWorker に加えて Cache ストレージや IndexedDB 等を利用してオフライン時にもコンテンツを提供したり、サーバに送るデータをオンラインになるまで保持します。

3.2.4. ServiceWorker 周りの僕の工夫(1)

ブラウザの開発者ツールを覗くといつの間にか複数の ServiceWorker がインストールされています。ユーザーの同意操作なしにインストールするのはお行儀が良いとは言えません。

gameEngine ではユーザーの操作を経て ServiceWorker をインストール、アンインストールの GUI を提供します。

3.2.5. ServiceWorker 周りの僕の工夫(2)

1. ユーザーの操作で ServiceWorker をインストールしてファイルをキャッシュ(通信が発生)
2. ユーザーの操作で更新(通信が発生)
3. ユーザーの操作で解除
4. ApplicatinCache でのフォールバック

3.2.6. オフライン化、StorageManager について

Web アプリがブラウザ側に保存したデータ(IndexedDB, Cache, ServiceWorker, localStorage, ApplicationCache 他)は、ストレージの容量制限に達すると、もっとも過去に使用されたものから削除されます。StorageManager をサポートするブラウザはユーザーの許諾でストレージを永続化することが出来ます。しかしいよいよとなったら削除されます。

4. おまけ: HID 抽象化