【爆速】Unity未経験者でも、たった10分でアイテム課金ができるサンプルプロジェクト

スクリーンショット 2015-02-24 17.46.17

皆様いかがお過ごしでしょうか。前回のチュートリアルから早くも新たなチュートリアルをご用意いたしました。

今回は、アプリ内課金<アイテムSTORE>の実装をお試しいただけます。アプリ内課金を個人で製作する際、実装が難しく、デザインが大変、なかなか課金をしてくれない。など、敬遠されがちではありますが、appC cloudのアイテムSTOREは10分ほどの作業で簡単に実装することができ、 デザインもアプリに合わせてカスタマイズが可能となっております。

是非、お試しいただき<アイテムSTORE>がいかに簡単に実装できるかを実感していただけたら幸いです。


チュートリアルの内容

今回は「Unity公式の2Dシューティングアプリ」を使用します。

  1. プレイヤー機にストックを持たせて表示させる。
  2. <アイテムSTORE>を実装。
  3. ビルドしたアプリで<アイテムSTORE>を確認

    ・実装後は以下のような流れとなります。

スクリーンショット 2015-02-24 17.41.44

実装したアイテムSTORE内で購入したプレイヤー機がゲーム画面に反映されれば成功!ということですね。

それではチュートリアルへと参りましょう!


チュートリアルの準備

1.下記URLよりサンプルプロジェクトをDLしてください。

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

UnityのVer.4.6以降を前提としてサンプルプロジェクトを作成しています。

Ver.4.5以前の場合はうまく作動しない場合もあります。

2.サンプルプロジェクトを解凍してください。

ファイルを解凍すると以下のようなファイルが入っています。

スクリーンショット 2015-02-24 17.40.52

これで準備は完了です。

続きを読む

超簡単!HTML5で作るiOS/Androidアプリに広告を表示してみよう!

appc_monaca_セミナー教科書_dg.001

寒気も少しずつ緩みはじめましたが、皆様いかがお過ごしですか。前回の「UNITY でお試しかっ!」はいかがだったでしょうか。第二弾である今回は、HTML5でマルチプラットフォーム対応のモバイルアプリ開発が行える「Monaca」のサンプルアプリに、「appC cloud」のカットイン広告を実装して、アプリのビルドまで出来るチュートリアルとなっております。

春から新しいアプリを製作しようとお考えの方や、Webデザイナー&フロントエンジニアなど、HTMLを扱えてアプリを作ってみたい方に是非、お試しいただきたいと思います。無料で出来ますし、サンプルコードを使った広告実装なので、Monacaと appC cloudの管理画面の使い方や広告プラグインの実装方法を簡単に学ぶ事が出来る内容となっております。

皆様にチャレンジしていただくのは…

1.Monacaの登録方法と使い方

2.アプリにappC cloudの広告を実装します

3.アプリをビルドします

以上の3点です。

今回のアプリはサンプルプロジェクトを使用しますので、どなたでも簡単にできます!

それではチュートリアルへと参りましょう!


1.Monacaの登録方法と使い方

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

1-1.http://ja.monaca.io/からサインアップに進んでください。

appc_monaca_セミナー教科書_dg.001

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

appc_monaca_セミナー教科書_dg.005

1-3.アカウント仮登録完了 

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

appc_monaca_セミナー教科書_dg.006

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

appc_monaca_セミナー教科書_dg.007

1-5.アカウント登録完了 

登録が完了し、ログイン済み状態になります。以後、ユーザー名とパスワードを入力することでMonacaを利用できます。

appc_monaca_セミナー教科書_dg.008

1-6.IDEの起動(プロジェクトの編集画面を開く)ダッシュボードで、プロジェクトの「開く」ボタンをクリックします。

appc_monaca_セミナー教科書_dg.009

1-7.Monacaデバッガーのインストール Google PlayまたはApp Storeで、「monaca」で検索してください。

appc_monaca_セミナー教科書_dg.001

1-8.Monacaデバッガーの起動 Monacaデバッガーを起動すると、ログイン画面が表示されます。Monacaに登録したアカウントでログインを行ってください。

appc_monaca_セミナー教科書_dg.011

1-9.Monacaデバッガーでアプリを実行する Monacaデバッガーを起動すると、登録されているすべてのプロジェクトが表示されます。プロジェクトをタップすると、アプリが開始されます。

appc_monaca_セミナー教科書_dg.012

1-10.IDEの使い方

appc_monaca_セミナー教科書_dg.013

1-11.IDEの使い方 コードエディタで編集したファイルを、プレビューとデバッガーで確認しながら開発を進めていきます。

appc_monaca_セミナー教科書_dg.014

1-12.「Hello Worldアプリ」を動かしてみる カメラ、コンパス、バイブレーションなどのネイティブ機能を動かすことができます。

appc_monaca_セミナー教科書_dg.015

1-13.Monacaデバッガーのメニュー

