Cordovaで、Hello World

前回の記事で、Mac OSにCordova(PhoneGap)環境をセットアップしました。Cordovaの環境が整っていない方は、前回の記事をお読みください。
今回は、CordovaでHello Worldを表示したいと思います。

 

Hello World

 

まずCordovaのプロジェクトを作成すると、下記のフォルダ構成になります。

  1. myApp/
  2. |-- config.xml
  3. |-- hooks/
  4. |-- merges/
  5. | |-- android/
  6. | |-- blackberry10/
  7. | |-- ios/
  8. |-- www/
  9. |-- platforms/
  10. | |-- android/
  11. | |-- blackberry10/
  12. | |-- ios/
  13. |-- plugins/

「/merges」は、プラットフォーム固有のファイルを設置します。
「/platforms」は、プロジェクトのネイティブアプリケーション構造が設置されます。
「/plugins」は、追加したプラグインのデータが設置されます。

 

見た目の表示を変更するには「www」ディレクトリ配下を修正します。

 

  1. 「www/index.html」を開きます。

    index.html内の内容を変更し、保存します。
     

  2. 内容を確認する。
    内容確認は、コマンドラインからエミュレーターを起動するか、Xcodeからエミュレーターを起動する必要があります。

    (コマンドライン)
    index.htmlを修正する

    1. $ cd ~/cordova_project/
    2. $ cordova emulate -d ios

    (Xcode)

    1. $ cd ~/cordova_project/platforms/ios
    2. $ open ProjectName.xcodeproj

    Xcodeを起動する。

    index.htmlを修正する

    (修正したコードをビルド)

    1. $ cordova build

    Xcode画面左上の、再生ボタンをクリックします。

 

Hello Worldが表示されましたでしょうか。
Cordova emulate ios -d コマンドは、エミュレーターの起動及び、ビルドを同時に行っています。
Xcodeで編集した場合は、Cordova buildにて、ビルドを行った後にエミュレーターを起動する必要があります。

 

次回は、Cordovaプラグインを導入し、デバイスに機能を使ってみたいと思います。

 

関連記事

 

Cordova(PhoneGap)のiOS、Android環境をセットアップ

 

関連タグ:

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