JS SDK ホームスクリーンアイコン機能が生まれるまで -NBPF 構想の小さなピース

image1.jpg

パートナーの皆様、こんにちは。Mobage Platform シニアアーキテクト兼ディレクターの @zigorou です。
先日、NBPF セミナーというパートナー様向けのセミナーを開催させて頂き、多数の方にご来場頂きました。この場を借りて改めて御礼申し上げます。(
リア充OLのrinaさんによるセミナーレポートもご覧ください!)

 

 

今回は JS SDK のホームスクリーンアイコン機能の出来たいきさつと仕組みについて紹介したいと思います。

 

HTML5 とモバイルゲーム開発について

 

まず開発環境としての HTML5 について述べておきます。

 

例えば Mobile Megatrends 2014 など見て頂くと分かるかと思いますが、HTML5 という選択肢は世界的に見ても半数以上のモバイルゲーム開発者が利用している開発環境であり、エンジニアの確保という点では Android/iOS 向けの開発者の確保とそう大きく違わない状態です。

 

HTML5 はオープンな仕様で様々なデバイスで動作するクロスプラットフォームな開発言語ではあるのですが、スマートフォンネイティブゲームに対してどうしても劣ってしまう事があります。

セミナーでは表1でモバイルゲーム開発における HTML5 の弱点について説明しました。

プログラムや表現の高速な動作について

 

JavaScript の実行速度は JavaScript Engine の高速化も頭打ちしてきている現状を説明しつつ、新しい高速化へのアプローチとして Chrome における NaCl だとか Firefox における asm.js について紹介しました。この流れは FirefoxOS によってモバイル環境におけるネイティブアプリケーションにも進出しようとしていますが、普及し始めるにはもう少し時間が掛かるでしょう。とはいえ注目の動きです。

また iOS8 Safari や Chrome for Android 37 で WebGL のサポートが始まっています。WebGL に関しては語るよりデモを見た方がより直感的に分かると思います。例えば WebGL を利用したゲーム開発エンジンとして最近注目されている PlayCanvas のデモなどを見てください。

 

また PlayCanvas と同様に WebGL を使ったゲーム開発エンジンである Turbulenz Engine を用いて作られた 翠星のガルガンティア~キミと届けるメッセージ~ のフライトシミュレーターゲームも圧巻です。

 

オフライン動作について

 

またオフライン動作については既存の localStorage より早くて大容量が使える WMCache のようなライブラリも存在します。

一方で公式にクロスブラウザで高速に動作し大容量が使えるオフラインキャッシュ機構はまだまだといった所です。NBPF ではオフラインキャッシュではありませんが、より直感的な SSL 環境も提供出来る CDN を提供しています。

 

リテンションについて

 

リテンションでは主に、

 

  • Remote Notification

  • ホームスクリーンアイコン

 

という所に課題があると考えています。Remote Notification に関する取り組みはいつか陽の目が出るよう鋭意努力している所ですが、既に提供しているホームスクリーンアイコンについて、この記事で紹介したいと思います。その前に最後のエコシステムについて。

 

エコシステムについて

 

結局の所、各ゲームに送客出来る強いアプリケーションマーケットがブラウザの世界にもなければならず、またそれを支えるユーザー基盤とコミュニケーションの場が不可欠です。

この点については、我々 Mobage Platform がエコシステムを推進していきたいと考えています。

 

年が変わってから少しずつ取り組みをお見せ出来るようになってくると思います。これも追々ご紹介します。

 

ホームスクリーンアイコン機能

 

さて、ホームスクリーンアイコンですが iOS Safari や Android Chrome はモバイルブラウザでホームスクリーンアイコンを作成する機能はあります。

 

 

また公式ドキュメントはおそらく無いと思いますが、いわゆる Android 標準ブラウザにも同等の機能があります。

 

これらは、「現在閲覧中」のページにリンクするホームスクリーンアイコンを作成する機能なので、例えば「全てのアプリケーション内の任意のページからアプリケーションのトップページ url を開く」ようなホームスクリーンアイコンの作成を訴求する事が出来ません。

 

