スマホキャンプサマー2012：ANEとアプリ内課金に挑戦

スマホキャンプサマー2012

おいでよ、「スマホキャンプ」
∼Flash Proでスマホアプリ∼ANEとアプリ内課金に挑戦∼

2012年8月3日・4日
札幌市デジタル創造プラザ
インタークロス・クリエイティブ・センター（ICC）
講師：白石哲也（虫カゴデザインスタジオ株式会社）

12年9月30日日曜日

自己紹介

虫カゴデザインスタジオ株式会社
白石哲也（しらいしてつや）

東京造形大学卒業後、マクロメディアに入社。Director、Flash、Dreamweaverなど
の製品サポートやQAを担当。独立後、虫カゴデザインスタジオ株式会社を設立し、
現在では、Flashを使用したiPhone、Androidなどのアプリ制作に従事。

twitter : @mushikago
facebook : http://facebook.com/mushikago
: http://facebook.com/mushikago.inc
web : http://mushikago.com/

スマホキャンプ


概要
■概要：

iOS Dev Centerでの登録手順∼Developerアカウント作成
∼アプリ内課金（in-app purchase）のはじめの一歩まで。
ネイティブ拡張（Native extensions for Adobe AIR）に
挑戦！

■開発ツール：

• Adobe Flash Professional CS6 (AIR 3.2)

• Adobe Flash Builder 4.6 (AIR 3.2)

• Xcode 4.3.3


目標
ネイティブ拡張(ANE)を使って
Adobe AIRアプリに
アプリ内課金を実装してみる


予定

‣ 1日目 ‣ 2日目
Adobe AIRとは自力でやる
ネイティブ拡張とは ANEからのイベント
iOS Dev Center解説
購入済みの記録
アプリ内課金とは

他力でやる


Adobe AIRとは


Adobe AIR

Adobeが開発・無償提供している
クロスオペレーティングシステムランタイムの事です。
Adobe AIRアプリケーションは、Adobe
AIRランタイムをインストールしたMac
OS、Windows OSにおいて、ネイティブの
デスクトップアプリケーションと同様にイ
ンストールされ、実行する事ができます。
AIRアプリはAIR SDKをサポートしている
Flash ProfessionalやFlash Builderなどで
開発することができます。


モバイルAIR

AIRの技術を使って
モバイルデバイス向けアプリを作成する事ができます。
モバイル向けに開発したAIRアプリケーシ
ョンは、モバイルデバイス上にネイティブ
アプリケーションとしてデプロイされ、
AndroidではAPK、iOSではIPAとしてパ
ッケージされます。これらは、ネイティブ
アプリケーションと同様にGoogle Playや
Apple App Storeで配布することが可能
です。


モバイル用 AIRランタイム

Captive Runtime
iOSでは、Captive Runtimeという形で、
各AIRアプリの中にAIRランタイムが同梱
される形になります。
コンテンツ
Androidでは、アドビからAIRランタイム
が無償で配布されており、これを別途イン
ストールしてもらうことで、アプリケーシ
ョン本体のみを配布して実行させることが
できます。AIR3以降は、Androidでもラインタム
Captive Runtimeを選択できるようにな
りました。
AIRアプリ


AIR for iOS / Android

Adobe AIRでモバイルアプリを開発するメリット
• iOS版とAndroid版をワンソースで開発できる。

• Flash Pro、Flash Builderで習得した知識や開発環境が利用できる。

ActionScript
iOS Android
AIR


AIRネイティブ拡張(ANE)とは


AIRネイティブ拡張(ANE)

AIR ネイティブ拡張(ANE)を利用することで、
デバイス固有の機能にアクセスできます。

iOS Android
AIR


アプリ内課金 (In-App Purchase)

アプリ内課金はデバイス固有の機能なので、
ANEを使ってアクセスすることになります。

In App Purchase

iOS

AIR


構造

ANEを利用している部分は、
AIRランタイムを介さずに直接OSやライブラリに繋がる

getHelloWorld() iOS

AIR xx.call("GetHelloWorld")

