HTML5で作るハイブリッドアプリに広告実装ハンズオンセミナー第2回

1Conﬁdential / Don’t distribute cayto inc.
今日の教科書

2
今日の授業
Conﬁdential / Don’t distribute cayto inc.
以下の手順で、おみくじアプリを作ってに広告を実装します
アプリを作る準備をします
アプリを作って広告実装します
アプリをビルドします
1
2
3
とを使って

Monacaの
登録方法、使い方
http://ja.monaca.io/★
まず、Monacaにアカウント
登録してデバッガーアプリを
DLします。
アプリを作る準備をします1

h"p://ja.monaca.io/からサインアップに進んでください。１
Monacaのアカウント登録方法

アカウント情報入力

メール受信可能なアドレスを登録して下さい。

2

アカウント仮登録完了

一度ダッシュボードという画面に遷移しますが、先程のメールアドレスに確認のメールが届きます。

3

メールアドレスの確認

確認メールを受け取りURLにアクセスし、必要事項を入力することで登録完了です。
4

アカウント登録完了

登録が完了し、ログイン済み状態になります。

以後、ユーザー名とパスワードを入力することでMonacaを利用できます。
5

IDEの起動（プロジェクトの編集画面を開く）

ダッシュボードで、プロジェクトの「開く」ボタンをクリックします。
6
Monacaの基本的な使い方

7
アイコンはこちらです。
Monacaデバッガーのインストール

Google
PlayまたはApp
Storeで、「monaca」で検索してください。
iOS版デバッガーアプリの
ダウンロードはこちら
Android版デバッガーアプリの
ダウンロードはこちら

Monacaデバッガーの起動

Monacaデバッガーを起動すると、ログイン画面が表示されます。

Monacaに登録したアカウントでログインを行ってください。
8
ログインするとIDE側ではこのような表示がされます

Monacaデバッガーでアプリを実行する

Monacaデバッガーを起動すると、登録されているすべてのプロジェクトが表示されます。

プロジェクトをタップすると、アプリが開始されます。
9

IDEの使い方10
ファイルの管理を
行います
ファイルの編集を
行います
プレビューを
表示します
デバッグ情報を表示します
ダッシュボードを
開きます

IDEの使い方

コードエディタで編集したファイルを、プレビューとデバッガーで確認しながら開発を進めていきます。
11
コードエディタ
で編集し、保存する
簡単な確認はプレビューで
実際の表示確認はデバッガーで

「Hello
Worldアプリ」を動かしてみる

カメラ、コンパス、バイブレーションなどのネイティブ機能を動かすことができます。
12

Monacaデバッガーのメニュー13
更新
プロジェクト
一覧に戻る
スクリーン
ショットを撮る
チャットを開く
ソースコードの
表示
アプリログの
確認

サンプルプロジェクトのダウンロードはこちらから
https://app-c.net/seminar/www.zip
★
おみくじアプリ制作
と広告実装
まず、サンプルプロジェクトを
ダウンロードしてください
アプリを作って広告実装します2

Monaca
に新しいプロジェクトを作成する

1.

Monacaにログインし、

ダッシュボードで「プロジェクトの作成」
ボタンをクリックします。

2.

テンプレート一覧の中から
「最小限のテンプレート」を選択します。
1
おみくじアプリの作り方

Monaca
プロジェクト名を入力してプロジェクトを作成する2
下記のとおり情報を入力します。

1.
プロジェクト名：おみくじテスト

2.
説明：任意（入れなくても問題ないです）

入力が完了したら、「プロジェクトを作成する」をクリックしてください。
プロジェクトの作成が完了したら、ダッシュボードの「開く」ボタンをクリックしてください。

Monaca
IDE
でサンプルファイルをアップロードする①3
ファイルツリーのwwwフォルダを右クリックし、

「新規フォルダー」を選択してください。
表示されるダイアログでimagesと入力し、OKボタンを押してください。

これで、ファイルツリー内にimagesフォルダが作成されます。

