投稿日:

    カテゴリー 技術 / デザイン / 制作

    PhoneGapの検証【導入編】

    去年はOv-Cを頑張りましたが、もうほとんど忘れている守谷です。
    お手軽にアプリを作るのであればハイブリッドアプリが一番いいという結論になりました。
    というわけで、最近少しずつ触っているPhoneGapの導入についてまとめます。

    ■PhoneGapとは

    HTMLとCSSとJavaScriptでモバイルアプリを作るフレームワークです。
    大枠はネイティブですが、中身はWebviewで組み込まれます。
    (世間的に言う、ハイブリッドアプリの定義です。)
    環境を用意すれば、iOS、Androidはもちろん、WindowsPhoneや
    BlackBerryのアプリも作ることができるそうです。
    APIの導入部分はそれぞれのOSに合わせる必要がありますが、
    それ以外の部分は同じソースを使うことができます。

    ■準備(iOSアプリ)

    ◯必要なもの

    • Intel Mac
    • iPhone(検証機)

    ◯ダウンロードしておくもの

    • PhoneGap
    • Xcode(最近は無料で落とせるらしい)

    ◯PhoneGapのインストール
    落とした「phonegap-phonegap-2.2.0-0-g8a3aa47.zip」を解凍。
    中にあるlibフォルダを、わかりやすい場所に置いときます。
    僕はDocumentsにPhoneGapフォルダ作ってつっこんどきました。
    [/Users/UserName/Documents/PhoneGap]

    ■プロジェクトを作成する

    PhoneGapはコマンドラインで操作を行うようです。
    (都合上、PhoneGapの本体に移動します。)

    ~$ cd /Users/UserName/Documents/PhoneGap/ios/bin/
    

    プロジェクトを作成するには以下のコマンドを実行します。

    ~$ ./create [プロジェクトのファルダパス] [パッケージ名] [プロジェクト名]
    

    例えば以下のコマンドを実行した場合、

    ~$ ./create /Users/UserName/Documents/myapp com.test.myapp myapp
    

    /Users/UserName/Documents/にmyappというプロジェクトが作られます。

    ■デバッグ

    デバッグを行うには、作成したプロジェクト内の「cordova」というフォルダの中にある
    「debug」を実行します。

    ~$ /Users/UserName/Documents/myapp/cordova/debug
    

    文字がうだうだ流れますが、最後に「** BUILD SUCCEEDED **」と表示されたらOKです。

    ■エミュレート

    エミューレートは以下のコマンドを実行します。

    ~$ /Users/UserName/Documents/myapp/cordova/emulate
    

    問題が無ければiOSエミューレーターが立ち上がり、
    この段階ではサンプル画面が表示されたら準備完了です。

    プロジェクト内にある「www」フォルダが作業場所となり、
    作成したHTMLを入れていきます。

    いかがでしょうか。
    これだけやってしまえば、あとはいつもどおりHTML+CSS+JSで作っていくだけです。
    僕は今API周りを検証しております。また進捗があれば紹介していこうと思います。