Windowsユーザでも 手軽に作れるiPhoneアプリ

Transcription

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

2 2 はじめに iphone アプリを開発するために必要なもの ( 一例 ) OS 開発言語 開発キット Mac OS X 以降 Objective-C iphone SDK 開発環境 Xcode 4.3 iphone SDK は Windows 上では動かせません

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

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

5 Adobe Flex の特徴 Adobe 社が提供 Adobe Flex SDK Adobe Flash Builder( 統合開発環境 ) オープンソース型フレームワーク MXMLでアプリケーションの構造を定義 ActionScript 3.0でロジックの実装 5

6 開発環境構築 製品名 : Adobe Flash Builder 4.6 使用条件 : Adobe でユーザー登録 体験版なら 60 日間利用可能 ダウンロード元 : product=flash_builder&loc=ja&sdid=fdntz 6

7 Adobe Flash Builder の起動直後 7

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

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

10 Flex モバイル AIR プロジェクト作成時 パッケージエクスプローラーに作成したタブと対応する MXML ファイルが作成されます 今回はプロジェクト名を SeminarSample にしています 10

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

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

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

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

15 実際に作ってみました 15

16 Adobe Flash Builder 4.6 で作ったサンプル ( 電卓 ) 16

17 Adobe Flash Builder 4.6 で作ったサンプル ( 電卓 ) 17

18 18 次に複数画面を使用する検索アプリのサンプルを考えてみましょう

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

20 手順 1. 検索画面の作成 2. 一覧画面の作成 3. 検索画面から一覧画面への画面遷移 4. 一覧データ取得用のHTTPサービス設定 5. 一覧データとHTTPサービスの紐付け 20

21 21 1. 検索画面の作成 Label を配置 TextInput を配置 Button を配置

22 22 2. 一覧画面の作成 Label を配置 Button を配置 List を配置

23 3. 検索画面から一覧画面への画面遷移 検索ボタンを右クリック Click ハンドラーを生成 23

24 画面遷移のためのアクション 検索ボタン : navigator.pushview(nextviewclassname, data) 戻るボタン : navigator.popview() 24

25 <s:textinput id="searchword" x="35" y="288" width="185"/> navigator.pushview(views.listview,this.searchword.text); 25

26 26 価格.com の Web サービス API 今回必要な検索条件とパラメータは下記のようになります ApiKey 利用者登録を行ったアクセスキー Keyword 商品名を表すキーワード HitNum 検索結果の最大取得件数

27 4. 一覧データ取得用の HTTP サービス設定 データとサービスに接続 ウィザードを使用することで WEB からデータを取得するロジックも GUI で設定できます URL パラメータを解釈してパラメーターに項目が追加されます 27

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

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

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

31 データにバインド ダイアログ終了時 list_creationcompletehandler(event) の自動生成 WEB サービス API を呼び出すために必要なパラメータを 追記することで一覧情報を取得できるようになります 31

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

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

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

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

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

37 Adobe Flex は何故 ios で動くのか <Adobe Flex が ios で動くまで > MHTML ファイル as ファイル等 (AIR 開発ツール ) ipa ファイル ios で実行可能な ipa ファイルに変換 37

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

39 スマホで Adobe AIR ~Android~ Android Market から Android デバイスにダウンロード ユーザによるダウンロード インストールが必要 Android Market モバイル端末 アプリ 39

40 スマホで Adobe AIR ~BlackBerry~ BlackBerry Tablet OS にプリインストール済 ユーザによるダウンロード インストールは不要 モバイル端末 アプリ 40

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

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

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

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

45 Adobe Flex で開発するメリットその 1 Mac OS を導入しなくても Windows 環境で開発可能 45

46 Adobe Flex で開発するメリットその 2 開発に使用する言語は Objective-C よりも ActionScript 3.0 の方が習得が容易 46

47 Adobe Flex で開発するメリットその 3 モバイル OS の 8 割以上に対してアプリを提供可能 2012 年 4 月モバイル OS シェア / 円グラフ - Net Applications 報告 より抜粋 47

48 48 Adobe Flex で開発するメリット これら全てが示唆するもの 開発コストの削減

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

50 Mac の開発方式と今回紹介した開発方式の対比表 一般的な開発方式今回紹介した開発方式 OS Mac OS X ( 以降 ) 開発言語 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

51 質疑応答 51

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