第3回　トップページを彩るスライドショーのポイント

「jQuery Cycle Plugin」で簡単に実装

今回ご紹介するのは、使いやすいスライドショーの作り方です。

最近では、トップページにスライドショーを見かけることが多くなっています。画像がトランジション効果で切り替わるものですね。Yahooなどではページのロードなしでタブで切り替わるコンテンツがありますが、それと同様に、限られたスペースに複数の情報をおさめることができます。

スライドショーを作るにあたって、もちろんFlashを使えば自由自在に表現可能ですが、更新性を考えるとjQueryを使った表現が便利です。jQueryには様々なライブラリがありますが、メインビジュアルとなるスライドショーはグラフィック的な美しさと情報性、動きの気持ちよさをカギに選びましょう。使いやすいのは、自然な加速減速や、気持ちのいいフェード効果があるものです。

ここでは、様々なタイプのトランジション効果を持ち、IE6にも対応している「jQuery Cycle Plugin」を使った例を見ていきます。「⁠jQuery Cycle Plugin」は、MIT and GPLライセンスで配布されているカスタマイズ性の高いプラグインで、動きが自然なトランジション効果を簡単に実装することができます。

トランジションの効果を指定する

以下が今回のサンプルです。3つのdiv（slider-itemクラス）の中に、それぞれ画像とテキストが入っています。今回はコピーも入れられるように、テキストを見出しタグと本文タグで記述していますが、画像だけでも構いません。右下にある、小さい●をクリックすることで、表示を切り替えることができます。

それでは、ソースを見ていきましょう。

まずはトランジションの効果を指定する部分です。

XHTMLソース（headタグ内）

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 5000,
        pager:  '#slider_nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});
</script>

まず、CSS、および「jquery-1.3.2.min.js」と「jquery.cycle.all.min.js」を読み込むとともに、「⁠jQuery Cycle Plugin」のオプションを記述しています。

トランジションの効果を指定しているのがfxのところです。

ここには以下の6つの値を指定でき、様々な効果を付けることができます。

shuffle	ページをめくるように切り替える
zoom	ズームイン＆アウトする動き
fade	フェードイン＆アウトで切り替える
turnDown	上から下にめくるような動き
curtainX	左右にくるっと回転する動き
scrollRight	クリックすると、左から右に減速しながらスクロールする

その他、speedやtimeout、pause（0：マウスオーバ時にスライドをストップしない、1：マウスオーバ時にスライドをストップする）などで細かく動きを指定することもできます。

そのほかにも指定可能なオプションはたくさんあり、「⁠jQuery Cycle Plugin - Option Reference」で確認することができます。

スライドのコンテンツとナビゲーションを指定する

次に、bodyタグ内のXHTMLソースを見ていきます。

XHTMLソース（bodyタグ内）

<div id="slider">
  <div id="slideshow">
    <div class="slider-item">
      <div class="text_item">
        <h2>Wonderful elephants<br />
          living abroad.</h2>
        <p>フェードイン&amp;アウトするシンプルなスライドショー。この部分にテキストを入れることができます。</p>
        <a href="#"><img src="images/btn_detail.png" alt="" width="141" height="36" border="0" /></a></div>
      <a href="#"><img src="images/slide01.jpg" alt="" width="511" height="323" border="0" /></a></div>
    <div class="slider-item">
      <div class="text_item">
        <h2>Wonderful giraffes<br />
          running abroad.</h2>
        <p>フェードイン&amp;アウトするシンプルなスライドショー。この部分にテキストを入れることができます。</p>
        <a href="#"><img src="images/btn_detail.png" alt="" width="141" height="36" border="0" /></a></div>
      <a href="#"><img src="images/slide02.jpg" alt="" width="511" height="323" border="0" /></a></div>
    <div class="slider-item">
      <div class="text_item">
        <h2>Wonderful animals<br />
          being nowhere.</h2>
        <p>フェードイン&amp;アウトするシンプルなスライドショー。この部分にテキストを入れることができます。</p>
        <a href="#"><img src="images/btn_detail.png" alt="" width="141" height="36" border="0" /></a></div>
      <a href="#"><img src="images/slide03.jpg" alt="" width="511" height="323" border="0" /></a></div>
  </div>
  <!--slideshow end-->
  <div id="slider_controls">
    <ul id="slider_nav">
      <li><a href="#"></a></li>
      <!-- Slide 1 -->
      <li><a href="#"></a></li>
      <!-- Slide 2 -->
      <li><a href="#"></a></li>
      <!-- Slide 3 -->
    </ul>
  </div>
  <!--slider_controls end-->
</div>
<!--slider end-->

「slider-item」クラスのdivが、スライダーのコンテンツ部分になります。

そして「#slider_controls」にスライダーのナビゲーション部分が入っています。

魅力的な有料ライブラリも要チェック

無料で使えるjQueryのライブラリはたくさんありますが、IE6をサポートしていなかったり、商用利用はできなかったり、動きのディテールがいまいちだったり、使いにくいものも少なくありません。

そのため、有料のライブラリを使用するのも1つの選択肢です。例えば、「⁠CodeCanyon」では、世界中から投稿された有料のソースコードが配布されています。有料といっても$10ドル程度で購入できるものも多いので、ユーザー登録をして、使ってみることをおすすめします。評価やダウンロード数、金額などでフィルタすることができますし、UIもわかりやすくて、とても便利なサイトです。

有料のスライドショースクリプトとしては、「⁠slidedeck」が便利です。左右にスライドするコンテンツスライダーとなっており、37signalsのBasecampなどでも採用されています。価格はWordPressプラグインで$49、JavaScript一式で$99となっています（2010年6月11日現在⁠）⁠。

しっかりとしたスライドショーを構築したいときには、ぜひ見てみてはいかがでしょうか。

今回解説したサンプルファイルがダウンロードできます。

サンプルファイル（サンプルコードおよび画像6点/77.1KB）