jQuery
jQuery｜5章：スライドショーとゲーム実装
INDEX
目次
前の章に戻る

5章：スライドショーとゲーム実装

この教材の学習時間:120分

サンプルコード
 本教材で使用するzipファイルです。ダウンロード済みの方は不要です。
zipファイル
サンプルコードの使い方
  • materials
    • materialsフォルダには、教材内で解説しているサンプルコードが含まれています。
    • 例えば、「【2-1】トグルメニューの実装」を学ぶ際は、02-1_toggle-menuフォルダ内のコードを確認しながら進めてください。
    • ※ 【1-1】、【1-2】に関してはサンプルコードはありません。
  • exercises
    • exercisesフォルダには、各章末の演習課題に取り組むためのコードが用意されています。
    • 演習に取り組む際は、XX_start フォルダ内のコードを使って作業を始めましょう。
    • 作業後に答え合わせをする場合は、XX_end フォルダ内の解答例コードを参照してください。
この章では、jQueryを使ったスライドショーとゲームUIの実装方法を学びます。

具体的には、
===
  • 横スクロールスライドショー
  • フェードイン/アウトスライドショー
  • カウントアップゲーム
===
を作成し、それぞれのHTML、CSS、jQueryでの実装方法を解説します。

【5-1】横スクロールスライドショー

目安の学習時間:25分

参考動画

参考動画
横スクロールスライドショーとは、複数のスライドが横に並び、ボタン操作などでスライドが横方向に移動するUIです。製品紹介やギャラリーなどでよく利用されます。

HTML/CSS構造

スライドショーのHTMLを作成する
 <div class="slideshow-container">
        <div class="slides">
            <div class="slide"><img src="image1.jpg" alt="スライド1"></div>
            <div class="slide"><img src="image2.jpg" alt="スライド2"></div>
            <div class="slide"><img src="image3.jpg" alt="スライド3"></div>
        </div>
        <button class="prev">前へ</button>
        <button class="next">次へ</button>
 </div>
サンプルコード
  • スライドショー全体をslideshow-containerで囲む。
  • スライドを横に並べるslides、各スライドのslide要素、そしてナビゲーションボタンを配置。
CSSでスライドショーのスタイルを整える
.slideshow-container {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
    border: 2px solid #333;
}
.slides {
    display: flex;
    transition: transform 0.5s ease-in-out; /* アニメーション効果 */
}

.slide {
    width: 500px;
    height: 300px;
    flex-shrink: 0; /* スライドが縮まないように */
}
.slide img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* 画像の縦横比を保ちつつ調整 */
}
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
.prev {
    left: 10px;
}
.next {
    right: 10px;
}
サンプルコード
  • overflow: hidden;を設定することで、slideshow-containerの領域外にはみ出したスライドを非表示。

jQueryの実装

処理の流れ
  1. 初期状態：
    • スライドは横一列に並び、最初のスライドが表示されています。
    • slideshow-containerのoverflow: hiddenによって、最初のスライド以外は隠されています。
  2. イベント監視：
    • jQueryは、.next（次へボタン）と.prev（前へボタン）のクリックイベントを監視します。
  3. クリックイベント発生：
    • 次へボタンクリック：
      • currentPosition（現在のスライド位置）を1増やします。
      • .slides要素のtransformプロパティをアニメーションで変化させ、スライドを横に移動させます。
    • 前へボタンクリック：
      • currentPosition（現在のスライド位置）を1減らします。
      • .slides要素のtransformプロパティをアニメーションで変化させ、スライドを横に移動させます。
  4. 結果：
    • ボタンをクリックするたびに、スライドが左右に移動し、別のスライドが表示されます。
