LoginSignup
23
19

More than 5 years have passed since last update.

@CyberMerginainIoTLT

Cordova(Phonegap)でのwebviewアプリ実装

Last updated at Posted at 2014-07-30
自分なりのまとめです。（そして絶賛追記中）
参考にしていただければ幸いですが、参考にして不具合等が起きた場合、保障はできませんのであしからず。
間違い等あればご教授いただけると助かります。

■ Node.jsのインストール

　1. http://nodejs.org のINSTALLからダウンロード
　　(PCに合ったものがダウンロードできる)
　2. 特に何も考えずインストール
　3. 念の為にパスが通ってるかコマンドプロンプトで npm -v で確認。

■ Cordovaのインストール

　1. コマンドプロンプトを立ち上げる。
　2. npm install -g cordova を打ち込む
　3. 念の為にパスが通ってるかコマンドプロンプトで cordova -v で確認。

■ AndroidSDKのインストール

　1. http://developer.android.com/sdk/index.html のDownload ths SDKからダウンロード
　2. ふつーにインストール。
　3. 環境変数に追加。
　　変数名：Path、値：インストール先\sdk\tools;インストール先\sdk\platform-tools
　4. 念の為にパスが通ってるかコマンドプロンプトで 、android-v と adb version で確認。

＊自分はここで以下のエラー文が出ました。
　　ERROR: No suitable Java found. In order to properly use the Android Developer
Tools, you need a suitable version of Java JDK installed on your system.
We recommend that you install the JDK version of JavaSE, available here:
http://www.oracle.com/technetwork/java/javase/downloads
If you already have Java installed, you can define the JAVA_HOME environment
variable in Control Panel / System / Avanced System Settings to point to the
JDK folder.
You can find the complete Android SDK requirements here:
http://developer.android.com/sdk/requirements.html

1.Javaの開発環境は構築していなかったので、JavaSDKを http://www.oracle.com/technetwork/java/javase/downloads/index.html からインストール。
2.anrdoid -h のコマンドは通るようになりましたが、パスあってるのに adb version が通らない・・・。
3.環境変数はPC再起動しないと反映されないことがあるって聞いていたのでPC再起動したらちゃんと通りました^^

■ プロジェクトのビルド

　1. hogeというプロジェクトを生成
　　cordova create hoge com.example.hoge Hoge -d

■ プラットフォームの追加

　プロジェクトのディレクトリに移動しておく。
　　cd Hoge
　1. Android向けのアプリを作成するので
　　cordova platform add android
　2. IPhone向けのアプリも作成するので
　　cordova platform add ios
　※Macでしか動かせないのでこれはあとで・・・

＊はい、またしてもエラー。
　apache ant が無いですよという内容のエラーでした。
　1.http://ant.apache.org/bindownload.cgi の「Current Release of Ant」からzip形式をダウンロード。
　2.Cドライブ直下に解凍して環境変数に追記
　　「変数名：Path、値：C:\apache-ant-1.9.4\bin」
「変数名：ANT_HOME、値：C:\apache-ant-1.9.4」
「変数名：JAVA_HOME、値：C:\Program Files\Java\jre8」

　※Lhaplusで解凍するとエラーが出力されてうまく動かなかったのでWinRARで「壊れたファイルを残す」にチェックして解凍。WinRARはシェアウェアだけど、評価版があるから何とかなった。
　※ここもPC再起動しないと反映されなかった。

＊エラー Part2
　ant -versionを実行した時にjre8/lib/にtools.jarがありませんといった内容でした。
　jdk1.8.0_05/libにあるtools.jarをコピペして大急処置。

■ ビルド

  1. cordova build でビルド(コンパイルするってことかな？)

■ エミュレート

　1. cordova emulate android [-d|ログ表示]
　しばらくするとエミュレータが立ち上がります。

やっとスタート位置・・・。ここまで総じて12時間位・・・。

参考サイト
[Cordova] Windows7にCordova (PhoneGap) の環境を構築する
phonegapの開発の流れを勉強してみた
Cordovaを用いた開発環境を構築する
ありがとうございました！！

■ WEBサイト表示まで
　さてさてさっそく編集対象のファイルはどこぞ・・・
　hoge/www/index.html
　buildしたときとかにandroidやiosのindex.htmlにコピーされるっぽい。(マージなのかはわからんが・・・)
　1. プラグイン追加
　　ここのサイト様を参考にしてInAppBrowserとConnectionとFile(ファイルストレージの方)

hoge/www/index.html
<script type="text/javascript">
// ここで読み込み(テストとしてまずはGoogle検索を表示させる)
var ref = window.open("http://www.google.com", '_blank', 'location=yes');;
</script>
......
<body>
<h1>Hello World</h1><!-- // 分かりやすいように、今はこれだけ書いておく -->
</body>

　Android側のWEBサイトの表示はこの一文だけでうまくいった。

　iPhoneがうまくいかず色々と試したところ、

hoge/www/index.html
<script type="text/javascript">
// ここで読み込み(テストとしてまずはGoogle検索を表示させる)
var ref = window.open("http://www.google.com", '_self', 'location=yes');;
</script>

_blank を _self に書き換えることで無事成功！
>>Monaca Docs に分かりやすく違いが載っています。

私的にはそれでOKなのでこれで解決。※1
※Vasic認証が掛かっているとアクセスできないので気を付けること。

