トップページ» PhoneGap(Cordova)+HTML5開発記録（Tips集）

PhoneGap(Cordova) x HTML5 x CSS3 x JavaScriptでスマホアプリ開発記録（Tips集）

はじめに

はじめまして、プログラミング初心者のＫＮです。プログラミング初心者がPhoneGapを使ってスマホアプリを開発してみようと思いまして、ここに記録を残すことにしました。どのくらい初心者かといいますと、高校生の時にBASICでゲームを作ってベーマガに投稿したのと、大学の時に授業でCOBOLを使って帳票出力したのと、前々職でSAPのSDをカスタマイズしていたのでABAPが読める程度です。（笑）

まずは、開発環境の構築からです。（http://phonegap-fan.com/）PhoneGap Fanという日本語のコミュニティサイトがあるので、ここを参考にしました。英語は苦手なので～。（汗）

そして、Anroidの開発環境とiOSの開発環境と２つ準備しました。以下のリンク（PhoneGap Fanのサイトです。）に手順がありますので、その通りにやっていくと、色々とつまずきましたが、Hello Worldを作成して、シュミレーターと実機に対してデプロイをすることができました。

http://docs.phonegap.com/jp/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
http://docs.phonegap.com/jp/2.0.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS

色々とつまずいた点を以下に記録しました。

アイフラッグ担当：KN

2013-02-18

PhoneGapはこの時の最新版である2.4.0をダウンロードしました。（http://docs.phonegap.com/jp/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android）Getting Started with Androidサイトの指示通り開発環境の構築を進めていきました。すると、ビルド（コンパイル）の処理で、src フォルダーにあるメインの Java ファイルに以下のようなエラーが出ました。
X protected void onCreate(Bundle savedInstanceState)
X public boolean onCreateOptionsMenu(Menu menu)

protected voidをpublic voidに変更し、public boolean以下を削除して再度デプロイを実行するとエラーは解消されました。（下図）

■Androidシュミレーターへのデプロイ

そして、Androidシュミレーターにデプロイするのですが、これが相当に時間が掛かります。3分間はじっと我慢です。最初は不具合かと思って何度も止めてしまいましたが、じっと我慢していると成功しました！これポイントです（笑）

■アプリ名の変更（全角カナ）

続いて実機へのデプロイも成功しました。アプリ名はプロジェクト名に入力したテキストになりますので、今回は全角カタカナでハローワールドにしてみました。ダブルバイトでも大丈夫なようです。

アプリ名の変更はプロジェクト名の変更になりますので、後から変更すると色々と影響が出そうです。ですので、最初にアプリ名はちゃんと決めておいたほうが良さそうです。どうしても変更する場合には、プロジェクトを新規作成からしたほうが良いかもしれません。

■アイコンの変更

アイコンは後からでも簡単に変更が可能です。

上図の各フォルダにある、ic_launcher.pngを差し替えればOKです。超簡単！アイコンサイズは57x57ピクセルです。

■アプリの配布

アプリの配布はAndroidの場合は簡単です。\workspace\プロジェクト名\bin\内に拡張子が.apkのファイルが生成されていますので、スマホ端末に送れば利用できます。あとは、スマホ側でアプリのインストールを許可する設定を行います。[アプリケーション設定]で[提供元不明のアプリ]をチェックすればOKです。

アイフラッグ担当：KN

2013-02-19

iOS開発環境

PhoneGapは安定版と書かれていたので2.0.0をダウンロードしました。（http://docs.phonegap.com/jp/2.0.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS）Getting Started with iOSサイトの指示通り開発環境の構築を進めていきました。

■XCODEの起動でエラー

アプリ名に全角カナを使いたいので、プロジェクト名をハローワールドにしました。すると、createは正常にできるのですがXCODEがエラーで起動できませんでした。”ハローワールド.xcodeproj cannot be opened because the project file cannot be parsed” というメッセージが出ます。ですので、まずはプロジェクト名を英字にしてプロジェクトをcreateしました。そして、シュミレーターへのデプロイも成功しました。

