【facebook】インスタントゲーム広告実装について

こんにちは👀
月島ファクトリープログラマーのmotchyと申します👶

このたび、弊社で作成したfacebookインスタントゲームに広告表示対応を行いました。
今回は、この対応に伴い使用したAudience Networkや広告表示の実装方法についてご紹介させていただきます。


*:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·*:.。..。.:+

★広告を表示したゲーム

弊社では現在、「Space Evaders」「Fruit Paradise」と２つのインスタントゲームをfacebookにあげております。

今回は、「Fruit Paradise」に広告表示対応を行いました。

※ゲームをプレイしてみたい人はコチラからドウゾヽ(ﾞ·ω·ﾞ)人(ﾞ·ω·ﾞ)ゝ
「Space Evaders」
「Fruit Paradise」

※ゲームの開発記が気になる方はコチラをドウゾヽ(ﾞ·ω·ﾞ)人(ﾞ·ω·ﾞ)ゝ
「Space Evaders」
「Fruit Paradise」


*:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·*:.。..。.:+

★インスタントゲームの広告の種類

2018/12現在、facebookのインスタントゲームでは、下記の種類の広告を配信することができます。今回弊社では、リワード動画の表示対応を行いました。

・インタースティシャル動画広告
　スキップ可能、完全視聴で収益発生

・リワード動画
　スキップ不可能、完全視聴で収益発生


*:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·*:.。..。.:+

★開発手順

広告配信はfacebookのAudience Networkを使用して対応しました。
そもそも、Audience Network･･･って、ナニ_φ(·ω·` )？
という感じですが、すごくざっくりいうと、facebookが提供している広告配信サービス的なものな認識。

対応は、下記URLの手順と要件を参考に実施しました。
「Audience Networkでインスタントゲームの収益化を始める」

以下、上記の手順に沿って行った実装～リリースについて、順を追ってご説明させていただきます。

1.Facebookアプリにインスタントゲームを設定

今回は、既存のゲームに対して広告対応を行うため、ここはパス。
まずはゲームを作ってねということです。

2.アプリダッシュボードからAudience Networkの利用を開始

「Audience Networkでインスタントゲームの収益化を始める」の「Audience Networkの利用開始」という項目に、とっても丁寧に書いてくれてます。
ただ、アプリ管理者の権限がないと実施できない項目なので、この設定ができないときは、権限を付与してもらうか、アプリ管理者に実施してもらいましょう。
アプリを作った本人ならば大丈夫です。

3.収益化マネージャを使用して、Audience Network広告の配置を作成

作成方法や各項目の役割については下記を参照してください。
「広告スペースについて」
「広告スペースを作成する」

4.支払い情報の追加

言葉のままです。Audience Networkからの支払いを受けるために必要な設定項目です。
納税者識別番号や納税関連書類について入力や提出が求められるので、企業で使用する場合は、偉い人に設定してもらうようお願いしましょう。
「支払い情報の追加」
ここまで設定をすると、実装後に広告が見れるようになります。

5.インスタントゲームのソースコードに広告配置を統合

3 の工程で設定される配置IDを使用して、広告配置の実装を行います。
下記のURLから、実装するにあたっての前提条件の記載やデモソースが見れるので、こちらを参考にするといいと思います。
「Monetizing your game with Audience Network」

実装工程は、インスタンスの生成⇒ロード⇒表示 これだけです。
なお、わたしは、下記リファレンスの例に沿って実装しました。
「API Reference v6.2」

2019/6/12：追記
下記状況を考慮した実装について
⓵PCから広告表示をしようとした場合
後続の「6.テスト」にも記載していますが、インスタントゲームの広告はPCでは表示できません。この場合、getSupportedAPIs( ) の引数に広告取得APIを渡し、広告を取得するAPIがサポートされているか否かを確認する必要があります。
サポートされていない場合（PCの場合）にはそれ相応の実装を行う必要があります。
わたしは、PCからは広告は見れない旨のメッセージと、通常プレイボタンを表示する対応をおこないました。
⓶超新規で作成したユーザーで広告表示をしようとした場合
facebookでは、ユーザー情報等からターゲティングを行い表示する広告を配信しています。そのため、facebookに登録したばかりのユーザー等はターゲティングが行えず表示する広告を取得できません。
この場合は「表示できる広告がありませんよー」という例外がスローされます。
わたしは、表示できる広告がない旨のメッセージと、通常プレイボタンを表示する対応をおこないました。

「Monetizing your game with Audience Network」の、「ベストプラクティスとトラブルシューティング」の対応をちゃんとしていれば、エラーハンドリングについて改めて意識することはないですが、ターゲティングができていないユーザーに対して例外がスローされることにちょっと感動したので、追記させていただきました。
いじょ。

6.テスト

「Monetizing your game with Audience Network」にも記載がありますが、広告表示のテストは、デスクトップやエミュレーターでは実施できません。
そのため、広告表示のテストは、モバイルデバイスからテストを実施する必要があります。
　　　
【課題】
上記に伴い、テスト時は修正した資産のアップロード⇒テストを繰返し実施していたのですが、修正がはいるたびにアップロードをしたため、必要以上にバージョンがあがってしまいました。
対象のアプリに紐付くテスト用のアプリを作成してみましたが、テスト用のアプリIDに対して資産をアップロードしても、紐付いている本番用のアプリのバージョンも一緒にあがってしまいました。
今回は暫定対応として、改修対象のアプリと紐付かないまったく別のアプリをテスト用に登録し、広告表示のテストはそちらでおこないました。

んー、まわりくどい･･･めんどくさい(´·ω·`)

