WebView 上の HTML5 で geolocation を利用する設定

Android の WebView は、iPhone の UIWebView がデフォルト状態で標準的なブラウザと同様に動作することとは対照的に、デフォルト状態では JavaScript すら無効になっていますので、プログラム上からいろいろと有効化する必要があります。

この資料では、HTML ページを表示するためのウィジェットである WebView を利用して、 HTML5 の geolocation を利用する方法を示します。

尚、HTML5 Geolocation の利用方法については「HTML5 ジオロケーションの使い方」をみてください。

WebView 上で HTML5 geolocation を利用する方法

HTML5 の geolocation とは？

まずは geolocation とは何か、ということについて簡単に説明します。

geolocation は、その名前から想像できるように、HTML5 で標準となる地理情報の取得モジュールのことです。

携帯端末は、まさに携帯するという本質から、「今どこにいるのか？」という地理情報を取得できることで利用シーンがグッと広がります。

Facebook などの "チェックイン" 機能とか、あるいは写真を撮影した場所を記録するなど、普段から利用されている方も多いと思います。

HTML5 ではサードパーティ製の追加ソフトウェアを利用することなく、デバイスの GPS などの地理情報モジュールへアクセスできるよう geolocation というインターフェイスが定義されます。

HTML での GPS 機能 API が geolocation である、というわけです。

まずはパーミッション設定

Android マニフェストファイルでロケーションサービスの利用及び（ここでは HTML5 ということで) INTERNET の利用を指定しています。

<uses-permission
  android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission
  android:name="android.permission.INTERNET"/>

WebViewClient、WebChromeClient の設定

先にコードを示します。

package com.keicode.android.test;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.GeolocationPermissions.Callback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebViewTest1Activity extends Activity {

  WebView webView;
  
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    webView = (WebView)findViewById(R.id.webView1);
    webView.setWebViewClient(new WebViewClient(){
      @Override
      public boolean shouldOverrideUrlLoading(
        WebView view, 
        String url) {
        return false;
      }
    });
        
    webView.setWebChromeClient(new WebChromeClient(){
      @Override
      public void onGeolocationPermissionsShowPrompt(
        String origin,
        Callback callback) {
        callback.invoke(origin, true, false);
      }
    });
        
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setGeolocationEnabled(true);
      
    webView.loadUrl("http://.../");
  }

}

ここで、ポイントは次の二点です。

WebViewClient の指定: これは同じ WebView 内で HTML ページをナビゲートするために shouldOverrideUrlLoading を書いています。ここは特に geolocation に限った話ではありません。

WebChromeClient の指定と onGeolocationPermissionsShowPrompt のオーバーライド: Web ページから geolocation を通して地理情報を取得する時は、セキュリティ向上のため、その状況をユーザーに確認をとります。

このように呼び出すことで、アクセスを許可したことを JavaScript に伝えます。ユーザーのパーミッションを取得できない場合は、 geolocation は利用できません。

以上で HTML5 geolocation は利用可能のはずです。

尚、当然ながらデバイスが何らかの地理情報を取得する機能をサポートしていることは必要ですが。