Cordova(PhoneGap) とりあえずどんなものか

広告:超オススメUnity Asset
  広告:超オススメUnity Asset

昨日、ADC MEETUP 06「CREATE THE WEB TOUR」セッション6がPhoneGapのセッションでした。めずらしく会場に出向いてきました。そちらのレビューはまた今度にするとして、そこでもチラっと出てきたCordovaを試してみます。やっぱりiOS限定で書きます。あと、便利なので、ついでにChildBrowserというプラグインも入手してセットアップしてみます。また、PhoneGap Buildについては「Adobe PhoneGap Build とりあえずどんなものか」も。

最初に書いておきますが、手順さえはっきりわかればPhoneGapのセットアップは超簡単です。


いろいろゴチャゴチャ書いてますので、急いでる人は、PhoneGapをダウンロードしてココからでも。

Cordova(PhoneGap) とPhoneGap Buildの違い

Cordova、PhoneGap、PhoneGap Buildと似たものがいろいろあって、ここをまず整理したいところですね。アドビのサイトでは、

PhoneGap、Cordovaについては、

Apache Cordovaについて
2011年より PhoneGap のソースコードは、Apache 財団に寄贈され Apache Cordova のプロジェクト名で管理されています。PhoneGapは、アドビが提供する Cordova ディストリビューションとなります。

とか、PhoneGap Buildについては、

PhoneGap Buildの主な特徴
通常、PhoneGapを使用してモバイルアプリケーション開発を行う際には、各モバイルOS用の開発準備(開発キットや開発環境、及びそれらの設定)が必要になります。
しかし、PhoneGap Build サービスではクラウド上に全て準備されているため、HTML、CSS、JavaScript を作成して PhoneGap Build にアップロードするだけでモバイルアプリケーション開発が完了します。

と書かれています。少しわかりやすく書くと

買収のときにPhoneGapのソースを非営利団体のApache財団に渡し「Cordova」と呼ぶようになり、アドビがそれを整理して配布する際にだけ「PhoneGap」と呼ぶ。今(2012年10月)のところCordovaとPhoneGapの中身に違いはない。
そして、そのPhoneGapを利用すればいろんなサービスに展開できるわけだが、そのひとつとしてアドビがクラウド上でモバイルアプリを作れるようにしたサービスが「PhoneGap Build」。

って感じ。もっとわかりやすくすると

こんなもんですね。
(人参ジュースは味見の1杯だけ無料。何杯も作りたくなったら有償プランかCreative Cloudに入ってね、てな感じ。)

1時間くらい時間ある人は、昨日の本家轟さん解説のセッションをご覧ください。Cordovaについては22分36秒あたり。

PhoneGapの入手

いろいろ試しましたが、やはりPhonegap.comからzipをダウンロードするのがよさそうです。
http://phonegap.com/download

※PhoneGapはインストールしたりする事はなく、zipを解凍したらそれだけでOKです。その後は、コマンドラインでXcode用のテンプレートを作ります。

ここでは、このMEMOを書いてる時点での最新版「2.1.0」で試します。
バージョンによってセットアップ方法も変わってくる可能性もあるので要注意です。特に、2.0より前のバージョンでは、インストーラ(pkg)によってテンプレートをXcodeにインストールし、手動でwwwフォルダを登録するといった方法でした。この方法は2.0以降なくなり、コマンドラインを使います。この変更がまだアップデートされていない記事なども多く、現時点では数多くのものが古い情報になっています。
Adobe ADCの「XcodeとPhoneGapでiOSアプリケーションを開発する」ですら、すでに古いです。

GitHubを使う

GitHubを使ってPhoneGapやPhoneGap Pluginsを入手する事もできます。(が、PhoneGapの方はなぜかセットアップ時にエラーが起きたりしたので、やはり上記zipからセットアップするのがいいと思います。同じバージョンのはずなのですが。)

  1. https://github.comに行って「Plans, pricing and Signup」を選択し、「Free for open source ($0)」で「Create a free account」でアカウントを作りましょう。Publicなレポジトリを作成したり、共同作業のスタッフとして作業するなら無料でいくらでも使えます。

  2. 続いて、「GitHub for Mac」もインストールしときましょう。
  3. まずは、PhoneGap。
    access core functions on Android, iPhone and Blackberry using JavaScript - GitHub - phonegap/phonegap: access core functions on Android, iPhone and Blackberry u...
  4. サインインしている状態で「Clone in Mac」を選択すると、GitHub for Macが起動して、ローカルフォルダを選択するようになります。以下のようにcloneを設定しておくフォルダを決めておくといいと思います。(ローカルフォルダは当然任意の場所でOKです)
    例)/Users/tshiraishi/git/phonegap
  5. 続いて、プラグインも。ChildBrowserもこちらに含まれています。こちらもGitHub for Macのローカルフォルダを以下のように。「phonegap」フォルダに「phonegap」と「phonegap-plugins」がある状態になります。
    例)/Users/tshiraishi/git/phonegap
    (DEPRECATED) Plugins for use with PhoneGap. . Contribute to phonegap/phonegap-plugins development by creating an account on GitHub.

同期が完了すると、指定したローカルフォルダにクローンが作成され、入手完了。

Xcodeを準備

Xcodeは こちら で入手できます。最終的なアプリ作成に必要な証明書やプロビジョニングプロファイルの準備については、以下のMEMOを。

PhoneGap用のXcodeプロジェクトを作成

PhoneGap2.0以降は、ターミナルを使ってPhoneGapを開始するためのXcode用プロジェクトファイルを作成します。

また、例として以下のプロジェクトを作成します。それぞれ任意です。