※1：後々Androidのみref.addEventListenerを使おうとしたのですが、レスが無い！！ _self を _blank に戻すと使えるようになりました。MonacaDocsによるとCordova WebViewを使っているんでしょうけど、何故addEventListenerが使えないのでしょうか。。ひとまずAndroid側は _blank にしておきます。

参考サイト
連載：初めての PhoneGap 第7回 端末に合わせた設定を追加する

■ アプリ

＊Andoid側

　　cordova build [プラットフォーム]でhoge/platforms/[android|ios]/ant-build/ 以下に生成される。
　　Google Playに公開するには署名が必要になるので、署名を設定しcordova build android --release しないとだめ。

＊iPhone側

　※事前にiPhoneをUSBポートでつないでおく。
　1.　open platoforms/ios/HelloWorld.xcodeprojで、xcode上でプロジェクトを開く。
　2.　実機をUSBポートで接続し、xcode上部の hoge>iPhone xxx> iOS 6.1 のiPhone xxxをクリック。
　　　すると、シミュレーターのリストが表示される。一番上にiOS Deviceがあればそれが実機のことなので選択
　　※ここで実機がリストに表示されない場合はコチラのサイト様を参考にしてください
　3. その左側の再生ボタンをクリックすると実機にアプリが送られる。

■ InAppBrowser×input type='file'の問題

capture=cameraが効かない(Android)

　理想はカメラが起動してほしいところだが、ファイルマネージャーしか使用するアプリの候補に出てこない。
　ソースを追ってみると platforms/android/CordovaLib/src/org/apache/cordova/CordovaChromeClient.java の openFileChooser でFileタグを押されたときの処理が書かれている。
アプリケーションの候補にカメラ系アプリ群を加えるか、capture属性の値が取れればファイルマネージャー系アプリ群とカメラ系アプリ群の表示を切り替えたい。

・・・ので、調査。
openFileChooser の第３引数である capture　にてcapture属性が取れるみたい。(詳しく調べてないので正しいのかが微妙ですが…)
これを使って以下のロジックを組み込みました。

CordovaChromeClient.java

    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture)
    {
        // カメラ起動
        if ( capture.equals("camera") ){
            Intent i = new Intent();
            i.setAction("android.media.action.IMAGE_CAPTURE");
            this.cordova.getActivity().startActivityForResult(i, FILECHOOSER_RESULTCODE);
        }
        // ファイル選択
        else{
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            this.cordova.getActivity().startActivityForResult(Intent.createChooser(i, "アプリケーションを選択"),
                    FILECHOOSER_RESULTCODE);
        }
    }

これで何とか完了です。

■ アイコン、スプラッシュウィンドウの変更

タイミング的に遅くなりましたが、アイコンの変更を行います。
参考サイト様はこちらです。

ひとまずアイコン用の画像を以下のパターン分作成します。

■アイコン
29*29、36*36、40*40、48*48、50*50、57*57、60*60、
72*72、76*76、80*80、96*96、100*100、114*114、
120*120、144*144、152*152、512*512、1024*1024
※下２つはAppStoreとGoogleStoreに提出する用に必要です。

スプラッシュスクリーン用の画像も以下のパターン分作成

(今回はとりあえずiPhone分のみ)
■スプラッシュスクリーン
320*480(縦長)、640*960(縦長)、640*1136(縦長)
768*1024(縦長)、1024*768(横長)、1536*2048(縦長)
2048*1536(横長)

作成した画像をそれぞれAndroidとiOSに置き、ビルドしなおしましたが反映されず・・・
同じ現象が他のコチラのサイト様にて報告されていました。ビルドしたときは画像まで更新しないみたいですね^^;

■ ajax通信での画像アップロード処理に時間が掛かる

　約500MB程度の画像をアップロードするのにだいたい５秒程時間が掛かり、
　約2MB程度の画像をアップロードするのにだいたい１３秒程時間が掛かりました。
　どこが遅いのかを調査してみると、Ajax通信開始～サーバー側処理開始直後間が遅く、
　約2MB程度の画像をアップロードした時はここで約９秒程掛かっていました。

　この場合、アップロードされた画像のクォリティを下げることがよさそうだと感じました。
　■ Cordovaの公式プラグインのcamera.getPictureを使用してアップロードしている場合
　　camera.getPictureの第三引数にqualityを指定できる。(50にしているサイトが多かったです。)

　■ input[type=File]を使用している場合
　　実践したことは有りませんが、Canvasを使用してファイルサイズが下がるように画像を再描画するという方法がありました。
　　参考サイト様：画像アップロード前にクライアント側で縮小してプレビューし、アップロード
　

■ iPhone5 iOS7(au)でステータスバーが透過される

　iPhone5のみかはわかりませんが、iOS7のauで起こった現象です。
　仕様の様ですが、ステータスバーを削除する設定をxcodeで追加しました。
　参考サイト様

　objective-Cのロジックを直接書き換える方法や、
　Cordovaプラグインで設定する方法もありました。

　Androidもついでにステータスバーを非表示にするようにするため、一行追加。
　もしかしたらiPhoneの方もこれだけでいけたかも。後日検証してみます。

config.xml
  .......
    <preference name="Fullscreen" value="true" /> # これを追加
</widget>

...

23
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
23
19