ホームページの要素を制御したり、CSSをコントロールしたりする上で、便利なのがJavaScriptです。
最近ではCSSも進化しているので、昔ほどJavaScriptに依存していないのかもしれませんが、JavaScriptはホームページを作る際には必須の技術だといえます。
また、JavaScriptは使えないけどjQueryは簡単という印象をお持ちの方もいらっしゃるかもしれません。
jQueryは「JavaScriptライブラリ」なので、簡単にいうと一定の使い方の決まりで、JavaScriptを使いやすくしたものです。
HTMLの要素を扱いやすいので、ホームページを作る際には、使用の機会は多いと思います。
JavaScriptにしてもjQueryにしても比較的習得しやすい言語なので、完全に理解していなくても使えてしまいます。
しかし、上手く動かないケースもあります。
動かないほとんどの原因は実行のタイミングに誤りがあることです。
このページでは主にjQueryプラグインを使うことによって、jQueryの起動方法を紹介しています。
まず、JavaScript起動の基本をjQueryとJavaScriptの比較で紹介します。
※分かりやすく解説するために、なるべく用語の説明を排除して概念的に説明していきます。
【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！
「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する
「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor
もくじ
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のさまざまな起動方法を紹介します
【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。
・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。
jQuery内でリサイズを判定する「window.onresize = function(){}」
$(function() {});の内部でウインドウリサイズのイベントを判定することもできます。
その場合window.onresize = function(){を使った事例があります。
これはwindow.addEventListener(‘resize’,function(){と同じ処理です。
以前、スライダーjQueryプラグイン「Slider Pro」をレスポンシブに対応させるために使用していました。
jQueryプラグイン「Slider Pro」については以下を参照してください。
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」をリサイズ時に設定することで、高さの変更にも対応出来るようになります。
【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！
「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する
「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor
任意のタイミングでイベントを発生させる「.trigger()」
.trigger()を使用すると任意のタイミングでリサイズやクリックなどのイベントを発生させることができます。
ブロックのレンガ積みを行うjQueryプラグイン「Masonry」を使った際に、どうしても再配置することができず、やむなく「Masonry」の初期化と同時に.trigger()でリサイズイベントを発生させました。
jQueryプラグイン「Masonry」については以下を参照してください。
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」は以下を参照してください。
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には様々なイベントに対応した起動方法があります。
起動のタイミングを間違えると正常に実行されません。
これを機に再度まとめてみてはいかがでしょうか。
」
が安心です。初心者にも簡単インストールできます！
コメントを残す