PhoneGapによるiPhoneアプリ作成(NetworkStatus編)
PhoneGap日本語コミュニティ
PhoneGap Plugin
NetworkStatusの実装
iPhoneアプリの場合はアプリを立ち上げた場所でネットワーク回線がオフになっている場合とオンになっている場合で切り分けを実装しなければいけません。現在のステータスを詳細に提示し、アプリがフリーズしているのか、単なる回線の異常なのかを表示しユーザーに提示します。これを怠るとリジェクト要件にひっかかります。
*-Info.plist
<key>Pligins</key>
<dict>
<key>NetworkStatus</key>
<string>CDVConnection</string>
</dict>
plist のpluginsに宣言しておきます。
次にwwwディレクトリの起点htmlを修正します。
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>ネットワーク接続確認</title>
<link rel="stylesheet" type="text/css" href="buttonstyle.css">
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script type="text/javascript">
// onload
function locationhttp(){
document.addEventListener("deviceready", onDeviceReady, false);
}
// onDeviceReady
function onDeviceReady(){
checkConnection();
}
// PhoneGap checkConnection
function checkConnection() {
// 現状では各プラットフォーム間でのreachabilityのフォーマットに関しての一貫性はありません
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = '不明な接続';
states[Connection.ETHERNET] = 'イーサネット接続';
states[Connection.WIFI] = 'WiFi接続';
states[Connection.CELL_2G] = '2G接続';
states[Connection.CELL_3G] = '3G接続';
states[Connection.CELL_4G] = '4G接続';
states[Connection.NONE] = 'ネットワーク接続なし';
if(states[networkState] == 'ネットワーク接続なし') {
// 接続できない場合
navigator.notification.alert('コネクションタイプ' + "\n" + states[networkState], null, "ネットワーク接続不良");
}else {
// 接続できた場合
location.href = "http://hogehoge/index.php";
document.body.onload=locationhttp;
}
}
</script>
</head>
<body onload=locationhttp();>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<p>ネットワークを確認しています。<br>接続環境を確認後<br>接続チェックをタッチしてください。</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<a id="checkbutton" class="quickbutton" href="#" onclick="javascript:checkConnection();">接続チェック</a>
</td>
</tr>
</table>
</body>
</html>
こんな感じに書き込みます。
いちいちdevicereadyあたりをaddEventListenerでやっているのはPhoneGapのjsコードの読み込み待ちをしてからでないとエラーになるためです。