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を指定してください。