2011年11月27日


Google MAP API V3 の addDomListener でページロード時のイベントを登録する

自分で全てのコードを書くと、IE8 と それより前の Internet Explorer の為に
煩雑なコードを書く事が必要となります。

JS : 自分用名前空間を使ってページのロードイベントを登録

Google MAP API V3 は、API キーがいらなくなったので、気軽に読み込んで使用
したら良いと思います。二重のロードにも対応しているはずですし、いろいろな
ライブラリにも同様の機能はありますが、オーソドックスな仕様でもありますの
で一度試してみる価値はあります。
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>  
<script type="text/javascript">  
google.maps.event.addDomListener(window, 'load', function () {
	alert('ページがロードされました');
});  
</script> 


posted by at 2011-11-27 12:40 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする

2010年11月17日


Google Libraries API を使った YUI によるクッキーの扱い

JavaScript からのクッキーのアクセスは、document.cookie にアクセスするだけ
なので、フォーマットの仕様さえ知っておれば誰にでも扱えます。当然世の中に
はいろいろライブラリがあるとは思いますが、今の世の中、Google + Yahoo で
.js をホスティングせずに扱えるのでこれが王道かもしれません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
<title>Google Libraries API を使った YUI によるクッキーの扱い</title>
<style>
* {
	font-size:16px;
}
.act_button {
	width: 150px;
}
</style>

<script	type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script	type="text/javascript">
google.load("prototype", "1.6.1.0");
google.load("yui", "2.8.2");
</script>
<script type="text/javascript">
new YAHOO.util.YUILoader({
    require: ['cookie'],
    onSuccess: function() {}
}).insert();
</script>


</head>
<body>
<script type="text/javascript">
function writeCookie() {

	if ( $('fld1').value == '' ) {
		alert("keyを入力して下さい");
		$('fld1').focus();
	}

	// 現在のパスで参照可能なクッキー
	YAHOO.util.Cookie.set( $('fld1').value, $('fld2').value  );

	// 同一ドメインの全てのページで参照可能なクッキー
	YAHOO.util.Cookie.set( $('fld1').value, $('fld2').value+"_all", {path: "/" }  );

	// 有効期限を遠い未来にする
	YAHOO.util.Cookie.set( "save_data", "OK", {path: "/", expires: new Date(2025,0,12) }  );
}

function allCookie() {

		var allstr = "";
		var carray = document.cookie.split('; ');

		for(var i=0;i < carray.length;i++) {
			allstr += carray[i] + "\n";
		}

		alert(allstr);

}

function removeCookie() {

	// 現在のパスのクッキーの削除
	YAHOO.util.Cookie.remove($('remove_name1').value);

}

function removeCookie2() {

	// 指定したパスのクッキーを削除
	YAHOO.util.Cookie.remove($('remove_name2').value, {path: $('path').value });

}

</script>

<input class="act_button" type="button" value="書き込み" onclick='writeCookie();'>
key:<input type="text" id="fld1"> value:<input type="text" id="fld2" >
<br>
<input class="act_button" type="button" value="削除" onclick='removeCookie();'>

key:<input type="text" id="remove_name1">
<br>
<input class="act_button" type="button" value="パス指定削除" onclick='removeCookie2();'>

key:<input type="text" id="remove_name2"> &nbsp;path:<input type="text" id="path" >
<br>
<input class="act_button" type="button" value="全て表示" onclick='allCookie();'>

</body>
</html>



タグ:google
posted by at 2010-11-17 12:17 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする

2010年10月18日


Google MAP API : ルート探索とそのクエリの仕様

全体ソースはここのページでソース表示

ルート探索 : Google Maps API

Google MAP API のルート探索は、とても単純で既存のマップ表示に単純に重ねる
ようにできています。殆ど苦労無しに2点間の移動ルートを示してくれます。
( デフォルトの移動手段が車のはずです )

この際、一方通行も判断してくれるようで、どちらを出発点にするかによって変
わるようです。さらに、実行時のオプションで、高速道路を無視する事もできま
す。それと、殆どジョークの世界ですが、国外に到着地点を設定すると面白いで
す。

Google MAP API : ルート探索。太平洋をカヤックで横断する 6,243 km
Ggmap_route3

一番重要なのは、2つの点の指定方法ですが、サービス - Google Maps APIGoogle Maps API リファレンス にそのクエリの文法が書かれています。

一つは、from: 住所1 to: 住所2ですが、
from: 緯度1, 経度2 to: 緯度2, 経度2 でうまく動いています。

// *********************************************************
// ルート探索
// *********************************************************
function getRoute() {

	lbox.map.clearOverlays();

	var query = "from: " + document.getElementById("point_a_1").value;
	query += " ," + document.getElementById("point_a_2").value;
	query += " to: " + document.getElementById("point_b_1").value;
	query += " ," + document.getElementById("point_b_2").value;

	if ( document.getElementById("highways").checked ) {
		lbox.directions.load(query,{avoidHighways: true});
	}
	else {
		lbox.directions.load(query,{avoidHighways: false});
	}

}

オプションについては、Google Maps API リファレンス - Google Code に記述
がありますが、「コンストラクタはありませんが、オブジェクト リテラルと
してインスタンス化されます。」とあります。要するにそのままオブジェクト
表現しろという事で、{ プロパティ1 : 値1, プロパティ2 : 値2 } という表記
を直接するか、インスタンス作って代入しろという事です。

var opt = {avoidHighways: true};
lbox.directions.load(query,opt);

lbox は、window オブジェクトを使って専用の名前空間作って、グローバル
変数として使っています。

関連する記事

JavaScript : ネームスペースの作成
// 名前空間作成
window["lbox"] = {};
lbox.map = null;



posted by at 2010-10-18 15:35 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します