yamachan Ajax/.NET/C# メモ

2007-01-27

[Ajax] Google MAPS を使用してみる

AjaxWeb2.0 がここまで盛り上がったのは、Googleマップ の存在が大きいのではないでしょうか。

プラグイン無しで実現された、ドラッグでスクロールする地図の存在は衝撃的でした。 新しい技術のメリットを判りやすく実現した、理想的なキラーアプリだと考えています。 さらにAPIが公開され、自サイトに組み込める点はもう素晴らしすぎて涙が出そうです。

というわけで、↓利用してみました。



Googleマップを利用する場合、ページに直接埋め込む方法と、別に用意したhtmlファイルをiframeで組み込む方法があります。

ページに直接埋め込む方法だと、利用する場所に全てのコードがあるので準備が簡単です。 ただ文字コードの問題が発生することがあるとか。 具体的には、そのページが UTF-8 で保存されているのが望ましいみたい。

またサイトごとに Google MAPS APIサイト から、APIキーを取得する必要があります。 Bloggerだと各blogのサイトは異なるので、それぞれに APIキーを取得して管理する必要がありそう。 僕のようにblog間の記事移動が多い(下書きblogから移動したりとか)場合は、これはちょっと面倒です。

そこで自身のドメイン rinco.jp でAPIキーを作成し、ここにマップ用のhtmlファイルを置くことにしました。 以下のようにiframeでページに組み込みます。

<iframe
src="http://rinco.jp/blog/yamachan_gmap.html
?zoom=15&ll=35.711308,139.775582&w=400&h=300"
width="400" height="300"
scrolling="NO" frameborder="0"
marginwidth="0" marginheight="0"
></iframe>

マップ用のhtmlは個別に用意するのも面倒です。 そこで Google MAPS サイトにあるサンプルをベースに、URLパラメータを参照するようにload()関数を拡張してみました。 使用している jp.rinco.url.parse() 関数は コチラ を参照。

function load() {
if (GBrowserIsCompatible()) {
var mArea = document.getElementById('maparea');
mArea.style.width=jp.rinco.url.parse("w","400px");
mArea.style.height=jp.rinco.url.parse("h","300px");
var zoom=jp.rinco.url.parse("zoom", "16");

var ll = jp.rinco.url.parse("ll", "35.68,139.76");
ll = ll.split(',');
var point = new GLatLng(ll[0],ll[1]);

var map = new GMap2(mArea);
map.addControl(new GSmallMapControl());
map.setCenter(point, +zoom);

var marker = new GMarker(point);
map.addOverlay(marker);
}
}

ただこのマップ用のhtmlファイル、利用制限をかけていないので、現時点ではどんなサイトからでも利用できてしまいます。 上記コードを利用するのは無論かまいませんが、マップ用htmlを直接利用するのは避けてくださいね。 APIキーをきちんと取得し、自分のサイトにマップ用htmlを設置してください。

2007-01-22

[JS] URLパラメータを得る関数

久しぶりに JavaScript を書いていて、URL パラメーターの値を入手する関数が必要になりました。 例えば、
http://yamachan-memo.blogspot.com/index.html?foo=12&bar=13
というURLだと、fooで12、barで13という値を得る方法。 Domino だと @UrlQueryString("foo") とかで一発なんだけど。

どっかにありそうと思って探したんだけど、うまく見つからなかった。 ざっと書いたものだけど、メモとして貼っておきます。
var foo = jp.rinco.parseURL(location.search, "foo", "haha");
var bar = jp.rinco.parseURL(location.search, "bar", "hehe");
とか使います。

ちなみに最後の引数は、該当するパラメータが見つからない場合のデフォルト値です。 必要がない場合には "" を指定してください。

jp.rinco.parseURL = function(url, name, value){
var pos_s = url.indexOf(name + "=");
if(pos_s < 0)
return value;
var url = url.substring(pos_s+name.length+1);
var pos_e = url.indexOf('&');
if (pos_e < 0)
return decodeURIComponent(url);
return decodeURIComponent(
url.substring(0, pos_e));
}


2007/1/29 追記: 戻り値を decodeURIComponent() するように修正
2007/2/27 追記: jp.rincoオブジェクト へ移動
2007/3/13 追記:

jp.rinco.url 内に移動&バグ修正

以下は jp.rinco.url 内に移動したロジックです。 jp.rinco.url は単なるインスタンスで、その実装は jp.rinco.urlTool となっています。 parse() 関数部分のみ貼っておきます。

this.parse = function(v1, v2, v3) {
var u; var n; var d;
if (v2 == undefined) {
u = this.param; n = v1; d = "";
} else if (v3 == undefined) {
u = this.param; n = v1; d = v2;
} else {
u = v1; n = v2; d = v3;
}

var pos = u.indexOf("?" + n + "=");
if(pos < 0)
pos = u.indexOf("&" + n + "=");
if(pos < 0)
return d;

var r = u.substring(pos + n.length + 2);
pos = r.indexOf('&');
if (pos < 0)
return decodeURIComponent(r);
return decodeURIComponent(r.substring(0, pos));
}

引数が3つの場合は従来の parseURL と同じ動作をします。 最初の url 引数は省略でき、その場合は現在の URL に対する動作になります。 最後のデフォルト値も省略できます。
var foo = jp.rinco.url.parse("foo.htm&a=1","foo", "haha");
var bar = jp.rinco.url.parse("bar", "hehe");
var puu = jp.rinco.url.parse("puu");
とか使います。

また "a=1" が "aa=1" にマッチしてしまう不具合がありましたので、修正してあります。

なお jp.rinco.url には現在のファイル名(例: このページだと"js-url.html")を得る file 属性など、url 処理に関する便利な機能を実装しています。 気が向いたら参考にしてみてください。

2007-01-21

[TALK] Ajax も対象にしてみました

えー、あいかわらず浮気者の僕でして。 Ajax も blog の対象に加えてみました。

数年前に使ってたときは DHTML って呼んでたと記憶してるんですが、とにかく Netscape 4.x と IE 4.x あたりで正常に動作するよう、非常に苦労した覚えがあります。 でも最近は JavaScript も DOM も非常に整理されている様子。

で、具体的なきっかけがありまして。 prototype.js の開発者向けメモ 読んで感動したこと。 JavaScript って変な言語だなとは思ってましたが、js ファイル1つでここまで変わるとは...。 一気に好きになっちゃいました。

あと試しに使ってみた Eclipse RCP ベースの開発環境 Aptana が便利だったこと。 いろいろ試して、数年間のギャップを埋めていきたいと考えています。