IBM®
本文へジャンプ
    Japan [変更]      ご利用条件
　
　
  　
     ホーム      製品      サービス & ソリューション      サポート & ダウンロード      マイアカウント     

製品別技術情報 > 

DB2とオープン･ソースを使用して地図に自分の街を追加してみよう！

「1枚の絵は1000の言葉に値する」。でも、Webブラウザーがなければ始まらない・・・
　
レベル： 中級者向け

Marty Lurie (lurie@us.ibm.com), Systems Engineer, IBM
Aron Y. Lurie (aron.lurie@gmail.com), 9th Grader/Webmaster, Newton South High School/Hebrew College
　
2006年 3月2日（木）

Google Maps API を DB2®、Informix®、PHP、JavaScript、および XML と一緒に使用すると、独自のデータを取り込んで、使いやすい地図を作成できます。自分の郵便番号に画面をズームすると、地域固有のデータが表示されます。カスタム・アイコンを使用し、地図の種類を変え、サイドバーを作成し、イベント処理機能を使用してみましょう。

地図の作成

ここ数年の爆発的な情報量の増加に伴い、こうした大容量データの処理を支援する新しいテクノロジーが数多く生み出されています。人間が大量の情報を吸収しようとするとき、ほとんどの場合グラフィカルな表現を利用すると最も効果的です。ここで使用する米国国勢調査の地理データは、従来の GIS (地理情報システム) ではなく、Google Maps を使用して視覚化できます。「google maps」を検索すると 6,900 万件以上ヒットするのに、なぜこの記事であらためて取り上げるのでしょうか。まず、この記事では PHP、Informix、DB2、および Linux の使用に焦点を絞っています。また、ここで提供するコードは弱冠 14 歳のプログラマーが書いたわかりやすいものです。(著者によるその他の記事については、「参考文献」を参照してください。)

この記事で使用する例は、国勢調査データに基づいています。検索画面には、郵便番号を入力するフォームがあります。結果ページでは、選択した郵便番号や隣接する郵便番号の地域の人口密度が、色分けされた「押しピン」で表示されます。地図はクリック・アンド・ドラッグで移動可能で、地図の左上隅にあるズーム・コントロールでは、拡大/縮小率を変更できます。

リスト 1 に、一部のデータを整理、修正した後のサンプルをいくつか表示します。リスト 2 にはデータベース・スキーマを示します。

リスト 1: サンプル・データ


                                
state         AL
zip           35004
longitude     -86.502492000000
latitude      33.6063790000000
population    6998
housingunits  2815
sqmeters      49387881

state         ME
zip           03901
longitude     -70.845590000000
latitude      43.2901600000000
population    6338
housingunits  2406
sqmeters      96091016

state         WA
zip           98001
longitude     -122.26608100000
latitude      47.3037220000000
population    25771
housingunits  9158
sqmeters      46475168

リスト 2: データベース･スキーマ


                                
Column name          Type                                    

state                char(2)   
zip                  char(5)  
longitude            decimal(16) 
latitude             decimal(16)
population           integer   
housingunits         integer  
sqmeters             int8
レベルマークについて

このページで紹介されている情報はレベル別にカテゴライズされています。

： 上級者向け
： 中級者向け
： 初級者向け
： 入門者向け

原文
DB2 and open source: Put yourself on the map with Google Maps API, DB2/Informix, and PHP on Linux（英文）

文書オプション
ページを印刷する

　
　 　 　
図 1: 初回ロード時のページ

ユーザーが郵便番号を入力すると、図 2 のような結果が表示されます。地図には、人口密度を表す色分けされたインディケーターがあります。右側のテキスト表示では、地図上に表示されている郵便番号が示されます。左上隅のズーム・コントロールでは、地図の拡大/縮小率を変更します。この情報ウィンドウには、郵便番号 02222 地区の詳細が表示されます。		 　 　
　 　 　
図 2: 郵便番号 02222 地区の検索結果ページ
　 　 　
上に戻る

アーキテクチャーの概要