appc_monaca_セミナー教科書_dg.016 続きを読む

Unity でお試しかっ!本当に簡単、広告実装サンプルプロジェクト&チュートリアル

クリスマスも終わってしまったら一気に師走モードですね。冬休みは、時間があるからUnityでアプリを作ってみようともくろんでるアプリ開発者の方も多いのではないでしょうか?

そこで、これからUnityを試してみたい初心者にも、既にUnityを利用されている方にも、1時間もあれば、Unityの2Dシューティングゲームに「ムーブアイコン広告」と「カットイン広告」を表示できるようになる、サンプルプロジェクト&チュートリアルをご用意しました!

appc_schoo_1210.000  

チュートリアルは、手順一つ一つにキャプチャーつきで、詳しく書いてますので、誰でも簡単にできます!(1つの手順は5分程度で作業できます。)

手順は以下。

  1. サンプルプロジェクトをダウンロード
  2. appC cloud 広告SDKのダウンロード
  3. Unityでサンプルプロジェクトを開く
  4. appC cloud広告SDKの設置
  5. appC cloud初期設定
  6. appC cloud初期化処理
  7. 実装準備
  8. 広告実装 — ムーブアイコン広告 —
  9. 広告実装 — カットイン広告 — 

2DシューティングゲームはUnityのチュートリアルページのものを利用してるので、時間があればゲームを作りも合わせて試してみてもいいですね。それでは、UnityでappC cloudの広告実装にチャレンジください。

1. サンプルプロジェクトをダウンロード

以下のURLからサンプルプロジェクトをダウンロードして解凍してください。

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

スクリーンショット 2014-12-25 12.03.42

本サンプルプロジェクトは12/10にschoo内で配信した「初心者でもUnityアプリに広告実装!広告も簡単に導入できる!儲かるアプリ講座【appC cloud school】Unityシリーズ vol.1」と同じサンプルプロジェクトを利用しているので、わからなくなった時は、こちらも参考にしてください。

2. appC cloudの広告SDKのダウンロード

