ビジネス向けWEBサイトをつくる

スクリプティングに挑戦広告・PR

jQueryの起動制御をjQueryプラグインの実例で学ぶ

本ページはプロモーションが含まれています

ホームページの要素を制御したり、CSSをコントロールしたりする上で、便利なのがJavaScriptです。

最近ではCSSも進化しているので、昔ほどJavaScriptに依存していないのかもしれませんが、JavaScriptはホームページを作る際には必須の技術だといえます。

また、JavaScriptは使えないけどjQueryは簡単という印象をお持ちの方もいらっしゃるかもしれません。

jQueryは「JavaScriptライブラリ」なので、簡単にいうと一定の使い方の決まりで、JavaScriptを使いやすくしたものです。

HTMLの要素を扱いやすいので、ホームページを作る際には、使用の機会は多いと思います。

JavaScriptにしてもjQueryにしても比較的習得しやすい言語なので、完全に理解していなくても使えてしまいます。

しかし、上手く動かないケースもあります。

動かないほとんどの原因は実行のタイミングに誤りがあることです。

このページでは主にjQueryプラグインを使うことによって、jQueryの起動方法を紹介しています。

まず、JavaScript起動の基本をjQueryとJavaScriptの比較で紹介します。

※分かりやすく解説するために、なるべく用語の説明を排除して概念的に説明していきます。

プロモーション

JavaScript起動の基本

JavaScriptはHTML上のステートメントが読み込まれた際に起動します。

HTMLは上から順番にステートメントが読み込まれますのでJavaScriptも上から実行されます。

HTMLを操作する場合、該当の箇所が読み込まれていないとJavaScriptはうまく動きません。

JavaScriptがHTMLの上部にあり、下部のフッターを操作したいような場合は注意が必要です。

しかし、JavaScriptにしてもjQueryにしても、HTML要素や画像を読み込んだ後に、実行タイミングを決定するための書き方を用意しています。

jQueryの起動

jQueryの場合は以下の様に書くとHTML要素が読み込まれた（DOMツリーの構築が完了）後に実行されます。

$(function() {
//実行する処理を書く
});

以下のようなに書けば、画像やリンクしたCSS等のすべての読み込みが完了した後に実行されます。

$(window).on('load', function() {
//実行する処理を書く
});

$(window).onを使うと画面が回転した場合やリサイズされた場合に処理することもできます。

$(window).on('orientationchange',function(){
//実行する処理を書く
});
$(window).on('resize',function(){
//実行する処理を書く
});

JavaScriptの起動

JavaScriptの場合は以下の様に書くとHTML要素が読み込まれた後に実行されます。

document.addEventListener('DOMContentLoaded', function(){
//実行する処理を書く
});

画像等も読み込まれた後の場合はonloadやwindow.onloadやaddEventListenerを使います。

<body onload="//実行する処理">
window.onload = function() {
//実行する処理を書く
}
window.addEventListener("load", function() {
//実行する処理を書く
});

画面が回転した場合やリサイズされた場合に処理したい場合は以下のような記述です。

window.addEventListener('orientationchange',function(){
//実行する処理を書く
});
window.addEventListener('resize',function(){
//実行する処理を書く
});

jQueryとJavaScriptでは同じ起動タイミングでも記述が少し異なります。

間違えないようにしましょう。

以上のようにスクリプトの実行タイミングは制御できるということを覚えてください。

上記では、とりあげていないスクリプトの実行タイミング指定方法もあります。

次からは実際にjQueryプラグインを実行する事例のコードをみることで、jQueryのさまざまな起動方法を紹介します

「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る

オススメの理由は、以下のページをチェックしてください。

関連記事 企業のWEB担当者にオススメ、ビジネス戦略のPDCAを回すコーポレートサイトの作り方

jQuery内でリサイズを判定する「window.onresize = function(){}」

$(function() {});の内部でウインドウリサイズのイベントを判定することもできます。

