ブラウザで位置情報を取得してみよう

【3/18～】Amazon、VMwareが語る『クラウドの未来』

連載：位置情報を使ってみよう（2）
ブラウザで位置情報を取得してみよう

新日鉄ソリューションズ
笹尾和宏
2009/6/19

PCのブラウザを利用して位置情報を取得してみよう。IPアドレスやWi-Fiの電波強度を利用した方法やGoogle MapsやJSONPの外部サービスとの連携方法も説明する

　今回は、PCのブラウザを利用して位置情報を取得するための具体的な実装方法について、ソースコードを中心に説明していきます。前半ではIPアドレスを利用した方法について、後半ではWi-Fiの電波強度を利用した方法についてそれぞれ解説します。また、Google MapsやJSONP（JSON with padding）を利用した、外部サービスとの連携についても触れます。なお、少しずつソースコードを追加する形で説明していきますので、先頭から順に読み進めてください。

IPアドレスを利用した位置情報の取得

　前回「位置情報を取得する仕組み」で触れたように、利用者のPCに割り当てられたIPアドレスから現在位置を推定できます。この方法の特徴は次のとおりです。

長所
- 特別なアプリケーションやハードウェアの追加が不要

短所
- 精度が低い
　（誤差数km以上。地域により数十km以上ずれることもある）
- モバイル接続時など、利用できない場合が多い

　従って、この方法は、「位置情報がなくても構わないが、大まかな地域情報が得られれば多少は有用」といった用途に適しています。IPアドレスを利用した位置情報の取得サービスにはさまざまなものがありますが、今回は、Google AJAX APIのgoogle.loader.ClientLocationを例に取り、IP アドレスから位置情報を取得してみましょう。このAPIでは、緯度・経度のほか、国名、都道府県名、市町村名などが取得できますので、併せて取得してみます。

1) Google AJAX Search APIキーの取得

　Google AJAX APIを利用するためには、あらかじめWebサイトのURLに対応したAPIキーを取得する必要があります。まず、以下の手順でAPIキーを取得してください。

AJAX Search APIキーへの登録のページにアクセスします。
Googleアカウントを持っていない場合には、Googleアカウント作成ページから、アカウントを取得しておきます。
利用規約を読み、「利用規約を読んだ上でこれに同意します」チェックボックスをチェックして、「使用するウェブサイトの URL」に対象となる URL を入力します。例えば、http://www.mygooglesearchssite.com/mysite を指定した場合には、
http://www. mygooglesearchssite.com/mysite/index.html
などで有効な API キーが発行されます。なお、自分のPCのみで試用する場合には、 http://localhost を指定します。
「APIキーを生成」ボタンをクリックして、キーを取得します。

図1　 Google AJAX Search API キーの取得

2) 位置情報の取得
　それでは Google APIを利用してIPアドレスから位置情報を取得してみましょう。以下に簡単なサンプルを記述しました。本ソースコードは、Internet Explorer 8、 Firefox 3.0.10での動作を確認しています。

[サンプルの実行]

図2　IPアドレスから位置情報を取得

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>IPアドレスから位置情報を取得</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=APIkey"></script>
<script type="text/javascript">
<!--
google.load("maps", "2", {"language" : "ja_JP"});

function getLocation() {
    // Google API の利用
    var cl = google.loader.ClientLocation;
    var message = "";
    if(cl !== null){
        message = "* 位置情報の取得に成功しました *";
        // HTML表示の更新
        document.getElementById("latitude").innerHTML = cl.latitude;
        document.getElementById("longitude").innerHTML = cl.longitude;
        document.getElementById("country_code").innerHTML = cl.address.country_code;
        document.getElementById("country").innerHTML = cl.address.country;
        document.getElementById("region").innerHTML = cl.address.region;
        document.getElementById("city").innerHTML = cl.address.city;
    }else{
        message = "* 位置情報の取得に失敗しました *";
    }
    document.getElementById("message").innerHTML = message;
}

google.setOnLoadCallback(getLocation); 
//-->
</script>
</head>
<body>
<h2>IPアドレスから位置情報を取得</h2>
Google APIを利用して、IPアドレスから位置情報を取得するサンプルです。<br>
APIの詳細は、 <a href="http://code.google.com/intl/ja/apis/ajax/documentation/">http://code.google.com/intl/ja/apis/ajax/documentation/</a> で確認できます。
<hr>
<div id="message">ネットワークに接続されていないか JavaScript が有効ではありません</div>
<table summary="取得した位置情報">
<tr><td>緯度:</td><td id="latitude">--</td></tr>
<tr><td>経度:</td><td id="longitude">--</td></tr>
<tr><td>ISO 3166-1 の国名コード:</td><td id="country_code">--</td></tr>
<tr><td>国名:</td><td id="country">--</td></tr>
<tr><td>各国固有の地域名:</td><td id="region">--</td></tr>
<tr><td>都市名:</td><td id="city">--</td></tr>
</table>
<hr>
</body>
</html>

　上記のソースコードの動作を確認する場合には、文字コードをUTF-8で保存してください。

　それでは、順に見ていきましょう。

8～11行目：まず、Google APIを読み込みます。「APIkey」の部分は、先ほど取得したAPIキーに置き換えてください。

<script type="text/javascript" src="http://www.google.com/jsapi?key=APIkey"></script>
<script type="text/javascript">
<!--
google.load("maps", "2", {"language" : "ja_JP"});

13～15行目： JavaScriptのコードを記述していきます。ここでは位置取得関数名を getLocation() としました。

