Facebookインスタントゲーム「Fruit Paradise」開発ブログ

※こちらは2018年に弊社ブログで掲載していた内容と同様の内容の記事になります。

こんにちは、月島ファクトリープログラマーのOgaです。

今回は、2018年に作成したFacebookのインスタントゲームのご紹介をします。

ゲーム名は「Fruit Paradise」
ゲーム仕様はフルーツをタップして高スコアを目指す単純なものです。
フルーツ以外の物(肉・魚等)をタップするとゲームオーバーになります！

アプリページのURLはこちら→Fruit Paradise

スコアが上がってくるとゲームスピードが速くなりフルーツの個数アップ、フルーツ以外の個数がアップして難しくなってきます。
時間つぶしの他に動体視力と集中力を測定することもできるかと思います！

クリアはありませんが、スコア目安は120～150くらいです。
これくらい取れれば動体視力と集中力は死んでいないと思います！
時間制限は無いので、高スコアを目指してみてください(=ﾟωﾟ)ﾉ

今回はゲームリリースまでの手順と苦労した点を書いていきますφ(･ω･ )

必読な公式ドキュメントは下記です。
https://developers.facebook.com/docs/games/instant-games/

【おおまかな開発手順】

1. Facebookアプリ開発用にアカウントを作成(既にある場合は不要です)
2. アプリを作成する(WEB上で設定をするだけ)
3. デモアプリをダウンロードする
4. デモアプリを元にアプリを開発
5. ローカル環境で動作確認
6. アプリをアップロード
7. Facebook申請
8. 公開

【開発詳細】

1.Facebookアプリ開発用にアカウントを作成

https://www.facebook.com/
上記にアクセスし、Facebookのアカウントを作成します。
リアルなフレンドと繋がったアカウントを使いたくない場合、開発用のアカウントを作成します。

ただし、Facebookが複数アカウントを容認していないため、変なプロフィールにするとアカウントが凍結される場合はあります。
私は名前を英語表記にしていたら凍結されました。。

2018年1月に複数アカウント使用が緩和されたらしいですが、私はBANされました(ꐦ°д°)ｸｿｶﾞｰ

2.アプリを作成する

https://developers.facebook.com/apps/
上記にアクセスし、アプリを作成します。
これはゲームロジックをアップロードする場所を作成するようなイメージです。
後に作成したソースコードをアップロードします。

3.デモアプリをダウンロードする

私が開発しているときは「tic-tac-toe」というデモアプリがzipでダウンロードできました。中にREADME.mdがあり、ミドルウェアのインストール方法、実行手順が書かれています。

tic-tac-toeというアプリは三目並べで、実行するにはフレンドが必須なようです。
開発アカウントなので、フレンドいないからプレイできない(ꐦ°д°)ｸｿｶﾞｰ

とりあえずデモアプリの起動自体はできたのでOK。

4.デモアプリを元にアプリを作成

今回はjavascriptのフレームワークとして、CreateJSを使ってみました。
選定理由としては..

1. フレームワークが軽量であること
2. 直観的なAPIで学習コストが低いこと

Flash開発者の方の会社が作成していることもあり、API名がFlashとほぼ一緒なので、Flash開発を行ったことがある方はスムーズに開発に入れると思います。
私はFlash知らないけどな( ﾟ∀ﾟ)ｴﾍｯ

最初はenchant.jsをカスタマイズしたものを作成して動かそうとしましたが、Facebookと相性が悪いらしく動かなかった(ꐦ°д°)ｸｿｶﾞｰ

おとなしくFacebookが対応しているフレームワークを使用しましょう。。
https://developers.facebook.com/docs/games/instant-games/compatible-engines

(･´д)開発で苦労した点(д`･)
1.BGMがバックグラウンドで流れてる・・！

iPhone6s以前とAndroidで発生
アプリを起動中にホームボタンを押してバックグラウンド実行にしても音が鳴り続ける・・
iPhone7以降は端末側の制御で勝手に止まるっぽい(ꐦ°д°)ｸｿｶﾞｰ

対応方法は下記になります。

document.addEventListener("visibilitychange", handler);
function handler() {
    if (document.visibilityState == "visible") {
        // 見えているときの記述
        createjs.Sound.muted = false;
    } else {
        // 見えていないときの記述
        createjs.Sound.muted = true;
    }
}

これを書けば意図的に音をミュートにできます(◎´∀`)b

2.クリックイベントが無限に作成される・・！

addEventListenerのコールバック関数を即時関数にしてしまうとクリックイベントが無限に追加されてしまいました。。
実行しているとメモリがどんどん減っていきます。

hogeObj.addEventListener('mousedown', function() {
    console.log('hoge');
} );

下記のようにすると問題ありません。

function hogeFunction(event) {
    console.log('hoge');
}

hogeObj.addEventListener("mousedown", hogeFunction, false);

コールバック関数に即時関数を使用するのはやめましょうφ(･ω･ )

5.ローカル環境で動作確認

「yarn mock」というコマンドでモック実行ができます。
「yarn test」というコマンドで実際のFacebook上に近い環境で実行できます。
注意点：デバッグをたくさん行いますが、「yarn test」を実行しすぎると「利用しすぎです」のようなFacebookエラーが返される事がありました(ꐦ°д°)ｸｿｶﾞｰ

ローカルテストはなるべく「yarn mock」で行うことをお勧めします。
また、「yarn test」を実行後、立ち上がったブラウザに何も表示されないことがあります。
テストブラウザとしてChromeを使用している場合、
http://localhost:8000
にアクセスして例外を許可しないとページが表示されないようです(ꐦ°д°)ｸｿｶﾞｰ

この設定は時間が経つと元に戻るので、2日に1回くら
http://localhost:8000
の例外許可を実施してください。

6.アプリをアップロード

ローカルから「yarn push」というコマンドでアップロードします。
アップロードが成功した後、ウェブホスティングページが立ち上がるので、☆マークをクリックして状態をスタンバイからプロダクションにします。

プロダクションになったらFacebookのMessengerアプリで動作確認できます
ε=ε=ε=┏(*´∀｀)┛

7.Facebook申請
https://developers.facebook.com/apps/%APP_ID%/review-status/
「アイテムを審査に送信」を行います。

申請後1日でフィードバックがありました。

リジェクト(ﾟ∀ﾟ;)

内容はアプリの説明文が日本語だったことでした。
英語にして再申請したらあっさり通過しました(´∀`艸)

公式ドキュメントにある禁止事項さえしなければ大丈夫そうです！

8.公開

https://developers.facebook.com/apps/%APP_ID%/review-status/
「%APP_NAME%を公開しますか？」で「はい」に変更します。

ゲームの一覧にはしばらく出てこないようなので、直接ゲームにアクセスします。
https://developers.facebook.com/apps/%APP_ID%/settings/basic/
「FacebookウェブゲームページのURL」にあるURLにアクセスすれば直接ゲームができます！

• 総括 -

端末別の問題点が少しありましたが、全体的にはサクサク開発できました。
CreateJSは中規模以上の開発には向かなそうですが、学習コストが低いので小規模ゲームの開発には良いのではないでしょうか。

ある程度人気があれば広告を仕込んで広告収入も得られるようなので、気軽にゲームを出してみたい方はやってみてはいかがでしょうか。

最後まで読んでいただき、ありがとうございました。