DB2とオープン・ソース: Google Maps API、DB2/Informix、LinuxのPHPで地図の上を歩く

1枚の画像には1000語の価値がありますが、とにかくWebブラウザーが必要です

Google Maps APIをDB2®、Informix®、PHP、JavaScript、XMLとともに使用することにより、個人のデータを取り込んだ、使いやすい地図を作成することができます。自分の住んでいる地域の郵便番号を指定して、その地域のデータを見てみましょう。地図形式の変更やサイドバーの作成をしたり、カスタム・アイコンやイベント・ハンドラーを使用してみましょう。

Aron Y. Lurie, 9th Grader/Webmaster, Newton South High School/Hebrew College

Aron LurieAron Lurieは、この記事の執筆時点では、9年生(中学3年生)でした。5年間にわたってWeb開発事業に関わり、4年生の頃から新しい言語の習得に取り組んでいます。ヘブライ大学をメインのクライアントとし、そこでハイスクールのWebマスターを務めています。また、最近自分が通っている学校の校内新聞の Webマスターを任され、地元USY(United Synagogue Youth)支部のWebマスターも務めています。Newton Southスキー・レース・チームに所属し、余暇はスキーを楽しんでいます。残念ながら、スキーをコンピュータで制御する方法はまだ見つけることはできないようです。



Marty Lurie, Information Technology Specialist, IBM

Photo of author Marty LurieMarty Lurie のコンピューターのキャリアは、IBM 1130 で Fortran のコードを紙テープにパンチしていた時代にまでさかのぼります。 普段は IBM の ソフトウェア事業部でシステムエンジニアリングに携わっていることになっていますが、問い詰められれば、実はほとんどコンピューターで遊んでいるだけだと白状するでしょう。 彼のお気に入りのプログラムは、自分のラップトップにエクササイズ機器の Nordic Track を接続するために書いたプログラムです (そのおかげで、ラップトップは 2 ポンドの減量と 20% のコレステロール値の減少に成功しました)。 彼は、IBM 認定のWebSphere アドミニストレーター、DB2 データベース・アドミニストレーター、そしてビジネス・インテリジェンス・ソリューション・プロフェッショナル、Linux アドミニストレーター、Informix プロフェッショナル、そして SOA ソリューション・デザイナーの資格を持っています。



2006年 3月 02日

マッピング

最近の情報の氾濫に伴い、ギガバイト単位の情報の処理に便利な多くの新しい技術が開発されてきました。多くの情報を処理しようとする場合、ほとんどのユーザーにとってグラフィック表示が最良の方法です。地理データ(この場合は米国勢調査局のデータ)は、従来の地理情報システム(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

図1は、ユーザーが最初に目にする検索ページです。

図1.ロードした際の最初のページ
図1.ロードした際の最初のページ

ユーザーが郵便番号を入力すると、図2のように結果が表示されます。地図には人口密度を示す、色分けされたインジケーターが表示されます。右にあるテキスト表示は、表示されている地域の郵便番号を示しています。左上隅のズーム制御スライダーを使用すると、地図の縮尺を変更することができます。情報ウィンドウでは、郵便番号02222に関する詳細が表示されます。

図2.郵便番号02222の検索結果ページ
図2.郵便番号02222の検索結果ページ

アーキテクチャー概要

それではどうすれば、データベース・テーブルから、図1の検索画面と図2の表示画面にたどり着けるのでしょうか。データ・ソースの組み合わせやGoogle Map APIは、「Mashup(マッシュアップ)」(Wikipedia.org)またはWebアプリケーションのハイブリッド化と呼ばれています。図3ではサーバー・アーキテクチャーを図解しました。

ここで注目すべき手法は、ブラウザーによって行なわれるさまざまなデータ・ソースの統合です。クライアント・ブラウザーに結合されるデータ量を制限することが、この手法の成否を大きく左右します。クライアント・ブラウザがあれもこれもと大量のデータを収集すると、すぐにネットワーク制限が機能してクライアント・プロセッサーのスピードが落ちるため、ユーザーはイライラすることになります。

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

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

この記事のコード・サンプルでは、Informixの使用方法を示しています。PHPと一緒に作動するようにDB2を構成する方法については、「DB2とオープン・ソース: DB2、PHPおよびLinuxを使用したWebポーリング」(developerWorks、2004年8月)を参照してください。

ページに必要なデータは、データベースから取得されます。画びょうの配色は、色のスペクトルに基づいて人口密度を示しています。人口幅は、各分布が同等の数値幅になるように設定されています。

アーキテクチャーの仕組みに関する追加情報については、この記事にあるコードおよびコードのコメントに関する解説を参照してください。


コンポーネント

Ajax/JavaScriptとGoogle API

Google API、JavaScriptおよびAjaxがアプリケーションの主要な部分を構成しています。Google Maps APIには、1Webサイトの1ディレクトリーに対して固有なキーが必要です。キーを入手するには、www.google.com/apis/mapsにアクセスし、「Sign up for a Google Maps API key」をクリックします。APIには、Ajax HttpRequestクラスおよびイベント・ハンドラー制御など、多くの便利な機能が用意されています。Googleには、APIに関する素晴らしいドキュメントが用意されています。www.google.com/apis/maps/documentation/から入手できます。ただしAjaxは、JavaScriptとXMLを組み合わせた、ちょっと気の利いた頭字語に過ぎません。以下に示すように、Ajaxを呼び出してPHPから戻されたHTMLを解析することによって、ユーザーのブラウザーを更新する必要がなくなります。

すべてのブラウザーがJavaScripと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を扱ってきた経験から、データ・ウェアハウス/意思決定支援システムでも優れた能力を発揮することを保証します)