ANE

ネイティブ拡張
ActionScriptライブラリデフォルト以外の
フレームワークや
ライブラリ
ライブラリ等


ANEはどうやって作るか

Xcode Flash Builder Flash Pro Text Editor

抽出
●●.a ●●.swc library.swf ●●.p12 ●●.xml
ネイティブ拡張ネイティブ拡張証明書ファイルネイティブ拡張
ライブラリ ActionScriptライブラリ記述ファイル

ターミナル
adt

●●.ane
ANEファイル


ADT (AIR Developer Tool)

ADTコマンドの例：ANEの作成
adt -package
-storetype pkcs12
-keystore mykey.p12
-target ane FirstHelloWorldANE.ane extension.xml
-swc HelloWorldANE_ASLIB.swc
-platform iPhone-ARM library.swf libHelloWorldANE.a

※上記は本来一行で改行しません。
※黄色文字は任意のファイル名
※桃色文字は抽出したままのファイル名


PATH 環境変数

SDK bin ディレクトリをPATH環境変数に含めると便利
http://adobe.ly/NFbKAc

cd
cat >> .bash_profile
export PATH=$PATH:/Applications/Adobe Flash CS6/AIR3.2/bin
(Ctrl+Shift+D)
cat .bash_profile
echo $PATH
adt -version
※Flash Professional CS6にAIR3.2が含まれているので、
そのパスをPATH環境変数に含めています。


07 First HelloWorld

最初のHelloWorld

ADC記事の通りにやってみる
ネイティブ拡張（Native Extensions）入門
第2回ネイティブ拡張の開発方法前編（by 有川榮一氏）
http://adobe.ly/PFq3sx (中盤の図8あたりから)

手順は、MUSHIKAGO APPS MEMO を参照。
1.Cocoa Touch Static Library(.a)の作成
2.ネイティブ拡張ActionScriptライブラリ(.swc)の作成
3.library.swfの抽出
4.証明書ファイル(.p12)の作成
5.ネイティブ拡張記述ファイル(.xml)の作成
6.ADTコマンドを使ってANEファイル(.ane)を作成
7.Flash ProfessionalのAIR for iOS(.ipa)でANEを使用


注意点

次の3箇所のextensionIDは統一
•HelloWorldANE_ASLIB.swc内の
ExtensionContext.createExtensionContext("mushikago.ane.HelloWorld", "type")

•extension.xml内の
<id>mushikago.ane.HelloWorld</id>

•FirstHelloWorld_FlashPro-app.xml内の
<extensions>
<extensionID>mushikago.ane.HelloWorld</extensionID>
</extensions>
※ここは、Flash Proの場合、ANEを読み込むと自動的に書いてくれます。

最新 iOS SDKの指定
Flash Proの場合、AIR for iOS設定ダイアログ内に指定する「iOS SDK」という欄があります。
➡/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/
Developer/SDKs/iPhoneOS5.1.sdk
※Flash Proの場合、この指定をしないでパブリッシュすると、アプリ起動時にクラッシュします。


【DEMO】 - 07
01

ネイティブ拡張 (ANE) に挑戦


iOS Dev Center 解説

いろいろやる前に確認
iOS Dev Centerへの登録やiTunes Connectでのアプリ登録が必要です。
https://developer.apple.com/

MUSHIKAGO APPS MEMO
http://b.mushikago.com/

• 日本のApple StoreでiOS Developer Programを購入し
Activateするまでの全スクリーンショット
http://mushikago.com/i/?p=917

• iOS Dev Centerの事や証明書(.p12)と
プロビジョニングプロファイル準備 ∼解説の解説の解説

• iOS Dev Center : App Storeから配布（Distribution）するまでのMEMO


アプリ内課金とは
（In-App Purchase）


プログラミングガイド

In App Purchase プログラミングガイド
iOS Developer Library
日本語に翻訳されたiOSのドキュメントです。
http://bit.ly/MWq8YE

In App Purchase プログラミングガイド

http://bit.ly/PMTzy5


フレームワーク

