2013

6

30

スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!(後編)

スポンサードリンク


前回、前々回とスマホに対応したフリック式スライダーを自作してみよう!というエントリーを書かせていただきました。

スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!(前編)
スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!(中編)
前編でタッチイベントの仕組みやスライダーコンテンツを自作してプロトタイプのフリックスライダーを作成。
中編ではプロトタイプを踏まえての新設計とUI改善とカスタマイズ・・・と思ったのですが、制作過程の解説がムダに長くなってしまったのでプラスαのカスタマイズを今回に持ち越しとなりました。今回で完結です。

追加させたいカスタマイズ機能

前回新設計で作成したフリックスライダーがこちら
これに前回の冒頭で追加させたい機能がこちら
リアルタイムの画像取得を利用してサムネイルに視覚的にわかりやすいページネーション効果
一定時間で画像が切り替わるオートスライダー機能
これを追加させていきます。

ページネーション機能の追加

CSSの変更・追加記述
ul.panelNavi {
    margin: 0 auto;
    width: 320px;
}
.panelNavi li {
    float: left;
    text-align: center;
    width: 96px;
	height: 122px;
	margin: 5px;
	display:inline-block;
}
.panelNavi li a{
	display:block;
}

.panelNavi li a.imgHover{
	border:#4ae 3px solid;
}
.panelNavi li a.imgNoHover{
	border:#FFF 3px solid;
}
.panelNavi li.active{
	border: 4px solid #44AAEE;
    margin: 1px;
}
JavaScriptの変更・追加記述
thumbnail.eq(0).addClass("active");
	function slideImg(next){
		var pos;
		if(slideCurrent < next){
			pos = imgSize;
		}else{
			pos = -imgSize;
		}

		if(next == imgNum){
			next = 0;
		}else if(next == -1){
			next = (imgNum - 1);
		}

		flickListImg.eq(next).css("margin-left", pos).stop(true, true).animate({marginLeft: "0"}, "fast");
		flickListImg.eq(slideCurrent).stop(true, true).animate({marginLeft: -pos}, "fast");
		thumbnail.eq(slideCurrent).removeClass("active");
		thumbnail.eq(next).addClass("active");
		slideCurrent = next;
	}

基本的にはページロード時のサムネイル要素の1番最初にactiveクラスを付け、
スライドイベント時の処理にフリックまたはページャークリックの次に表示される画像にactiveクラスを付け、その前の画像に付いてたactiveクラスを削除する記述を追加しました。
デモではホバーされていない画像には背景と同色のボーダーで視覚的に間隔を取っていますが、背景が単色でない場合はCSS側で調整してください。

ページネーション追加デモ

これでサムネイルに現在表示されている画像が視覚的にわかるホバー機能が付きました。デモはこちら
だいぶプラグインっぽくなってきたんではないでしょうかw

オートスライダー機能の追加

最後は一定のインターバルで自動でスライドするオートスライダー機能を追加させます。
JavaScriptの追加記述
var autoSlide = true;
var autoSlideTimer = 3000;

if(autoSlide == true){
	var loopSwitch = setInterval(loop, autoSlideTimer);
	function loop(){
		slideImg(imgCurrent + 1);
	}
}

function slideImg(next){
	if(autoSlide == true){
		clearInterval(loopSwitch);
		loopSwitch = setInterval(loop, autoSlideTimer);
	}
	var pos;
	if(slideCurrent < next){
		pos = imgSize;
	}else{
		pos = -imgSize;
	}

	if(next == imgNum){
		next = 0;
	}else if(next == -1){
		next = (imgNum - 1);
	}

	flickListImg.eq(next).css("margin-left", pos).stop(true, true).animate({marginLeft: "0"}, "fast");
	flickListImg.eq(slideCurrent).stop(true, true).animate({marginLeft: -pos}, "fast");
	thumbnail.eq(slideCurrent).removeClass("active");
	thumbnail.eq(next).addClass("active");
	slideCurrent = next;
}

JavaScriptの追加記述の解説

フィールド値に変数autoSlideを作りtrueまたはfalseで機能のON/OFFを指定します。
続いて変数autoSlideTimerで自動でスライドするインターバルの設定をします。1秒 = 1000としてデモでは3秒間隔で画像が切り替わる設定にしてあります。

次に変数autoSlideがtrue(自動スライド機能がON)の場合の処理を記述します。
変数loopSwitchsetInterval関数の引数に下のloop関数のトリガーとして代入し、画像スライド処理を実行させます。

最後にスライド移動ファンクションの中に画像がスライドされたらclearInterval関数で変数loopSwitchを初期値に戻す記述を追加します。

オートスライダー完成デモ

上記のスクリプトを追加した3秒間隔で自動スライドするデモがこちら
デモページでは分かりやす様にボタンでオートスライダー機能のON/OFFが切り替えが可能となっています。

フリックスライダーについてまとめ

何となく作ってみた感覚でフリックスライダーを作成してみました。とりあえず当初の目的だった
  • 1.フリック対応機能
  • 2.ループ機能(最終的に切り替え機能は必要ないと判断しました)
  • 3.タップしてもスライドさせられるページャー機能
  • 4.サムネイル画像からもスライドできる機能
  • 5.視覚的にわかりやすいページネーション効果
  • 6.一定間隔で切り替わる自動スライド機能

以上の機能を実装したフリックスライダー・・・その名も・・・
や、、、『やんよスライダー』とでも名付けてみますw

ユーザインターフェース観点の問題

今回一番の壁だったポイントがフリックの切り替え判定でした。というのもスマホ実機で周囲の方々にフリック動作のテストを協力してもらったのですが、これがまたフリックの仕方も十人十色で日常的に高性能なフリックスライダーを実装しているアプリ等を使い慣れた方々に厳しい批評をたくさん頂きました。

フリック判定の最適化
フリックを使う指、動かす幅、動かす速度・・・など本当に様々で、テストしてもらう人が増える程に
「移動が速すぎる」や「反応が鈍くてイライラする」など本当に言いたい放題言いやが・・・有難い意見を頂きました。
すべての方の意見に応える事は現実的に不可能でしたが、お陰で当初の物よりも別物といえる精度まで改善できました。
横フリックの切り替え判定を厳しくし過ぎると縦スクロールが利きませんし、縦スクロールの判定を緩くし過ぎるとフリックの反応が鈍くなったりと、今回のエントリー作成期間の約1ヶ月の半分はこの微調整に悩まされました。このエントリーを参考にフリックコンテンツに興味を持った方には是非挑戦していただきより良い物を作成していただきたいと思います。

”自分ではない”ユーザーを意識する事の重要性
その他には以前、何かのエントリーでAppleが”スマホのメニューなどのアイコンは人の指の大きさを意識した40×40が理想”を意識してページャーのアイコンも作ったのですが、ネイルなどしている女性は指先が使えず指の腹でタップするので、本人が意識したポイントとタップの場所がズレる傾向が見られたのでページャー領域を画像よりも大きく取ったコトで押しやすさも改善されたというコトもあったのでUXについては個人の範囲での勉強するよりもたくさんの方にテストしてもらった方が得られる物は大きかったです。
まさに”案ずるより産むが易し”というコトでしょうね。

トップへ