■実機へのデプロイで”Code Signing Error”発生

実機へデプロイすると”Code Signing Error”が発生しました。エラー内容は、”Code Sign error: A valid provisioning profile matching the application's Identifier 'org.apache.XXXXX' could not be found” になります。これは、アップルに登録した開発者ライセンスのプロファイルと異なるために出たエラーでした。iOS Provisioning Portalで登録したプロファイルにXCODEのInfo > Bundle identiferを変更して、再度実行しました。

すると上記のエラーは解消されましたが、こんどは以下のエラーが出ました。

Undefined symbols for architecture armv7s:
"_OBJC_METACLASS_$_CDVViewController", referenced from:
_OBJC_METACLASS_$_MainViewController in MainViewController.o
"_OBJC_CLASS_$_CDVViewController", referenced from:
_OBJC_CLASS_$_MainViewController in MainViewController.o
"_OBJC_CLASS_$_CDVURLProtocol", referenced from:
objc-class-ref in AppDelegate.o
ld: symbol(s) not found for architecture armv7s
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Google先生に質問したら、これは2.2.0では発生しないとのことですので最新版の2.4.0にしました。それで再実行したら実機へのデプロイに成功しました。

■アプリ名の変更（全角カナ）

アプリ名を日本語にしようとproject nameを全角カナに変更するとやはりビルドでエラーとなってしまいます。ここは一旦宿題にして次に進むことにします。

■アイコンの変更

アイコンの変更は、XCODEで変更できます。TARGETS > Summary > App Icons を変更すればOKです。アイコンサイズは、114ｘ114ピクセルです。

■Ad Hoc配布

アプリができたので配布したいと思います。iOSの場合は、配布がAndroidよりちょいと面倒です。でも、その中でもAd Hoc配布というのが一番簡単そうでした。Google先生に質問して配布できました。

アイフラッグ担当：KN

2013-02-20

Ad Hoc配布

■iOSの配布は手続きが面倒ですので、メモを残すことにします。

まず、iOS Developer Member Centerへログインします。
https://developer.apple.com/membercenter/index.action

デバイスの登録

iOS Provisioning Portal > Devices > Add Devicesボタン押下
Device Name　Device ID 40文字のUDIDを入力して　Submitボタンを押下

アプリの登録

iOS Provisioning Portal > App IDs > New App IDボタン押下
アプリ名称とAppID（例：com.domainname.appname）を入力してSubmitボタン押下

プロビジョニングの登録

iOS Provisioning Portal > Provisioning > Distributionタグ
New Profileボタン押下
Distribution Method → Ad Hocにチェック
Profile Name → プロファイル名
App ID → 上記で登録したアプリ名
Devices → Ad Hocの対称にするデバイスにチェック Submitボタン押下
Downloadボタン押下→ダウンロードファイルをダブルクリックしてXcodeに登録
Organizerに登録されていることを確認

アーカイブ作成

次にXcodeで、
File > open でアーカイブするアプリを開く
Build Settings >　Code Signing > Code Signing Identity　で上記登録したプロビジョニングを選択
Products > Archive　でアーカイブを作成

Organizer Archives > Distribute
Save for Enterprise or Ad-Hoc Developmentにチェック > Nextボタン押下
Code Signing Identity選択し、Nextボタン押下
Save for Enterprise Distributionにチェック

以下の情報を入力します。
Apprication URL:
Title:
Subtitle:
Large Image URL:
Small Image URL:

Saveボタンを押下

ダウンロードサイトの設置

*.ipa　*.plist　の2ファイルをWEBサーバーに置き、以下のインストールサイトを設置します。

iflagdenki app install page install now

iPhone、iPadでサイトへアクセスしてインストールします。

アイフラッグ担当：KN

2013-02-25

アプリケーションキャッシュ（HTML5）

