Windowsユーザでも手軽に作れるiPhoneアプリ
株式会社フォーサイト・バリュー・テクノロジー
山本 健一

１

はじめに■iPhoneアプリを開発するために必要なもの(一例)
OS

Mac OS X 10.5.3以降

開発言語

Objective-C

開発キット

iPhone SDK

開発環境

Xcode 4.3

iPhone SDKはWindows上では動かせません。

２

Google先生に聞いてみると…
・仮想環境でMac OSを動かす
VMwareVirtualBox など
・開発ツールなどでTitanium Mobile
Adobe Flex
Sencha Touch 2.0 など
３

今回はその中の1つ「Adobe Flex」をご紹介致します。
iPhone SDK を必要としないため、Objective-C 言語の学習は一切行いません。
もちろん、Mac OS X 端末も必須ではありません。

４

Adobe Flex の特徴
・Adobe社が提供
Adobe Flex SDK
Adobe Flash Builder（統合開発環境）

・オープンソース型フレームワーク
・MXMLでアプリケーションの構造を定義
・ActionScript 3.0でロジックの実装

５

開発環境構築
製品名：
Adobe Flash Builder 4.6
使用条件：
Adobeでユーザー登録
体験版なら60日間利用可能
ダウンロード元:
https://www.adobe.com/cfusion/tdrc/index.cfm?
product=flash_builder&loc=ja&sdid=FDNTZ

６

■Adobe Flash Builderの起動直後

７

■FlexモバイルAIRプロジェクトを使うメリット
・マルチプラットフォームに対応可能

８

■FlexモバイルAIRプロジェクトを使うメリット
・画面下部のタブを自動作成

９■FlexモバイルAIRプロジェクト作成時
パッケージエクスプローラーに作成したタブと対応するMXMLファイルが作成されます。

※今回はプロジェクト名をSeminarSampleにしています。

10

■Adobe Flash Builderの特徴
・GUIによる開発
・画面イメージにドラッグ＆ドロップすることで作成可能

11

■MXMLデザインビュー「コンポーネント」ウィンドウから「Label」と「TextInput」をドラッグ＆ドロップ

12

■MXMLソースビュー
LabelやTextInputが追加されています。

13

GUIでボタンやラベルを配置するだけで電卓画面も作れます。

14

実際に作ってみました15

■ Adobe Flash Builder 4.6で作ったサンプル（電卓）16■ Adobe Flash Builder 4.6で作ったサンプル（電卓）17次に複数画面を使用する検索アプリのサンプルを考えてみましょう18

価格.com商品検索アプリ■仕様
入力したキーワードに一致する商品を一覧表示
一覧に表示する件数は最大10件まで検索に価格.comのWebサービスAPIを利用する■画面構成
検索画面 ⇒ 一覧画面

19

手順
１．検索画面の作成
２．一覧画面の作成
３．検索画面から一覧画面への画面遷移
４．一覧データ取得用のHTTPサービス設定
５．一覧データとHTTPサービスの紐付け20■ １．検索画面の作成

Labelを配置

TextInputを配置

Buttonを配置

21

■ ２．一覧画面の作成

Labelを配置

Buttonを配置

Listを配置22■３．検索画面から一覧画面への画面遷移
検索ボタンを右クリック→「Clickハンドラーを生成」

23

画面遷移のためのアクション・検索ボタン：→ navigator.pushView(NextViewClassName, data)
・戻るボタン：→ navigator.popView()24

<s:TextInput id="searchWord"x="35" y="288" width="185"/>

navigator.pushView(views.ListView,this.searchWord.text);

25

価格.comのWebサービスAPI
今回必要な検索条件とパラメータは下記のようになります。

・ ApiKey・・・・・利用者登録を行ったアクセスキー
・ Keyword ・・・・・商品名を表すキーワード
・ HitNum ・・・・・検索結果の最大取得件数26

■４．一覧データ取得用のHTTPサービス設定「データとサービスに接続」ウィザードを使用することでWEBからデータを取得するロジックもGUIで設定できます。

URLパラメータを解釈してパラメーターに項目が追加されます。

27

■「データとサービスに接続」ウィザード終了時
・「KakakuCom.as」が自動生成
・「データとサービス」にSearchアクションが追加Flexを使用した場合、WebサービスAPIを用いてWEBからデータを取得するためのロジックを作るのに、コーディングは一切必要ない場合も有りえるのです。

28

■５．一覧データと紐付ける値の設定
WEBからデータを取得するためのロジックに戻り値を設定「データとサービス」のSearchアクションを右クリック→「戻り値の型を設定」

