gameEngine(仮)について
目次
- はじめに
- 課題1:スマートデバイスのニュルニュルするアドレスバーをゲーム中は隠したい
- 課題2:PWA に取り組む
- おまけ:HID 抽象化
話題にする技術や用語
PWA, SPA, A2HS, ServiceWorker
, Cache
, IndexedDB
, Google Gears の ManagedResourceStore
, ApplicatinCache
, StorageManager
1. はじめに
gameEngine ではブラウザをゲーム配信プラットフォームとするにあたっての課題を挙げて解決します。多くの課題は PWA に取り組むことで解決しました。「スマートデバイスのニュルニュルするアドレスバーをゲーム中は隠したい」という課題だけが独自のこだわりでした。
この解決は SPA にも容易に適用され得るものです。一方で例えば Qiita のようなウェブマガジン等への適用は、オフラインキャッシュ戦略等でメディアの特性に合わせた更なる検討が必要です。
2. 課題1:スマートデバイスのニュルニュルするアドレスバーをゲーム中は隠したい
- アドレスバー等を隠して Web アプリをネイティブアプリ風にする
- アドレスバー等を隠す弊害と回避
- STRETCH_BY_SCROLLING の実装
2.1. アドレスバー等を隠して Web アプリをネイティブアプリ風にする
2.2. アドレスバー等を隠す弊害と回避
ブラウザの中には、アドレスバー等を隠した状態にするとブラウザを再起動するまでタブの変更等の出来ないものが存在します。
gameEngine では、PAUSE 画面ではスクロールを許可することで弊害を回避しています。しかし一般的な Web コンテンツのフローではない為、ユーザーを混乱させストレスとなるかもしれません。
2.3. STRETCH_BY_SCROLLING の実装
おそらく各ブラウザで WebView ペーンの扱いが異なる上に、ニュルニュル動くもの(非同期で同時多発で GUI が変化する)を矛盾無く記述することが、人間には不得手。
Android + Presto Opera, Android + Firefox 6x?, それ以外で異なる実装。
3. 課題2:PWA に取り組む
- プログレッシブウェブアプリ とは?
- PWA 用例集
- 「プログレッシブ」な Web サイト
- PWA の原則、MDN より
- 新しい API で実現する PWA の原則
- gameEngine の PWA 達成状況
- ホーム画面に追加
- オフライン化の効能
- オフライン化、
ServiceWorker
について ServiceWorker
周りの僕の工夫(1)ServiceWorker
周りの僕の工夫(2)- オフライン化、
StorageManager
について
3.1. プログレッシブウェブアプリ とは?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtdBUAGdqyNRxcYfsWkqcnHcZKNwFYaqkkXruBb6SUWrDiBbd7vNtUq4ZXYy1TbZD-Lc2uXH_qxSG68mXFROGk05nwS1t2zsJQ4t2lgmK-WOMJk-lzS5fAtE4OfFcyanCNGzGIfZe7Lo/s200/MDN_PWA.png)
デザインパターン、仕様があるわけでは無い。
3.1.1. PWA 用例集
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAroRvG_X76ocKQ7kP21iuIm2zwlN4dsr-hxPmGLNTTLPPHcpQRYmRZ8yT5KWl32myMyIcNxrM7U5jagrV4TEYAySkBPAUtFPQDcZgP9kSDShfpit4jbu55iDG1Wn1TkwQtG1QwDOGXyI/s160/nikkei.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUwo7LE_sErfvhBLbKwzT9b7GO8NZqYCUWtoUfnW12xDx6I5AY2A2epZgcMjwcJ_BywPp4dWP9ZtPF3piiOxvnqayUPCNIAxrKGr1BZP6z1mdxV8YAv0YWe69LPt2ZX3roOCacrQ4x8MY/s160/tenpoapp.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif-mw1FjeX6rhjVWBiVSsQ6f-8Sa3OUGlVuI8L6rbGp2kfIP8znCe-lHlCAY3MmME4DiEVCDwmTlW_HkytntXHLv7359uZI8mLoyxxOQp6VsR8qyW3RJzHCsLK_BC8jL50mvXbaTFwF8g/s160/digitalidentity.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwpun8FCK8Mhj4gt6CVjCiVl0hPBK_Alr0DVUo6oswEUmAPBSgh7qTsEt3mGG1x4eg71ZC_COZWaosvv4T5QvRj4vmuKVeAofkfhX1iviX1aJmxVr35CaD2jbK8iwXtzSOtKXhQvKnMEs/s160/ferret-plus.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6eAy2_3TK3BFiJSiiqqHqlTqpb7CyWfTTrg5qTWmMCesL7Hjz-RswhdOAqXTIIxPe_Ehm1_AbXQergh78j_nn4s1ISE0LMbPN-7gWZoWGNsCNxzfRZGTJVUon5W6AnJKe1BVP1yv5oE/s160/gpol.png)
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 の原則
- ホーム画面に追加(A2HS)できる
- オフラインでも使用できる
- 通知を送ることができる
3.2. gameEngine の PWA 達成状況
- ホーム画面に追加(A2HS)できる ⇒ ✔済
- オフラインでも使用できる ⇒ ✔済
- 通知を送ることができる ⇒ 未
3.2.1. ホーム画面に追加
3.2.2. オフライン化の効能
様々な効能
SPA の内容によってはオフラインで完全に動作する。オンラインでもギガを節約し高速に起動する。Web サーバの負荷を抑える。
gameEngine にとって
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ei9JzGGB7g15ZXBVWisYKuO1ufFvtsvwdpHVa9xwXbPUr9cV3N1fUqYhWrWIAVIe5eH8Sz4jsJFZOLqcH8aEq5UC3q36xnpTzTGzqsNIk8gGxjdLSCehYGWAB-m8cnXlVpwqavGlom4/s160/famicom.jpg)
ユーザーの所有という側面を強めたい。
3.2.3. オフライン化、ServiceWorker
について
オフライン化には ServiceWorker
という新しい API を使用します(*1)。 ServiceWorker
は Web ページの javascript からインストールされ、ローカルウェブサーバーになります。
この ServiceWorker
に加えて Cache
ストレージや IndexedDB
等を利用してオフライン時にもコンテンツを提供したり、サーバに送るデータをオンラインになるまで保持します。
*1 これに先行して、Google Gears の ManagedResourceStore
、ApplicatinCache
がありました。
3.2.4. ServiceWorker
周りの僕の工夫(1)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMkMdV8TIUuYDdecUQNZPjcXcoY_Jf-kSizuq0FcmzdxWyj4EOByGT_SgKczDXhF49Q80HZsaC2MylUMS1pCFJoaScNpBqSo9kNTgFm0IP7xHA43TfCrVwdDZRPRvTpddt0nQ5oQ37js/s160/firefox_remote_debug.png)
ServiceWorker
を確認するブラウザの開発者ツールを覗くといつの間にか複数の ServiceWorker
がインストールされています。ユーザーの同意操作なしにインストールするのはお行儀が良いとは言えません。
gameEngine ではユーザーの操作を経て ServiceWorker
をインストール、アンインストールの GUI を提供します。
3.2.5. ServiceWorker
周りの僕の工夫(2)
3.2.6. オフライン化、StorageManager
について
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHEbHchFwFJL5JNIV7KZoIFCyyYZr4b3GcPOuqEXFOU2z0kl-P6ek1U5JiX6orrOAJ6RtWQs2aDP9sdwWnr50a0llx9se0SKGvMUgu0_XR2lw8ttn2dyU_f-FBuNqTqSwJ7f6iqpVmdQ/s160/StorageManager.png)
Web アプリがブラウザ側に保存したデータ(IndexedDB
, Cache
, ServiceWorker
, localStorage
, ApplicationCache
他)は、ストレージの容量制限に達すると、もっとも過去に使用されたものから削除されます
。StorageManager
をサポートするブラウザはユーザーの許諾でストレージを永続化することが出来ます。しかしいよいよとなったら削除されます。