Store Kitフレームワーク
In-App Purchaseは、Store Kitフレームワークを使用して
アプリケーションに実装します。


どんなことができるの？

たとえば、
In-App Purchaseを使用して次のようなシナリオを実装できます。

✦ 基本バージョンにプレミアム機能が追加されたアプリケーション
✦ ユーザが新しい本を購入してダウンロードできるブックリーダーアプリケーション
✦ 新しい環境(レベル)の購入を提案するロールプレイングゲーム
✦ プレーヤーが仮想の不動産を購入できるオンラインゲーム

buy
※In-App Purchaseが行うのはペイメントの受け取りのみです。


プロダクト

Storeで販売する機能はすべてプロダクトです。
プロダクトは、デベロッパが新規アプリケーションを作成するのと同じ方法で、iTunes Connectを
通してApp Storeに関連付けられます。
In-App Purchaseを使用して販売できるプロダクトは、次の4つがサポートされています。

✦コンテンツ (Content)。
アプリケーションで提供できる電子書籍、雑誌、写真、アート作品、ゲームのレベルと登場人物、その他
のデジタルコンテンツを含みます。

✦機能プロダクト(Functionality Product)。
アプリケーションですでに提供済みの機能をロック解除したり、拡張したりします。たとえば、あるゲー
ムを出荷する際に、ユーザが購入できる、より小さな単位のゲームを複数同梱して出荷することが考えら
れます。

✦サービス (Service)。
たとえば、音声のテキスト化などの一度限りのサービスをユーザに請求できます。1回のサービス利用に
つき、個々の購入が発生します。

✦定期購読 (Subscription)。
コンテンツやサービスを継続的に利用できるようにします。たとえば、アプリケーションから金融情報や
オンラインゲームのポータルへのアクセスを1ヶ月単位で提供するなどが考えられます。


留意すべき重要なガイドライン

留意すべき重要なガイドライン

✦ アプリケーションの中で提供できるのは電子商品または電子
サービスに限られています。In-App Purchaseを使って実物
の商品やサービスを販売することはできません。

✦ 中間通貨のようなアイテムを提供することはできません。これ
は、特定の商品やサービスを購入するということがユーザに
認識されることが重要であるためです。

✦ 販売用に提供するアイテムには、ポルノ、謗、中傷、ギャン
ブル(ギャンブルのシミュレーションであれば問題ありません)
や、それらに関連するようなものを含めないようにします。


プロダクトID

App Storeへのプロダクトの登録
App Storeはさまざまな種類のプロダクトに対応しています。
✦Consumable(消耗型)
毎回購入

✦Non-consumable(非消耗型)
永久に入手（機能制限解除もの）

✦Auto-renewable subscriptions(自動更新購読)
レンタルのように期限付き

✦Free subscriptions(無料購読)

✦Non-renewing subscriptions(非更新購読)


08 Xcode InAppPurchase

Xcodeで作ってみる

プログラミングガイドの通りにやってみる
「アプリケーションへのStoreの追加」の項
http://bit.ly/PMTzy5 (20ページ∼24ページ)
1.XcodeのテンプレートからシンプルなiPhoneアプリを作る
2.StoreKitフレームワークをプロジェクトに追加
3.InAppPurchaseManagerクラスを作成
4.「Buy」ボタンを用意し、押すと課金処理開始
5.シミュレーターで動作確認し、invalid product identifierを確認
6.iTunes Connectでアプリ内課金用のプロダクトを準備
7.再度シミュレーターで動作確認し、購入ダイアログを確認


実機でテストする際の注意

アプリ内課金の購入テストするときは Test User を使う事。
Test Userは、iTunes Connectの Manage Users で作成できます。

また、実機でサインイン中のアカウントをサインアウトするには、
設定＞Store から最下部のApple ID欄をクリックします。

Test User


【DEMO】08

アプリ内課金に挑戦 (Xcode編)


他力でやる


誰か助けて！

ANEは買えます。
「今すぐにでもAIRアプリにアプリ内課金を実装したい」場合
Milkman Games
In-App Purchase iOS Extension $49.99
http://www.milkmangames.com/


