Technical Works

ASC Technical support site

*

ハイブリッドアプリの開発について(4)

   

AndroidのCordovaを使用したネイティブアプリ開発について第3回を終えて、まがりなりにもAndroid実機で稼動することが出来たと思います。解決できない場合はWeb検索で「Cordova 開発」または「PhoneGap 開発」で調べてください。(ただし、ページにより投稿した時期違いで各種ツールのバージョンが異なりますので記載内容には注意が必要です。私の記載内容は2014年10月時点の最新情報で稼動確認も行っています。)

1.前回の記事で訂正と解説不足を追加します。

(1)Mapサンプルソースの修正

「Geolocation取得」の関数が「watch」になっていましたので、アプリが終了してもAndroidのGPS機能が残っていました。
navigator.geolocation.watchPosition(…

navigator.geolocation.getCurrentPosition(…

(2)実機でのテスト(runコマンド)でのエラー

実機に前回runのapkがある場合buildエラーになる。
・回避方法1(実機でapkをアンインストールする)
設定→アプリケーション管理→アプリ選択→削除→OKでアンインストールされます。
・回避方法2(APKに署名をつける。runの場合はリプレースされ、署名なしが事前にある場合は削除すること)
(a)キーストアandroid.keystore(署名)を作成
C:\>cd c:\Android\gmap
C:\Android\gmap>keytool -genkey -v -keystore gmap.keystore -alias gmap -keyalg RSA -keysize 2048 -validity 10000
(注)パスワードを2回入力します。
(b)platforms/android/local.propertiesに以下の内容を確認する。
key.store = C:/Android/gmap/gmap.keystore
key.alias = gmap
(c)実際に署名されたapkを得るには–releaseフラグを付けてビルドする
(注)上記パスワードとaliasを入力します(keystoreが変わらなければ初回だけ)
C:\Android\gmap>cordova build –release
(d)これで署名されたapkがplatforms/android/ant-buildディレクトリの中にできる。

(3)CordovaとEclipseとのソース関係

・基本のソースはプロジェクト直下の「wwwフォルダー」の内容を修正する。
・Cordovaコマンド(特にprepare)を実行すると「プロジェクト¥platforms\android\assets\www」にコピーされる。
・Eclipse実行時は「プロジェクト\platforms\android\assets\www」が参照されます。
(修正をした場合はプロジェクト直下のwwwフォルダーに逆コピーをしておく事)

(4)Eclipseの日本語化

(私はあまり薦めません。この位の英語は理解できないと開発は無理です)
URL:http://mergedoc.sourceforge.jp/
「Eclipse 4.2 Juno」→「Platform(64bit/Standard Edition)」 (今回Andrroid SDK添付のEclipsはJunoでした)
ダウンロード&解凍&コピー(解凍フォルダー\pleiades\eclipseをC:\Android\SDK\eclipseに全て上書きする)

2.Cordovaでのデバッグ

(1)パフォーマンスに関する注意事項

・IncludeするJavascriptは「www\jsフォルダー」に事前にアンロードしておく。(jQueryの場合はmini付き(コメント削除済み)を使用する)
・jQueryのUIを使用して1HTMLで作成し、画面遷移時にHTML、Javascriptを読込まない。
ページ定義方法
<div id=”index” data-role=”page” >
: 最初のページ定義
</div>
<div id=”page1″ data-role=”page” >
: 次のページ定義
</div>
ページ遷移方法
href=”#ページroleのid”で遷移
戻るボタンによる遷移(back-btnを追加して遷移)

(2)clickイベント対応

スマホの場合、実際にクリックイベントが発生するまで300msほどの待機時間が発生します。
解決方法(Javascript:tapイベントで即実行)
$(‘.button’).on(‘tap’, function(){
alert(‘button!’);
return false;
});

(3)Cordovaの開始

・htmlは「index.html」が最初に実行される。
・ユーザ記載のスクリプトはjQueryを使用した「おまじない」ではじめる。
$(document).ready(function(){
document.addEventListener(“deviceready”, onDeviceReady, false);
});
onDeviceReady: function() {
//最初に実行する処理(ボタンClick等のイベント登録等)
}

(4)Cordovaの終了

スマホでは通常はアプリは完全に終了しません。(ホームボタンはバックグランドで稼動し続ける、これを完全に終了させるには手動でタスクマネージャーを起動して各々のアプリを終了させる。操作方法はOS・機種・バージョンで異なる。また手動による終了の為、ホームボタンでの終了はタイミングが取れない。保存情報がある場合は各ページの項目アクセス時に保存しておくこと)
$(“#end_btn”).click(function(){
confirmExit()
});
function confirmExit(){
navigator.notification.confirm(“アプリケーションを終了しますか?”, confirmCallback, “終了確認”, “終了,キャンセル”)
}
function confirmCallback(id){
if(1 == id){
navigator.app.exitApp();
}
}
※もちろんCordovaプラグインの「Notification」をaddし、HTMLに終了ボタン(この場合はid=”end_btn”)を追加すること。

(5)CordovaでのXSS(クロスサイトスクリプティンッグ)

config.xmlのaccess要素は、開発者の意図しない機能が実行されるのを防ぐ為に、信頼できないドメインにはアクセスしない設定があります。
(ソースで制御しないことに意味がある)
通常は(アクセス制限はなし)
<access origin=”*” />
Google Map対応で今回はaccessパラメータを以下に変更します。
<access origin=”*://*.googleapis.com/*” subdomains=”true” />
<access origin=”*://*.gstatic.com/*” subdomains=”true” />
<access origin=”*://*.google.com/*” subdomains=”true” />
<access origin=”*://*.googleusercontent.com/*” subdomains=”true” />

(6)クッキー対応

Web Storageは、ユーザーのローカル環境(ブラウザ)にデータを保存するための仕組みです。 データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことができます。(クッキーを使用しない:サーバ送受信にデータ添付しない)
・SessionStorage(URL、Key別に保存し、アプリが終了すると自動的に削除される:クッキー代替で使用する)
window.sessionStorage.setItem(key,data) 保存
window.sessionStorage.getItem(key) 読込み
window.sessionStorage.removeItem(key) 削除
window.sessionStorage.clear() 全て削除
・localStorage(Key別に永続的に保存される)
window.localStorage.setItem(key,data) 保存
window.localStorage.getItem(key) 読込み
window.localStorage.removeItem(key) Key単位の削除
window.localStorage.clear() 全て削除

(7)Rest(Representational State Transfer)によるデータ通信(Ajax/POST/JSON)

ストレートなクライアント/サーバのデータ転送プロトコルであり、Jquery.AjaxのPOSTでのJSONデータを処理することで、簡単でかつ比較的セキュリティーに強い通信です。(私の場合は端末にパスワードやロジック等を持たない方法としてMail・DBアクセスに利用してます。もちろんサーバ側はPHPで内部ロジックは隠匿されています)
端末側Javascriptのサンプル

var JSONdata = {
		value1: $("#value1").val(),
		value2: $("#value2").val()      
                };
	$.ajax({
		// 送信情報
		type : 'post',
		url : "http://xxx.domaon.xx/xxxxx/zzzzzz.php",
                data:  JSON.stringify(JSONdata),
                contentType: 'application/JSON',
                dataType : 'JSON',
                scriptCharset: 'utf-8',
                success : function(data) {
                        // 正常受信処理
                        alert("success");                                                                                                                                  
                        alert(JSON.stringify(data));
                },
                error   : function(data) {
                        // エラー受信処理
                        alert("error");                                                                                                                                  
                        alert(JSON.stringify(data));
                }
        });
(8)外部ブラウザへの遷移

(WebKitのバージョン違いによる問題:最新機能のブラウザ)
標準ブラウザのはバージョンはOSに依存しており、OSのバージョンアップしか最新機能は使えません。これに対して外部ブラウザ(Chrome、Safari等)はユーザがストアからいつでもインストールでき、常に最新のものが入手できます。しかし、CordovaはOSのWebKitにしか対応していませんのでHTML5等の新機能を利用することができません。解決方法として外部ブラウザをInAppBrowserプラグイン(windows.openでターゲットに”_system”を指定)で可能です。ただし別アプリとなる為、開始時にデータは渡せるが外部ブラウザから戻ることはできません。

(9)Cordovaのバージョン違い

Cordova 3.4から、かなり大きな仕様変更がありました。Cordovaにはコアの部分とネイティブ機能にアクセスするモジュールの部分に分かれています。これはプラグインだけで独自に進化できることと、インストール時のセキュリティ情報(「xx機能を使用しています」等)と組み込みコードを一致させます。
最新のバージョンとマニュアルは必ず確認して下さい。(機能しないプラグインは、ハマリます)

(10)OS(Android、iOS)のボタンの違いと機種別の画面サイズの違い

ハードボタンはiosは1個、Androidは3個あり操作性が異なります。このことから機能的なもの(戻りボタン等)はどちらでも同一機能にする為にアプリで実装する。またスマホの入力はソフトウェアキーボードの為、操作性が悪いのでボタンで実装する(はい・いいえ等どちらもボタン化しておく)、なお画面的には縦と横サイズがあり解像度(文字サイズ等)も異なります、この為不要な改行等が発生して意味不明になる場合もありテスト時の大きなポイントです。

(11)iOSでの開発

AppleはSDK(Xcode IDE)をiOSまたはMAC(OS X)にしか搭載を認めていない為、実際はAppleの実機またはVMWareを利用した仮想化OSでしか稼動できません。
このため、Xcode・Cordova(node.js経由)・Android SDK(Macで開発する場合)のiOS版をセットアップすれば同じソース(wwwフォルダー)で開発できます。

(12)Debug・Debug・Debug

環境の違いでの機能・操作性をOS/Cordova/jQuery/機種(画面サイズ)の違いを数多くテストしましょう。特にOSの最新バージョンでのテストは必ず行なって下さい。(本番配賦時でストアーの審査が承認されない場合があります。Appleは、2015年2月1日からすべてのAppストアへの申請は、64ビットサポートとiOS 8 SDKでのビルドが必要になると発表した。)

 - HTML5

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*

  関連記事

ハイブリッドアプリの開発について(5)

前回までで、アプリケーション開発は可能になりました。今回は完成したハイブリッドア …

ハイブリッドアプリの開発について(2)

ハイブリッドアプリの開発環境構築 ハイブリッドアプリ開発とは、HTML5を中心と …

ハイブリッドアプリの開発について(1)

現在、ASCでもハイブリッドアプリ開発としてGeneXusを推進していますが、日 …

ハイブリッドアプリの開発について(3)

Cordovaプラグインを利用した開発 前回までの説明でスマホ(Android、 …