$(document).ready(function () {
  let slideWidth = $(".slide").outerWidth(); // スライドの幅
  let currentPosition = 0;
  let totalSlides = $(".slide").length;

  $(".next").click(function () {
    if (currentPosition < totalSlides - 1) {
      currentPosition++;
      $(".slides").css(
        "transform",
        `translateX(${-slideWidth * currentPosition}px)`
      );
    }
  });

  $(".prev").click(function () {
    if (currentPosition > 0) {
      currentPosition--;
      $(".slides").css(
        "transform",
        `translateX(${-slideWidth * currentPosition}px)`
      );
    }
  });
});
サンプルコード
コード 各コードの機能
$(document).ready(function () {...}) ページの読み込みが完了したらスクリプトを実行
let slideWidth = $(".slide").outerWidth(); 最初のスライド要素の幅を取得し、スライド移動量に利用
let currentPosition = 0; 現在表示中のスライド番号を初期化（0番目からスタート）
let totalSlides = $(".slide").length; スライド全体の枚数を取得
$(".next").click(function () {...}) 「次へ」ボタンをクリックしたときの処理を定義
if (currentPosition < totalSlides - 1) {...} 現在位置が最後のスライドでない場合のみ処理を実行
currentPosition++; 現在のスライド番号を1つ進める
$(".slides").css("transform", `translateX(${-slideWidth * currentPosition}px)`); スライド全体を左に移動させ、次のスライドを表示
$(".prev").click(function () {...}) 「前へ」ボタンをクリックしたときの処理を定義
if (currentPosition > 0) {...} 現在位置が最初のスライドでない場合のみ処理を実行
currentPosition--; 現在のスライド番号を1つ戻す
$(".slides").css("transform", `translateX(${-slideWidth * currentPosition}px)`); スライド全体を右に移動させ、前のスライドを表示
詳しい解説
(14055)

$(".next").click(function() {...})：「次へ」ボタンをクリックした時の処理

if(currentPosition < totalSlides - 1)　条件「もしcurrentPositionよりtotalSlides-1の方が大きい」を満たす場合
(14057)

(14058)

条件「もしcurrentPositionよりtotalSlides-1の方が大きい」を満たさない場合
(14060)

【5-2】フェードイン/アウトスライドショー

目安の学習時間:25分

参考動画

参考動画
フェードイン/アウトスライドショーとは、スライドがフェードイン、フェードアウト効果で切り替わるUIです。よりスムーズで視覚的な変化を楽しめます。

HTML/CSS構造

スライドショーのHTMLを作成する
<div class="slideshow-container">
    <img src="image1.jpg" class="slide active" alt="Image 1">
    <img src="image2.jpg" class="slide" alt="Image 2">
    <img src="image3.jpg" class="slide" alt="Image 3">
    <button class="prev">前へ</button>
    <button class="next">次へ</button>
</div>
サンプルコード
  • スライドを.slideクラスで定義し、最初に見せるスライドに.activeクラスを付与。
CSSでスライドショーのスタイルを整える
.slideshow-container {
    width: 500px;
    height: 300px;
    position: relative;
    border: 2px solid #333;
    overflow: hidden;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像がコンテナにフィットするように */
    opacity: 0; /* 最初は非表示 */
    transition: opacity 1s ease-in-out; /* フェード効果 */
}
.slide.active {
    opacity: 1; /* 表示状態 */
}
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
.prev {
    left: 10px;
}
.next {
    right: 10px;
}
サンプルコード
  • position: absolute;とopacity: 0;を組み合わせることで、スライドを重ねて配置し、初期状態では非表示。

jQueryの実装

処理の流れ
  1. 初期状態：
    • 最初のスライドには .active クラスが付与され、表示されています。他のスライドは非表示です。
  2. イベント監視：
    • jQueryは、setInterval 関数を使って、一定時間（3秒）ごとに showSlide 関数を実行します。
    • .next（次へボタン）と .prev（前へボタン）のクリックイベントを監視します。
  3. イベント発生：
    • 次へボタンクリック：
      • currentSlide を次のスライドのインデックスに更新します。
      • showSlide 関数実行が実行され、更新されたインデックスのスライドに active クラスを付与します。
    • 前へボタンクリック：
      • currentSlide を前のスライドのインデックスに更新します。
      • showSlide 関数実行が実行され、更新されたインデックスのスライドに active クラスを付与します。
  4. 結果：
    • 一定時間ごとに、またはボタンをクリックするたびにスライドが切り替わります。