Monaca
IDE
でサンプルファイルをアップロードする②4
wwwフォルダを右クリックし、「アップロード」を選択します。
以下のファイルをアップロードダイアログの枠線内にドラッグ＆ドロップします
index.html
※フォルダごとアップロードはできません
同様に、imagesフォルダ内にもファイルをアップロードします。

Monaca
IDE
でサンプルファイルをアップロードする③4
すべてのサンプルファイルがアップロードされると以下のような状態になります。
index.htmlと画像が
アップされた状態
index.htmlのコードが更新された状態
※変わらない場合は、再度アップするかブラウザをリロードをしてみて下さい。

appC
CloudのCPI広告表示タイプ例
今回実装する広告
※iOSアプリの場合シンプル、ムーヴアイコンの表示タイプは、Appleの審査でリジェクト対象になる可能性があります。
コレ
コレ
コレコレ
appC cloudの実装

Monaca
IDE
でappC
cloud
のプラグインをインポートする6
1.
設定から「Cordovaプラグインの管理…」を選んでください。

2.
プラグインリストから「appCCloud」の「有効」でインポートが完了します。
appC cloudのプラグインのインポート

Monaca
IDE
でindex.html（
10-‐22行目）に広告を実装する7
<script>
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
appCCloud.deviceready();
appCCloud.init(success,fail,{
mediaKeyAndroid:'MediaKeyForAndroid',
mediaKeyiOS : 'MediaKeyForiOS'
});
};
function success() {
// alert("AppC Cloud Service successfully initialized");
};
function fail() {
alert("Unable to initialize AppC Cloud Service");
};
var image_name;
if (dice == 0) {
サンプルコードには
このコードが既に入っています。
自分で試す場合にはこちらを
コピーして使ってください。
appC cloudの実装の仕方

Monaca
IDE
でindex.html（
36行目）に広告を実装する8
var image_name;
if (dice == 0) {
image_name = "omikuji-daikichi.png";
} else if (dice == 1) {
image_name = "omikuji-chuukichi.png";
} else {
image_name = "omikuji-hei.png";
appCCloud.showCutinView()
}
document.getElementById("saisyo").style["display"] = "none";
document.getElementById("kekka").src = "images/" +
image_name;
document.getElementById("kekka").style["display"] = "inline";
document.getElementById("button").src = "images/omikuji-btn-
yarinaosu.png";
}
広告の表示タイプ別メソッドの詳細は以下から
ここに様々な
広告表示タイプのメソッドを挿入してください
https://app-c.net/tutorial/monaca/build/
サンプルコードには
このメソッド（コード）が既に入っています。
自分で試す場合にはこちらを
コピーして使ってください。
カットイン広告の実装の仕方

appC
cloud
にアカウント登録する8
1.
h"ps://app-‐c.net/から新規登録に進んでください。 2.
メール受信可能なアドレスと「プロモーション

コード」を使用するにチェックして赤枠の

プロモーションコードを登録して下さい。
appC cloudにユーザー登録
OFoX9GJ6
プロモーションコード

appC
cloudでアプリを登録する9
ダッシュボード
1. 登録をしたら、appC
cloud
のメディア管理画面のダッシュボードから「アプリを登録する」ボタンをクリックしてください。

2. アプリ新規登録で、アプリ情報の管理名を登録してください。
※ここで登録するアプリ管理名はMonacaのプロジェクト名と合わせなくても動作
には問題ありません。アプリ情報の管理のための便宜上の名前です。
appC cloudに登録

appC
cloudでアプリ詳細情報を設定する10
Androidの場合

Androidアプリ設定
Androidアプリ詳細設定
1. MonacaのAndroidアプリ設定に移動して、アプリケーション情報をコピーして、appC
cloud
のアプリ詳細情報に入力してください。

2. appC
cloudのアプリ詳細情報下にある「アプリ情報を更新」ボタンをクリックすると、メディアキーが生成されます。
A
B
A
B
ペースト
appC cloudに登録

