| web creators特別号 |
| スマートフォン・ソーシャルメディア・WordPress Web制作テクニック総特集 |
スマートフォン 17
スマートフォンにおけるスライドショー
スマートフォンサイトのような、小さい面積で効率よく情報をみせるために多用されることが多いスライドショー表示。使い勝手の良いスライドショーはどのようなものかを考えながら実装しよう。
制作・文／山本圭助（株式会社ラナデザインアソシエイツ）
BROWSER iOS Andoroid
01
スライドショーはメインビジュアルに使用されることも多いため機能を求めがちだ。しかし、あまり多機能にしすぎると逆に使いづらくなったり、肝心な見せたいコンテンツが見えにくくなったりしてしまう。どういう機能を持たせるのかをしっかり考えておく必要がある。横スライド型のおもなパターンは次の3パターンだ。
(1)コントローラなし
自動スライドやループで動き、ユーザには操作させない【1-1】。
(2)コントローラあり
ボタン型のコントローラで左右に動かすことが可能【1-2】。
(3)フリック・スワイプ対応
スマートフォン特有の指による操作。その代表であるフリックとスワイプで左右に動かす。
ここではこの中から(2)と(3)を合わせて、コントローラの付いたフリック可能なスライドショーを作成する。
【1-1】コントローラのないスライドショー。自動で画像が移動しユーザーは見るだけになる。
【1-2】コントローラをつけたスライドショー。手動で操作することができる。
02
今回は「jQuery.flickSimple」を使用してフリックに対応する【2-1】。スライド部分のHTMLは【2-2】の通り。#sliderの中に並べたい画像を配置する。CSSは【2-3】の通り。さまざまな端末に対応させるため、横幅は％で指定する。画像を並べるスライダ部分（ul要素）の横幅は、「画像の枚数×1枚あたりの表示幅」。今回の場合は4枚で、1枚に100％分の幅を使用するので400％とする。画像を入れるli要素の横幅は、親のul要素を100％としたときの1枚あたりの比率で指定する。4枚なので、100％÷4の25％とする。余白などを使用したい場合は、img要素に指定する。今回は5％ずつのmarginを指定した。そのため、img要素の幅はmargin分を引いた90％（100％-5％×2）とする。
このままでは横スクロールバーがでるので、#galleryのoverflowプロパティをhiddenにして、スクロールバーが表示されないようにする。今回は画像の枚数が4枚固定なので横幅をCSSで指定しているが、動的に枚数を変更する場合はJavaScript側で指定するとよいだろう。
【2-1】コントローラをフリックで実装する。今回はjQuery. flickSimpleで対応する。
https://github.com/makog/jQuery.flickSimple.js
【2-2】#sliderの中に並べたい画像を配置する。
【2-3】今回はCSSで横幅を指定している。またoverflow:hiddenでスクロールバーを隠している。
03
flickSimpleを実行させる方法はいたってシンプルだ。スクリプトを読み込みスライドさせたい要素（ここでは#gallery）に対してflickSimpleメソッドを実行させる【3-1】。
これでスライド部分を、マウスの場合はドラッグで、タッチインターフェイスの場合はフリックで移動させることができるようになる【3-2】。
【3-1】スライドさせたい要素（#gallery）に対して、flickSimpleメソッドを実行させる。
【3-2】フリックに対応したスライドショー。
04
次に左右のコントローラを付けてみよう。HTMLに矢印画像を追加する【4-1】。配置とサイズは【4-2】のようにCSSを記述している。jQuery でコントローラの挙動を記述する【4-3】。これでコントローラのついたスライドショーの完成だ【4-4】。flickSimpleのメソッドは、初回実行時には実行した要素のjQueryオブジェクトを返し、二回目以降の実行では専用のオブジェクトを返す。コントローラなどによるスライドの制御は、この専用オブジェクトに対して行う。
なお、現状では矢印の方向はスライダーが動く方向を示している。逆の方向、つまり右の矢印をタップしたときにスライダーの右の写真を見せる形にしたい場合は、【4-3】の7行目と13行目の.ctrl-leftと.ctrlrightを入れ替えればよい。
【4-1】矢印画像を追加。
【4-2】 矢印の配置とサイズはCSSで指定。
【4-3】コントローラの挙動はスクリプトに記述。
【4-4】コントローラのついたスライドショー。スマートフォンで画像を閲覧するには最適だ。
[目次に戻る]
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。
※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。
