【セッションNo．4】 Delphi/400開発ノウハウお教えします 「Googleマップ連携によるリッチなGUIアプリ開発」 株式会社ミガロ. システム事業部 プロジェクト推進室 小杉 智昭
【アジェンダ】
Webサービスを利用するには
Webサービス概要
2000年代初めごろに登場した「Webサービス」は着々と利用が 広がり、さまざまなサービスが提供されるようになりました。 この「Webサービス」は、Web関連のプログラムだけでなく、 クライアントPC上で稼働するVCLフォームアプリケーション （以下、クライアントアプリと呼称します）でも利用できます。 今回はWeb上で広く利用されている「Googleマップ」を中心に 幾つかの「Webサービス」をクライアントアプリ上で連携させ、 一歩進んだアプリケーションを作成してみましょう。
はじめに
Webサービス概要
•
APIが公開されているWebサービス
WAFL(Web API Fan‘s Library)というサイトによるとAPI提供団体は
100を超え、登録API数は205件にものぼります。 提供の形態（有料・無料、商用利用の可・不可）はさまざまです ので、各サービスの利用規約を必ずご確認ください。 ワッフル/ＷＡＦＬ（ＵＲＬ： http://wafl.net/） • WAFLに登録されているAPIを幾つかピックアップしますと．．． • Google Maps(グーグル株式会社)
• Amazon AWS(Amazon.com, Inc.)
Webサービス概要
•
Webサービスを利用したアプリケーション例
取引先マスタを利用したアプリケーションを例にしてみましょう。 ①取引先マスタの住所から地図を表示します。 ②住所と実際の入口がずれたりすることを考慮し、 地図上の指定した地点を登録できるようにします。 ③最寄駅を検索します。 ④地図上の指定した地点の住所を表示します。 ＜利用するWebサービス＞ Google Maps(グーグル株式会社) SimpleAPI 最寄駅API(株式会社ユーザーローカル) Google Geocoding API(グーグル株式会社) Webサービス概要
•
Webサービスについての注意
通常、Webサービスは蓄積したデータを加工して返すだけの シンプルなサービスになります。 最寄駅検索の場合．．． Ｑ）緯度・経度をパラメータとして渡す Ａ）一定範囲内に存在する駅情報を近いものから順に XMLやJSONといったテキストデータにして返す → Googleやマイクロソフト等が実施している地図そのものを Webサービス概要
•
以前に紹介したものとの違い（Google Maps）
Googleの地図表示については、第２回テクニカルセミナーで ご紹介済み！？ （以前）Googleの地図ページに検索ワードを与えて表示 （今回）APIを使って、地図そのものを直接制御 Webサービスを利用するには
•
Google Mapsを利用するには
システム標準のブラウザをクライアントアプリ上で制御する TWebBrowserコンポーネントを利用します。 →TWebBrowserコンポーネント マイクロソフトが提供している WebBrowerコントロール （Internet Explorerの主要 コンポーネントの一つ）を利用 するためのコンポーネント。 TWebBrowser コンポーネント Webサービスを利用するには
•
Google Mapsを利用するには
TWebBrowserで任意のページを開く方法 ①Webページを開く 例：WebBrowser1.Navigate(‘http://www.migaro.co.jp’); ②ローカルのファイルを開く 例：WebBrowser1.Navigate(‘file://c:¥temp¥test.html’); ③プログラム内で指定したHTMLデータを開く参考：How to load HTML directly to a WebBrowser
Webサービスを利用するには
•
Google Mapsを利用するには
TWebBrowserでGoogleマップを表示してみましょう。 前述の③の手法を使って、Googleマップのチュートリアルに 記載された例を表示します http://code.google.com/intl/ja/apis/maps/documentation/javascript/tutorial.html 位置情報の取得にセンサー を使用するか 地図の中心として表示する 緯度、経度 Webサービスを利用するには
•
Google Mapsを利用するには
TWebBrowserでGoogleマップを表示してみましょう。 センサーは 使用しない 弊社、東京事業所の 緯度、経度 Webサービスを利用するには
•
Google Mapsを利用するには
TWebBrowserでGoogleマップを表示してみましょう。
表示したい HTMLの文字列
Webサービスを利用するには
•
Google Mapsを利用するには
クライアントアプリ側からGoogleマップを制御してみましょう。
GoogleマップのAPIが提供されているのはJavaScriptかFlashのみ
→ TWebBrowserを経由してDelphiでJavaScriptの命令を 実行させます
クライアントアプリ （Delphi）
Google Maps API for JavaScript Webサービス TWebBrowser (JavaScript) TWebBrowserを経由してJavaScriptを呼び出すには MSHTMLユニットに定義されたIHTMLWindow2 インターフェースのexecScriptメソッドを呼び出します。 例：(WebBrowser1.Document as IHTMLDocument2). parentWindow.execScript(sScript, ‘JavaScript’);
Webサービスを利用するには
•
Google Mapsを利用するには
クライアントアプリ側からGoogleマップを制御してみましょう。
Webサービスを利用するには
•
Google Mapsを利用するには
Google Maps APIが提供する機能を幾つか確認してみましょう。 ①地図を表示する倍率を変更する（Mapクラス）
②指定した住所の地図を表示する（Geocoderクラス） ③各種制御ウィンドウを制御する
（Markerクラス / InfoWindowクラス） ④地図のスタイルをカスタマイズする（StyledMapTypeクラス）
参考：Google Maps JavaScript API V3リファレンス
Webサービスを利用するには
•
Google Mapsを利用するには
Google Maps APIが提供する機能を幾つか確認してみましょう。 ①地図を表示する倍率を変更する（Mapクラス）
Webサービスを利用するには
•
Google Mapsを利用するには
Google Maps APIが提供する機能を幾つか確認してみましょう。 ②指定した住所の地図を表示する（Geocoderクラス）
Webサービスを利用するには
•
Google Mapsを利用するには
Google Maps APIが提供する機能を幾つか確認してみましょう。 ③各種制御ウィンドウを制御する
Webサービスを利用するには
•
Google Mapsを利用するには
Google Maps APIが提供する機能を幾つか確認してみましょう。 ④地図のスタイルをカスタマイズする（StyledMapTypeクラス）
Webサービスを利用するには
•
Google Mapsを利用するには
Googleマップ上で行われた操作をクライアントアプリ側に 通知してみましょう。 クライアントアプリ （Delphi）Google Maps API for JavaScript Webサービス TWebBrowser (JavaScript) インターフェースの 追加実装が必要
IDocHostUIHandlerインターフェースの実装を追加する
参考：Calling Windows Client code from Javascript hosted
inside the WebBrowser control
Webサービスを利用するには
•
Google Mapsを利用するには
Googleマップ上で行われた操作をクライアントアプリ側に 通知してみましょう。
Webサービスを利用するには
•
Google Mapsを利用するには
Googleマップ上で行われた操作をクライアントアプリ側に 通知してみましょう。
Webサービスを利用するには
•
SimpleAPI最寄駅APIを利用するには
一般的なWebサービスは、HTTPのようなWWW関連技術で、 XMLやJSONといった形式のテキストデータをやり取りします。 そのため、以下のようなコンポーネントが利用されます。 ①Webサービス側から指定されたURLに対して、 HTTPプロトコルでパラメータを渡す → TIdHTTPコンポーネントを利用 ②レスポンスとして、XMLやJSONといった形式のテキスト データが返されるため、解析して値を取得する → XMLならTXMLDocumentコンポーネントを利用 [Internet]カテゴリ TXMLDocument コンポーネント [Indy Clients]カテゴリ TIdHTTP コンポーネント Webサービスを利用するには
•
SimpleAPI最寄駅APIを利用するには
SimpleAPI vol.2 - 最寄り駅Webサービスについて URL： http://map.simpleapi.net/
Webサービスを利用するには
•
SimpleAPI最寄駅APIを利用するには
Googleマップから取得した緯度・経度を使って、最寄駅を検索 してみましょう。 ①SimpleAPI最寄駅APIを呼び出すURL http://map.simpleapi.net/stationapi?lat=[緯度座標]&lon=[経度座標] ②レスポンスの形式 形式省略時はXML outputパラメータでJSONやhtml、phpシリアライズ等を指定可能 Webサービスを利用するには
•
SimpleAPI最寄駅APIを利用するには
Googleマップから取得した緯度・経度を使って、最寄駅を検索 してみましょう。
Webサービスを利用するには
•
SimpleAPI最寄駅APIを利用するには
Googleマップから取得した緯度・経度を使って、最寄駅を検索 してみましょう。
Webサービスを利用するには
•
Google Geocoding APIを利用するには
Google Geocoding APIによる逆ジオコーディングについて
URL： http://code.google.com/intl/ja/apis/maps
Webサービスを利用するには
•
Google Geocoding APIを利用するには
Googleマップから取得した緯度・経度を使って、住所を逆検索 してみましょう。
①Google Geocoding APIを呼び出すURL
http://maps.google.com/maps/api/geocode/xml?
latlng=[緯度],[経度]&sensor=false&language=ja
②レスポンスの形式
形式はXML
Webサービスを利用するには
•
Google Geocoding APIを利用するには
Googleマップから取得した緯度・経度を使って、住所を逆検索 してみましょう。
