build.phonegap / doctorserone
スマホアプリの開発を行なう場合、それぞれ開発をするとなるとiPhoneならObjective-C、AndroidならJavaと言語も異なり、同時に開発を進めたい時とか色々と考える事ありますよね。
両言語を理解していればいいのですが、例えば自分の場合はJavaしか分かっておらず、Objective-Cはなかなか敷居の高いものでした。
上記も踏まえ、今回は出来るならなるべく同時にリリースしたい、メンテする上でも合わせて保守したいと考えまして、クロスプラットフォーム開発を行なう事のできるフレームワークを覚えてみようと思いました。
調べてみるとフレームワーク自体は沢山ある様で。
せっかくなんでひと通り試してみようと思い、最初はPhoneGapから手を出してみました。
PhoneGapとは
Adobeによって開発されているオープンソースのフレームワークです。
(MIT/BSDのデュアルライセンス)
公式サイト:http://phonegap.com/
(2012/6時点のversionは1.8.1が最新となっておりました)
このフレームワークでは、HTML+JavaScript+CSSを使ってWebアプリの開発を行なう様に開発を進める事ができます。
ネイティブで利用するようなAPIも下記の通り数多く用意されている様です。
- モーションセンサ
- カメラ
- マイク
- コンパス
- 回線情報
- 電話帳
- デバイス情報
- タッチ操作
- ファイルシステム
- GPS
- プッシュ通知
- ストレージアクセス
(Supported Featuresより抜粋させて頂きました)
開発準備
では早速、開発までの準備をしていきたいと思います。
開発を行なうで必要になるものが
- IntelベースのMacOS X
- Xcode
この2つとなります。
開発準備(ダウンロードとインストール)
それでは公式サイトよりダウンロードしてみます。
(トップからだと右上にDownLoadリンクがあります。)
実際に私がダウンロードしたときは、最新が1.8.1でした。
zipファイルでダウンロードして解凍すると下記のファイル構成となっていました。
libの中にそれぞれOS用のファイルが用意されていました。
今回はiOSの開発準備ということでCordova-1.8.1.dmgというファイルをマウントします。
マウントしてみると、Cordova-1.8.1.pkgというファイルがあります。
今度はこれをインストールします。
基本的には手順に従うだけで簡単にインストールできました。
特に何も変更せず「続ける」を押していきます。
これで完了です。
インストールを行なうことでXcodeを使って開発する準備が整いました。
開発準備(Xcode)
インストールが完了したので、早速Xcodeを起動してみます。
起動して新規プロジェクト作成画面を開くと、PhoneGap開発用のプロジェクトが追加されていました。
(Cordova-based-Applicationというものですね)
上記プロジェクトを選択してまずサンプルでプロジェクトを作ってみます。
ただ、このままでは実際に開発で使用するディレクトリがないため、開発用のｗｗｗディレクトリを追加します。
プロジェクトのルートよりshow Finderをクリックすることで、Finderが表示され、開いた所にｗｗｗディレクトリがありますので、これを先程作成したプロジェクトにドラッグ&ドロップします。
「右クリック」で上記の様にメニューが表示されますので選択します。
ディレクトリと、その中身「index.html」と「cordova-1.8.1.js」も追加します。
実際に追加してみました。
追加してXcodeのプロジェクトより確認した画面が上記の通りとなります。
これでエミュレータを起動してみるとエラーも出ずに正常に起動することが出来ました。
ここまででiOSでの開発準備も出来ましたので、次回よりHello Worldの表示や実際にAPIなども使って色々と実験していきたいと思います。