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

Size: px

Start display at page:

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

きゅうたひろなが
5 years ago
Views:

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

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

PC 上で稼働する VCL フォームアプリケーション ( 以下クライアントアプリと呼称します ) でも利用できます今回は

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

Web サービス概要 API が公開されている Web サービス WAFL(Web API Fan s Library) というサイトによると API 提供団体は 100 を超え登録 API 数は 205 件にものぼります提供の形態 ( 有料無料商用利用の可不可 ) はさまざまですので各サービスの利用規約を必ずご確認くださいワッフル

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

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

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

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

コンポーネントマイクロソフトが提供している WebBrower コントロール (Internet

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

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

10 Google Maps を利用するには位置情報の取得にセンサーを使用するか TWebBrowser で Google マップを表示してみましょう前述の 3 の手法を使って Google マップのチュートリアルに記載された例を表示します地図の中心として表示する緯度経度

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

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

Google Maps を利用するにはクライアントアプリ側から Google マップを制御してみましょう Google マップの API が提供されているのは JavaScript か Flash のみ TWebBrowser を経由して Delphi で JavaScript の命令を実行させます TWebBrowser クライアントアプリを経由してJavaScriptを呼び出すには

13 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 );

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

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

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

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

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

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

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

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

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

SimpleAPI 最寄駅 API を利用するには一般的な Web サービスは HTTP のような WWW 関連技術で XMLやJSONといった形式のテキストデータをやり取りします [Indy Clients] カテゴリ [Internet] カテゴリそのため以下のようなコンポーネントが利用されます TIdHTTP コンポーネント

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

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

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

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

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

28 Google Geocoding API を利用するには Google Geocoding API による逆ジオコーディングについて URL: /documentation/geocoding/#reversegeocoding

Google Geocoding API を利用するには Google マップから取得した緯度経度を使って住所を逆検索してみましょう 1Google Geocoding API を呼び出す URL http://maps.

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

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

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

Webサービスを利用して機能UP！

Webサービスを利用して機能UP！福井和彦 / 畑中侑株式会社ミガロ. システム事業部システム 2 課 Web サービスを利用して機能 UP! 既存機能に住所検索を追加 Delphi/400 で Web サービスを活用するこの仕組みと方法を住所検索の実装を通して紹介するはじめに住所検索実装の課題 Web サービスを利用する仕組みについて画面イメージと実装機能実装方法既存機能への組み込み最後に略歴福井和彦 1972

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

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