JavaScript

Google Mapsを簡単に設置。

2010.09.22 / Labs

Google Maps API Version 3になってからAPIキーが不要になり、ホームページへ手軽に設置できるようになりました。
基本的なGoogle Mapsを設置するためのコードを、コンパクトにまとめてみました。
サンプルはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function() {
setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});
});

function setMap(param) {
	var position = new google.maps.LatLng(param.lat, param.lng);
	var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};
	var container = new google.maps.Map(document.getElementById(param.container), map_options);
	var marker_options = {position:position, map:container};
	var window_options = {content:param.text};
	var window = new google.maps.InfoWindow(window_options);
	var marker = new google.maps.Marker(marker_options);
	google.maps.event.addListener(marker, "click", function() {
		window.open(container, marker);
	});
}
</script>
<title>Google Maps</title>
</head>
<body>
<div id="map" style="width:500px; height:500px;"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(function() {

setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});

});

function setMap(param) {

var position = new google.maps.LatLng(param.lat, param.lng);

var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};

var container = new google.maps.Map(document.getElementById(param.container), map_options);

var marker_options = {position:position, map:container};

var window_options = {content:param.text};

var window = new google.maps.InfoWindow(window_options);

var marker = new google.maps.Marker(marker_options);

google.maps.event.addListener(marker, "click", function() {

window.open(container, marker);

});

}

</script>

<title>Google Maps</title>

</head>

<body>

</body>

</html>

最初に、Google Maps APIを読み込みます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

1	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Google Mapsを設置するための関数を呼び出します。引数にはオブジェクトで、表示するためのDIV要素のID、緯度、経度、ズーム、ウィンドウのテキストを入れています。

setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});

1	setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});

関数はセンターにマーカーを表示して、クリックでウィンドウが開くシンプルな構成です。

function setMap(param) {
	var position = new google.maps.LatLng(param.lat, param.lng);
	var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};
	var container = new google.maps.Map(document.getElementById(param.container), map_options);
	var marker_options = {position:position, map:container};
	var window_options = {content:param.text};
	var window = new google.maps.InfoWindow(window_options);
	var marker = new google.maps.Marker(marker_options);
	google.maps.event.addListener(marker, "click", function() {
		window.open(container, marker);
	});
}

function setMap(param) {

var position = new google.maps.LatLng(param.lat, param.lng);

var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};

var container = new google.maps.Map(document.getElementById(param.container), map_options);

var marker_options = {position:position, map:container};

var window_options = {content:param.text};

var window = new google.maps.InfoWindow(window_options);

var marker = new google.maps.Marker(marker_options);

google.maps.event.addListener(marker, "click", function() {

window.open(container, marker);

});

}

特定の拡張子のリンクファイルのみ別ウィンドウで表示。

2010.05.18 / Notes

<a>タグでリンクを張られたファイルがPDFなど特定の拡張子を持つ場合に、jQueryを使って別ウィンドウで表示する際のメモです。

$("a[href$='pdf']").each(function() {
	$(this).click(function() {
		window.open($(this).attr("href"));
		return false;
	});
});