つまりユーザーにホームスクリーンアイコンを作って欲しい場合は、トップページでしかその訴求を行う事が出来ず、またブラウザからホームスクリーンアイコンを作る手続きはそこまで認知されていないので、ネイティブアプリケーションがマーケット等からインストールした段階でホームスクリーンアイコンが作られるのに対して、ユーザーの心理的障壁がかなり高いと感じました。

 

  • あらゆるページから訴求が出来て

  • 作り方も誰でも分かる

 

という条件を満たす必要があるなと悶々としていた所、社内のとある人物に教えて貰ったアイコンの着せ替えアプリ(敢えて名前は出しません)を見て、その挙動を見たとたんに「なるほど!」と思いました。

 

ホームスクリーンアイコン機能の裏側と機能説明

 

さて、そのホームスクリーンアイコンの作成機能ですが、Mobage Developers Japan でリンク先とアイコンの登録を行った上で url とアイコンの組を識別する為のラベルを作ります。詳しくは ショートカットアイコン作成支援機能 ページを参照頂きたいのですが、Mobage Developers での設定が完了したら、例えばゲーム中に良くある共通メニューやキャンペーンページなどにあるボタンに対して次のようなコードを埋め込みます。

 

var b = document.getElementById(“addHomeScreenButton”);

b.addEventListener(“click”, function(evt) {

   mobage.ui.show(“shortcut_icon”, { shortcutType: “top” });

}, false);

コード1. ホームスクリーンアイコンの追加

 

本当であればこのボタンを押しただけでホームスクリーンに追加されれば良いのですが、ブラウザ自身の機能に介入はさすがに出来ません。この機能が呼び出されると「新しい window が開き」ホームスクリーンアイコンの追加の仕方を説明するページ(図1)に飛びます。

図1. ホームスクリーンアイコンサービスの画面(左: iOS Safari, 右: Android Chrome)

 

それぞれのブラウザに合わせた作り方を説明したページとなっており、これで今まで作り方を知らなかったユーザーでも分かるようになります。またこのページは実は以下のコードのような細工がしてあります。

(function(window) {

   "use strict";

   window.addEventListener("load", function(evt) {

     if (location.hash) {

         launchApplication();

     }

     else {

         displayAddHomescreen();

     }

   }, false);

})(this.self || global);

コード2. ホームスクリーンアイコンサービスページ上の細工


 

このページが開かれた際に location.hash 値 (URI の # 以下の文字列の事で、古典的にはページ内リンクの為に用いられていた概念です) の有無によって、あればアプリケーションである元のゲームの決められた url に遷移し、なければこのホームスクリーンアイコンの追加説明ページに遷移するようになっています。

 

mobage.ui.show() で最初に立ち上げられた際に location.hash 値はないので displayAddHomescreen() 関数が呼ばれる事になります。この関数内では location.hash 値を設定しておきます。そうする事によって、ユーザーがホームスクリーンアイコンとして登録する URL に、URI Fragment が付与されます。従ってホームスクリーンアイコンをタップして、起動した場合は launchApplication() が呼び出されるという至ってシンプルな仕組みが基本的なコンセプトになっています。

 

実はこの機能はこれからも発展させたいなと思っており、例えばですが

 

  • Splash 画像の設定と起動時の表示をクロスブラウザで提供する

  • ホームスクリーンアイコンを複数の中から選べる

 

みたいな事を考えています。

 

ホームスクリーンに追加をユーザー体験として定着させる為に

 

実はこのホームスクリーンアイコン機能ですが、追加で「ユーザーがホームスクリーンアイコンをタップした」事を PF から Game Server に通知する為の機能があります。

この通知システムは汎用のシステムで友達招待機能などで通知している機能と同じ仕組みです。

 

この通知機能を何故作ったかというと、前述の通りキャンペーンページなどにこの機能を設置してもらい、ホームスクリーン経由でアクセスしてきた場合にユーザーにインセンティブを付与するという使われ方を想定しているからです。

 

こうした事でホームスクリーンアイコンの追加をユーザー体験として定着させいきたいと考えています。

 

是非 JS SDK を採用しこの機能をご利用頂きリテンションの向上に繋げて頂ければと思います。