Delphi/400開発ノウハウお教えします　Googleマップ連携によるリッチなGUIアプリ開発

セッション No.4 Delphi/400 開発ノウハウお教えします Google マップ連携によるリッチな GUI アプリ開発 株式会社ミガロ. システム事業部プロジェクト推進室 小杉智昭

アジェンダ Web サービス概要 Web サービスを利用するには Google マップを使ったアプリケーション例

はじめに 2000 年代初めごろに登場した Web サービス は着々と利用が広がり さまざまなサービスが提供されるようになりました この Web サービス は Web 関連のプログラムだけでなく クライアント PC 上で稼働する VCL フォームアプリケーション ( 以下 クライアントアプリと呼称します ) でも利用できます 今回は Web 上で広く利用されている Google マップ を中心に幾つかの Web サービス をクライアントアプリ上で連携させ 一歩進んだアプリケーションを作成してみましょう

Web サービス概要 API が公開されている Web サービス WAFL(Web API Fan s Library) というサイトによると API 提供団体は 100 を超え 登録 API 数は 205 件にものぼります 提供の形態 ( 有料 無料 商用利用の可 不可 ) はさまざまですので 各サービスの利用規約を必ずご確認ください ワッフル /WAFL(URL: http://wafl.net/) WAFL に登録されている API を幾つかピックアップしますと... Google Maps( グーグル株式会社 ) Amazon AWS(Amazon.com, Inc.) Weather Hacks( 株式会社ライブドア ) Bing API( マイクロソフト株式会社 ) 国立国会図書館サーチ API( 国立国会図書館 )

Web サービス概要 Web サービスを利用したアプリケーション例取引先マスタを利用したアプリケーションを例にしてみましょう 1 取引先マスタの住所から地図を表示します <IBM 様本社 ( 箱崎 )> 2 住所と実際の入口がずれたりすることを考慮し 地図上の指定した地点を登録できるようにします 3 最寄駅を検索します 4 地図上の指定した地点の住所を表示します < 利用する Web サービス > Google Maps( グーグル株式会社 ) SimpleAPI 最寄駅 API( 株式会社ユーザーローカル ) Google Geocoding API( グーグル株式会社 )

Web サービス概要 Web サービスについての注意通常 Web サービスは蓄積したデータを加工して返すだけのシンプルなサービスになります 最寄駅検索の場合... Q) 緯度 経度をパラメータとして渡す A) 一定範囲内に存在する駅情報を近いものから順に XML や JSON といったテキストデータにして返す Google やマイクロソフト等が実施している地図そのものをインターフェースごと提供するサービスは稀

Web サービス概要 以前に紹介したものとの違い (Google Maps) Google の地図表示については 第 2 回テクニカルセミナーでご紹介済み!? ( 以前 )Google の地図ページに検索ワードを与えて表示 ( 今回 )API を使って 地図そのものを直接制御

Google Maps を利用するにはシステム標準のブラウザをクライアントアプリ上で制御する TWebBrowser コンポーネントを利用します TWebBrowser コンポーネントマイクロソフトが提供している WebBrower コントロール (Internet Explorer の主要コンポーネントの一つ ) を利用するためのコンポーネント TWebBrowser コンポーネント