$(document).ready(function() {
    let slides = $(".slide");
    let currentSlide = 0;
    let slideCount = slides.length;

    function showSlide(index) {
        slides.removeClass("active").eq(index).addClass("active");
    }

    $(".next").click(function() {
        currentSlide = (currentSlide + 1) % slideCount;
        showSlide(currentSlide);
    });

    $(".prev").click(function() {
        currentSlide = (currentSlide - 1 + slideCount) % slideCount;
        showSlide(currentSlide);
    });

    // 自動スライド（3秒ごと）
    setInterval(function() {
        currentSlide = (currentSlide + 1) % slideCount;
        showSlide(currentSlide);
    }, 3000);
});
サンプルコード
コード 各コードの機能
$(document).ready(function() {...}) ページの読み込みが完了したらスクリプトを実行
let slides = $(".slide"); 全てのスライド要素を取得
let currentSlide = 0; 現在のスライド番号を0で初期化
let slideCount = slides.length; スライドの総数を取得
function showSlide(index) {...} 指定された番号のスライドを表示する関数（他は非表示にする）
slides.removeClass("active").eq(index).addClass("active"); 全スライドからactiveクラスを外し、対象スライドにactiveを付与して表示
$(".next").click(function() {...}) 「次へ」ボタンをクリックしたときの処理を定義
currentSlide = (currentSlide + 1) % slideCount; 現在のスライド番号を1つ進める（最後のスライドの次は0に戻る）
$(".prev").click(function() {...}) 「前へ」ボタンをクリックしたときの処理を定義
currentSlide = (currentSlide - 1 + slideCount) % slideCount; 現在のスライド番号を1つ戻す（最初のスライドから戻ると最後にループ）
setInterval(function() {...}, 3000); 3秒ごとに自動でスライドを切り替える処理を実行
currentSlide = (currentSlide + 1) % slideCount; 自動スライド時に現在のスライド番号を進める（ループ対応）
showSlide(currentSlide); 更新された番号のスライドを表示
.setInterval() について
 setInterval(function, milliseconds) は、JavaScriptで一定時間間隔で関数を繰り返し実行するために使用される関数です。
  • function: 実行する関数。
  • milliseconds: 関数を実行する間隔（ミリ秒単位）。
上記の例では、showSlide関数を3000ミリ秒（3秒）ごとに実行することで、スライドショーを自動的に再生しています。
詳しい解説
(14081)

(14082)

(14083)

【5-3】カウントアップゲーム

目安の学習時間:20分

参考動画

参考動画
カウントアップゲームとは、時間経過とともに数字が増加していくシンプルなゲームです。スタート/ストップボタンでカウントを制御します。

HTML/CSSの構造

ゲームのHTMLを作成する
<div class="game-container">
  <div id="counter">0</div>
  <button id="start">スタート</button>
  <button id="stop">ストップ</button>
  <button id="reset">リセット</button>
</div>
サンプルコード
  • カウンター表示用のdiv、スタートボタン、ストップボタンを配置。
CSSでゲームのスタイルを整える
.game-container {
    text-align: center;
    margin-top: 50px;
}
#counter {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
}
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
}
#start {
    background-color: #4CAF50;
    color: white;
}
#stop {
    background-color: #F44336;
    color: white;
}
#reset {
    background-color: #008CBA;
    color: white;
}
サンプルコード
  • 中央揃えtext-align: center;やフォントサイズなどを調整。

jQueryの実装

