開発ノウハウお教えします Googleマップ連携によるリッチ …...Google Geocoding...
31
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 【セッションNo．4】 Delphi/400開発ノウハウお教えします 「Googleマップ連携によるリッチなGUIアプリ開発」 株式会社ミガロ. システム事業部 プロジェクト推進室 小杉 智昭
Transcript of 開発ノウハウお教えします Googleマップ連携によるリッチ …...Google Geocoding...
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
【セッションNo．4】
Delphi/400開発ノウハウお教えします
「Googleマップ連携によるリッチなGUIアプリ開発」
株式会社ミガロ. システム事業部 プロジェクト推進室
小杉 智昭
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
【アジェンダ】
Webサービスを利用するには
Webサービス概要
Googleマップを使ったアプリケーション例
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
2000年代初めごろに登場した「Webサービス」は着々と利用が 広がり、さまざまなサービスが提供されるようになりました。 この「Webサービス」は、Web関連のプログラムだけでなく、 クライアントPC上で稼働するVCLフォームアプリケーション （以下、クライアントアプリと呼称します）でも利用できます。 今回はWeb上で広く利用されている「Googleマップ」を中心に 幾つかの「Webサービス」をクライアントアプリ上で連携させ、 一歩進んだアプリケーションを作成してみましょう。
はじめに
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
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.)
• Weather Hacks(株式会社ライブドア)
• Bing API(マイクロソフト株式会社)
• 国立国会図書館サーチAPI(国立国会図書館)
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービス概要
• Webサービスを利用したアプリケーション例 取引先マスタを利用したアプリケーションを例にしてみましょう。 ①取引先マスタの住所から地図を表示します。 ②住所と実際の入口がずれたりすることを考慮し、 地図上の指定した地点を登録できるようにします。 ③最寄駅を検索します。 ④地図上の指定した地点の住所を表示します。 ＜利用するWebサービス＞ Google Maps(グーグル株式会社) SimpleAPI 最寄駅API(株式会社ユーザーローカル) Google Geocoding API(グーグル株式会社)
＜IBM様本社（箱崎）＞
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービス概要
• Webサービスについての注意 通常、Webサービスは蓄積したデータを加工して返すだけの シンプルなサービスになります。 最寄駅検索の場合．．． Ｑ）緯度・経度をパラメータとして渡す Ａ）一定範囲内に存在する駅情報を近いものから順に XMLやJSONといったテキストデータにして返す → Googleやマイクロソフト等が実施している地図そのものを インターフェースごと提供するサービスは稀
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービス概要
• 以前に紹介したものとの違い（Google Maps） Googleの地図表示については、第２回テクニカルセミナーで ご紹介済み！？ （以前）Googleの地図ページに検索ワードを与えて表示 （今回）APIを使って、地図そのものを直接制御
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには システム標準のブラウザをクライアントアプリ上で制御する TWebBrowserコンポーネントを利用します。 →TWebBrowserコンポーネント マイクロソフトが提供している WebBrowerコントロール （Internet Explorerの主要 コンポーネントの一つ）を利用 するためのコンポーネント。
TWebBrowser コンポーネント
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
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 http://delphi.about.com/cs/adptips2004/a/bltip0104_4.htm
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには TWebBrowserでGoogleマップを表示してみましょう。 前述の③の手法を使って、Googleマップのチュートリアルに 記載された例を表示します http://code.google.com/intl/ja/apis/maps/documentation/javascript/tutorial.html
位置情報の取得にセンサーを使用するか
地図の中心として表示する緯度、経度
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには TWebBrowserでGoogleマップを表示してみましょう。
センサーは 使用しない
弊社、東京事業所の 緯度、経度
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには TWebBrowserでGoogleマップを表示してみましょう。
表示したい HTMLの文字列
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
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’);
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには クライアントアプリ側からGoogleマップを制御してみましょう。
JavaScript実行
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには Google Maps APIが提供する機能を幾つか確認してみましょう。 ①地図を表示する倍率を変更する（Mapクラス） ②指定した住所の地図を表示する（Geocoderクラス） ③各種制御ウィンドウを制御する （Markerクラス / InfoWindowクラス） ④地図のスタイルをカスタマイズする（StyledMapTypeクラス） 参考：Google Maps JavaScript API V3リファレンス http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには Google Maps APIが提供する機能を幾つか確認してみましょう。 ①地図を表示する倍率を変更する（Mapクラス）
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには Google Maps APIが提供する機能を幾つか確認してみましょう。 ②指定した住所の地図を表示する（Geocoderクラス）
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには Google Maps APIが提供する機能を幾つか確認してみましょう。 ③各種制御ウィンドウを制御する （Markerクラス / InfoWindowクラス）
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには Google Maps APIが提供する機能を幾つか確認してみましょう。 ④地図のスタイルをカスタマイズする（StyledMapTypeクラス）
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
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 http://www.stevetrefethen.com/blog
/CallingWindowsClientCodeFromJavascriptHostedInsideTheWebBrowserControl.aspx
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには Googleマップ上で行われた操作をクライアントアプリ側に 通知してみましょう。
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Mapsを利用するには Googleマップ上で行われた操作をクライアントアプリ側に 通知してみましょう。
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• SimpleAPI最寄駅APIを利用するには 一般的なWebサービスは、HTTPのようなWWW関連技術で、 XMLやJSONといった形式のテキストデータをやり取りします。 そのため、以下のようなコンポーネントが利用されます。 ①Webサービス側から指定されたURLに対して、 HTTPプロトコルでパラメータを渡す → TIdHTTPコンポーネントを利用 ②レスポンスとして、XMLやJSONといった形式のテキスト データが返されるため、解析して値を取得する → XMLならTXMLDocumentコンポーネントを利用
[Internet]カテゴリ TXMLDocument コンポーネント
[Indy Clients]カテゴリ TIdHTTP
コンポーネント
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• SimpleAPI最寄駅APIを利用するには SimpleAPI vol.2 - 最寄り駅Webサービスについて URL： http://map.simpleapi.net/
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• SimpleAPI最寄駅APIを利用するには Googleマップから取得した緯度・経度を使って、最寄駅を検索 してみましょう。 ①SimpleAPI最寄駅APIを呼び出すURL http://map.simpleapi.net/stationapi?lat=[緯度座標]&lon=[経度座標]
②レスポンスの形式 形式省略時はXML outputパラメータでJSONやhtml、phpシリアライズ等を指定可能
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• SimpleAPI最寄駅APIを利用するには Googleマップから取得した緯度・経度を使って、最寄駅を検索 してみましょう。
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• SimpleAPI最寄駅APIを利用するには Googleマップから取得した緯度・経度を使って、最寄駅を検索 してみましょう。
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Geocoding APIを利用するには Google Geocoding APIによる逆ジオコーディングについて URL： http://code.google.com/intl/ja/apis/maps /documentation/geocoding/#ReverseGeocoding
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Geocoding APIを利用するには Googleマップから取得した緯度・経度を使って、住所を逆検索 してみましょう。 ①Google Geocoding APIを呼び出すURL http://maps.google.com/maps/api/geocode/xml?
latlng=[緯度],[経度]&sensor=false&language=ja
②レスポンスの形式 形式はXML URLを切り替えることでJSONを指定可能
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Webサービスを利用するには
• Google Geocoding APIを利用するには Googleマップから取得した緯度・経度を使って、住所を逆検索 してみましょう。
100% IBM i Company 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Googleマップを使ったアプリケーション例
• 取引先住所確認サンプル
