jQuery

YouTubeの埋め込みをレスポンシブに対応。

2020.04.22 / Notes

YouTubeの<iframe>による埋め込みをレスポンシブに対応するには、外側に<div>で囲み、次のようなCSSで可能です。

<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/xxxxxxxxxx"></iframe>
</div>

</div>

div.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 比率が16:9の場合 */
}
div.video-wrapper iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}

div.video-wrapper {

position: relative;

padding-bottom: 56.25%; /* 比率が16:9の場合 */

}

div.video-wrapper iframe {

position: absolute;

width: 100%;

height: 100%;

left: 0px;

top: 0px;

}

WordPressのエディタなどで、毎回手作業による囲む作業は大変なので、JavaScript（jQuery）で一括で処理を行っておくと便利です。

$("iframe[src*='youtube.com']").each(function() {
	$(this).wrap("<div class=\"video-wrapper\"></div>");
});

$("iframe[src*='youtube.com']").each(function() {

$(this).wrap("<div class=\"video-wrapper\"></div>");

});

jQueyで埋め込まれたSVGを操作する方法。

2015.07.20 / Labs

ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。

SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら

下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。

$(function() {
	$("#test").on("load", function() { //object読み込み後に実行
		var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得
		var circle = rect.find("#circle"); //SVGの中の円を取得
		circle.on({
			"mouseenter": function() {
				$(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に
			},
			"mouseleave": function() {
				$(this).css({opacity:1}); //マウスアウトで透明度を1に
			}
		});
	});
});

$(function() {

$("#test").on("load", function() { //object読み込み後に実行

var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得

var circle = rect.find("#circle"); //SVGの中の円を取得

circle.on({

"mouseenter": function() {

$(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に

"mouseleave": function() {

$(this).css({opacity:1}); //マウスアウトで透明度を1に

}

});

「test.svg」ファイルの中身はこちら

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle id="circle" fill="#333333" cx="50" cy="50" r="50"/>
</svg>

</svg>

注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。

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);

});

}

jQueryでスワイプ操作のイベントを取得。

2015.01.06 / Labs

jQueryを使ってスマートフォン、タブレットでのスワイプ操作をTouchイベントから取得する方法です。
サンプルはこちら

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Touch</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function() {
	$("div#touch").bind("touchstart", onTouchStart);
	$("div#touch").bind("touchmove", onTouchMove);
	$("div#touch").bind("touchend", onTouchEnd);
	var direction, position;
	
	//スワイプ開始時の横方向の座標を格納
	function onTouchStart(event) {
	    position = getPosition(event);
	}
	
	//スワイプの方向（left／right）を取得
	function onTouchMove(event) {
		direction = (position > getPosition(event)) ? "left" : "right";
	}
	
	//スワイプ終了時に方向（left／right）をクラス名に指定
	function onTouchEnd(event) {
		$("div#touch").removeAttr("class").addClass(direction);
	}
	
	//横方向の座標を取得
	function getPosition(event) {
		return event.originalEvent.touches[0].pageX;
	}
});
</script>
<style type="text/css">
div#touch {
	width: 200px;
	height: 200px;
	margin: 0px auto;
	background-color: #e6e6e6;
}
div#touch.left {
	background-color: #ff0000;/* 背景を赤色に */
}
div#touch.right {
	background-color: #0000ff;/* 背景を青色に */
}
</style>
</head>
<body>

<div id="touch"></div><!-- スワイプの対象 -->

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Touch</title>

$(function() {

$("div#touch").bind("touchstart", onTouchStart);

$("div#touch").bind("touchmove", onTouchMove);

$("div#touch").bind("touchend", onTouchEnd);

var direction, position;

//スワイプ開始時の横方向の座標を格納

function onTouchStart(event) {

position = getPosition(event);

}

//スワイプの方向（left／right）を取得

function onTouchMove(event) {

direction = (position > getPosition(event)) ? "left" : "right";

}

//スワイプ終了時に方向（left／right）をクラス名に指定

function onTouchEnd(event) {

$("div#touch").removeAttr("class").addClass(direction);

}

//横方向の座標を取得

function getPosition(event) {

return event.originalEvent.touches[0].pageX;

}

});

</script>

div#touch {

width: 200px;

height: 200px;

margin: 0px auto;

background-color: #e6e6e6;

}

div#touch.left {

background-color: #ff0000;/* 背景を赤色に */

}

div#touch.right {

background-color: #0000ff;/* 背景を青色に */

}

</style>

</head>

<body>

</body>

</html>

上記はスワイプの開始（スクリーンにタッチ）からスワイプの終了（スクリーンから離れる）までの座標の距離を測定して、左右の方向を取得するだけの非常にシンプルなものです。
確認のために、方向によってスワイプ対象DIVの背景色を変えるようにしています。