09 Hello Milkman FlashPro

Milkman Games StoreKit
http://www.milkmangames.com/

com.milkmangames.extensions.StoreKit.ane
を使ってみる
当然ながら、これを使うにはANEを購入する必要があります。
参考：
ADC記事：Using the iOS In-App Purchase native extension for Adobe AIR
http://adobe.ly/NXG0Jp
1.Flash Pro CS6でAIR for iOSの新規ファイルを作成。
2.extensionフォルダをFLAの階層にコピー。
3.ActionScript設定ダイアログでaneを追加。
4.フレームスクリプトにActionScriptを入力。
5.パブリッシュして実機で確認。


【DEMO】09

Milkman Games StoreKit


自力でやる


リンケージオプション

前回作ったANEのHelloWorldアプリを使って
iOS標準のコントロールやフレームワークを使ってみる。
（iOS SDK 4.2で利用可能なパブリックフレームやiOS SDK 5 以降のデフォルト以外のもの）

ネイティブ拡張パッケージの作成
http://adobe.ly/P1ZVHh
-platformoptions フラグは、iOS フレームワークに対して
デフォルト以外のリンケージオプションを指定する場合に使用する
オプションの項目です。

iOS ネイティブライブラリとリンケージオプションファイルの説明
http://adobe.ly/NqfQxU
MacOSのみ

-platformoptions フラグ

Xcode Flash Builder Flash Pro Text Editor Text Editor

抽出
●●.a ●●.swc library.swf ●●.p12 ●●.xml ●●.xml
ネイティブ拡張ネイティブ拡張証明書ファイルネイティブ拡張リンケージ
ライブラリ ActionScriptライブラリ記述ファイルオプションファイル

ターミナル adt

●●.ane
ANEファイル


ADT (AIR Developer Tool)

ADTコマンドの例：リンケージオプションを指定する場合
adt -package
-storetype pkcs12
-keystore mykey.p12
-target ane SecondHelloWorldANE.ane extension.xml
-swc HelloWorldANE_ASLIB.swc
-platform iPhone-ARM library.swf libHelloWorldANE.a
-platformoptions myplatformoptions.xml

※上記は本来一行で改行しません。
※黄色文字は任意のファイル名
※桃色文字は抽出したままのファイル名


リンケージオプションファイル

iOS のリンケージオプションファイル (.xml)
<platform xmlns="http://ns.adobe.com/air/extension/3.1">
<sdkVersion>5.1</sdkVersion>
<linkerOptions>
<option>-framework MapKit</option>
<option>-framework StoreKit</option>
</linkerOptions>
</platform>


13 Second HelloWorld

2回目のHelloWorld

ANEを使って、
UISwitch、UIButton、MKMapViewを表示してみる。
参考：FxUG → http://bit.ly/MQMdZb

手順は、サンプルファイルを参照。
1.「10_HelloWorldANE_EXLIB」GetHelloWorld内のみ書き換え。
2. Mapkitの#importを忘れずに。
3.「11_PlatformOptionXML」リンケージオプションファイル作成。
4.「12_adt2」 -platformoptionsをつけてADT。
5.「13_SecondHelloWorld_FlashPro」GetHelloWorldを呼ぶ。


【DEMO】 - 13
10

ANEでデフォルト以外のフレームワークを使用


16 Third HelloWorld

ANEを使ってアプリ内課金

アプリ内課金(In-App Purchase)も
デフォルト以外のフレームワークなので、同様に。
1.「14_HelloWorldANE_IAP」GetHelloWorld内のみ書き換え。
2. InAppPurchaseManager.hの#importを忘れずに。
3. 同様に「15_adt3」 -platformoptionsをつけてADT。
4. アプリIDを「com.mushikago.InAppPurchaseXcode」に。
5.「16_ThirdHelloWorld_FlashPro」GetHelloWorldを呼ぶ。


注意点

