PhoneGapによるTimelineMapのスマートフォン・アプリ開発

2010.12.4　加藤 大騎

はじめに

•今回対象にするスマートフォン・プラットフォーム

• iPhone

• Android

iPhoneでアプリ開発するには

•開発にはXcodeを使うのが一般的

• Objective-C言語の習得

• 実機での動作確認

• AppleへのDeveloper登録($99/year)

• AppStoreの審査

Androidでのアプリ開発

• Eclipseによる開発環境が多い

• エミュレーターで複数の環境を用意できる

• 実機へのUSBインストールも容易に可能

• マーケットの公開には開発者登録が必要($25)

http://market.android.com/publish/

PhoneGapとは

• HTML+JavaScriptで作ったWebサイトをアプリに変換

• iOS, Android, BlackBerry, Symbian,...

• 各種センサーやストレージは専用のAPIから利用可能

• AppStore, Androidマーケットへの登録も問題なし

類似の技術

•Adobe Flash CS5

• Titanium Mobile

• PhoneGap

Adobe Flash CS5

※1 Adobe AIRを併用

※2 iPhoneでは利用不可

iPhone ○

Android △※1

Web △※2

• 利点

• ActionScrpit3が使える

• RAD※ツールを使った開発ができる※ Rapid Application Development

• 欠点

• 高額な開発環境が必要

• 今後のAppleとの関係が不鮮明

Titanium Mobile

iPhone ○

Android ○

Web ×

• 利点

• 利用者からの情報が急速に増加しつつある

• ネイティブ専用のため、少し処理が早いかも

• 欠点

• 独自の言語仕様を覚える必要がある

PhoneGap

iPhone ○

Android ○

Web ○

• 利点

• Web開発で使ったコードがそのまま使える

• 多様なプラットフォームに対応

• 欠点

• Webベースのため、パフォーマンスで劣る可能性

• いつサポートを打ち切られるか分からない現在はAppleから規約違反がないという公式の回答を得ている

動作環境のまとめ

Flash CS5 Titanium Mobile PhoneGap

iPhone ○ ○ ○

Android △ ○ ○

Web △ × ○

PhoneGapが適するケース

•Webサイトと連携したアプリ

• e.g. Webサイトのモバイル版をそのままアプリにする

• マルチプラットフォームで展開したい

• 実際に書くコード量を減らしたい

• Dashcodeを併用すると大幅に楽ができる

PhoneGapが向かないケース

•本格的なゲームアプリを作る場合

• 十分な性能が出ない可能性

• マルチタッチが使えない

• 商業的に展開したい場合

• Objective-Cで書いた方がAppleの保証があるので安心

TimelineMapのiPhoneアプリ化

•元々Web上のプログラムとして設計済み

• Dashcodeを利用して、RAD環境で開発

実際に作ってみる

開発のための準備

• PhoneGapのテンプレートをXcodeにインストール

• Xcodeの新規作成画面からPhoneGapを選択

こんな感じに

PhoneGapへの取り込み

•作成しておいたWebサイトをwww/に設置

• 最初に表示されるindex.htmlを確認

• (プロジェクト名)-info.plistでプロジェクト名等を設定

iPhoneシミュレーターで実行

•プロジェクトをビルド

• iPhoneシミュレーターが起動

• 「PhoneGap」の文字が表示された後に開始

ホームに戻ると

Androidの場合

PhoneGapへの取り込み

• PhoneGapの標準フォルダ構成を設置

• framework/assets/www/にWebサイトを配置

Eclipseへインポート

• framework/以下をEclipseにプロジェクトとして読込み

• Androidエミュレーターを起動

• コンパイルして実行

Androidでも同様に実行

今日のまとめ

•既存のサイトがあればコーディング量ほぼゼロで実現可能

• 新たに作る場合でも、Dashcode等の利用で負担を軽減

• 同じコードから複数の環境に向けたアプリを作成可能

参考資料

• Titanium Mobile Application Development

http://www.appcelerator.com/products/titanium-mobile-application-development/

• PhoneGaphttp://www.phonegap.com/

• multimedia designer, interactive multimedia | Adobe Flash Professional CS5http://www.adobe.com/products/flash/whatsnew/

• Adobe Labs - Packager for iPhone

http://labs.adobe.com/technologies/packagerforiphone/