JavaScript

JavaScriptライブラリの読み込みにCDNを活用。

2015.07.17 / Notes

jQueryなどサイト構築の上で毎回利用するようなライブラリについては、サーバにファイルをアップロードするよりもCDNを利用したほうが使い勝手も良く、サーバへの負荷を減らせるためパフォーマンス向上にも有効です。

主要なCDNとしては、「Google Hosted Library」「Microsoft Ajax Content Delivery Network」「jsDelivr」「cdnjs.com」があります。

jQueryの最新版をそれぞれ読み込む場合、次のようになります。

<!-- Google Hosted Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Microsoft Ajax Content Delivery Network -->
<script src="ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>

<!-- jsDelivr -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- cdnjs.com -->
<script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>

複数のJavaScriptライブラリを読み込みたいときには1行ずつ追加しても良いのですが、jsDelivrなら単一のファイルとして統合して読み込むこともできます。

jQueryとjQueryのプラグインを同時に読みこむ場合には、次のようになります。

<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@2.1.4(jquery.min.js),jquery.cookie@1.4.1(jquery.cookie.min.js)"></script>

1	<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@2.1.4(jquery.min.js),jquery.cookie@1.4.1(jquery.cookie.min.js)"></script>

jQueryによる画像プリロード。

2015.02.02 / Notes

CSSを使ってボタンのロールオーバーで画像を差し替えなどの処理の際に、画像が読み込まれていない状態では一瞬ちらつきが発生することがあります。
ロールオーバー用の画像をあらかじめ読み込むために、jQueryを使って画像をプリロードするためのメモです。

//プリロードする画像を配列で渡します
priloadImages(["image-01.jpg", "image-02.jpg", "image-03.jpg"]);

function preloadImages(images) {
	$.each(images, function(index, value) {
		$("<img>").attr("src", value);
	});
}

//プリロードする画像を配列で渡します

priloadImages(["image-01.jpg", "image-02.jpg", "image-03.jpg"]);

function preloadImages(images) {

$.each(images, function(index, value) {

$("<img>").attr("src", value);

});

}

Drupal 7のテーマでIE向けのJavaScriptの読み込み。

2014.04.05 / Notes

Drupalのテーマで、古いIE向けに条件コメント付きのJavaScriptの読み込み方法です。

テーマディレクトリ内の「template.php」ファイルにプリプロセスとして次のように記述します。

<?php
function THEMENAME_preprocess_html(&$variables) {
	drupal_add_html_head(array(
		'#tag' => 'script',
		'#attributes' => array('src' => drupal_get_path('theme', 'THEMENAME').'/js/ie9.js'),
		'#prefix' => '<!--[if lt IE 9]>',
		'#suffix' => '</script><![endif]-->'
		),
		'ie9'
	);
}
?>

<?php

function THEMENAME_preprocess_html(&$variables) {

drupal_add_html_head(array(

'#tag' => 'script',

'#attributes' => array('src' => drupal_get_path('theme', 'THEMENAME').'/js/ie9.js'),

'#prefix' => '<!--[if lt IE 9]>',

'#suffix' => '</script><![endif]-->'

'ie9'

);

}

実際のレンダリングでは次のようになります。

<!--[if lt IE 9]>
<script src="sites/all/themes/THEMENAME/js/ie9.js" /></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

jQueryでウィンドウリサイズ時にタイマー処理。

2013.11.11 / Notes

ウィンドウのリサイズ時に、少し遅れて画像を移動させたりするためのタイマー処理のメモです。
「resize」の部分を「scroll」にすれば、スクロール時のタイマー処理になります。

var timer;
var delay = 100;//遅延時間（ミリ秒）
$(window).resize(function() {
	if (timer) {
		clearTimeout(timer);
	}
	timer = setTimeout(onTimer, delay);
});

function onTimer() {
    //処理
}

var timer;

var delay = 100;//遅延時間（ミリ秒）

$(window).resize(function() {

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(onTimer, delay);

});

function onTimer() {

//処理

}

jQueryのプラグイン「jScrollPane」でカスタムスクロールバーを簡単に設置。

2013.10.26 / Notes

デザインをカスタマイズできる、jQueryのプラグイン「jScrollPane」でスクロールバーを簡単に設置する際のメモです。
サンプルはこちら

設置にはjQuery本体と、jScrollPaneプラグインにマウスホイール用のプラグインをあらかじめ読み込みます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Panel</title>
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="common/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="common/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(function() {
$("div.scroll-pane").jScrollPane({animateScroll:true, verticalGutter:0}).data("jsp");
});
</script>
</head>
<body>
<div id="content" class="scroll-pane">
<p>ここにテキストなどのコンテンツを記述します。</p>
</div><!-- content -->
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Scroll Panel</title>

$(function() {

$("div.scroll-pane").jScrollPane({animateScroll:true, verticalGutter:0}).data("jsp");

});

</script>

</head>

<body>

<p>ここにテキストなどのコンテンツを記述します。</p>

</div>

</body>

</html>

スタイルシートは最小限のみを記述しています。

div.jspContainer {
	position: relative;
	overflow: hidden;
}
div.jspPane {
	position: absolute;
}
div.jspVerticalBar {
	position: absolute;
	width: 10px;
	height: 100%;
	top: 0px;
	right: 0px;
	background-color: #e6e6e6;
}
div.jspVerticalBar * {
	margin: 0px;
	padding: 0px;
}
div.jspCap {
	display: none;
}
div.jspTrack {
	position: relative;
}
div.jspDrag {
	position: relative;
	left: 0px;
	top: 0px;
	cursor: pointer;
	background-color: #808080;
}
div.scroll-pane {
	width: 500px;
	height: 250px;
	overflow: auto;
}

div.jspContainer {

position: relative;

overflow: hidden;

}

div.jspPane {

position: absolute;

}

div.jspVerticalBar {

position: absolute;

width: 10px;

height: 100%;

top: 0px;

right: 0px;

background-color: #e6e6e6;

}

div.jspVerticalBar * {

margin: 0px;

padding: 0px;

}

div.jspCap {

display: none;

}

div.jspTrack {

position: relative;

}

div.jspDrag {

position: relative;

left: 0px;

top: 0px;

cursor: pointer;

background-color: #808080;

}

div.scroll-pane {

width: 500px;

height: 250px;

overflow: auto;

}

jScrollPane