その場合window.onresize = function(){を使った事例があります。

これはwindow.addEventListener(‘resize’,function(){と同じ処理です。

以前、スライダーjQueryプラグイン「Slider Pro」をレスポンシブに対応させるために使用していました。

jQueryプラグイン「Slider Pro」については以下を参照してください。

jQueryスライダー Slider Pro の使い方 ｜ Gimmick log
gimmicklog.com
jQueryスライダー Slider Pro の使い方 ｜ Gimmick log
Slider Proは多様なオプションで痒いところに手が届くスライダーです。一番ありがたいのは、CSSなどを調整しなくても、オプションの...

jQueryプラグイン「Slider Pro」スライド領域の高さをフルレスポンシブに対応させる

jQueryを使えばスライダーのjQueryプラグイン「Slider Pro」をレスポンシブに対応させることができます。

PCとスマホでスライダーの高さが変わるような場合は少し工夫が必要になります。

「Slider Pro」のスライド部分のHTMLは、以下のように設置しています。
通常は<img>タグを設置しますが、以下の場合はCSSで各イメージを設置しています。（<img>タグをコメントアウトしています）

<div id="slider" class="slider-pro">
	<ul class="sp-slides">
		<li id="img01" class="sp-slide"><!-- <img class="sp-image" src="index/image/image01.jpg" alt="image01"> --></li>
		<li id="img03" class="sp-slide"><!-- <img class="sp-image" src="index/image/image03.jpg" alt="image03"> --></li>
		<li id="img04" class="sp-slide"><!-- <img class="sp-image" src="index/image/image04.jpg" alt="image04"> --></li>
		<li id="img05" class="sp-slide"><!-- <img class="sp-image" src="index/image/image05.jpg" alt="image05"> --></li>
		<li id="img06" class="sp-slide"><!-- <img class="sp-image" src="index/image/image02.jpg" alt="image06"> --></li>
	</ul>
</div>

このように設置されたスライダーの高さを変更する必要がある場合は、以下のjQueryを追加します。

$(function() {
	//スライダーのレスポンシブ
	var timer = false;
	window.onresize = function(){
		if (timer !== false) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			if ($(window).width() > 700) {
				maxHeight = 480;
			} else {
				maxHeight = 290;
			}
			$("#slider").css("height",maxHeight+"px");
			$(".sp-mask").css("height",maxHeight+"px");
			$(".sp-slide").css("height",maxHeight+"px");
		}, 200);
	};
});

ブレイクポイントを700として、PCでは480、スマホでは290が高さとなります。

「Slider Pro」の3つの要素「#slider」「.sp-mask」「.sp-slide」をリサイズ時に設定することで、高さの変更にも対応出来るようになります。

「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る

オススメの理由は、以下のページをチェックしてください。

関連記事 企業のWEB担当者にオススメ、ビジネス戦略のPDCAを回すコーポレートサイトの作り方

任意のタイミングでイベントを発生させる「.trigger()」

.trigger()を使用すると任意のタイミングでリサイズやクリックなどのイベントを発生させることができます。

ブロックのレンガ積みを行うjQueryプラグイン「Masonry」を使った際に、どうしても再配置することができず、やむなく「Masonry」の初期化と同時に.trigger()でリサイズイベントを発生させました。

jQueryプラグイン「Masonry」については以下を参照してください。

masonry.desandro.com
Masonry
Cascading grid layout library

Masonryの再配置をjQueryのウィンドウリサイズトリガーで発生させる。

「Masonry」はブロック状の要素をレンガのように並べ替えてくれるjQueryプラグインですが、リセットのタイミングや動的コンテンツとの組み合わせで、きちんと並べ替えを行ってくれないことがあります。

通常は以下の様なコードで並べ替えのリセットを行います。

function Masonry_Reset() {
	$('#masonry_container').masonry({
		itemSelector : '.item',
		columnWidth : 230,
		isAnimated : true,
		isFitWidth : true,
		animationOptions: {
			duration: 300
		}
	});
}

リセットしても並べ替えが起こらない場合は、おそらくjQueryの処理が同期していないためです。

私の場合、見出しのCSSクラスを入れ替えただけで、上手くいっていたリセット処理が実行できなくなりました。
CSSとどう関係していたのか分かりませんでしたが…

このような場合、ウインドウのリサイズトリガーを発生させることで解決できます。
以下のコードでトリガーを発生させます。

$(window).trigger('resize')

これを追加すると問題無く再配置ができるようになります。

問題のないコードは以下です。

function Masonry_Reset() {
	$('#masonry_container').masonry({
		itemSelector : '.item',
		columnWidth : 230,
		isAnimated : true,
		isFitWidth : true,
		animationOptions: {
			duration: 300
		}
	});
	$(window).trigger('resize')
}

かなり強引な対処です。

Masonry_Reset()関数の中に$(‘#masonry_container’).masonry({があるのが根本的な問題なのかもしれません。

等間隔時間でのループ処理をarguments.calleeとsetIntervalで実現する

jQueryプラグイン「jCarousel」でカルーセルスライダーを作る方法を紹介します。

「jCarousel」は自動でスライドできないので、jQueryを使って制御します。

「jCarousel」は以下を参照してください。

sorgalla.com
jCarousel - Riding carousels with jQuery
jCarousel is a jQuery plugin for controlling a list of items in hori...

arguments.calleeを使ってスライドボタンを一定の時間で押し続ける

calleeはargumentsオブジェクトのプロパティです。これは、現在実行中の関数を、その関数の内部で参照するために使用することができます。

等間隔でクリックイベントを発生させる際には便利です。

setTimeout(function() {
	$(".jcarousel-skin-tango .jcarousel-next-horizontal").click();
	setTimeout(arguments.callee, 8000);
},8000);

setIntervalを使ってスライドボタンを一定の時間で押し続ける

arguments.calleeでは例外処理を入れたくても、出来ないのが不便です。

そこで、setIntervalを使ってみます。

$(function(){
	var timerID = setInterval(click_sw, 6000);
	// マウスオーバーで中断
	$(".banner_section").hover(function(){
		clearInterval(timerID);
	}, function(){
		timerID = setInterval(click_sw, 6000);
	});
	function click_sw(){
		$(".jcarousel-skin-tango .jcarousel-next-horizontal").click();
	}
});

上記の例ではカルーセルのバナーセクションにマウスが乗ったときに自動スライドをストップしています。

マウスアウトした際にスライド処理を再スタートします。

これで、バナーを押したいのにスライドしてしまうようなことがなくなりました。

まとめ

このページではjQuery処理の起動制御を実例にそって紹介しました。

ロードのタイミングやスマホでの画面の縦横変更時、任意のタイミングを作る方法や、繰り返しを発生させてjQueryの処理を制御する方法の一例です。

jQueryやJavaScriptには様々なイベントに対応した起動方法があります。

起動のタイミングを間違えると正常に実行されません。

これを機に再度まとめてみてはいかがでしょうか。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。
詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

two × 4 =

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
プロフィールはこちら
お問い合わせはこちら
※以下は私が活動している企業情報にリンクしています。