29

■一覧データとの紐付け
一覧画面のListを右クリック→ 「データにバインド」「ラベルフィールド」からListに表示したい項目を選択して商品名が表示されるように設定します。

30

■ 「データにバインド」ダイアログ終了時
・「list_creationCompleteHandler(event)」の自動生成

・WEBサービスAPIを呼び出すために必要なパラメータを追記することで一覧情報を取得できるようになります。

31

■ Adobe Flash Builder上でのデバッグ・デスクトップ上とデバイス上の2種類で実施可能
・「実行」または「デバック」→「モバイルアプリケーション」

32

■ デスクトップ上でのデバッグ

33

価格.com商品検索アプリ完成！！

34

■ 作ったサンプルを実機で起動35

■ 作ったサンプルを実機で起動

36

Adobe Flexは何故iOSで動くのか＜Adobe FlexがiOSで動くまで＞

MHTMLファイル、asファイル等→(AIR 開発ツール)→ ipaファイル
iOSで実行可能なipaファイルに変換

37

Adobe AIRの特徴
・OSにFlashの実行環境を追加する技術
・Flashコンテンツをローカル環境で実行可能
ローカル環境＝Windows、Mac、iOS、 Android、etc..
Adobe AIRがインストールされていれば、どんなOSでも同じように動作させることが可能38

スマホでAdobe AIR～Android～・Android MarketからAndroidデバイスにダウンロード・ユーザによるダウンロード、インストールが必要

Android Market

モバイル端末アプリ39

スマホでAdobe AIR～BlackBerry～

・BlackBerry Tablet OSにプリインストール済・ユーザによるダウンロード、インストールは不要

モバイル端末アプリ

40

スマホでAdobe AIR～iPhone～・Adobe Flexで作成したiOSアプリは、iOSアプリ本体にAdobe AIRを追加したもの・ユーザによるダウンロード、インストールは不要。
モバイル端末

アプリ

アプリ

41

■Objective-Cの特徴
・ iOS限定。
Androidなど、別の環境で同じアプリを作るためには、最初からやり直し。
・ パフォーマンスは高い。
■ Adobe AIRの特徴
・マルチプラットフォーム対応。
Androidなど、別の環境で同じアプリを作るためには、画面サイズの調整など微調整のみ必要。
・Objective-Cよりもパフォーマンスが落ちる。
→ 直接呼び出されるのではなくAIR上で動作させているため。
・AIRがサポートしておらず、 Objective-Cでサポートしている機能は使えない

42

■AIRがサポートしていない機能の一例
GameCenter
アプリ内課金電話帳
各種センサー（磁気センサー、圧力センサー）
Bluetooth
外部記録メディアへの接続→最新のAIR3.0で追加された「ネイティブ拡張」機能により解消されました。

43

■ネイティブ拡張の特徴
・AIRアプリ上から外部プロセスを利用する機能。
外部プロセス＝Java、Objective-C
AIRからObjective-Cのコードを呼び出せるようになったため、AIR非対応の機能も使えるように。
「パフォーマンス以外の弱点」は無くなりました。

44

Adobe Flexで開発するメリット

その１

Mac OSを導入しなくても、Windows環境で開発可能

45

Adobe Flexで開発するメリット

その２

開発に使用する言語はObjective-CよりもActionScript 3.0の方が習得が容易

46

Adobe Flexで開発するメリット

その３

モバイルOSの8割以上に対してアプリを提供可能

2012年4月モバイルOSシェア/円グラフ - Net Applications報告
http://news.mynavi.jp/news/2012/05/07/009/index.html より抜粋

47

Adobe Flexで開発するメリット

これら全てが示唆するもの

開発コストの削減

48

終わりにiPhoneアプリがWindows環境でも作れる。
Windowsユーザーには、それだけでも嬉しいことですが、マルチプラットフォーム対応という副産物もありました。
スマホアプリの作成も新時代に突入した印象です。
まだまだ知られてない、Adobe Flex。
今のうちに覚えておくと、後で何処かの場面で役に立つかもしれないですよ?

49

■Macの開発方式と今回紹介した開発方式の対比表
一般的な開発方式 今回紹介した開発方式
OSMac OS X
(10.5.3以降)
開発言語 Objective-C開発キット iPhone SDK

Windows XP以降
Mac OS X 10.6以降
Adobe Flex
(ActionScript 3.0)
Adobe Flex SDK

開発環境 Xcode 4.3

Adobe Flash Builder 4.6
50

質疑応答

51

ご清聴ありがとうございました。

52