2012年10月04日

jQuryMobileとPhoneGapを使ったiPhoneアプリ制作ノウハウ

最近立て続けにPhoneGapを使ってHTML5をiPhoneアプリ化したので、その際気づいた注意点などを載せていきたいと思います。
正直ホントかどうか再現の確認などやる気力もないので、私の環境で偶然そうなった、というだけで大丈夫な内容もあるかもしれませんがご了承ください。

其の一、ページ遷移と単体ページの混在はさせない
jQueryMobileではページ遷移をアニメーション遷移するために(ってだけの理由じゃないと思うけど)1ページで複数のページを記述できます。
しかし、このパターンと、リンク先に別ページを用意するパターンと混在させてコンパイルしたところ、リンクがうまく利かなくなる不具合が発生しました。
(結構な数のページ内リンクと、ページ外リンクの場合と思われます。)
これはHTMLベースでも再現しました。

其の弐、単体ページで複数のページを用意する場合は、ページ遷移時にトランジションをつける
トランジションというのは、リンクタグに data-transition="***"と属性をつけることで、次のページへアニメーションして遷移することです。
其の一で出てきたように、JQMでは1つのHTMLファイルに複数のページを設定できますが、リンクして移動させる場合にトランジションをつけないとなぜか2回、パッパッっと切り替わるような変な表示をしたのでトランジションをつけて誤摩化しました。

正直、PhoneGapで・・・というと語弊があるか、HTML5でネイティブ同様のまともなアプリは作れません。(jQueryMobileのせいかもしれませんが)
※ここでいうまともなアプリとは「コンパイルして実機上で動くアプリ」という意味。
せいぜい、リストで遷移する程度のアプリが作れると考えたほうがいいでしょう。
iPhone4+iOS5ベースでは処理速度も遅く、たった2ページを遷移するアプリのトランジションでも
「くるりとまわって」「1回画面が真っ白になって」「またくるりとまわって」次の画面がでてくる
みたいな表示になっていました。
iPhone5+iOS6ではやっとまともな表示ができるようになりました。

其の参、iframeは使えない
これは検証が必要と考えていますが、何回か試したところ、アプリ内で別サイトの表示をさせるためにiframeを使用すると、そのページを開いた途端にsafariが起動して該当URLにリンクされてしまいます。
いま、代替え案を検討中ですが、AJAXでの制御が可能であればあるいは・・・と考えていますがクロスドメインの問題もあり一筋縄ではいかない模様。
posted by BigMoonEz at 15:59 | Comment(0) | TrackBack(0) | PhoneGap | このブログの読者になる | 更新情報をチェックする

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 | このブログの読者になる | 更新情報をチェックする

2012年01月31日

PhoneGap1.3では「www」フォルダがなくなっている!

タイトルの通りなんですが、PhoneGap1.3では「www」フォルダがなくなっているのでどうやって追加すればいいのか悩みました。
ソースに追加してもビルド時に「www/index.html」が見つからない、とエラーが表示されます。
結論から言うと、wwwフォルダごとプロジェクトにドロップすればOKです。
ドロップの際に、出るメッセージの「Create folder references for any added folders」を選択してください。
ss.jpg
図のように、「www」フォルダが青くなればビルド時にエラーはでなくなります。

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