DB2とオープン・ソース:DB2、PHPおよびLinuxを使用したWebポーリング」で取り上げた例は、ほとんどが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に変換することができます。「IBM DB2 Universal DatabaseにPHPアプリケーションを接続する」(developerWorks、2001年7月)では、対話形式でPHPを処理するようにDB2を設定する方法について紹介しています。

リスト3におけるコードの出力では、きれいにフォーマットされたXMLソースを戻します。そのXMLソースでは、Resultsタグ内にZipタグがあり、Zipタグ内にLatitudeタグとLongitudeタグがあります。URL内に存在する値に基づいて、データベースの内容を検索します。検索結果が見つからない場合は、Resultsタグ内からZipタグが削除されます。2つ目のPHPスクリプトでもResultsタグが指定されていますが、この場合のResultsタグはより実用的な目的で指定されています。

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

リスト4. 経度/緯度スクリプトの出力サンプル
<?xml version="1.0"?>
<Results>
	<Zip>
		<Latitude>42.367797</Latitude>
		<Longitude>-71.062829</Longitude>
	</Zip>
</Results>

このスクリプトは、メイン・ページのJavaScriptからしか呼び出されません。このスクリプトは、XMLで正しいヘッダーを戻すため(header() 機能で設定)、XMLは、Google Maps APIに組み込まれた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は、大まかには最初のスクリプトに基づいたものになっています。このXMLには、最初のスクリプトで見たResultsというルート・タグがあります。しかし、たいていの場合、このスクリプトは複数のZipタグを戻します。データ・ソースから戻されるデータの各行に対し、whileループはその行をオブジェクトとして取り込み、データベース内のすべてのデータを含むZipタグを吐き出します(リスト1を参照)。

このコードにおいて最も重要な部分はSQLクエリです。リスト6では、AjaxはGET(リスト3参照)ではなくPOSTに切り替わり、left, right, bottom, topの4つの変数を送信します。これらの変数は、画面に表示される地図の境界として、経度/緯度で定義されます。データベースを照会してこれらの正確な境界内の郵便番号を要求することにより、不要な帯域を使用する必要がなくなるため、サーバーの負荷を減らし、応答時間を短縮することができます。

リスト6のコードは次の3つの部分から構成されています。

  1. CSS
  2. <div>タグ
  3. JavaScriptおよび少量のPHP

最初の部分は、<head> タグに組み込まれたカスケード・スタイルシート(css)です。その境界は、<style type="text/css"> タグと </style> タグによって定義されています。cssは、<div> タグで使用されるページのルック・アンド・フィールを作成するクラスを設定します。cssを指定しない場合、色の情報を設定することができず、きれいに揃ったページ・レイアウトを作成することもできません。

次の部分は、Bodyタグの中に含まれているビルディング・ブロックの <div> タグです。このタグはレイアウト、情報、および検索ツールを管理します。JavaScriptの処理方法により、<div> タグは簡単にページを更新する場合の非常に便利なタグになっています。

最後の部分は、最も重要なJavaScriptです。以下に示したように、JavaScriptもいくつかの部分に分かれています。

  • 検索メソッド
  • 「LOADING..」表示の制御メソッド
  • XMLを解析し、地図にマーカーを引くメソッド
  • アイコンを作成するループ用の少量のPHP
  • 検索ボタンが押されたとき、またはフォームが「送信された」ときに始動するメソッド

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

要求がPHPファイルに送信され、XMLが受信されると、コードがすべてのZipタグを検索します。該当するデータが見つかると、コードは地図にマーカーを追加します。また、イベントを処理するために、イベント・リスナーも追加する必要があります。この場合のイベントとは、ユーザーがマーカーをクリックすることです。HttpRequestと同じように、このイベント・リスナー機能もGoogle Maps APIに組み込まれています。

地図におけるもう1つの重要な部分は、地図の移動をリッスンするすべてのメソッドの後に初期化されるイベント・リスナーです。イベント・リスナーはズーム・レベルを監視し、そのレベルが6より上または下にあるかに応じて(余分な帯域の使用を避けて応答時間を短縮するため)、地図とサイドバーの更新を行うか、またはユーザーにズームアウトし過ぎていることを知らせます。


次は何?

地理データ表示の可能性を超えるものは、もはや人間の想像力のみです。この記事における例は、米国勢調査局のデータに基づいています。ここで示したアーキテクチャーおよびメソッドは、どのデータに対しても適用することができます。この記事を読んで地図の「マッシュアップ」を作成し、その際のフィードバックをお寄せください。


ダウンロード

内容ファイル名サイズ
Sample codegoogleAPI.zip  ( HTTP | FTP )35KB

参考文献

学ぶために

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

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Information Management, Open source, Linux, Web development
ArticleID=269421
ArticleTitle=DB2とオープン・ソース: Google Maps API、DB2/Informix、LinuxのPHPで地図の上を歩く
publish-date=03022006