Monacaアプリでモバイル端末のIPアドレスを取得する

9439 ワード
monaca Cordova Cordova テキストリンク

はじめに

MonacaアプリでIPアドレスを画面のアプリに表示します。

実装にあたって

cordovaプラグインcordova-plugin-networkinterfaceを使用すると以下の情報を取得可能です。

  • WiFiに割り当てられたIPアドレス
  • キャリアから割り当てられたIPアドレス
  • プロキシ情報

しかしながら、このプラグインではどうやら ルーターの外側のアドレス をこのプラグインでは取得することができないようです。
そのため、ipifyというFreeのAPIサービスを利用して、 ルーターの外側のアドレス を取得しています。
使用中のIPアドレス表示のWebAPI版みたいなものです。

実装の手順

  1. Cordovaプラグインの設定画面から、URLhttps://github.com/salbahra/cordova-plugin-networkinterfaceを指定してインポート
  2. 表示先の画面要素を追加
  3. ソース例を参考にスクリプトを作成。

ソース例

index.html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * msnavi: data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

  <script src="components/loader.js"></script>
  <script src="components/monaca-jquery/jquery.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

</head>
<body>
  <div>
    <dl>
      <dt>IPアドレス</dt>
      <dd id="ipAddress">unknown</dd>
      <dt>WiFi IPアドレス</dt>
      <dd id="wifiIpAddress">unknown</dd>
      <dt>Carrier IPアドレス</dt>
      <dd id="carrierIpAddress">unknown</dd>
      <dt>プロキシタイプ</dt>
      <dd id="proxyInfo">unknown</dd>
    </dl>
  </div>
</body>

スクリプト

プロキシ情報は配列で返ってくるので注意が必要です。

app.js
//WiFiルーター外側のIPアドレスをWebAPI経由で取得して表示
  $.ajax({
    url:"https://api.ipify.org?format=json",
    type:"GET",
    dataType:"json"
  })
  .done(function(data, textStatus, xhr){
    $("#ipAddress").text(data.ip)
  })
  //Cordovaプラグインで取得した情報を表示
  networkinterface.getWiFiIPAddress(
    function(info){ $("#wifiIpAddress").text(info.ip); }, 
    function(error){ $("#wifiIpAddress").text(error) }
  );
  networkinterface.getCarrierIPAddress(
    function(info){ $("#carrierIpAddress").text(info.ip); }, 
    function(error){ $("#carrierIpAddress").text(error) }  
  );
  networkinterface.getHttpProxyInformation( 
    "www.example.com", //apiへのルートがプロキシかを判定
    function(proxy){ $("#proxyInfo").text("Type:" + proxy[0].type + " Host:" + proxy[0].host + " Port:" + proxy[0].port); }, 
    function(error){ $("#proxyInfo").text(error) }  
  );
iOSデータベースの追加削除の作成
07.JavaScriptのDOM操作