では、どのような方法でデータベース表から図 1 および図 2 の検索画面と表示画面を取得すればよいのでしょうか。データ・ソースと Google Map API との組み合わせは、「マッシュアップ (mashup)」(Wikipedia.org) または Web アプリケーション・ハイブリッドと呼ばれています。図 3 にサーバー･アーキテクチャーを示します。

mashup（英語）

この概念で実に興味深いのは、さまざまなデータ･ソースがブラウザーで統合されている点です。クライアントのブラウザー上で結合されるデータ量がどの程度制限されるかによって、このアプローチが成功するかどうかが決まります。クライアント側であまりにも大量のデータを取得しようとした途端、ユーザーはネットワークの制限とクライアント・プロセッサーの速度にストレスを感じることになるでしょう。

図 3: 注釈付きマッピング・アーキテクチャー

このアーキテクチャーは非常に単純です。ブラウザーで発生した要求が Apache Web サーバーに送信されます。要求された PHP ページには HTML および JavaScript が含まれています。JavaScript は Google Map サーバーを呼び出し、結合されたページ (図 1 に表示) が表示されます。郵便番号が検索フィールドに入力されると、要求が Web サーバーに渡されます。この Web サーバーでは、PHP ODBC 接続を使用してバックエンドの Informix データベースに接続しています。

