複数の画像をカルーセル表示したりスライダー表示したりするプラグインは多くあります。弊社での必要な機能の多くはスライダー+カルーセル同期となるのですがこれが意外に少なく、設定も面倒だったりクロスブラウザでの表示やライセンス的に難があったりと様々ですgalleriacarouFledSelflexSliderなどなどありますが、今回はflexSliderについて少々。http://www.woothemes.com/flexslider/なぜ、flexSliderなのか?色々と理由はありますが、まず、上に挙げた理由の設定が比較的楽クロスブラウザでの検証で比較的優秀この2点がまず挙げられます。設定については案件毎に差があり、大変な部分もありますが、とかくjavascriptでのスライダーの設定は挙動の設定(javascript)要素の設定(HTMLのマークアップ)表示の設定(CSS)と結構大変で、設定する内容が簡単であればあるほどブラウザ毎の違いに悩まされたり不具合が出たりという面倒な部分が少なくて済みます。flexSliderの売りとしてのレスポンシブ対応スマートフォンなどのタッチ、スワイプ対応というのも、なかなかに嬉しいおまけです。次になぜajaxにしなければいけないのか?という理由ですが、ここ数年でスマートフォンやタブレットなどのデバイスが普及し、それに伴う通信環境の多様化という点が挙げられます。今までの非同期通信の利点といえば、画面全体を書き換える遷移のわずらわしさの解消がおそらく一番に挙げられるでしょう。今までであればPC、フューチャーフォンの2つを考えておけばよく、PCであれば通信速度はほとんど気にしなくても問題ないレベルのインフラ整備がなされておりました。フューチャーフォンであれば性能上の問題でPCと同じ表示をすること自体無理があったため専用のテキストベースのコンテンツを作成して対応しておりました。スマートフォンなどの普及により、「表示」や「スペック」の壁が取り外され同時に通信速度もどんどん上がってきました。無駄にトラフィックを増やすことはまだまだ時期尚早と言えます。スライダーの場合は画像の大きさにもよりますが1枚1MB近くになる場合もありますので必要な物は必要な時に!ということでajaxです。どのように作るのか最初にどのような動作をさせるのか、そのためにはどういうデータをどういう形で用意するべきかという部分になります。要素を追加したら追加に使用したIDを削除YATTA!という感じです。追加するのでも動作的には問題ないのですが、今度はブラウザ側での負荷が大きくなっていくので横着しないでおきました。次に要素を追加するタイミングです。発火タイミングはFlexSliderに色々と用意されているので最初は安易に「次へ(前へ)ボタンをおした時でいいか」と思っていましたが、実際にやってみると罠だらけでした。以下にハマった部分を羅列します。1つしか画像がない状態だとそもそも「次へ(前へ)ボタン」が出ない!!!startというタイミングでまず最初に1つ余分に読み込ませようにして対応しました。親切設計が仇になった感じですね。ボタンをおした時に追加してやればいいかと思ったら動かない!!!before(「次へ(前へ)ボタン」を押して動作する前のイベント)を使用したらうまいこと動きませんでした。after(「次へ(前へ)ボタン」を押して動作した後のイベント)に変更することで対応しました。いわゆる先読みのような感じです。連続で「次へ(前へ)ボタン」を押すと止まる!!!これはもうタイミングとかそういう問題です。このあたりはブラウザによっても変わってくると思いますが無理矢理の対応としてbeforeイベントでボタンを非表示、afterで要素を追加した後にボタンを表示という形で対応しました。このように迂余曲折ありながらの実装とあいなりました。実際のコードは以下のようになっております。.flex-next').closest('li').css({display:'block'});}}});Line1~6通常通りのスライダーの設定です。mainslideというid要素に設置しました。Line7~14ここで最初に表示した時に一つ画像を余分に先読みします。一つしかないときの処理も忘れずに。Line15~17ここはボタンを連続で押された時に止まるのを防ぐためボタンを押した直後にボタン自体を非表示にしています。Line18~28ここで要素を追加します。最初に、まだ、追加するべき要素があるかの判定をします。追加するHTMLタグを書き出すプログラムにIDとともにわたします。帰ってきた値を「addSlide」というメソッドに渡して要素を追加します。大雑把ですが上記のような動きをさせる形になりました。http://www.nishio-ss.comまだまだベストプラクティスには程遠いと思いますが、いろんな要件を積み重ねていくことによってより簡素に作っていけると思いますが現時点ではこのような感じになるのかと思います。この記事を書いた人:wadaエンジニア担当の和田です。ボウリングの機械のメカニックから、漆を塗ったりトラックの運転手をしたりと紆余曲折ありましたが最終的にプログラマーへと転職してしまいました。新東陽ビル4F花のやについてお仕事のご依頼やご相談は、下記の電話番号または、メールフォームよりお問い合わせください。