$("a[href$='pdf']").each(function() {

$(this).click(function() {

window.open($(this).attr("href"));

return false;

});

href属性の値が「pdf」で終わる<a>タグ全てに対して、別ウィンドウでの表示に置き換えています。

jQueryでクッキーを使ったフォントサイズ変更の方法。

2010.05.16 / Notes

jQueryでフォントサイズのスタイルシートを動的に切り替えて、現在表示しているスタイルシートをクッキーに保存する方法です。
スタイルシートは、あらかじめフォントのサイズごとに3種類用意しておきます。

font-small.css
font-default.css
font-large.css

font-small.css

font-default.css

font-large.css

次のコードでは、ページ内にレイアウト用など複数のスタイルシートを読み込むことを想定して、フォントサイズ用のスタイルシートのみを切り替えています。

$(document).ready(function() {
	
	//フォントサイズ用のCSSファイル名
	var css_default = "font-default.css";
	
	//クッキーから読み込んで、現在のCSSファイルを設定
	var css_current = ($.cookie("css")) ? $.cookie("css") : css_default;
	
	//フォントサイズ用CSSのリンク
	var link = $("link[href="+css_default+"]");
	
	//リンクのhref属性に現在のCSSファイルを読み込み
	link.attr("href", css_current);
	
	//クリックされたサイズに変更して、クッキーに書き込み
	$("ul#font-size li").click(function() {
    	css_current = "font-"+$(this).attr("class")+".css";
		link.attr("href", css_current);
        $.cookie("css", css_current, {expires:1});
    });
});

$(document).ready(function() {

//フォントサイズ用のCSSファイル名

var css_default = "font-default.css";

//クッキーから読み込んで、現在のCSSファイルを設定

var css_current = ($.cookie("css")) ? $.cookie("css") : css_default;

//フォントサイズ用CSSのリンク

var link = $("link[href="+css_default+"]");

//リンクのhref属性に現在のCSSファイルを読み込み

link.attr("href", css_current);

//クリックされたサイズに変更して、クッキーに書き込み

$("ul#font-size li").click(function() {

css_current = "font-"+$(this).attr("class")+".css";

link.attr("href", css_current);

$.cookie("css", css_current, {expires:1});

});

<head>タグ内にjQueryの本体と、「jquery.cookie.js」を読み込みます。

<link href="base.css" rel="stylesheet" type="text/css" media="all" />
<link href="font-default.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

フォント切り替えのためのボタンを、ページ内に<li>で記述します。
クラス名が、スタイルシートのファイル名に関連しています。

<ul id="font-size">
<li class="small">small</li>
<li class="default">default</li>
<li class="large">large</li>
</ul>

<li class="small">small</li>

<li class="default">default</li>

<li class="large">large</li>

</ul>

ウィンドウ内をスクロールするパネル。

2010.04.25 / Labs

jQueryによるウィンドウ内を、左右にスクロールするパネルのスクリプトです。
横幅1000pxのパネルを横に5枚並べて、リンクをクリックすることで目的のパネルに移動するスクリプトです。
アニメーションのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("a.panel-01").click(function() {scrollGeneral(0)});
	$("a.panel-02").click(function() {scrollGeneral(1000)});
	$("a.panel-03").click(function() {scrollGeneral(2000)});
	$("a.panel-04").click(function() {scrollGeneral(3000)});
	$("a.panel-05").click(function() {scrollGeneral(4000)});

})
function scrollGeneral(pos) {
	$("div#container").animate({scrollLeft: pos}, {duration: 750, easing: "easeOutQuint"});
	return false;
}
</script>
<title>scroll-panel</title>
</head>
<body>



<!-- navi - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="navi">
<ul>
<li><a href="javascript:;" class="panel-01">01</a></li>
<li><a href="javascript:;" class="panel-02">02</a></li>
<li><a href="javascript:;" class="panel-03">03</a></li>
<li><a href="javascript:;" class="panel-04">04</a></li>
<li><a href="javascript:;" class="panel-05">05</a></li>
</ul>
</div><!-- navi -->



<div id="container">
<div id="general">



<!-- panel-01 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-01" class="inner">
<p>panel-01</p>
</div><!-- panel-01 -->



<!-- panel-02 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-02" class="inner">
<p>panel-02</p>
</div><!-- panel-02 -->



<!-- panel-03 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-03" class="inner">
<p>panel-03</p>
</div><!-- panel-03 -->



<!-- panel-04 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-04" class="inner">
<p>panel-04</p>
</div><!-- panel-04 -->



<!-- panel-05 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<div id="panel-05" class="inner">
<p>panel-05</p>
</div><!-- panel-05 -->



</div><!-- general -->
</div><!-- container -->



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(function(){

$("a.panel-01").click(function() {scrollGeneral(0)});

$("a.panel-02").click(function() {scrollGeneral(1000)});

$("a.panel-03").click(function() {scrollGeneral(2000)});

$("a.panel-04").click(function() {scrollGeneral(3000)});

$("a.panel-05").click(function() {scrollGeneral(4000)});

})

function scrollGeneral(pos) {

$("div#container").animate({scrollLeft: pos}, {duration: 750, easing: "easeOutQuint"});

return false;

}

</script>

<title>scroll-panel</title>

</head>

<body>

<ul>

</ul>

</div>

<p>panel-01</p>

</div>

<p>panel-02</p>

</div>

<p>panel-03</p>

</div>

<p>panel-04</p>

</div>

<p>panel-05</p>

</div>

</div>

</div>

</body>

</html>

style.css

@charset "utf-8"; 



/* text -------------------------------------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
}
html,
body {
	height: 100%;
}
html {
	overflow: hidden;
}



/* navi -------------------------------------------------------------------------------- */

div#navi {
	position: absolute;
}


/* container -------------------------------------------------------------------------------- */

div#container {
	overflow: hidden;
	width: 100%;
	height: 100%;
}