Google Maps を利用するには TWebBrowser で任意のページを開く方法 1Web ページを開く例 :WebBrowser1.Navigate( http://www.migaro.co.jp ); 2 ローカルのファイルを開く例 :WebBrowser1.Navigate( file://c: temp test.html ); 3 プログラム内で指定した HTML データを開く参考 :How to load HTML directly to a WebBrowser http://delphi.about.com/cs/adptips2004/a/bltip0104_4.htm

Google Maps を利用するには 位置情報の取得にセンサーを使用するか TWebBrowser で Google マップを表示してみましょう 前述の 3 の手法を使って Google マップのチュートリアルに記載された例を表示します http://code.google.com/intl/ja/apis/maps/documentation/javascript/tutorial.html 地図の中心として表示する緯度 経度

Google Maps を利用するには TWebBrowser で Google マップを表示してみましょう センサーは使用しない 弊社 東京事業所の緯度 経度

Google Maps を利用するには TWebBrowser で Google マップを表示してみましょう 表示したい HTML の文字列

Google Maps を利用するにはクライアントアプリ側から Google マップを制御してみましょう Google マップの API が提供されているのは JavaScript か Flash のみ TWebBrowser を経由して Delphi で JavaScript の命令を実行させます TWebBrowser クライアントアプリを経由してJavaScriptを呼び出すには MSHTML(Delphi) ユニットに定義されたIHTMLWindow2 インターフェースのexecScriptメソッドを呼び出します TWebBrowser (JavaScript) Google Maps API for JavaScript Webサービス 例 :(WebBrowser1.Document as IHTMLDocument2). parentwindow.execscript(sscript, JavaScript );

Google Maps を利用するにはクライアントアプリ側から Google マップを制御してみましょう JavaScript 実行

Google Maps を利用するには Google Maps API が提供する機能を幾つか確認してみましょう 1 地図を表示する倍率を変更する (Map クラス ) 2 指定した住所の地図を表示する (Geocoder クラス ) 3 各種制御ウィンドウを制御する (Marker クラス / InfoWindow クラス ) 4 地図のスタイルをカスタマイズする (StyledMapType クラス ) 参考 :Google Maps JavaScript API V3 リファレンス http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html

Google Maps を利用するには Google Maps API が提供する機能を幾つか確認してみましょう 1 地図を表示する倍率を変更する (Map クラス )

Google Maps を利用するには Google Maps API が提供する機能を幾つか確認してみましょう 2 指定した住所の地図を表示する (Geocoder クラス )

Google Maps を利用するには Google Maps API が提供する機能を幾つか確認してみましょう 3 各種制御ウィンドウを制御する (Marker クラス / InfoWindow クラス )

Google Maps を利用するには Google Maps API が提供する機能を幾つか確認してみましょう 4 地図のスタイルをカスタマイズする (StyledMapType クラス )

Google Maps を利用するには Google マップ上で行われた操作をクライアントアプリ側に通知してみましょう クライアントアプリインターフェースの (Delphi) IDocHostUIHandler 追加実装が必要インターフェースの実装を追加する Google Maps API for JavaScript 参考 :Calling Windows Client TWebBrowser code from Javascript hosted Webサービス (JavaScript) inside the WebBrowser control http://www.stevetrefethen.com/blog /CallingWindowsClientCodeFromJavascriptHostedInsideTheWebBrowserControl.aspx

Google Maps を利用するには Google マップ上で行われた操作をクライアントアプリ側に通知してみましょう

Google Maps を利用するには Google マップ上で行われた操作をクライアントアプリ側に通知してみましょう

SimpleAPI 最寄駅 API を利用するには一般的な Web サービスは HTTP のような WWW 関連技術で XMLやJSONといった形式のテキストデータをやり取りします [Indy Clients] カテゴリ [Internet] カテゴリそのため 以下のようなコンポーネントが利用されます TIdHTTP コンポーネント TXMLDocument コンポーネント 1Web サービス側から指定された URL に対して HTTP プロトコルでパラメータを渡す TIdHTTP コンポーネントを利用 2 レスポンスとして XML や JSON といった形式のテキストデータが返されるため 解析して値を取得する XML なら TXMLDocument コンポーネントを利用

SimpleAPI 最寄駅 API を利用するには SimpleAPI vol.2 - 最寄り駅 Web サービスについて URL: http://map.simpleapi.net/

SimpleAPI 最寄駅 API を利用するには Google マップから取得した緯度 経度を使って 最寄駅を検索してみましょう 1SimpleAPI 最寄駅 API を呼び出す URL http://map.simpleapi.net/stationapi?lat=[ 緯度座標 ]&lon=[ 経度座標 ] 2 レスポンスの形式形式省略時は XML output パラメータで JSON や html php シリアライズ等を指定可能

SimpleAPI 最寄駅 API を利用するには Google マップから取得した緯度 経度を使って 最寄駅を検索してみましょう

SimpleAPI 最寄駅 API を利用するには Google マップから取得した緯度 経度を使って 最寄駅を検索してみましょう

Google Geocoding API を利用するには Google Geocoding API による逆ジオコーディングについて URL: http://code.google.com/intl/ja/apis/maps /documentation/geocoding/#reversegeocoding

Google Geocoding API を利用するには Google マップから取得した緯度 経度を使って 住所を逆検索してみましょう 1Google Geocoding API を呼び出す URL http://maps.google.com/maps/api/geocode/xml? latlng=[ 緯度 ],[ 経度 ]&sensor=false&language=ja 2 レスポンスの形式形式は XML URL を切り替えることで JSON を指定可能

Google Geocoding API を利用するには Google マップから取得した緯度 経度を使って 住所を逆検索してみましょう

Google マップを使ったアプリケーション例 取引先住所確認サンプル