処理の流れ
  1. 初期状態：
    • カウンターは0に設定されています。
    • setIntervalはまだ開始されていません。
  2. イベント監視：
    • jQueryは、#start（スタートボタン）と#stop（ストップボタン）と#reset（リセットボタン）のクリックイベントを監視します。
  3. クリックイベント発生：
    • スタートボタンクリック：
      • intervalId = setInterval(updateCounter, 100)で、updateCounter関数を0.1秒ごとに実行するsetIntervalを開始します。
    • ストップボタンクリック：
      • clearInterval(intervalId)で、setIntervalを停止します。
    • リセットボタンクリック：
      • clearInterval(intervalId)で、setIntervalを停止します。
      • カウンターは0に戻して数字を書き換えます。
  4. updateCounter関数実行：
    • counter変数の値を1増やします。
    • #counter要素のテキストをcounter変数の現在の値に更新します。
  5. 結果：
    • スタートボタンをクリックするとカウンターが0.1秒ごとに増加し、ストップボタンをクリックするとカウンターが停止します。
    • リセットボタンで０に戻ります。
$(document).ready(function() {
    let counter = 0;
    let intervalId = null;

    function updateCounter() {
        counter++;
        $("#counter").text(counter);
    }

    $("#start").click(function() {
        if (intervalId === null) { // 二重に開始しないようにする
            intervalId = setInterval(updateCounter, 100);
        }
    });

    $("#stop").click(function() {
        clearInterval(intervalId);
        intervalId = null;
    });

    $("#reset").click(function() {
        clearInterval(intervalId);
        intervalId = null;
        counter = 0;
        $("#counter").text(counter);
    });
});
サンプルコード
コード 各コードの機能
$(document).ready(function() {...}) ページの読み込みが完了したらスクリプトを実行
let counter = 0; カウントの初期値を0に設定
let intervalId = null; setInterval のIDを保存する変数（開始・停止管理用）
function updateCounter() {...} カウンターを1増やし、画面上の数値を更新する関数
counter++; カウントを1増加
$("#counter").text(counter); HTML要素#counterのテキストを更新
$("#start").click(function() {...}) 「スタート」ボタンをクリックしたときの処理を定義
if (intervalId === null) {...} すでにカウントが開始されていない場合のみ setInterval を実行（二重起動防止）
intervalId = setInterval(updateCounter, 100); 0.1秒（100ms）ごとにupdateCounterを繰り返し実行
$("#stop").click(function() {...}) 「ストップ」ボタンをクリックしたときの処理を定義
clearInterval(intervalId); intervalId = null; setInterval を停止し、管理変数をリセット
$("#reset").click(function() {...}) 「リセット」ボタンをクリックしたときの処理を定義
counter = 0; $("#counter").text(counter); カウントを0に戻し、画面の表示もリセット
.clearInterval() について
 clearInterval(intervalId) は、JavaScriptでsetInterval()関数によって設定されたタイマーを停止するために使用される関数です。
  • intervalId: 停止するタイマーのID。setInterval()関数が返す値です。
上記の例では、clearInterval(intervalId) を使用して、スタートボタンがクリックされたときに既存のタイマーを停止し、ストップボタンがクリックされたときにカウンターの増加を停止しています。
詳しい解説
(14102)

(14103)

(14104)

【5-4】演習課題

目安の学習時間:45分

演習課題07：スライドショーの機能拡張

参考動画

参考動画
演習課題の詳細
  • 課題概要
    • フェードイン/アウトのスライドショーに、自動再生機能と手動操作機能を統合します。
    • また、スライドにマウスホバーした際に自動再生を一時停止し、マウスアウト時に再開するインタラクションを追加します。
  • 要件（実装する内容）
    • フェードイン/アウトのスライドショーに自動再生機能を追加
    • スライド上でマウスホバーしたときに自動再生が停止し、マウスアウトで再開する
    • ナビゲーションボタンで手動操作を実装し、ユーザーがスライドを手動で切り替えられるようにする
  • 自由部分（設定自由な内容）
    • スライドショーの自動再生の速度や、ナビゲーションボタンのデザインなどは自由にカスタマイズできます。
    • スライドのアニメーション（例えば、フェードやスライドの速度）や、インタラクション時のエフェクトも自由に調整できます。
  • ヒント
    • setInterval()を使用して、自動再生機能を実装
    • .hover()を使って、マウスオーバー時に自動再生を停止し、マウスアウトで再開
    • ナビゲーションボタン（例:prevとnext）を使って手動でスライドを切り替える処理を実装
    • 手動操作中に自動再生を一時停止し、操作後に再開するように設計する