テスト方法については、もっといい方法があると思うのですが・・・模索中です。
いい方法をご存知の方がいらっしゃったら、コメントをください・・・(´·ω·`)
バージョンをバカバカ上げるような修正をしなければいいじゃないか。。。というコメントはご勘弁ください・・・( ﾉД`)ﾜｰﾝ。

7.リリース

ここで少し要注意。
広告の審査とアプリの審査は、別で実施しているようです。
facebook for developersの申請が通っても、facebook for businessのレビューが承認されないと、広告の表示はされません。


*:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·✽:.。..。.:+·ﾟ·*:.。..。.:+

★全体を通して

初めてだらけだったので、時間もかかり、戸惑う部分も多かったですが、振り返ってみると、広告表示って思ったよりも簡単にできるんだなと思いました。
小規模ゲームでも、さくっと広告がつけられるのはとっても魅力的なサービスだなと思います。
設定がすこーしだけ面倒ですが、実装自体は簡単なので、インスタントゲームを作るならば、広告表示は入れたほうがいいと思います。

今後は、より効率よく収益が上げられるように、収益化マネージャーの設定等もお勉強してみたいと思います。（いまはほとんどデフォルト）
なにか面白いことがあったら、ブログに書こうかな。


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

「Space Evaders」開発後記

月島ファクトリープログラマーのLeeです。

このたびFacebook Instant Gameを開発したので、簡単にまとめます。

「Space Evaders」紹介

はじめに、今回開発した「Space Evaders」を紹介いたします。

左右にタップして落ちてくる隕石をよけてハイスコアを目指すゲームです。
隕石の数が増えればよけるのが難しい時がありますが、そういう時はバリアを活用して乗り切ることができるようになっています。

ゲーム自体はよくある避けゲーなのですが、難易度調整をシビアにしてあるのと、隕石どうしのあたり判定をつけることで予測しづらく、緊張感があって他と差別化できたんじゃないかと思っています。

50点で出現する巨大隕石が現れてからは、バリアをうまく活用しないと厳しくなりますので、だいたい70点あたりを目安に遊んでみてください。

フレームワークについて

Facebook Instant GameはHtml5での開発になるため、必然的にjsのフレームワークから選ぶ必要がありました。

Facebookでは対応しているフレームワーク一覧を掲載しているので、この中から気に入ったものを選ぶだけで特に問題ありませんでした。

今回は、「Phaser」という、２Dゲーム特化のフレームワークを選定しました。
理由としては、コミュニティーが調べた中では最も活発で（英語のみですが）今後もサポートが長続きしそうと判断したためです。
また、公式のサンプルも相当な数用意されていたびで開発が容易にできると考えました。

実際、開発においてフレームワークの問題でつまったところはほとんどありませんでした。

・シーン管理

game.state.add("scenename", scene.scenename);

scene.scenename = function () {};

scene.scenename.prototype = {

         preload: function() {

         },

         create: function () {

         },

         update: function() {

         },

}

game.start("scenename");

上記のテンプレートを追記していくだけでシーン管理を行うことができます。
基本関数として、下記３つを利用することができ、新規関数もここに追記していくだけで実装できます。

preload - 素材の読み込み
create - シーンのはじめに一度実行
update - 毎フレーム実行

・画面表示

デバイスの大きさに合わせてゲーム画面を表示したい場合、ゲーム初期化時に下記を実行することにより勝手に合わせてくれます。

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

 game.scale.pageAlignHorizontally = true;

game.scale.pageAlignVertically = true;

 game.stage.disableVisibilityChange = true;

ゲーム画面内でオブジェクトを適切に配置したい場合は、
game.world.centerX
game.world.centerY
ワールドの中央値を取得できるので、そこからどのあたりに表示するか設定することで異なる大きさの画面でも適切に配置することが可能となります。

苦労した点について

最も苦労したのはレベルデザインでした。

避けゲーは一歩間違うと退屈になるので、個人的には難易度高い方が面白いとおもうのですが、絶対に不可能な箇所ができてはまずいためその間をとる調整が大変でした。

隕石同士のあたり判定を実装したところ、予測不能な点は面白かったのですが、真横からのスマッシュがたまに発生して無理ゲーになることもあり...

結局、隕石同士のあたり判定は実装し、バリアでしのぐことのできる機能でバランスを取りました。

まとめ

実装に関して、やりたかったことがほとんど公式のサンプルの組み合わせと、少しのコミュニティの調査で済んだためコストもかからずうまくいったと感じています。

Phaserはコミュニティがほとんど英語なのが玉に瑕ですが、チュートリアルがしっかりしているため初めてのHTML５ゲーム開発にとても向いていると感じました。

一度使ってみて基本的な部分は慣れたので、次に開発する際はより早くうまく開発できそうです。

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

　　　　　　　　　　　　　　　　

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

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

今回は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は中規模以上の開発には向かなそうですが、学習コストが低いので小規模ゲームの開発には良いのではないでしょうか。

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

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