アプリケーションIDとプロダクトIDの関係
com.mushikago.InAppPurchaseXcode.unLockという
プロダクトを購入するサンプルになっているので、Flash Proでパブリッシュする際の
アプリケーションID欄にも注意してください。

➡ com.mushikago.InAppPurchaseXcode

Non-consumable(非消耗型)は一度のみの購入
Non-consumable(非消耗型)のプロダクトの場合、一度購入してしまうと、
2度目以降は、そのユーザでのテストができなくなります。
その場合は、テストユーザを増やして新規のテストユーザで購入テストをしてください。


【DEMO】 - 16
14

ANEでアプリ内課金(In-App Purchase)


ANEからのイベント（非同期）

ANE側でイベントを発行してFlash側で受け取る。
参考：AIR 3 Native Extension 12 Try Develop Async Event in C
（by 有川榮一氏）
http://bit.ly/MrrLdk

FREDispatchStatusEventAsync(ctx,msg1,msg2);

context.addEventListener(StatusEvent.STATUS, onStatusEvent);
function onStatusEvent(event:StatusEvent):void{
trace(event.code,event.level);
dispatchEvent(event);
}


イベントの流れ
ライブラリ
FREDispatchStatusEventAsync

addEventListener
ActionScriptライブラリ
dispatchEvent(event)

addEventListener

AIRアプリケーション本体


20 Fourth HelloWorld


ANEでイベントを発行。AIRアプリで受け取ってみる。
参考：AIR 3 Native Extension 12 Try Develop Async Event in C
（by 有川榮一氏）
1.「17_HelloWorldANE_EVENT」 FREDispatchStatusEventAsync
2.「18_HelloWorldANE_Event_ASLIB」StatusEvent
3.「19_adt4」 -platformoptionsをつけてADT。
4.「20_FourthHelloWorld_FlashPro」StatusEventを受け取る。


【DEMO】 - 20
17

FREDispatchStatusEventAsync


23 Fifth HelloWorld


アプリ内課金の課金結果に応じて、動作を振り分ける。
StatusEvent.code を StatusEvent.level の
2つのパラメータを駆使して、結果を振り分けてみます。

この例では、購入成功した場合、codeとlevel部分に入る値は

•code : Purchased
•level : 購入したプロダクトID

1.「21_HelloWorldANE_EVENT2」状態をcodeとlevelで振り分け
2. appMng.myContext = ctx;を忘れないように。
3.「23_FifthHelloWorld_FlashPro」StatusEventを受け取る。


【DEMO】 - 23
21

結果の振り分け


購入済みの記録

一度購入されたプロダクトは記録して、
次回起動時以降は、ロック解除された状態にする。

暗号化してローカル保存

EncryptedLocalStore

var storedValue:ByteArray = EncryptedLocalStore.getItem("PurchasedProdID");
storedValue.readUTFBytes(storedValue.length)


24 Fourth HelloWorld


5回目のHelloWorldで取得した購入成功のメッセージ
を受け取り、プロダクトIDを暗号化して保存してみる。
暗号化されたローカルストア
参考：http://adobe.ly/PKFjnb

1.「24_SixthHelloWorld_FlashPro」購入処理後、暗号化して保存。


【DEMO】24

暗号化してローカル保存：EncryptedLocalStore


以上
ネイティブ拡張(ANE)を使って
Adobe AIRアプリに
アプリ内課金を実装してみる


つづきは
MUSHIKAGO APPS MEMO で。
http://b.mushikago.com/

虫カゴデザインスタジオ株式会社
白石哲也（しらいしてつや）
twitter : @mushikago
facebook : http://facebook.com/mushikago
: http://facebook.com/mushikago.inc
web : http://mushikago.com/


スマホキャンプサマー2012：ANEとアプリ内課金に挑戦

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Similar to スマホキャンプサマー2012：ANEとアプリ内課金に挑戦

Similar to スマホキャンプサマー2012：ANEとアプリ内課金に挑戦 (20)

Recently uploaded

Recently uploaded (7)

スマホキャンプサマー2012：ANEとアプリ内課金に挑戦