途中で躓いたら、教材を振り返りながら進めてみましょう。
解き終わったら、07_endフォルダ内の解答例と見比べて、自分の実装を確認してみましょう。

演習課題08：ゲーム要素の組み込み

参考動画

参考動画
演習課題の詳細
  • 課題概要
    • スライドショーとカウントアップゲームを組み合わせて、ゲームの進行状況に応じてスライドの内容が変化するように実装します。
    • カウントが一定の数値に達すると、スライドの内容（画像やテキスト）が切り替わります。
  • 要件（実装する内容）
    • スライドショーにカウントアップゲームを組み込む
    • カウントが特定の数値に達すると、スライドが自動的に切り替わる
    • スライドの内容（画像やテキスト）は、カウント数に応じて変化するように実装する
  • 自由部分（設定自由な内容）
    • ゲームの進行状況やカウント数に応じたスライドのデザインやコンテンツの変更方法は自由にカスタマイズできます。
    • ゲームの難易度（カウントの増加速度やスライドの切り替えタイミング）を調整して、独自の体験を提供することができます。
  • ヒント
    • setInterval()を使ってカウントを増加させ、一定のカウントに達したらスライドを切り替える
    • カウント数に応じてスライドのインデックスを変更し、表示する画像やテキストを切り替える
    • ナビゲーションボタン（例:prevとnext）を使って手動でスライドを切り替える処理を実装
    • スライドの内容を動的に変更する際には.html()や.attr()を使ってコンテンツを更新する
途中で躓いたら、教材を振り返りながら進めてみましょう。
解き終わったら、08_endフォルダ内の解答例と見比べて、自分の実装を確認してみましょう。

【5-5】最後に【プラグインの紹介】

目安の学習時間:5分

jQueryには、色々な拡張機能を備えたプラグインが使いきれないほどにあります。さらにプラグインは自作することもできるので、その可能性は無限に広がっています。

ここでは、最後に3つのプラグインを簡単に紹介します！
Slick
(14116)

  • Slickは、レスポンシブ対応のスライダーを簡単に作れるプラグインです。
  • 画像のカルーセルやスライドショーなどに活用でき、見た目も美しく、設定項目も豊富です。
  • スマホ対応もバッチリなので、様々な場面で活躍します。
Swiper
(14122)

  • Swiperもスライダー系のプラグインですが、特にモバイルでの操作性が抜群です。
  • 画像のカルーセルやスライドショーなどに活用でき、見た目も美しく、設定項目も豊富です。スマホ対応もバッチリなので、様々な場面で活躍します。
Chart.js
(14126)

  • Chart.jsは、シンプルなコードで美しいグラフを描画できるプラグインです。
  • 円グラフ、棒グラフ、折れ線グラフなど、よく使われるチャートを手軽に作成でき、視覚的にデータを表現したいときに重宝します。
このように、jQueryプラグインには便利で強力なものがたくさんあります。
今回紹介したのはたくさんある中の一部です。ぜひ自分でも気になるプラグインを探して、どんどん試してみてくださいね！使いこなせば、Web制作の幅がぐっと広がります。
この章では、スライドショーとゲームの実装方法を学びました。
全5章に渡りjQueryの学習、お疲れ様でした。 この教材が、今後のWeb制作の役に立つことを願っています！
前の章に戻る
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH