Google Japan Blog: Google Maps API でマネタイズを見て、Google Mapsに広告を載せられることを知りました。

これはいい！ということで、以前、iphone向け（現在は、Android、Firefox 3.5に対応済）に開発したWebアプリ、Strayed Childの地図に載せたいと思います。

バックナンバーはこちら。

Services – Google Maps API – Google Codeを参考に実装してみました、非常に簡単です。

	var adsManagerOptions = {
		maxAdsOnMap : 2,
		style: G_ADSMANAGER_STYLE_ADUNIT
	};

	adsManager = new GAdsManager(map, 'pub-XXXXXXXXXX', adsManagerOptions);
	adsManager.enable();

という数行を、初期化処理に入れればいいだけです。

ただ、これだと、



のように、住所表示が広告に押し出されて、画面からはみでるような感じになってしまいます。

Google Maps API Reference – Google Maps API – Google Codeを見ると、

G_ADSMANAGER_STYLE_ICON

というオプションがありました。広告がアイコン風の表示になるのだと思い、試してみたのですが、広告自体が表示されなくなってしまいました。

日本語訳のGoogle Maps API リファレンス – Google Maps API – Google Codeを見ると、なんと、styleオプション自体がありません。。。



えー。。。

とりあえず、アイコン風表示は対応されるまで待つことにします。

とはいえ、このままでは住所が見づらいので、広告の表示は1件にしました。

表示されている地図に関連した広告が出るはずなので、便利になると思います！iPhoneやAndroidをお持ちの方、是非、試してみてください！

Strayed Child

httpsでホームページにアクセスすると、以下のような警告が出る場合があります。

このページにはセキュリティで保護されている項目と保護されていない項目が含まれます。

保護されていない項目を表示しますか？

これは、呼び出したhtmlの中にhttpのコンテンツが含まれているのが原因です。例えば、htmlはhttpsで呼び出しているのに、htmlの中に含まれる画像がhttpで呼び出されているような場合に起こったりします。

jQueryのライブラリのひとつにthickboxというのがあります。これをhttpsで利用すると、httpのコンテンツを表示しようとしているわけではないのに、IE6で同様の警告が出ます。

いろいろ調べていると、thickbox, https, ie6 and os x firefox compatibility issues | disjoint thoughtsに同じような現象について書かれているのを見つけました。

なるほど！原因がわかりました。thickboxではiframeをsrc属性なしで利用しているからです。IEではSSLの時、iframeのsrc属性がなかったり、値を設定していなかったりするとセキュリティ警告のメッセージが出ることがあるようです。
[PRB] FRAME/IFRAME を含むページを SSL により参照するとセキュリティ警告メッセージが発生する

なので、iframeのsrc属性にブランクのhtmlを設定するようにthickbox.jsを修正します。ん？よく見ると、コメントの方にもっと良いやり方がありました（「UPDATE:」として追記もされています）。
thickbox, https, ie6 and os x firefox compatibility issues | disjoint thoughts
このやり方で直すことにします。

thickbox.jsの場合、38行目の、

$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");

のiframeの部分を

<iframe id='TB_HideSelect' src='javascript:false'>

に直します。

ただ、私の場合、thickbox-compressed.jsを使っていたので、場所を見つけるのが大変です。

thickbox-compressed.jsでは、jsファイルの容量を抑えるため、スペースやタブ、改行を省いてあったり、変数や関数名を短縮したり、ソースの書き方を変えたり、といった圧縮がされているからです。

何とか見つけました。
1行なので、場所を説明しづらいですが、

|iframe|

という場所があります。|iframe|という文字列を検索すると1箇所しかないので、そこを

|iframe src=\’javascript:false\’|

に修正します。

これで、https環境でthickboxを利用していても、不要なファイル（ブランクのhtml）を用意することなく、警告が出ないよう対応することができました！

flashcastでは、WordPressのテンプレートにオリジナルのthemeを使用しているのですが、プラグインとjQueryのライブラリ併用時に、ある現象が発生していました。

現象

Bloggerを使用していた頃、ソースの表示にはsyntaxhighlighter – Project Hosting on Google Codeを利用していました。

WordPressに移行してからはWordPress › SyntaxHighlighter Evolved « WordPress Pluginsというプラグインを利用しています。

また、以下のような表示をしたいので、

jQueryのライブラリのひとつである、ThickBox 3.1を使っています。

これらを併用しているときに、IE6、IE7で、thickboxのダイアログを閉じた後も背景が非表示にならない、という現象でした。ソース表示を本文に含んでいない記事の場合には、この現象が発生しないので、併用しているときにのみこの現象が発生することがわかりました。

