Facebookインスタントゲームの新規アプリ作成とアップロード・動作テストの方法

2019-06-15HTML5ゲーム

Facebookインスタントゲームの新規アプリ作成とアップロード・動作テストの方法

Facebookインスタントゲームを制作する段階での新規アプリ作成とアップロード・動作テストの方法まとめです。

Facebookインスタントゲームについて

Facebookインスタントゲームとは

FacebookインスタントゲームはHTML5ゲームの新しいプラットフォームです。

スマートフォン・タブレットからはFacebookメッセンジャーアプリを介してプレイでき、PCからはFacebookサイト内、ブラウザ上でプレイ可能となっています。

016年11月にクローズドβ版として発表され、2018年3月よりすべての開発者に向けて公開されています。

現在は多くのHTML5ゲームエンジン・フレームワークがFacebookインスタントゲームに対応したファイル出力方法を提供しています。

関連:Facebookインスタントゲームの開発が可能なゲームエンジン・フレームワークまとめ | ONE NOTE

テスト段階での要点まとめ

Facebookインスタントゲームアプリのテスト実行段階でのアップロードに関する要点まとめです。

  • ひとつのアプリIDにつきひとつアプリ
  • 「インスタントゲームを使用する」をONにする
  • テスト段階でもカテゴリの設定は必要
  • 「タグライン」と「パブリッシャー」の設定
  • 「fbapp-config.json」が含まれている
  • 「FacebookインスタントゲームSDK」が読み込まれている
  • アップロードは「ウェブホスティング」から
  • アップロードファイルはzip圧縮したもの
  • アップロード可能なファイルサイズ上限は200MB

ゲームファイルの必要条件や詳細については別記事にて紹介します。

テスト投稿用ゲームサンプルファイル

まだFacebookインスタントゲーム用のゲームファイルが無い人用に、テスト用のサンプルファイルをzip形式にて置いておきます。

テスト用ゲームサンプルファイルの中身

テスト用サンプルファイルのコードはHTML5ゲームのJavaScriptフレームワーク「Phaser 3」のものを利用しております。

また、Facebookインスタントゲーム用のSDKはindex.htmlで読み込んでいます。

root/
 ├ src/
 │ └ game.js
 ├ lib/
 │ └ phaser-facebook-instant-games.js
 ├ index.html
 └ fbapp-config.json

Facebook Developersに登録・ログイン

Facebook Developersに登録する必要があります。アカウントは通常のFacebookアカウントと同じになっており、改めてFacebook Developersの利用規約に同意します。

リンク:Facebook Developers

新しいアプリを作成する

作成したFacebookインスタントゲームひとつにつき、ひとつのFacebook Developersマイアプリを作成します。

Facebook Developersにログインした状態で、画面上部のメニューバーにある「マイアプリ」から「新しいアプリを作成」を選択します。

新しいアプリを作成する

「表示名」と「連絡先メールアドレス」を記入して登録します。

「表示名」と「連絡先メールアドレス」共に後ほど変更が可能となっています。

新しいアプリを作成する2

テスト段階での設定

以下はゲームのテストが可能な状態にする為の最低限必要な設定項目になります。

設定項目が複雑でパット見わかりにくいですが、テスト実行するだけなら必要な設定する項目は少ないです。

「設定」ー「ベーシック」

アプリの新規作成の段階で記入していますが「表示名」「連絡先メールアドレス」は必要です。

また、ゲームのカテゴリも設定しておきます。

Facebook-Developersアプリ設定ーベーシック

「インスタントゲーム」ー「詳細」

インスタントゲームの項目から「詳細」ページへいき「インスタントゲームを使用する」は「はい」にします。

「タグライン」にはゲームの簡単な説明文を、「パブリッシャー」には発行者または発行社名を記述します。
どちらもテスト段階では何でも大丈夫ですが審査に出す段階で正確な記述に変更する必要があります。

Facebook-Developersアプリーインスタントゲームー詳細

ゲームファイルのアップロード方法

新しいバージョンをアップロード

Facebookインスタントゲームのテストバージョンをアップロードするには「インスタントゲーム」メニューにある「ウェブホスティング」ページにて「新しいバージョンをアップロード」を選択します。

ウェブホスティングー新しいバージョンをアップロード

index.htmlおよび他設定ファイルがあるディレクトリをルートディレクトリとして、zip圧縮したファイルをWEBからアップロードします。

ファイルを選択してアップロード

アップロード時のエラーシューティング

バンドル設定が含まれていません

ルートディレクトリにある「fbapp-config.json」が含まれていない場合に出るエラーです。アップロードにバンドル設定を含める必要があります。

バンドル設定が含まれていません

参照:Bundle Configuration Reference|Facebook for developers

バンドル設定が無効です

ルートディレクトリにある「fbapp-config.json」が設定が間違っていると出るエラーです。

バンドル設定が無効です

このアップロードに含まれるバンドル設定ファイルの設定が無効なもののです: Must specify property 'navigation_menu_version’ in bundle config.

バンドル設定で、プロパティ 'navigation_menu_version’を指定する必要があります。

プロダクションにプッシュする

アップロードしたバージョンのファイルをプロダクションにプッシュする事で、現在の公開バージョンを選択したバージョンに変更する事が可能です。(テスト状態であっても切り替えて確認する。)

プロダクションにプッシュする方法は、そのバージョン管理アイコンにある☆マークをクリックする事で可能となっています。

アップロードしたバージョンの星アイコンをクリック

「バージョンxxをプロダクションにプッシュしますか?」と問われるので「承認」を選択する。

このバージョンをプロダクション状態にする

※この処理は定期的にFacebookログインパスワードの再確認が行われます。

アップロード後のステータス

スキャン中ー処理中

アップロードすると「スキャン中」となり、スグに処理中となって進行状態がパーセントで確認できる様になります。

スタンバイ

スキャンに成功すると現在のバージョンから変更できる「スタンバイ」状態になります。

プロダクション

「スタンバイ」状態のバージョンの管理アイコンから☆マークをクリックする事で、そのバージョンを「プロダクション」状態に切り替える事が可能で、「プロダクションにプッシュ」するとそのバージョンに現在の公開バージョンを変更します。

ゲームのテスト動作確認

PCならインスタントゲームページにて、スマートフォンであればfacebookのメッセンジャーアプリのゲームから(同一アカウントでログイン時)、テストゲームを確認する事が可能となっています。

テストゲームの動作確認
アップロードしたゲームファイルをテスト表示
PCブラウザでの動作テスト表示

この時点では、開発者およびテストプレイヤーとして登録したアカウントにしか表示されていませんのでご安心です。

バージョン管理

不要になったバージョンファイルの削除

不要になったバージョンファイルは、「スタンバイ」の状態でバージョンの管理アイコンからゴミ箱アイコンをクリックする事で可能となっています。

不要になったバージョンファイルの削除

HTML5ゲーム

Posted by Yousuke.U