/* general -------------------------------------------------------------------------------- */

div#general {
	width: 6000px;
	height: 100%;
}
div#general div.inner {
	float: left;
	width: 1000px;
	height: 800px;
}
div#general div.inner p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 60px;
	color: #d9d9d9;
	padding: 30px 60px;
}



/* panels -------------------------------------------------------------------------------- */

div#panel-01 {
	background: #f8f8f8;
}
div#panel-02 {
	background: #ffffff;
}
div#panel-03 {
	background: #f8f8f8;
}
div#panel-04 {
	background: #ffffff;
}
div#panel-05 {
	background: #f8f8f8;
}

@charset "utf-8";

/* text -------------------------------------------------------------------------------- */

* {

margin: 0px;

padding: 0px;

}

html,

body {

height: 100%;

}

html {

overflow: hidden;

}

/* navi -------------------------------------------------------------------------------- */

div#navi {

position: absolute;

}

/* container -------------------------------------------------------------------------------- */

div#container {

overflow: hidden;

width: 100%;

height: 100%;

}

/* general -------------------------------------------------------------------------------- */

div#general {

width: 6000px;

height: 100%;

}

div#general div.inner {

float: left;

width: 1000px;

height: 800px;

}

div#general div.inner p {

font-family: Helvetica, Arial, sans-serif;

font-size: 60px;

color: #d9d9d9;

padding: 30px 60px;

}

/* panels -------------------------------------------------------------------------------- */

div#panel-01 {

background: #f8f8f8;

}

div#panel-02 {

background: #ffffff;

}

div#panel-03 {

background: #f8f8f8;

}

div#panel-04 {

background: #ffffff;

}

div#panel-05 {

background: #f8f8f8;

}

jQueryを使ってナビゲーションボタンなどによく使われている、画像のロールオーバー、ロールアウトを設定する方法です。
予め通常時、ロールオーバー時の画像データ2種類を用意します。ファイル名は通常時が「button.png」の場合、ロールオーバー時は「button-over.png」と「-over」を付加しておきます。ともに同じディレクトリに保存します。
HTMLに通常時の画像を配置し、クラスを「over」としておきます。

<img src="button.png" alt="ボタン" class="over" />

1	<img src="button.png" alt="ボタン" class="over" />

次のjQueryを含むJavasScriptを、Head内、外部ファイルなど任意の場所に記述します。

$(function(){
	imageOver();
})

//イメージのロールオーバー設定
function imageOver() {

	//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行
	$("img.over").each(function() {
		
		//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成
		var image = this.src;
		var extension = image.substr(image.lastIndexOf("."), image.length-1);
		var image_over = image.replace(extension, "-over"+extension);
		
		//ロールオーバー用イメージを読み込み
		new Image().src = image_over;
		
		//ロールオーバー、ロールアウト時のイメージURL設定
		$(this).hover(
			function(){this.src = image_over},
			function(){this.src = image}
		);
	});
}

$(function(){

imageOver();

})

//イメージのロールオーバー設定

function imageOver() {

//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行

$("img.over").each(function() {

//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成

var image = this.src;

var extension = image.substr(image.lastIndexOf("."), image.length-1);

var image_over = image.replace(extension, "-over"+extension);

//ロールオーバー用イメージを読み込み

new Image().src = image_over;

//ロールオーバー、ロールアウト時のイメージURL設定

$(this).hover(

function(){this.src = image_over},

function(){this.src = image}

);

});

}

上記のスクリプトでは、HTMLページ内に配置してある「over」クラスを持つイメージ全てに対して、ロールオーバー時に「-over」を付加した画像ファイルに置き換える設定にしてあります。ロールアウトで元の画像に戻します。
スクリプト内でロールオーバー用画像を読み込んでおくことにより、ロールオーバー時に画像の読み込みのため一瞬、間が空くことを防いでいます。

Almondlab

JavaScript

Google Mapsを簡単に設置。

特定の拡張子のリンクファイルのみ別ウィンドウで表示。

jQueryでクッキーを使ったフォントサイズ変更の方法。

ウィンドウ内をスクロールするパネル。

index.html

style.css

jQueryでイメージのロールオーバーの設定。