appC Cloud管理画面(https://app-c.net/)にログインして、appC cloudの広告SDKをダウンロードしてください。

Unity 用の最新SDKをダウンロード

ログインしたら、①SDKダウンロードページへ行き、Unity用の②「Download SDK」ボタンから「appc_cloud_unity_v_2.2.0_20140926.zip」をダウンロードします。

appc_schoo_1210.008

3. Unityでサンプルプロジェクトを開く

Unityを起動して、手順1.でダウンロードしたサンプルプロジェクト「schoo_unity_20141210.zip」を開いてください。

サンプルプロジェクトを開く

Fileメニューの「Open project… 」で、Project Wizardを開き「Open Other」を選んだら、ダウンロードした「schoo_unity_20141210」の中から「ShootingGame」フォルダを選んで「Open」ボタンで次へ行きます。

appc_schoo_1210.009

UnityのメインエディターにあるProjectビューの「Scenes」フォルダから「Stage」を選ぶと「Game」と「Scene」のビューに「ShootingGame」のUIが表示されます。

appc_schoo_1210.010

これで、サンプルプロジェクトが開け、次の作業の準備が整いました。

4. appC cloud広告SDKの設置

まず、サンプルプロジェクトに、appC cloud のUnity SDKを設置します。

appC cloudのUnity用 SDKを設置

Projectビューに、appC Cloud管理画面よりダウンロードしたSDKファイルの最新バージョン「appc_cloud_plugin_2.2.0_x6.unitypackage」をドラッグ&ドロップします。

appc_schoo_1210.011

下のキャプチャーのように、インポートのダイアログが出ますので、「Import」ボタンをクリックして「Project」ビューに「Plugins」フォルダが現れていれば設置の完了です。

appc_schoo_1210.012

5. appC cloud初期設定

ここでは、appC cloudの管理画面で、広告設定とアプリのブリッジとなるメディアキーを生成し、appC cloudの広告SDKの初期設定を行います。

まず、appC cloud管理画面(https://app-c.net/)にログインして、アプリの登録をします。

※appC cloudはAndroidとiOSでアプリの登録方法が異なるので気をつけてください。

メディアキーの生成(Androidの場合)

管理画面ダッシュボードで「アプリを登録する」ボタンをクリックしてアプリ管理名を「schoo1210(任意)」と入力して登録。Androidを選択してメディア詳細画面へ。

メディア詳細画面で下図の赤枠のように「アプリ名」「パッケージ名」を入力して、画面下にある「アプリ情報ボタンを更新」ボタンをクリックし「メディアキー」を生成してください。「メディアキー」はコピーボタンでクリップボードにコピーされます。

appc_schoo_1210.013

メディアキーの生成(iOSの場合)

管理画面ダッシュボードで「アプリを登録する」ボタンをクリックしてアプリ管理名を「schoo1210(任意)」と入力して登録。iOSを選択してメディア詳細画面へ。

メディア詳細画面で下図の赤枠のように「アプリ名」「BudleID」を入力して、画面下にある「アプリ情報ボタンを更新」ボタンをクリックし「メディアキー」を生成してください。「メディアキー」はコピーボタンでクリップボードにコピーされます。

appc_schoo_1210.014

次に、アプリにメディアキーを設置します。

メディアキーの設置(Androidの場合)

※iOSのメディアキー設置は、手順7.のappC cloudの初期化コード内で設定します。

「Project」ビューの「Plugins」フォルダから「Android」→「AndroidManifest」を開いてappC Cloud管理画面のメディア詳細設定からコピーした①の”パッケージネーム”と②の”メディアキー”の部分に設置して初期設定の完了です。

① net.appc.cloud.example.ad
② appC cloud で登録したメディアキー

appc_schoo_1210.015

続いて、サンプルプロジェクトに、パッケージ名(Bundle ID)を設置します。

BundleIDの設定(共通)

「File」メニューから「Build Settings …」ダイアログを開いてプラットフォームにAndroidを選び、「Build And Run」をクリック、「Players Setting…」で「Inspector」ビューを開く。さらに「Android(もしくはiOS)」のビューから「Other Settings」にBundle IdentifierにappC cloudの「パッケージ名(もしくはBundle ID)」を入力して完了です。

appc_schoo_1210.016

6. 実装準備

あと、もう少しです。

appC cloudの初期化コードが入った広告スクリプト「Ad.cs」をサンプルプロジェクトのシーンに設置します。

広告スクリプト「Ad.cs」をシーンに設置

Projectビューの「Scripts」フォルダへ、サンプルプロジェクト内の「Ad.cs」をドラッグ&ドロップします。

appc_schoo_1210.017_1

「Scripts」フォルダに「Ad.cs」が現れていれば設置完了です。

appc_schoo_1210.017_2

Main Cameraに貼り付ける

次に、「Project」ビューから「Ad.cs」を「Hierarchy」ビューの「Main Camera」へドラッグ&ドロップします。これで、シーン上に広告のスクリプトが適用されるようになりました。

appc_schoo_1210.018

7. appC Cloud初期化処理

最後に、appC cloud初期化処理を行います。

初期化処理

「Project」ビューから先ほど設置した「Ad.cs」を開いて⑤の初期化コードのコメントアウトを外して初期化処理の完了です。iOSは、⑥を挿入して完了です。

⑥ .SetMK_iOS(“appC cloud で登録したメディアキー”)

appc_schoo_1210.019

これで、実装準備完了!

次は、いよいよ広告実装の説明です。

8. 広告実装 — ムーブアイコン広告 —

ゲームのスタート画面に表示されるムーブアイコン広告を設置します。

appc_schoo_1210.020

「Project」ビューから実装準備で設置した「Ad.cs」を開いてviewDidLoadメソッド内へ①②のコメントアウトを外して完了です。

appc_schoo_1210.021

次に「Manager.cs」を開いて③④のコメントアウトを外して完了です。

appc_schoo_1210.022

9. 広告実装 — カットイン広告 —

自機が敵にやられた時に表示されるカットイン広告を設置します。

appc_schoo_1210.023

「Project」ビューから先ほど設置した「Ad.cs」を開いて①②のコメントアウトを外して完了です。

appc_schoo_1210.024

「Project」ビューから「Manager.cs」を開いて③の”)”を削除して④⑤⑥のコメントアウトを外して完了です。

appc_schoo_1210.025

最後におまけ。

実装した、広告のをビルドして確認してみましょう。

Androidの場合

端末をPCについないで、ビルド&ランで確認!

Android端末をPCに繋いだら「File」メニューから「Build Settings …」ダイアログを開いてプラットフォームにAndroidを選び、「Build And Run」をクリックすれば端末で確認ができます。

appc_schoo_1210.027

Androidのビルド方法については以下の記事を参照してみてください。

http://tech.gmo-media.jp/post/52903538536/create-android-game-with-unity

iOSの場合

端末をPCについないで、ビルド&ランで確認!

iOS端末をPCに繋いだら「File」メニューから「Build Settings …」ダイアログを開いてプラットフォームにiOSを選び、「Build And Run」をクリック。

appc_schoo_1210.028

XcodeにLinked Frameworks and Libraries を追加!

Xcodeが立ち上がるので、オプション情報のLinked Frameworks and Librariesの①「+」ボタンから、②のframeworkをダイアログで検索して「Add」ボタンで追加します。

appc_schoo_1210.029

iOSのビルド方法については以下の記事を参照してみてください。

http://tech.gmo-media.jp/post/54095871491/running-unity-app-on-iphone

以上です。

来年のschooではUnityでアイテム課金が簡単にできるアイテムSTOREの授業を予定しています。アイテムSTOREの実装方法もこのブログでもご紹介したいと思いますのでお楽しみに!

それでは、皆様よいお年をお迎えください。