Build

Facebook.comで実行するゲームの最適化

The Web Games on Facebook and Facebook Gameroom platforms are no longer available for new submissions. This documentation is intended solely for developers with existing games. To learn more, read our blog post.

Facebookには、プレイヤーのブラウザーでゲームを際立たせるための機能が多数用意されています。このような機能を使用すれば、さまざまなウィンドウサイズを効果的に処理したり、プレイ中にFacebook機能を使用できるようにしたり、ゲームを中断することなくFacebookからのやり取りを受け入れたりできます。

レイアウトの最適化

可変レイアウトを使用すると、プレイヤーのブラウザーの大きさに合わせてゲームのサイズを拡張できます。有効にすると、ゲームが表示されるiframeの大きさを、使用できるブラウザーウィンドウの幅と高さに合わせることができます。

Facebookウェブゲームの使用可能なスペースへのアプリコンテンツの表示方法(可変レイアウト(幅、高さ)を使用しない場合)。

可変レイアウトを有効にするには、最初にアプリダッシュボードでアプリの設定を行う必要があります。アプリの[設定]ページに移動し、[Facebookのアプリ]セクションを探します(次の画像を参照)。

アプリダッシュボード内の可変レイアウト設定。

固定幅

固定幅をNoに設定すると、ゲームが表示されるiframeの幅が100%に設定されます。コンテンツは左揃えになり、プレイヤーがブラウザーウィンドウの幅を変更すると、ページに合わせてiframeのサイズが変更されます。

固定幅をYesに設定すると、iframeの幅が760ピクセルに固定されます。デフォルトでは、ほとんどのブラウザーでiframeの<body>要素がmargin:8pxに設定されているため、この値を変更しない限り、コンテンツのサイズは744ピクセルになります。

固定高さ

固定高さをNoに設定すると、アプリが表示されるiframeの高さが100%に設定されます。ブラウザーウィンドウのサイズを変更すると、iframeのサイズも変更されます。コンテンツの高さが利用可能な高さを超えるとスクロールバーが表示されます。

固定高さをYesに設定すると、アプリダッシュボードで追加指定する高さの値(ピクセル単位)がiframeに適用されます。

可変レイアウト

固定設定をNoにして、可変幅と可変高さを有効にすると、利用者がいつでもブラウザーサイズを変更できるように、可変寸法とダイナミックなサイズ変更に対応するアプリを開発する必要があります。

アプリは、利用可能な画面空間をすべて使用できるようスケーリングして、必要であれば、レイアウトをダイナミックに調整するためJavaScript window.onresizeイベントをリッスンできるようにします。多くの場合、HTMLとCSSではJavaScriptを使用せずにダイナミックレイアウトを処理できますが、絶対単位で要素のサイズを指定した場合は、window.onresizeイベント中にコードの実行が必要になる場合があります。ちらつきや過度なレイアウト変更を防ぐため、リサイズハンドラーは1秒あたり30～60回のみ実行するか、サイズ変更が特定のしきい値を超えたときにのみ実行することをおすすめします。

HTMLサンプル

HTMLアプリの場合、アプリの親要素の高さと幅を100%に設定します。HTMLアプリ内でUI要素の向きを変更する必要がある場合は、通常のHTMLページと同様に、window.onresizeイベント経由で設定できます。

次のサンプルコードには<div>HTML要素が定義されており、背景色の青で使用可能なブラウザー寸法内を塗り潰すように設定されています。window.onresizeイベントをリッスンし、ブラウザーのサイズが変更された場合には、最新の<div>寸法を出力します。

<html>
  <head>
    <title>Fluid Layout HTML Example</title>
  </head>
  <body style="margin:0; padding:0; border:0; background-color:#000000">
    <div id="allContent" style="background-color: #0000FF; height:100%">
      <div id="output" style="color: #FFFFFF;" />
    </div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript">
      FB.init({appId : 'APP ID',});
      function echoSize() {
        document.getElementById('output').innerHTML ="HTML Content Width: " + window.innerWidth +" Height: " + window.innerHeight;
        console.log(window.innerWidth + ' x ' + window.innerHeight);
      }
      echoSize();
      window.onresize = echoSize;
    </script>
  </body>
</html>

Flashでの可変レイアウトの処理

Flashアプリをビルドするときには、高さと幅の両方の<object>タグの初期寸法を100%に設定する必要があります。これにより、使用可能なスペース全体に合わせてFlashクライアントのサイズが変更されます。次に、ActionScriptコードがstageオブジェクトのEvent.RESIZEイベントをリッスンし、処理するように設定する必要があります。このイベントはプレイヤーがswfのサイズを変更するたびに送信されるため、それに応じてUI要素をレイアウトします。

Flashまたはその他のプラグインにおけるダイアログとメニューポップアップの処理

