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

1Confidential / Don’t distribute　 cayto inc.

今日の教科書

2

今日の授業

Confidential / Don’t distribute　 cayto inc.

以下の手順で、おみくじアプリを作ってに広告を実装します

アプリを作る準備をしますアプリを作って広告実装しますアプリをビルドします

1

2

3

とを使って


Monacaの登録方法、使い方

http://ja.monaca.io/★

まず、Monacaにアカウント登録してデバッガーアプリをDLします。

アプリを作る準備をします1

https://app-c.net/schoo/www2.zip


h"p://ja.monaca.io/からサインアップに進んでください。１

Monacaのアカウント登録方法

http://ja.monaca.io/


アカウント情報入力メール受信可能なアドレスを登録して下さい。

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

https://app-c.net/seminar/www.zip


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"); }; function omikuji (){ var dice = Math.floor(Math.random() * 3); var image_name; if (dice == 0) {

サンプルコードにはこのコードが既に入っています。自分で試す場合にはこちらをコピーして使ってください。

appC cloudの実装の仕方


Monaca IDE でindex.html（ 36行目）に広告を実装する8

function omikuji (){ var dice = Math.floor(Math.random() * 3); 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

プロモーションコード

https://app-c.net/


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"); }; function omikuji (){ var dice = Math.floor(Math.random() * 3); 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アプリのビルド

http://docs.monaca.mobi/3.5/ja/manual/build/build_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アプリのビルド

http://docs.monaca.mobi/3.5/ja/manual/build/ios_index/


完成！12

[はじめる]ボタンでおみくじをして、こちらの

カットイン広告が表示されたら実装成功です！

「うまくできない！」などのお悩みはこちら↓のStack Overflowで

http://ja.stackoverflow.com/questions/tagged/monaca

確認

http://ja.stackoverflow.com/questions/tagged/monaca


2/3（火）　 10:00～12:30　アプリ開発入門編 13:30～16:00　お絵かきアプリ編 16:30～19:00　地図アプリ編 http://peatix.com/event/68428

2/18（水）　 10:00～12:30　アプリ開発入門編 13:30～16:00　クイズアプリ編 16:30～19:00　音楽プレイヤー編 http://peatix.com/event/70684

各講座　10,800円１日チケット　32,400円

本日のセミナーにご参加頂いた方に、１日チケットが50%OFFになるクーポンをご提供します。（32,400円→16,200円）割引コード欄に「appC」とご入力ください。

一日チケット半額クーポン

appC

http://peatix.com/event/68428

http://peatix.com/event/70684

39

カイト株式会社（cayto inc.)〒106-0047 東京都港区南麻布3-21-17 B City Tower Azabu Tokyo 7F Tel：03 5475 3385　　設立：2008年4月1日業務内容：「giveApp」「appC cloud」の運営

@appC_official

https://www.facebook.com/appc.cloud

Confidential / Don’t distribute　 cayto inc.

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

Education