2012年07月26日

PhoneGap:Buildでビルドしてみた

どうもGoogle先生に聞いてみてもイマイチXcode4.3からPhoneGapのビルドの方法がわからなかったので、まだβ版らしいですが、PhoneGap Buildを使ってみました。
htmlファイル1個から各デバイス用のファイルをビルドできる優れものです。
対応デバイスは、iOS(ipa形式) , Android(apk形式) , WindowsPhone(xap形式) , BlackBerry(OTAのみ?), webOS(ipk形式) , symbian(wgz形式)になりますが、ビルドにあたって必要なファイルなどが不足している場合は出力できません。
(例えば、iOSのipa形式でビルドするには証明書である.p12ファイルと対応デバイスが記されたプロビジョニングファイルが必要になります。)
また、この管理画面からOTA(over the air)用のアドレスも出力してくれるので、他の開発者にビルドしたものを実機で確認してほしい、なんてことも簡単にできます。

まず、トップページ(http://build.phonegap.com/)にいくと、Sign inとRegisterのボタンが用意されています。
phonegap1.jpg


PhoneGapのアカウントを持っていないから・・・とRegisterに向かうのはちょっと待って。
AdobeIDでのログインの他にGithubにアカウントを持っていればアカウントをリンクさせて使用することができます。
これは、ログインしたあとでわかりますが、ビルドするソース元に関して、Githubを指定することができるためです。
どちらのアカウントも持っていない場合、Registerに進んでアカウントを取得しましょう。

ログインするとこんな画面になります。
phonegap2.jpg


おそらく、Githubのアカウントを持っている人は少ないんじゃないかなということで、今回はGithubに関する説明は端折りますが、興味ある方はGithubでもチャレンジしてみてください。
Githubをソースにしてビルドする場合は、有料プランでないとprivateなソースにはできないので誰にもソースを見せたくない、という場合はお金を払うかGithubでのビルドはあきらめる、ということになります。

で、ログイン直後の画面に戻りますが、「Your app name」にアプリの名前を入力します。
他のデバイスはわかりませんが、iPhoneではここの入力名がそのままiPhoneに表示されるアプリ名になります。
enable debuggingとmake app privateはそれぞれ該当にチェック。
ここを変えたらどうなるかよくわかりません。
またまたiPhoneに関して言えば・・・の話になりますが、プロビジョニングファイルに関してもdevelop版かどうかの選択がありますので、それにあわせて・・・ということでしょうか。
この後、アプリを公開する予定ですのでわかりましたらまたレポートします。
とりあえず、まだテスト段階の場合はデフォルトのままenable debuggingはチェックなし、make app privateはチェック付きでいいと思います。

次に、ソースをどのような方法にするか選びます。
create a new git repository・・・新しいGitのリポジトリを作成する
pull from a git/svn repo url・・・すでにgitやsvnのリポジトリがある場合、選択
upload an archive or index.html file・・・zipでまとめたファイル群かindex.htmlファイルをアップロードする

gitってなに?svn??ってかたは、迷わず最後のupload〜を選びましょう。
gitに関して言えば、ログインのときにもでてきたように、Githubも指定できます。
jQuerymobile+html5+CSS3あたりでWebアプリを作った〜ビルドして実機で確かめたい〜なんて場合は、あまりファイル量も膨大になっていないと思いますので、アップロードで十分だと思います。

upload an archive or index.html fileをクリックすると、ファイル選択のボタンがでてきます。
ここで、アップロードするファイルを指定します。
で、先ほどのようにjQuerymobile+html5+CSS3あたりでWebアプリを作った・・・いや、そうでない場合もですが、大抵は関係するファイルも含めてファイル群になるかと思いますので、そういう場合はフォルダごとまとめてzipに圧縮します。
詳しいオプションは不明ですが、普通にzip圧縮してビルドできました。
もちろん、ファイル構造とかそのまま保ったままにしてくださいね。

で、「create」ボタンをクリックすると、画面ががらりとかわります。
はじめはこんな感じですが・・・
phonegap3.jpg


時間が経つと、おそらくアップロードしたファイルが処理されるまでのタイムラグがあるのだと思いますが
phonegap4.jpg


こうなります。
青いボタンはそのまま出力可能、オレンジはちょっと足りないもんがあるよ、赤は対応してません。ってことみたいです。
青以外の、問題の発生しているボタンにカーソルをあわせると、どのような問題が発生しているか確認できます。

で、iOSの場合は、はじめには書きましたがp12ファイルとプロビジョニングファイルが必要になります。
それぞれの取得の仕方は別のサイトに詳しく載っているのでここでは端折りますが、この2つのファイルを登録する必要があります。

右上の鍵のマークとPRIVATEと書かれている部分(となりのADMINでも飛び先が一緒なような・・・)をクリックすると、登録したアプリの編集を行うことができます。
さらに右上のEDITと書かれたボタンをクリックします。
phonegap5.jpg

左側に
Setting
Details
Signing
Collaborators
というメニューが並んでいます。
ここでアプリの全体的な設定等登録することが可能です。
phonegap6.jpg


Details
ここでは、アプリの外観や概要などの設定ができるようです。
phonegap7.jpg

アイコンファイル(PNG)、先ほど決めたアプリのタイトル、アプリのversion、PhoneGapの対応バージョン、アプリの説明などを登録します。
Xcodeのように、ランドスケールの際の動作設定やスプラッシュ画像の設定など登録はありません。
ちなみに、ですが、またまたiPhoneの場合ですが、ランドスケールには対応するようです。逆に、ランドスケールの場合でも画面を回したくない、という設定はできないようです。
現状ではPhoneGapBuildを使ってビルドする場合はランドスケールも考慮しなければいけないということになりますね。

Signing
ここで、ビルドに必要なファイルなどがある場合は登録します。
phonegap8.jpg

先ほどでてきたiOSの証明書とプロビジョニングファイルを登録してみます。
Android,iOS,Blackberryがありますので、iOSの右側の「Select a Key」をクリックし、「add a key...」を選びます。
「iOS Certificate and Provisioning Profile Pair」という画面が開きますので、各項目を入力して行きます。

title
ここでいうタイトルは、証明書とプロビジョニングのセットになっているものをまとめたグループ名という位置づけです。何か、検証するグループが決まっている場合など、わかりやすいように名前をつけておくといいかもしれないですね。

certificate (p12) file
いわゆるp12ファイルをここで選びます。

provisioning profile
プロビジョニングファイルを指定します。

certificate password
p12ファイルを作成したときに登録したパスワードを入力します。

phonegap9.jpg


ここがよくわかんないですが、createを押すと、profile画面に飛ばされます。
一度グローバルナビにあるAppsから戻り、もう一度同じ手順を踏んでSigning画面にいきましょう。
iOSの横の「Select a Key」をクリックしたときに、先ほど登録したtitle名が表示されると思いますので、それを選択し、「Update code」をクリックします。

phonegap10.jpg


もう一度ソースファイルをアップロードするように指示されるので、ファイルを選択してzipもしくはhtmlファイルをアップします。

しばらく待つと・・・
phonegap11.jpg


ハイ、今度はiOSにもQRコードが表示されました。
このQRコードを実機で試したいスマホで読み取ると、インストールがはじまります。
いわゆるOTAというやつです。
アプリファイルをダウンロードしたい場合は、下に表示されているDownloadボタンをクリックするとダウンロードが始まります。
アプリの申請にはまたちょっとオプションなど別な手順が必要かもしれませんが、それはまたおいおいレポートしていきます。

とりあえず、駆け足になりましたが、PhoneGapBuildの一通りの使い方の説明でした。

posted by BigMoonEz at 12:37 | Comment(0) | TrackBack(1) | PhoneGap | このブログの読者になる | 更新情報をチェックする