ネイティブアプリを作ったときに、アプリはデプロイしてしまうとコンテンツの内容を変更することができません。
コンテンツはWEB側に置いておいて、更新があった時だけアプリがWEB側にコンテンツを取りに来て、
コンテンツに更新が無い時やアプリがオフラインの時は、端末側にあるコンテンツを使えるようにしたいと思います。
それを実現するのが、HTML5のアプリケーションキャッシュです。

ブラウザのキャッシュは、起動すれば必ずサーバーに問い合わせにいきました。
しかし、アプリケーションキャッシュは、サーバーへの問い合わせなしでキャッシュされているデータを利用します。

アプリケーションキャッシュの利用は簡単です。
まず、.htaccessに以下の記述を追加します。これで、*.appcacheというテキストファイルを設定ファイルとして認識するようになります。
AddType text/cache-manifest .appcache

次に、sample.appcacheというテキストファイルを作成します。これが設定ファイルになります。
内容は以下になります。
001 CACHE MANIFEST
002 #VERSION 1.0
003 CACHE:
004 sample.html ・・・キャッシュするファイル
005 sample.png　・・・キャッシュするファイル
006 NETWORK:
007 キャッシュしないファイル
008 FALLBACK:
009 問題発生時に表示するページ

これで、キャッシュするファイルをHTMLとPNGと２つ指定して、それ以外は指定していない設定になりました。
002行目でバージョンを1.0にしています。このバージョンをアップするとクライアントがサーバーに更新にきます。

※sample.htmlの内容を以下にします。

001
002

003
004
005
006
007
008
009 バージョン1.0です。

010

011
012

002行目で設定ファイルを指定しています。

アイフラッグ担当：KN

2013-02-26

PhoneGap（Android）アプリケーションキャッシュ注意点

アプリケーションキャッシュをPhoneGap（Android）で使う場合は、更に注意点があることがわかりました。
単純にデプロイしても、うまく動きませんでした。

■javaファイルの編集

メインのjavaファイルにある、メインのactivityに、以下を追加します。

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.init(); // Initialize appView, since it's only initialized inside loadUrl by default
        android.webkit.WebSettings settings = super.appView.getSettings(); // get WebView settings
        String appCachePath = this.getCacheDir().getAbsolutePath(); // Set path to appcache
        settings.setAppCachePath(appCachePath);
        settings.setAllowFileAccess(true); // Let browser write files - doesn't work without this
        settings.setAppCacheEnabled(true); // Enable app cache
        super.loadUrl("file:///android_asset/www/index.html");
}

■Manifestファイルの編集

キャッシュするファイルのみならず、キャッシュしないファイルも定義します。

001 CACHE MANIFEST
002 #VERSION 1.0 
003 CACHE:
004 sample.html ・・・キャッシュするファイル
005 sample.png　・・・キャッシュするファイル
006 NETWORK:
007 キャッシュしないファイル

006行、007行です。キャッシュしないファイルも定義しないと、おかしな挙動をします。ここがポイントです。

アイフラッグ担当：KN

2013-03-01

アプリ内のハイパーリンクの注意点

すごく単純なことなんですが、重要なのでメモしておきます。アプリ内でURLを紹介する時は、ハイパーリンクはやめましょう。アプリには、ブラウザの進むボタンと戻るボタンがありませんので、２度と帰って来れなくなります(ToT)/~~~

アイフラッグ担当：KN

2013-03-04

上記、ハイパーリンクをクリックして戻ってこれなくなるのは、HTMLにsrc="./cordova-2.5.0.js"の記述が漏れていたのが原因でした。これを記述しておけば、ハイパーリンクをクリックした時にブラウザが起動しますので、戻れなくなることはありません。

アイフラッグ担当：KN

2013-05-15

開発用PC（MAC）の変更でCode sign error:Provisioning profile発生