10
iOSアプリ詳細設定
iOSアプリ設定
appC
cloudでアプリ詳細情報を設定する
iOSの場合

1. MonacaのiOSアプリ設定に移動して、アプリケーション情報をコピーして、appC
cloud
のアプリ詳細情報に入力してください。

2. appC
cloudのアプリ詳細情報下にある「アプリ情報を更新」ボタンをクリックすると、メディアキーが生成されます。
A
B
A
B ペースト
appC cloudに登録

appC
cloudでメディアキーを取得する12

Androidの場合

iOSの場合
アプリ詳細設定アプリ詳細設定
メディアキーが生成されたら、コピーをしてMonaca
IDE
の画面に移動してください。
appC cloudに登録

Monaca
IDE
でindex.html（15-‐16行目）にメディアキーを設置する13
<script>
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
appCCloud.deviceready();
appCCloud.init(success,fail,{
mediaKeyAndroid:'89b66c836167b3e7671b94722028f31d602a86b9',
mediaKeyiOS : '89c4654a130976f8a37bebf018d8c1b483e6d1e2'
});
};
function success() {
appCCloud.showCutinView();
};
function fail() {
alert("Unable to initialize AppC Cloud Service");
};
var image_name;
if (dice == 0) {
自分のアカウントで
appC cloudにログインして生成した
それぞれのOSのメディアキーを
記述してください
※片方だけでも大丈夫です。
appC cloudに登録

ビルドして
スマートフォンで
確認します
アプリをビルドします3

Monacaでアプリをビルドする11
Androidの場合

1. MonacaのビルドメニューからAndroidアプリのビルドを選び、デバッグビルドをしてください。

2. ビルドが成功するとアプリのインストール準備が完了です。今回はQRコードから直接スマホにインストールします。
※
Androidアプリのビルドの詳細については、Monacaドキュメントをご確認ください。h"p://docs.monaca.mobi/3.5/ja/manual/build/build_android/
Androidアプリのビルド

Monacaでアプリをビルドする11
1. iOSの場合、事前にiOS
Developer
Programへの登録が必要です。（年間参加費 11,800円）

2. iOS
Dev
Centerで、各種証明書ファイルとプロビジョニングプロファイルを発行、ダウンロードします。

3. Monacaのメニューバーの「設定」から「iOSビルド設定」を開きます。

4. 必要項目を入力し、ダウンロード済みの証明書ファイルをアップロードします。

5. Androidの場合と同様に、MonacaのビルドメニューからiOSアプリのビルドを選択します。

6. ビルドの種類に合わせたプロビジョニングプロファイルをアップロードします。

7. ビルドが成功するとアプリのインストール準備が完了です。デバッグビルドの場合はiTunes経由で端末にインストールします。

iOSの場合

※iOSアプリのビルドの詳細については、Monacaドキュメントをご確認ください。
h"p://docs.monaca.mobi/3.5/ja/manual/build/ios_index/
iOSアプリのビルド

完成！12
[はじめる]ボタンで
おみくじをして、こちらの
カットイン広告
が表示されたら実装成功です！
「うまくできない！」などのお悩みは
こちら↓のStack Overﬂowで
http://ja.stackoverﬂow.com/
questions/tagged/monaca
確認

38
カイト株式会社（cayto inc.)
〒106-0047 東京都港区南麻布3-21-17 B City Tower Azabu Tokyo 7F
Tel：03 5475 3385 設立：2008年4月1日
業務内容：「giveApp」「appC cloud」の運営
@appC_ofﬁcial
https://www.facebook.com/appc.cloud
Conﬁdential / Don’t distribute cayto inc.

HTML5で作るハイブリッドアプリに広告実装ハンズオンセミナー第2回

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML5で作るハイブリッドアプリに広告実装ハンズオンセミナー第2回

Ähnlich wie HTML5で作るハイブリッドアプリに広告実装ハンズオンセミナー第2回 (20)

HTML5で作るハイブリッドアプリに広告実装ハンズオンセミナー第2回