基本のプラグインを使ってハイブリッドアプリを作ってみよう

Apache Cordovaで本格スマホアプリに挑戦しよう 第4回

端末のネットワーク状況を取得する

　続いて、端末がネットワークを利用できるかを調べるためのプラグインを紹介します。このプラグインを使うと、現在、ネットワークが使えるかどうかを知ることと、その状況が変わったときにイベントとして取得することができます。Ajaxを利用したAPIを使う場合には、実際に実行してみた結果ネットワークが利用できなことは分かりますが、事前にネットワークが使えない場合には、そのためのエラー表示などをしてあげる方が親切です。

インストール

　インストールするプラグインは、「cordova-plugin-network-information」です。インストールはリスト4のように行います。

リスト4　プラグインのインストール

$cordova plugin add cordova-plugin-network-information

プラグインの使い方

　このプラグインは、connection.typeで取得できる現在のネットワーク利用状況と、状況の変更を通知うけるイベントで構成されています。ネットワークの利用状況はconnection.typeのプロパティ（文字列型）で取得可能です。ただし、その値は表2に示す定数が定義されていますので、プログラム内でチェックをする場合にはこの定数を使って下さい。

表2　ネットワークの状況定数

定数名	説明
Connection.UNKNOWN	不明の状態
Connection.ETHERNET	有線でつながれている状態。スマホの場合にはほぼない状態です
Connection.WIFI	Wi-Fiを使ってネットワークを利用している状態
Connection.CELL_2G	2Gを使ってネットワークを利用している状態
Connection.CELL_3G	3Gを使ってネットワークを利用している状態
Connection.CELL_4G	4Gを使ってネットワークを利用している状態
Connection.CELL	これら以外のネットワークを利用している状態
Connection.NONE	ネットワークが利用できない状態

　リスト5はAngularJS内のコントローラ内でプラグインを使ったときの例です。

リスト5　オンラインの時とオフラインで処理を分ける場合の例（app/www/js/controllers/NetworkController.js）

function NetworkController($scope){

    //  （1） ネットワークの状況の取得
    $scope.type = navigator.connection.type;

    //  （2） オフライン時とオンライン時の切り分け
    if(navigator.connection.type == Connection.NONE ||
        navigator.connection.type == Connection.UNKNOWN){
        $scope.offline = true;
    }
    else{
        $scope.online = true;
    }

    // （3） オンライン時のイベント
    this.onlineListener = function(){
        console.log("online");
        $scope.$apply(function(){
            $scope.type = navigator.connection.type;
            $scope.online = true;
            $scope.offline = false;
        });
    };
    // （4） オフライン時のイベント
    this.offlineListener = function(){
        console.log("offline");
        $scope.$apply(function(){
            $scope.type = navigator.connection.type;
            $scope.offline = true;
            $scope.online = false;
        });
    };
    var that = this;
    $scope.$on('$destroy',function(){
        // （5） イベントの解除
        document.removeEventListener('online',that.onlineListener);
        document.removeEventListener('offline',that.offlineListener);
    });
    // （6） イベントの登録
    document.addEventListener('online',this.onlineListener,false);
    document.addEventListener('offline',this.offlineListener,false);
};

　（1）のようにtypeプロパティで、ネットワークの状況が取得できます。また、その値を使ってオンライン、オフラインのように判断する場合には（2）のように行います。（3）、（4）は実際にネットワークが変わったときのコールバック関数で、（5）、（6）のようにイベントの登録と解除を行います。また、イベントは変わったときに発火され、アプリ起動時や、イベント登録前の状態を知るには、（1）や（2）のようにする必要があります。

　AngularJSを知らない読者などは実際にどのような結果になるのか少々わかりにくいと思いますので、リスト6にHTMLと、そのときの実際のスマホ側に表示される結果を図1に示します。

リスト6　オンラインとオフラインの状況を表示するHTML例（app/www/views/network.html）

<div>
    <h2>ネットワーク情報</h2>
    <div class="list-group">
        <div class="list-group-item">
            <h5>connection.type</h5>
            <p>{{type}}</p>  <-- （1） $scope.typeの値を表示 -->
        </div>
    </div>
    <!-- （2） $scope.online = trueの時に表示 -->
    <div class="alert alert-success" role="alert" ng-show="online">
        <p>オンラインです</p>
    </div>
    <!-- （3） $scope.offline = trueの時に表示 -->
    <div class="alert alert-danger" role="alert" ng-show="offline">
        <p>オフラインです</p>
    </div>
</div>

　AngularJSでは（1）のように表記することで$scope.typeの値を表示しています。このように、HTMLに変数の値を簡単に表示できます。

　また、（2）、（3）ではng-showという属性で値がtrueの時にはそのときのDOM要素が表示されます。

　これで、online時とoffline時で表示を切り替えています。

　ここではAngularJSの使い方の説明ではありませんのでもっと詳しく知りたい方は、こちらを参照して頂ければこれらの使い方がより理解できると思います。

図1　ネットワーク状況のプラグインでの実行例