開発用PCを変更したところ、実機へのデプロイとAdhoc配布と両方でCode sign error:Provisioning profileが発生し、リカバリに1日を費やしてしまいました。iOS Dev Centerで証明書を削除してやり直したらエラー解消できました。仕組みもあまり理解していなかったので、メモを残したいと思います。

【通常の作業手順】
１．証明書登録（Certificates）
２．デバイス割当（Devices）
３．アプリケーションID登録（Identifiers：App IDs）
４．プロビジョニングプロファイル登録（Provisioning Profiles）

１．証明書登録（Certificates）
開発用PCのキーチェーンアクセスからCSR発行（CertificateSigningRequest.certSigningRequest）⇒iOS Dev Centerの証明書登録（Certificates）を実施⇒証明書が発行されるのでDownloadボタンで証明書をダウンロード⇒ダウンロードした証明書をダブルクリックするとキーチェーンアクセスに証明書が登録される
※開発用（Development）とAdhoc配布用（Distribution）と別々に行います。

２．デバイス割当（Devices）
これは、開発用PCとDevCenを行き来することはありません。
iphoneまたはipadのUDIDをDevCenのデバイス割当（Devices）に登録するだけです。

３．アプリケーションID登録（Identifiers：App IDs）
これも、開発用PCとDevCenを行き来することはありません。
開発したアプリケーションをDevCenに登録するだけです。

４．プロビジョニングプロファイル登録（Provisioning Profiles）
これが仕上げです。ここまで登録した証明書とデバイスとアプリを紐付けます。
最後にGenerateするとプロビジョニングが生成されますので、プロビジョニングをダウンロードします。
ダウンロードしたプロビジョニングをダブルクリックするとXcodeのオーガナイザにProvisioning Profilesが登録されます。
※これも開発用（Development）とAdhoc配布用（Distribution）と別々にいます。

この状態で実機へのデプロイおよびAdhoc配布を行えば、Code sign error:Provisioning profileは発生しません。

【開発用PCを変更する場合の作業手順】
開発用PCを変更する場合は、最初の開発用PCのキーチェーンアクセスからCSR発行が異なるPCになっているのでエラーが発生するわけです。
証明書を削除して、新しいCSRの発行からやり直してください。
デバイス割当、アプリケーション登録はそのままで問題ありません。
プロビジョニングプロファイルも削除して、新しい証明書でやり直しです。

【Adhoc配布にデバイスを追加する手順】
Adhoc配布にデバイスを追加する場合は、まずは追加するデバイスのデバイス割当を実施します。
次にプロビジョニングプロファイルをEditして、プロビジョニングにデバイスを追加します。
あとは、新たにプロビジョニングプロファイルをダウンロードしてXcodeに登録し、再度XcodeでアーカイブしてipaをWEB等で配布します。

以上、文章のみですが、備忘録的に残します。

アイフラッグ担当：KN

2013-04-10

PhoneGap(Cordova) x HTML5 x CSS3 x JavaScriptでスマホアプリ開発記録（Tips集）

はじめに

Android開発環境

■ビルド（コンパイル）のエラー

■Androidシュミレーターへのデプロイ

■アプリ名の変更（全角カナ）

■アイコンの変更

■アプリの配布

iOS開発環境

■XCODEの起動でエラー

■実機へのデプロイで”Code Signing Error”発生

■アプリ名の変更（全角カナ）

■アイコンの変更

■Ad Hoc配布

Ad Hoc配布

■iOSの配布は手続きが面倒ですので、メモを残すことにします。

デバイスの登録

アプリの登録

プロビジョニングの登録

アーカイブ作成

ダウンロードサイトの設置

iflagdenki app install page install now

アプリケーションキャッシュ（HTML5）

PhoneGap（Android）アプリケーションキャッシュ注意点

■javaファイルの編集

■Manifestファイルの編集

アプリ内のハイパーリンクの注意点

開発用PC（MAC）の変更でCode sign error:Provisioning profile発生