LoginSignup
5
5

More than 5 years have passed since last update.

PhoneGapによるiPhoneアプリ作成(NetworkStatus編)

Posted at

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コードの読み込み待ちをしてからでないとエラーになるためです。

5
5
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
5
5