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


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

## ■ 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) の環境を構築する]
(http://maezono.info/2014/04/24/2555)
[phonegapの開発の流れを勉強してみた](http://inter-arteq.com/phonegapの開発の流れを勉強してみた/)
[Cordovaを用いた開発環境を構築する](http://www.buildinsider.net/mobile/bookhtml5hybrid/0401)
ありがとうございました！！

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

```lang: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がうまくいかず色々と試したところ、

```lang: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 に分かりやすく違いが載っています。](http://docs.monaca.mobi/1.0/ja/reference/phonegap_29/ja/inappbrowser/inappbrowser/#window-open)

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

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

参考サイト
[連載：初めての PhoneGap 第7回 端末に合わせた設定を追加する](http://plus.adobe-adc.jp/post-4812/)

## ■ アプリ

### ＊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があればそれが実機のことなので選択
　　※ここで実機がリストに表示されない場合は[コチラのサイト様](http://braitom.roon.io/ios)を参考にしてください
　3. その左側の再生ボタンをクリックすると実機にアプリが送られる。

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

#### capture=cameraが効かない(Android)

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


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

```lang: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);
        }
    }
```

これで何とか完了です。

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

タイミング的に遅くなりましたが、アイコンの変更を行います。
参考サイト様は[こちら](http://www.buildinsider.net/mobile/bookhtml5hybrid/0403)です。

#### ひとまずアイコン用の画像を以下のパターン分作成します。
■アイコン
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に置き、ビルドしなおしましたが反映されず・・・
同じ現象が他の[コチラ](http://skys.co.jp/archives/1406)のサイト様にて報告されていました。ビルドしたときは画像まで更新しないみたいですね^^;

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

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

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

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

## ■ iPhone5 iOS7(au)でステータスバーが透過される
　iPhone5のみかはわかりませんが、iOS7のauで起こった現象です。
　仕様の様ですが、ステータスバーを削除する設定をxcodeで追加しました。
　[参考サイト様](http://qiita.com/fuhi1983/items/b836a4405e29d861b923)

　[objective-Cのロジックを直接書き換える方法](http://d.hatena.ne.jp/Kazzz/20130923/p1)や、
　[Cordovaプラグインで設定する方法](https://github.com/apache/cordova-plugin-statusbar/blob/master/doc/ja/index.md)もありました。

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

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


...