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

HTML5 + JavaScript + CSSでハイブリットアプリを構築する手法は様々あり、さらにハイブリットアプリに関しても賛否があるのが現状です。
今回はハイブリットアプリフレームワークの中で最も多く使われているCordova(PhoneGap)の環境セットアップ方法をご紹介いたします。

 

環境構築バージョン

利用PC:Mac OS X 10.9.2
Cordova:3.5.0

 

メリット / デメリット

メリットは何と言っても、HTML5 + JavaScript + CSSでアプリ開発ができ、さらに様々なクロスプラットフォームのデバイスにアプリを対応することが出来ます。

対応しているプラットフォーム

  • iOS
  • Android
  • Firefox OS
  • Blackberry
  • Windows Phone
  • Ubuntu

さらにはCordovaでアプリを作成することにより、Windows8アプリなどへの変換も可能です。Windows8アプリへの変換はMicrosoftが用意しています。

アプリを作成する環境さえ整えば、HTML5の技術を使いアプリを構築することができますので、Web制作者の皆さんのこれまでの知識を使い、開発をすることができます。

Webサイトをあまり見ずに、アプリをよく使う層が一定数いますので、これらのユーザーに向けて自社コンテンツを配信するためのライトなアプリケーションにはハイブリットアプリが最適なのではないでしょうか。

 

Cordova3.5環境セットアップ

少し前置きが長くなってしまいましたが、環境をセットアップしていきます。

 

  1. Xcodeインストール
    https://developer.apple.com/jp/technologies/tools/ 

    上記のURLよりXcodeをインストールしてください。インストール方法は割愛いたします。
     

  2. Node.jsインストール
    http://nodejs.org/

    上記URLより、node.jsをインストールしてください。
    node.jsをインストールすると、パッケージ管理ツールのnpmもインストールされます。

    (インストールの確認)

    $ node -v
    v0.10.28
    $ npm -v
    1.4.9
    

    ※ $ node -v は、コンソールからのコマンド入力になります。一般的に言われている黒い画面です。
    macのターミナルを起動し、node -v と入力してください。

    この先の説明でも、「$」 から始まるコードの紹介があります。「$」はコンソール画面からのコマンド入力となります。
     

  3. Cordova インストール

    (インストール)

    $ npm install cordova -g
    

    (確認)

    $ cordova -v
    3.5.0-0.2.4
    
    
  4. Homebrewインストール

    iOSのシミュレータをインストールするために、Mac OS Xのパッケージ管理ソフトのHomebrewをインストールします。

    $ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”
    

     

  5. iOS-simインストール

    (インストール)

    $ brew install ios-sim
    

     

  6. Android SDKをインストール

    http://developer.android.com/sdk/index.html

    上記URLにアクセスし、Android SDKをダウンロードする。
    MacOS X 64-bit adt-bundle-mac-x86_64-xxx.zip

    ダウロードした、zipファイルを「/users/user_name」などに解凍する
     

  7. Andoroid用のビルドツールantインストール
     

    $ brew install ant
    

     

  8. Bashにパス追加

    ダウンロードした、Android SDKの「tools」と「platform-tools」にパスを通します。

    $ echo "export PATH=$PATH:~/adt/sdk/tools/" >> ~/.bash_profile
    $ echo "export PATH=$PATH:~/adt/sdk/platform-tools/" >> ~/.bash_profile
    
    $ source ~/.bash_profile
    

     

    e.g.)
    $ echo "export PATH=$PATH:/Users/abechiyo/adt/sdk/tools/" >> ~/.bash_profile
    $ source ~/.bash_profile
    
    $ echo "export PATH=$PATH:/Users/abechiyo/adt/sdk/platform-tools/" >> ~/.bash_profile
    $ source ~/.bash_profile
    

    (確認)

    $ android -h
      Usage:
       android [global options] action [action options]
       ….省略
    
    $ adb version
    Android Debug Bridge version 1.0.31
    

    Andoroid SDKをインストールしたディレクトリに環境変数パスを追加します。
    私の環境ですと、「/users/UserName」以下に設置を行いました。

    コマンドラインで「~/」はユーザーのホームディレクトリになります。下記の例ではpwdコマンドで、現在の「/Users/abechiyo/Cordova_Projects」を表示しており、「cd ~/」コマンドで、ユーザーのホームディレクトリに移動しています。


    環境変数は、ユーザーホムディレクトリ内に「.bash_profile」に保存しています。 viコマンドを使用して、追記した行を確認することができます。

    $ vi ~/.bash_profile
    

    確認後は、「:」キーを押下後、「q」を入力し、エディタ画面を閉じてください。
     

  9. ハイブリットアプリのプロジェクト新規作成
    $ cordova create hello com.example.hello HelloWorld -d
    

    「hello」ディレクトリに、「HelloWorld」プロジェクトを作成しました。
    com.example.helloは識別子として、ドメインを後ろから記述しています。

    プロジェクトの作成後、iOSとAndroidの環境ファイルを設置します。

    (作成したhelloフォルダに移動)

    $ cd hello
    

    (環境ファイルを設置)

    $ cordova platform add ios
    $ cordova platform add android

     

  10. iOSシミュレータを起動
    $ cordova emulate ios -d
    

     
    iOSのシミュレータが起動しましたでしょうか。

  11. Androidシミュレータを起動

    $ cordova emulate android -d

     


    Androidのシミュレータが起動しましたでしょうか。
    次の項で、エラーになった場合の対処法を掲載いたします。
     

  12. Androidシミュレータが起動しない場合

    Androidシミュレータが起動しない場合は下記の記事を参考してください。

    Cordova Andoroidシミュレータ起動時に、「ERROR : No emulator images (avds) found・・・」エラー

    Cordova Andorodiシミュレータ起動時に、「emulator: ERROR: This AVD's configuration is missing
    a kernel file!!」エラー

 

以上で、Cordova環境をMacにセットアップする手順を終わりにいたします。
iOS、Androidの実機を使った検証方法は、「Cordova、iOSとAndroidの実機検証について」に掲載しました。

 

最後に

環境のセットアップができれば、HTML5でアプリを構築することができるので、是非デザイナーや、マークアップエンジニアの方に見ていただきたい記事となります。

この内容は、HTML5 funで登壇したときの内容の一部となります。
HTML5funに登壇した際のスライドはこちらのリンクに掲載しています。

 

次回は、Hello Worldと、実機の検証と、Cordova Pluginを使ってスマートフォンのネイティブの機能にアクセスする方法を紹介いたします。

 

関連記事

Cordovaで、Hello World

 

 

関連タグ:

この記事をシェアする

次へ
前へ