MonacaとappC cloudで手軽に広告表示をはじめてみよう
Monacaの新しいプラグインとしてappC cloudプラグインが追加されました！appC cloudはアプリ向け広告サービスで、アプリの収益化に役立てられるサービスになります。Monacaを使って作ったアプリであれば、iOS/Androidの両方に広告表示ができるようになります。
さらにMonacaユーザー限定のキャンペーンということで、appC cloud提供元のカイト株式会社様より3,000円分のプロモーションコードを提供頂きましたので是非ご活用ください。
appC cloudへの新規登録の際にこちらのプロモーションコードを入力いただくと、3000円分のクレジットがアカウント登録時付与されます。
コード：OFoX9GJ6
※ Monacaで作られたアプリの収益と合算された場合のみお支払されます。
早速導入手順を説明します！
必要なもの
Monacaのアカウント
MonacaのIDはこちらから取得できます。
appC cloudのアカウント
appC cloudのアカウントはこちらから取得できます（無料）。ユーザ登録が終わると確認メールが出ますので忘れずにクリックしてください。
Monacaプロジェクトの作成
ではMonacaで新規プロジェクトを作成しましょう。今回は「appCデモ」とします。
テンプレートとしてRSSリーダーを選びました。
プロジェクトができあがったら、開くボタンを押して、Monaca IDEを立ち上げます。
プラグインのインストール
Monaca IDEが開いたら、設定メニューのCordovaプラグインの管理を選択します。
プラグイン一覧の中にあるappCCloudを有効にしてください。
この状態で有効になりました。
appC cloudでアプリ作成
次はappC cloudでの作業です。appC cloudを開き、ログインしてください。ダッシュボードに入ったら、アプリを登録するボタンをクリックします。
アプリ名は分かりやすいもの（Monacaと合わせるなど）を設定してください。
作成したら、次にプラットフォームを選択します。今回はiOSとしました。そしてアプリ詳細設定に進みます。
アプリ詳細設定画面で、アプリ名、Apple ID、BundleIDを入力してください。
情報の登録が終わると、メディアキーが表示されますのでコピーしてください。
後は広告設定ページで表示する広告を指定してください。
Monacaアプリに設定
メディアキーが発行されたら、再度Monaca IDEに戻ります。そしてheadタグの中に、次のように記述して ください。
<script>
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
: // 他の処理
appCCloud.deviceready();
appCCloud.init(success,fail,{
mediaKeyAndroid:'MediaKeyForAndroid',
mediaKeyiOS : 'ここに先ほどのメディアキーを入力'
});
};
function success() {
// 広告初期化成功時
alert("AppC Cloud Service successfully initialized");
};
function fail() {
// 広告初期化失敗時
alert("Unable to initialize AppC Cloud Service");
};
</script>
また、ボタンタップで表示されるように次のようなHTML/JavaScriptを設定しておきます。
// JavaScript
$( ".ads" ).click(function() {
console.log('Show ads.');
appCCloud.openAdView();
});
<!-- HTML -->
<div class="button ads">Ads</div>
/* スタイルシート */
.button.reload {
top: 10px;
right: 10px;
position: fixed;
border: 1px solid #057cff;
border-radius: 4px;
background: #fff;
padding: 5px 10px 5px 10px;
color: #057cff;
font-size: 14px;
text-decoration: none;
vertical-align: middle;
}
プレビューすると次のような表示になります。
ビルド設定
appC cloudはMonacaデバッガーでは確認できないようになっています。iOSビルド設定を行って、ビルドしてください。この記事中ではビルド設定の詳細は省きますが、appC cloudで設定したBundleIDをiOS Dev Centerで登録し、そのプロビジョニングファイルを使うようにします。また、アプリ設定ページでも同様にApp IDにBundleIDを指定してください。
ビルドが終わったらダウンロードし、iTunesやTestflightなどを使って実機にアプリをインストールしてください。
実行結果
このようにアプリが立ち上がります（テストなのでアラート表示しています）。
今回はこの左上のAdsボタンに広告表示イベントをつけています。メソッドを実行するだけなので、アプリ起動時や何かのイベントの終了時など自由に設定ができるでしょう。
タップすると下から広告がスライド表示されます。
広告表示タイプについて
appC cloudでは幾つかのパターンで広告表示が行えるようになっています。しかしiOSではリジェクトを避けるため、
- リストビュー広告（今回利用した広告です）
- マーキー広告
- カットイン広告
- ネイティブ広告
を使うのが良いようです。Androidではそれ以外の広告タイプも利用できます。
表示する広告は自由に選択できますので、アプリの収益化として利用してください！また、その際にはぜひ以下の3,000円分のプロモーションコードを忘れずにお使いください！
コード：OFoX9GJ6
※ Monacaで作られたアプリの収益と合算された場合のみお支払されます。