作成するプロジェクトの場所:
/Users/tshiraishi/Documents/_Xcode/CheerMeUpGapX3
パッケージ名:
com.mushikago.CheerMeUpGapX3
プロジェクト名:
CheerMeUpGapX3
  1. アプリケーション>ユーティリティ>ターミナルを起動します。
  2. ダウンロードして解凍したPhoneGapの「lib/ios/bin」を開きます。以下のような場所にあると思います。
    /Users/tshiraishi/Downloads/phonegap-phonegap-26d211b/lib/ios/bin
  3. 「bin」の中にある「create」をターミナルにドラッグ&ドロップします。
  4. createの後は、「create {作成するプロジェクトの場所} {パッケージ名} {プロジェクト名}」(それぞれのパラメータは半角スペースをあける)となるように入力して、Enterキーを押します。
    例では
    /Users/tshiraishi/Downloads/phonegap-phonegap-26d211b/lib/ios/bin/create /Users/tshiraishi/Documents/_Xcode/CheerMeUpGapX3 com.mushikago.CheerMeUpGapX3 CheerMeUpGapX3

    /Users/tshiraishi/Downloads/phonegap-phonegap-26d211b/lib/ios/bin/create /Users/tshiraishi/Documents/_Xcode/CheerMeUpGapX3 com.mushikago.CheerMeUpGapX3 CheerMeUpGapX3
    

    となると思います。

以上です。「作成するプロジェクトの場所」を開いてみると、指定したパラメータの情報でPhoneGap用のXcodeプロジェクトが作成されています。

いきなりビルドしてみる

作成された「{プロジェクト名}.xcodeproj」をXcodeで起動し、「iPhone5.1 Simulator」でそのまま何も変更せず「Run」してみます。シミュレータが起動し、「APACHE CORDOVA DEVICE IS READY」と画面に出たら成功です。(シミュレータ選択時に、その左横がプロジェクト名になっている事を確認。「CordovaLib」の方が選ばれているとシミュレータが起動せず確認できませんので注意。)

いくつか警告が出ますが、バグ報告もされているようなので気にせずに。

あとは、「www」フォルダの中のindex.htmlを自由に作成するだけです。

シミュレータを使ってカメラロールなどにもアクセスできるし、プレビューも速いしで、PhoneGap Buildよりは高速に開発できると思います。

プラグインのひとつ、ChildBrowserをセットアップしてみる

「ChildBrowser」と組み込むと、PhoneGapアプリの中に小さなブラウザを持つ事ができるようになり、アプリ内でWebページを閲覧できるようになります。

  1. 上記(GitHubのところ)の手順やzipをダウンロードして入手した「phonegap-plugins>iOS>ChildBrowser」がプラグインファイルです。
  2. 以下のファイルをXcodeプロジェクトの「Plugins」にドラッグ&ドロップします。
    ChildBrowser.bundle
    ChildBrowserCommand.h
    ChildBrowserCommand.m
    ChildBrowserViewController.h
    ChildBrowserViewController.m
    ChildBrowserViewController.xib
  3. ファイルをプロジェクト内にコピーするか聞かれるので、「Copy items〜」にチェックして「Finish」しときます。
  4. 「Resources」の中の「Cordova.plist」を開いて、「Plugins」に値を追加し、keyとvalueともに「ChildBrowserCommand」と入れ、「ExternalHosts」にも値を追加し、keyが「item 0」というvalueに「*」を入れておきます。値を追加する際は、三角マークを下向きにして「+」を押すように。
  5. 「phonegap-plugins>iOS>ChildBrowser」の中に「ChildBrowser.js」という便利なJSがついてきているので、これをファインダーで「www」フォルダの中にコピーします。(「www」フォルダをファインダーで開く時は「www」をCtrl+クリックで開いた「show in Finder」が便利。)
  6. 「index.html」のbodyを
    <body onload="onBodyLoad()">
    

    にし、body内に以下を追加します。

    
    
    
    

    bodyはこうなると思います。

        <body onload="onBodyLoad()">
            <div class="app">
                <h1>Apache Cordova</h1>
                <div id="deviceready" class="blink">
                    <p class="event listening">Connecting to Device</p>
                    <p class="event received">Device is Ready</p>
                </div>
            </div>
            <script type="text/javascript" src="cordova-2.1.0.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript">
                app.initialize();
            </script>
            <!-- Child Browser -->
            <script src="ChildBrowser.js"></script>
            <script type="text/javascript">
                
                function onBodyLoad(){
                    document.addEventListener('deviceready', function() {
                                              // device ready
                                              window.plugins.childBrowser.showWebPage("http://google.com");
                                              }, false);
                }
                
                </script>
        </body>
    
  7. これでRunを押してシミュレータで確認しようとすると、場合よってはエラーが発生します。
  8. 「Fix-it」をダブルクリックして「UIInterfaceOrientationMaskPortrait」を「UIInterfaceOrientationPortrait」に書き換えてもう一度「Run」を押してシミュレータで確認。

起動直後にChildBrowserによってGoogleのページが開いたら成功です。

あとは、wwwをいかに作るかですね。次回は、その辺をやってみます。

コメント

  1. […] Cordova(PhoneGap) とりあえずどんなものかAdobe PhoneGap Build とりあえずどんなものかFlashPro+ANE+アプリ内課金のスライド(slideshareはじめました)AIR for iOS : アプリ内課金(In-App Purchase)のネイテ […]

  2. […] を実装するためにやむを得ずCordovaのプロジェクトへ切り替えました。つまり、Xcode内のブラウザでSencha Touchを使う感じです。Cordovaについては、Cordova(PhoneGap) とりあえずどんなものかを。 […]