この記事のコード･サンプルでは、Informix の使用方法を示します。DB2 を構成して PHP を扱う方法については、「DB2 and open source: Web polling with DB2, PHP, and Linux(英語）」(developerWorks、2004 年 8 月) を参照してください。

ページのために要求されたデータは、データベースから取得されます。押しピンのカラー・スキームにより、色の範囲に基づいて人口密度が示されます。人口の範囲は、分布ごとに発生数が同じになるように選択されています。

アーキテクチャーの仕組みの詳細については、この記事のコードの説明とコード内のコメントを参照してください。

上に戻る

コンポーネント

Ajax/JavaScript および Google API
Google API、JavaScript、および Ajax が、アプリケーションの大部分を構成しています。Google Maps API では、1 つの Web サイトの 1 つのディレクトリーに対して専用のキーが必要です。キーを取得するには、www.google.com/apis/maps にアクセスして、「Sign up for a Google Maps API key (Google Maps API キーにサインアップする)」をクリックします。API には、Ajax HttpRequest クラスおよびイベント処理機能コントロールなど、多くの役立つ機能が備わっています。Google では API に関する充実したドキュメンテーションを提供しており、これは、 www.google.com/apis/maps/documentation/ で入手できます。ただし、Ajax は JavaScript と XML を組み合わせた頭字語に過ぎません。以下のように、Ajax を呼び出して PHP によって返される HTML を解析すると、ユーザーのブラウザーをリフレッシュする必要がなくなります。

www.google.com/apis/maps （英語）
www.google.com/apis/maps/documentation/（英語）

JavaScript と Google API はすべてのブラウザーでサポートされているわけではありませんが、Mozilla Firefox および Internet Explorer 6 などの多くのブラウザーでサポートされています。また、比較的古いブラウザーでは、使用されている CSS の一部がサポートされていないことがあります。

Apache、PHP、および ODBC
中間層サーバーでは、Web ページ、ランタイム環境、およびデータベース・アクセスを提供します。なかでも有名なのは Apache サーバーで、最近の統計によると、インターネット・サイトのほぼ 70 ％で 使用されています。Apache では、アドイン・モジュールがサポートされており、ここで使用するサーバーは、mod_php を使用して PHP のランタイム環境を提供しています。コマンド行から php コマンドを使用して php スクリプトの簡単なテストを実行できます。php コードを実行して要求側のブラウザーに送信する必要があるときに、Apache と mod_php が使用されます。

ODBC データベース・アクセスはパフォーマンスの問題を抱えていました。ODBC の初期のリリースは処理が遅かったのです。実装が大幅に改善されてからは、優れたパフォーマンスを提供するようになりました。ODBC を使用することによりシステム間での移植がきわめて容易になります。また、DB2 や Informix へのネイティブなアクセスを実現する、データベース・クライアント API 専用のライブラリーを備えています。

Informix/DB2
IBM Web サイトには、以下の製品ファミリーがあります。

  • DB2 ファミリー: 堅牢なオンデマンド・ビジネス・アプリケーションを構築するため、柔軟で費用対効果の高いデータベース・プラットフォームを提供するデータベース管理システム。

  • Informix ファミリー: トランザクションが集中する環境において優れたアプリケーション・パフォーマンスを提供します。
    (著者は長年 Informix を扱ってきたので、Informix がデータウェアハウス･システムや意思決定支援システムでも素晴らしい働きをすることを身をもって知っています）。

記事「DB2 and open source: Web polling with DB2, PHP, and Linux（英語）」には DB2 の例を多く載せているので、ここでは、Informix の例を示します。この例を DB2 で動作させるのが困難な場合は、著者の他の記事を参照してください (「参考文献」を参照)。

上に戻る

コード

このコードは、次の 3 つのページで構成されています。

  1. メイン ページ (地図があり、HTML または JavaScript でコーディングされている）
  2. 郵便番号の経度と緯度を XML として返す PHP スクリプト
  3. 地図の境界内の郵便番号に関するデータを XML として返すもう 1 つの PHP スクリプト

では、ユーザーは目にすることのない 2 つのコンポーネントである PHP スクリプトを見てみましょう。これらは、JavaScript によって呼び出され、データベースとやり取りし、XML を返します。

リスト 3: 特定の郵便番号の経度/緯度を取得する PHP コード

 　 　 

                                
<?php
header("Content-Type: text/xml");
echo"<?xml version=\"1.0\"?>";
$newloc=$_GET[location];
//connect to db2/informix database
        //connect vars
        $dbname="census";
        $username="informix";
        $password="useyourown";
        // odbc_pconnect returns 0 if the connection attempt fails
        // otherwise it returns a connection ID used by other ODBC functions
//                echo ( "attempt connect.....\n " );
        $conn = odbc_pconnect ( $dbname, $username, $password );

        if ( $conn == 0 ) {
                echo ( "Connection to database failed." );
                //If connection failed, show what the error message was:
                $sqlerror = odbc_errormsg ( $conn );
                die($sqlerror);
        }
        $sql = "select longitude,latitude,zip from census_data where zip 
          = '$newloc'";
        $locResult=odbc_exec($conn,$sql);
        $locData=odbc_fetch_object($locResult);

        echo "\n<Results>";
        if($locData->latitude !=""){
        echo "\n\t<Zip>";
        echo "\n\t\t<Latitude>$locData->latitude</Latitude>";
        echo "\n\t\t<Longitude>$locData->longitude</Longitude>";
        echo "\n\t</Zip>";}
        echo "\n</Results>";



?>
　 　 　

このコードが、census という名前の ODBC データ・ソースに接続することにお気付きになりましたか。このシステムは、Informix および unixODBC を使用して構成されています。セットアップ方法についての優れたチュートリアルが、unixODBC Web サイトにあります (「参考文献」を参照)。ただし、このスクリプトは簡単に DB2 に変換できます。「Connecting PHP applications to IBM DB2 Universal Database」(developerWorks、2001 年 7 月) では PHP とやり取りする DB2 のセットアップ方法を説明しています。

リスト 3 のコードの出力では、整然とフォーマットされた XML ソースが返されます。このソースには、Zip タグ、Results タグ内に Latitude タグおよび Longitude タグがあります。このコードでは、URL の値に基づいてデータベースを検索します。結果が見つからない場合は、Results タグの内部に Zip タグはありません。また、2 番目の PHP スクリプトでは、Results タグはより実用的な役割を持っています。

リスト 4は、郵便番号 02222 (マサチューセッツ州、ボストン) を使用したスクリプトのサンプル出力です。

リスト 4: 経度/緯度スクリプトのサンプル出力


                                
<?xml version="1.0"?>
<Results>
        <Zip>
                <Latitude>42.367797</Latitude>
                <Longitude>-71.062829</Longitude>
        </Zip>
</Results>

このスクリプトは、メイン･ページで JavaScript によってのみ呼び出されます。このスクリプトは、正しいヘッダー (header() 関数により設定) を持つ XML で返されるため、Google Maps API に組み込まれている XML パーサーで XML を構文解析することができます。（この後のリスト 6 を参照）。

　 　
リスト 5: ユーザーの画面に郵便番号に関するデータを取得する PHP コード。 


                                
<?php
header("Content-Type: text/xml");
echo"<?xml version=\"1.0\"?>";
//$newloc=$_GET[location];
//connect to db2/informix database
        //connect vars
        $dbname="census";
        $username="informix";
        $password="useyourown";
        //odbc_pconnect returns 0 if the connection attempt fails
        // otherwise it returns a connection ID used by other ODBC functions
//                echo ( "attempt connect.....\n " );
        $conn = odbc_pconnect ( $dbname, $username, $password );

        if ( $conn == 0 ) {
                echo ( "Connection to database failed." );
                //If connection failed, show what the error message was:
                $sqlerror = odbc_errormsg ( $conn );
                die($sqlerror);
        }
        $sql = "select * from census_data where longitude > '$_POST[left]' 
                and longitude < '$_POST[right]' 
                and latitude > '$_POST[bottom]' 
                and latitude <'$_POST[top]'";
        $locResult=odbc_exec($conn,$sql);
        echo "\n<Results>";
        while($locData=odbc_fetch_object($locResult))
        {
        echo "\n\t<Zip>";
        echo "\n\t\t<Code>$locData->zip</Code>";
        echo "\n\t\t<State>$locData->state</State>";
        echo "\n\t\t<Latitude>$locData->latitude</Latitude>";
        echo "\n\t\t<Longitude>$locData->longitude</Longitude>";
        echo "\n\t\t<Population>$locData->population</Population>";
        echo "\n\t\t<Housing>$locData->housingunits</Housing>";
        echo "\n\t\t<Area>$locData->sqmeters</Area>";
        echo "\n\t</Zip>";
        }
        echo "\n</Results>";



?>

このスクリプトによって返される XML は、厳密にではありませんが最初のスクリプトをベースにしています。最初のスクリプトのようにルート・タグ Results があります。ただし、通常このスクリプトでは複数の Zip タグが返されます。データ・ソースによって返されるデータの各行について、while ループがオブジェクトとしてその行を取り込み、データベースのすべてのデータを使用して Zip タグを出力します (リスト 1 参照)。

このコードの最も重要な部分は、SQL クエリーです。リスト 6 では、Ajax は GET (リスト 3 に表示) ではなく POST を使用しており、left、right、bottom、top の 4 つの変数を送信します。これらの変数は、表示される地図の経度/緯度による境界として定義されます。データベースを照会し、この境界内のみの郵便番号を要求することにより、不要な帯域幅を使用しなくて済むため、サーバーの処理能力が向上し、応答時間の短縮に役立ちます。

リスト 6 のコードは、次のセクションで構成されています。

  1. CSS
  2. <div> タグ
  3. JavaScript とわずかな PHP

JavaScript とわずかな PHP 最初のセクションは、css (カスケーディング・スタイル・シート) で、<head> タグ内に埋め込まれています。境界は、<style type="text/css"> タグと </style> タグで定義されます。この css では <div> タグ内で使用するクラスをセットアップしてページの外観を作成します。css がないと色彩やまとまりのない乱雑なページ・レイアウトになってしまいます。

body タグ内には、基本的な要素である <div> タグが含まれます。これは、レイアウト、情報、および検索ツールをまとめる役割を果たします。<div> タグは JavaScript の仕組みに合っているので、ページを極めて簡単に更新できるようになります。

最後のセクションの JavaScript は、最も重要です。既に説明したように、JavaScript には次のようないくつかのセクションがあります。

  • 検索メソッド
  • LOADING.. サインを制御するメソッド
  • XML を構文解析し、地図上にマーカーを配置するメソッド
  • アイコンを作成するループのためのいくつかの PHP
  • 検索ボタンが押されるかまたはフォームが「送信」されるとトリガーされるメソッド

これらすべての中でも、最も高度な機能を持つのが XML を構文解析するメソッドです。これらは、新しい GXmlHttp.create(); を作成します。これは、Google Maps API に組み込まれている HttpRequest クラスです。これは、地図を更新するための中核機能であるだけでなく、ほとんどの Ajax アプリケーションの中核でもあります。(ただし、すべての Ajax アプリケーションが Google Maps HttpRequest クラスを使用しているわけではありません。)

要求が PHP ファイルに送信され、XML が受信されると、コードが実行され、すべての Zip タグが検索されます。Zip タグが見つかると、地図上にマーカーが追加されます。また、マーカーがクリックされた場合のイベントを処理するためのイベント・リスナーを追加する必要もあります。HttpRequest と同様に、このイベント・リスナー関数も Google Maps API に組み込まれています。

地図のもう 1 つの重要な部分は、地図の移動を listen しているすべてのメソッドの後に初期化されるイベント・リスナーです。イベント・リスナーはズーム・レベルを監視しており、レベルが 6 を上回るか下回るかに応じて (帯域幅の過度の使用と応答時間の低下を防止するため)、地図やサイドバーを更新したり、縮小し過ぎていることをユーザーに伝えたりします。

上に戻る

次は何をしてみますか?

地理データ表示の可能性は計り知れません。この記事の例は、米国の国勢調査データに基づいて作成されました。この記事で説明したアーキテクチャーやメソッドは、どんな種類のデータにも適用できます。この便利さをご理解いただけましたでしょうか。「マッシュアップ」作成の経験に基づくご意見をお待ちしております。

ダウンロード

説明 ファイル名 サイズ ダウンロード方法
Sample code googleAPI.zip 35KB FTP（英語）|HTTP（英語）

参考文献

学ぶために

この著者によるその他の developerWorks の記事 （英語）
「Getting the ODBC driver from the Informix Client access or SDK working with unixODBC (unixODBC Web サイト)」 （英語）
unixODBC を使用するシステムをセットアップする方法を説明します。
developerWorks のテクニカル･イベントおよび Webcast （英語）
最新の情報を入手できます。
developerWorks 情報管理ゾーン （英語）
DB2 についての情報が記載されています。技術文書、実用記事、教育、ダウンロード、製品情報などを入手できます。

製品や技術を入手するために

WebSphere Application Server バージョン 6.0 の無料の評価版をダウンロード （英語）
IBM の評価版ソフトウェア（英語）
developerWorks から直接ダウンロードできます。

議論するために

ディスカッション・フォーラム(英語）
developerWorks ブログ(英語） や developerWorks コミュニティー

上に戻る

著者について

Marty Lurie のコンピューターのキャリアは、IBM 1130 で Fortran のプログラムを書きながらパンチ・カードを作るところから始まりました。 現在は IBM の Informix 部門でシステム・エンジニアリングの仕事をしていますが、問いつめれば、大抵はコンピューターで遊んでいると白状するでしょう。お気に入りは、自宅のフィットネス・マシンをラップトップ PC に接続するために書いた自作プログラムです (ラップトップは重量が約 1 キロ、コレステロールは 20% も減りました)。Marty は、IBM 認定 DB2 DBA であり、IBM 認定ビジネス・インテリジェンス・ソリューション・プロフェッショナルです。また、Informix 認定プロフェッショナルでもあります。連絡先は、lurie@us.ibm.com です。.

Aron Lurie は、この記事を書いたとき中学 3 年生でした。Aron は、Web 開発ビジネスに携わって 4 年になり、小学校 4 年のときから新しい言語を独学で学んでいます。彼の主な顧客は、ヘブライ大学 (Hebrew College) です。ここで彼は附属高校の Web マスターを務めています。最近では、学校新聞の Web マスターの仕事もこなし、さらに、地域の USY 支部の Web マスターも務めています。余暇には、Newton South スキー・レーシング・チームの一員として活動しています。残念ながら、スキーとコンピューターを組み合わせる方法はまだ見つかっていません。

上に戻る
　 　

　




上に戻る
　 　

    日本IBMについて      プライバシー      お問い合わせ