function getLocation() {
    // Google API の利用
    var cl = google.loader.ClientLocation;

　Google APIの位置情報取得オブジェクトは、google.loader.ClientLocationで取得できます。取得できる内容は以下のとおりです。

API	取得できる情報
ClientLocation.latitude	緯度（例: 35.678）
ClientLocation.longitude	経度（例: 135.678）
ClientLocation.address.city	都市名（例: 横浜市）
ClientLocation.address.country	国名（例: Japan）
ClientLocation.address.country_code	ISO 3166-1 の国名コード（例: JP）
ClientLocation.address.region	各国固有の地域名（例: 神奈川県）

16～18行目：何らかの理由で位置情報が取得できなかった場合には、google.loader.ClientLocation の値（cl）がnullとなります。これを利用して、メッセージを切り替えるようにします。

    var message = "";
    if(cl !== null){
        message = "* 位置情報の取得に成功しました *";

19～25行目：ここでは、得られた位置情報をHTMLに反映する処理を記述しています。HTMLとはidで関連付けています。

        // HTML表示の更新
        document.getElementById("latitude").innerHTML = cl.latitude;
        document.getElementById("longitude").innerHTML = cl.longitude;
        document.getElementById("country_code").innerHTML = cl.address.country_code;
        document.getElementById("country").innerHTML = cl.address.country;
        document.getElementById("region").innerHTML = cl.address.region;
        document.getElementById("city").innerHTML = cl.address.city;

43～48行目：19～25行目の関連付けにより、位置情報が取得できると、HTMLの以下の部分にそれぞれの値が設定されます。

<tr><td>緯度:</td><td id="latitude">--</td></tr>
<tr><td>経度:</td><td id="longitude">--</td></tr>
<tr><td>ISO 3166-1 の国名コード:</td><td id="country_code">--</td></tr>
<tr><td>国名:</td><td id="country">--</td></tr>
<tr><td>各国固有の地域名:</td><td id="region">--</td></tr>
<tr><td>都市名:</td><td id="city">--</td></tr>

26～29行目：位置情報が取得できたかどうかのメッセージを設定しています。

    }else{
        message = "* 位置情報の取得に失敗しました *";
    }
    document.getElementById("message").innerHTML = message;

　41行目：29行目の処理により、下記の部分のメッセージが変更されます。

<div id="message">ネットワークに接続されていないか JavaScript が有効ではありません</div>

32行目：最後に、google.setOnLoadCallbackを利用して、Google APIの初期化が完了した後、13行目以降に記述した関数(getLocation)を呼び出すようにします。

google.setOnLoadCallback(getLocation);

　上記のように、比較的単純な処理でIPアドレスから位置情報が取得できました。

ブラウザで位置情報を取得してみよう
	IPアドレスを利用した位置情報の取得
	Wi-Fiの電波を利用した位置情報の取得
	Google Mapsとの連携
	JSONPを利用したマッシュアップ

位置情報を使ってみようバックナンバー

第1回位置情報を取得する仕組み
第2回ブラウザで位置情報を取得してみよう

「Master of IP Network総合インデックス」

ホワイトペーパー（TechTargetジャパン）

Master of IP Network フォーラム新着記事

どこまで出る？ LTEの通信速度 （2010/3/17）
　光ファイバに匹敵する通信速度を実現すると期待されているLTE。ホントにそんなに出るの？という疑問に答えます
インターネット世界の地図 （2010/2/23）
　荷物の届け先まではどの道を通っていけばいいのでしょう？それを決める「経路選択」の仕組みを説明します
Androidアプリはビジネスになるのか （2010/2/12）
　「iPhoneアプリの次はAndroid？！」NECビッグローブのAndroidアプリ販売サイト「andronavi」を通して、その可能性に迫る
知られざるLTEのネットワーク構成 （2010/1/13）
　LTEのネットワーク構成やプロトコルスタックを詳解。それぞれどんな役割を果たしているかを解説します

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

- PR -

「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！

「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！

仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用

仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用

おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！

社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

その数、なんと400台以上！グループ内
サーバの「統合管理」によるメリットは？

美人!? まあまあ？気になるいやし系!!
PV急増で「美人時計」がとった手段とは？

進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か

運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

＠IT Special ヘ

ニュース一覧へ

- PR -

お勧め求人情報

年収が落ち込んでいるのは自分だけ？
2万5000人から集めたデータをもとに、
現在のあなたの市場価値を判定

本気モードの企業がスカウト
人手不足を補う求人とはまったく違う、
優秀な人材だけが受け取れるスカウトメール

転職だって、縁とタイミングが重要
憧れの企業や職種へのキャリア・アップは、
まず「求人案件」との出会いから

JOB＠IT ヘ

ITトレメ「ビジネス基礎」シリーズ配信開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～CCNA編～

◆

TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！

◆

クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆

上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！

◆

おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！

◆

社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆

Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策

◆

もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化

◆

美人!? まあまあ？気になるいやし系!!
PV急増で「美人時計」がとった手段とは？

◆

クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」

◆

.NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？

◆

業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆

進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か

◆

運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆

【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？

◆

仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する

◆

その数、なんと400台以上！グループ内
サーバの「統合管理」によるメリットは？

＠IT Special ヘ

＠ITトップ｜Master of IP Networkフォーラムトップ｜会議室｜利用規約｜プライバシーポリシー｜サイトマップ

Copyright(c) 2000-2010 ITmedia Inc.
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。