Flashやその他のプラグインをベースにしたゲームの実行中には、プレイヤーがFacebookに組み込まれているUI要素を使ってやり取りすることが考えられます。そのような場合、ゲームが見えにくくなることがあります。このような状況は、ゲーム内のアクション(ログインダイアログの起動など)が原因で発生することもあれば、プレイヤーがゲーム周辺のFacebook要素(Messengerウィンドウなど)を操作した場合に発生することもあります。

こういった状況をスムーズに処理するには、アプリのダイナミックなスクリーンショットを作成しておき、<object>要素をこの画像で置き換えます。このような置き換えは、200ミリ秒以内に完了させる必要があります。これによりダイアログが正常に表示され、ユーザーエクスペリエンスも向上します。

その最適な方法は、スクリーンショット(JPEGや、グラフィックススタイルに見合うその他のコンパクトな形式)を撮り、その文字列をBase64でエンコードし、ゲームを一時停止する関数をFlashコード内に作成することです。必要に応じて、その関数を(exportScreenshotなどを呼び出して)JavaScriptに対して提示します(Flashでは、flash.external.ExternalInterface.addCallback関数などを使用できます)。また、フォーカスを再取得したときにゲームを再開する関数を提示します。

次に、JavaScriptコードに、ゲームがフォーカスを失ったり取得したりすると呼び出されるリスナー関数を記述し、それをFB.init()にhideFlashCallbackパラメーターとして渡してFacebook環境に登録します。リスナーには、stateと呼ばれるキーを含むパラメーターディクショナリが渡されます。ゲームを非表示にする必要がある場合は、この値をopenedに設定します。その場合、リスナーはFlashアプリのexportScreenshotメソッドを呼び出し、Base64でエンコードされた画像データを使用してデータURLを作成し、それをimg要素のsrcに設定します。その際、JS SDKでFB.Canvas.hideFlashElementメソッドを使用して、アプリに含まれる要素をオフスクリーンに移動し、そのimgで置き換える必要があります。リスナーに渡されたパラメーターディクショナリにstate: "opened"がない場合は、代わりにFB.Canvas.showFlashElementを使ってFlashアプリを画面に再度表示します。

変更したスクリーンショットは、4分の1サイズに縮小(ぼかし画像として表示される)したり、明度を下げたりしてエクスポートし、背景にフェードインされるように表示することもできます。そうすれば、プレイヤーはゲームからフォーカスが外れており、何らかのUI要素がその上に重ねて表示されていることが簡単にわかります。

urlhandlerの設定による再読み込みの回避

JavaScript SDKのメソッドFB.Canvas.setUrlHandler()で登録されるコールバックを使用すると、Facebook Chrome内の任意の場所にある(通常はゲームを再読み込みする)リンクがクリックされた状況を、ゲーム内でスムーズに処理できます。例:

  • すべてのリアルタイムフィード記事
  • ブックマーク
  • ブックマークのドロップダウンリストによるリクエスト
  • お知らせ記事のリクエスト

例えば、利用者がゲーム内でアチーブメントを取得した友達に関するリアルタイムフィード記事をクリックすると、デフォルトではブラウザーがそのアチーブメントのURLに移動します。代わりにゲームにコールバックを登録して、アプリケーション内でアチーブメントを表示することもできます。

コールバックはURLのパスを含むフィールドを使って呼び出します。このURLは、アプリケーションのFacebookウェブゲームURLへの相対パスになります。例えば、読み込まれたURLが次のようであるとします。

http://apps.facebook.com/yourgameXYZ/achievements/cheevo1.php
  ?fb_source=canvas_ticker
  &fb_ticker_mod=achievement
  &fb_action_types=games.achieves

次のようなディクショナリであるパラメーターを指定して、コールバックが呼び出されます。

{ 
  path: "/achievements/cheevo1.php?fb_source=canvas_ticker&fb_ticker_mod= achievement&fb_action_types=games.achieves" 
}

FB.Canvas.setUrlHandler()への呼び出しごとに、以前に設定されたコールバックが(あれば)置き換えられます。また、Facebookのゲームを指すリンク(例: apps.facebook.com/your_app/で始まるもの)のみが、インライン処理のために送信されます。

サポート対象外のブラウザーでのWebGLの処理

FacebookウェブゲームでWebGLを使用している場合は、Facebookウェブゲームのアプリ設定で、[WebGL]を[はい]に設定します。これにより、WebGLのプレイヤーエクスペリエンスが最適化されます。

プレイヤーが使用しているブラウザーがWebGLをサポートしていない場合は、ゲームにアクセスしようとすると次のページが表示されます。このページには、WebGL対応のウェブブラウザーへのリンクと、Gameroomクライアントへのリンク(ゲームがFacebook Gameroomに掲載されている場合)が表示されます。

プレイヤーをこのページにリダイレクトしたくない場合は、[WebGLのサポートされていないエクスペリエンスを無効にする]を[はい]に設定すれば、リダイレクトを無効にできます。無効にする場合は、WebGLをサポートしていないブラウザーでのエクスペリエンスをゲーム内で処理する必要があります。