対策

この問題を回避するために、thickbox.jsを一部（tb_remove関数の中）カスタマイズしました。

●変更前

	$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});

●変更後

	$("#TB_window").fadeOut("fast",function()
		{
			$('#TB_window').trigger("unload").unbind().remove();
			$('#TB_overlay').trigger("unload").unbind().remove();
			$('#TB_HideSelect').trigger("unload").unbind().remove();
		}
	);

と、することで回避できました。

いろいろ試しているうちに偶然見つけたので、理由は分かりません。

ナゾです。

変更前と変更後では、関数の実行順が違うのでそのあたりに原因があるのではないかと思います。

flashcast：フリーで働くITエンジニア集団のブログ: Strayed ChildをFirefox 3.5対応の続きです。

もともとStrayed Childは、

• 拡大／縮小はiPhone、Androidの操作に任せていた。
• 表示は極力、地図だけにしたい。

ということで、ZoomIn、ZoomOutのボタンはつけていませんでした。

ただ、PCのブラウザで見ると、拡大はダブルクリックでできるのですが、縮小ができません。これは不便。。。なので、最小限の拡大／縮小機能を実装します。

GSmallZoomControl

を使います。

履歴画面に遷移するボタン

の下に出すようするため、

GControlPosition

を使います。

map.addControl(new GSmallZoomControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 34)));

こんな感じになります。

iPhoneやAndroidで見た時にはボタンが小さくなってしまいますが、あまり利用する場面が少ないと思いますので、とりあえず、良しとします。

それと、SQLiteが使える場合に、履歴画面に遷移するボタンを出すようにしていましたが、常に出すようしたので、SQLiteが使えない場合に履歴画面に遷移すると、「ごめんなさい」メッセージを表示するようにしました。

これでPCのブラウザでの使い勝手も、少しは良くなりました！

Firefox 3.5では位置情報通知機能が実装されています。
次世代ブラウザ Firefox – 位置情報通知機能

なので、Strayed ChildをFirefox 3.5でも使えるようにしたいと思います。

Geolocation対応

まず、位置情報を取得する部分を実装します。
とはいっても、Geolocation API Specificationに準拠しているようなので、iPhone対応のロジックがそのまま利用できます。
Geolocation の利用 – MDC

ただ、

どのような仕組みで動作するのですか？

位置情報通知機能に対応した Web サイトを開くと、Firefox はあなたの現在地をそのサイトに知らせて良いかどうかを尋ねます。

知らせることを許可した場合、Firefox は近隣の無線 LAN アクセスポイントに関する情報と、あなたのコンピュータに割り当てられている IP アドレスを収集します。それから Firefox はその情報を既定の位置情報サービスプロバイダである Google Location Service へ送信し、推測されたあなたの現在地を取得します。そしてこの位置情報が、情報を求めてきた元のサイトに知らされます。

知らせることを許可しなかった場合は、Firefox は何もしません。

次世代ブラウザ Firefox – 位置情報通知機能より引用。

IPアドレスから位置情報を割り出している場合には、ほとんどの場合、位置情報に変化がありません。

日本を基準にして、現在地の緯度・経度ともに1秒（約30メートル）以上変化した場合に住所を再表示するようにしたいと思います。

flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（iPhoneでテスト編）より引用。

2回目以降は地図上に住所が表示されなくなってしまいます。

これではつまらないので、初期表示時の仕様を少し変えます。

• 位置情報通知機能が利用できる場合、getCurrentPositionを利用して位置情報を取得する。
• 位置情報通知機能が利用できる場合、または、パラメータで緯度・経度情報を渡されたときのみ、住所を吹き出しに表示するようにする。

ということで、ロジックは以下のようになります。

 if (hasParam) {
  getAddress(new GLatLng(lat, lng), hasParam, isDbConnect);
 }
 else {
  if (gps != null) {
   gps.getCurrentPosition(
    function(e) {
     getAddress(new GLatLng(e.coords.latitude, e.coords.longitude), hasParam, isDbConnect, true);
    },
    function(error) {
     alert(error.message);
    }
   );
  }
 }

Firefox 3.5でStrayed Childにアクセスすると、こんな感じになります。

SQLite対応

試したのですが、Firefox 3.5.2ではHTML5 ローカルデータベース機能はまだサポートされていないようなので（2009/09/03時点）、実装できませんでした。

Gearsインストール済の環境でStrayed Childにアクセスすると、こんな感じになります（住所履歴画面に遷移するボタン、吹き出しの中の「save」ボタンが有効になっています）。

よかったら、試してみてください！
Strayed Child