Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

btmup Blog

JavaScript・jQuery

アクセシブルなスライダーをJavascriptで実現 - 「Accessible News Slider」

投稿日:

ここで言う「スライダー」とは、「同じ構造の要素を限られたスペースで表示するために、要素ごとスライドさせて表示させるためのもの」という意味。

(↓こんなのです)
「Accessible News Slider」のキャプチャ

音量を調整するような「つまみ」のことではありません。

(↓こんなのではないです)
つまみ型スライダー

「スライダー」でググったら「つまみ」の方ばかりヒットして、なかなか欲しい情報に辿り着きませんでした。
何かほかに良い表現はないんですかねぇ。

「Accessible News Slider」の主な特徴

動作デモやダウンロードはこちら↓からどうぞ。
Accessible News Slider: A jQuery Plugin

同じような機能を実現できるスクリプトはいろいろとあるのですが、「Accessible News Slider」が他と違うのは、「WCAG」に完全に準拠している(らしい)こと。
「WCAG」とは、W3Cが策定しているWebコンテンツのアクセシビリティについての基準であり、世界的なデファクトスタンダードです。
これに準拠しているんですから、まぁ問題はないんでしょう(自分で確認したわけではないので断言はできないですが)。

ただ、それ以外にもこれを使う理由はいくつかあります。

まず、単純に使いやすい。
変なクセもなく、スムーズに動いてくれます。
JavascriptをOFFにしても要素が全表示されるだけなので、それを見越してレイアウトしておけば問題なし。
また、JavascriptをONのままでも全表示とスライド表示をユーザーが切り替えられるのは何かと便利そうです。

HTMLやCSSもなかなかシンプルな構成で、しばらく眺めて弄ってたら特に悩むことなく使えるようになると思います。
Javascriptが分からなくても、class名から何となくの予想はできるので、簡単な調整ならすぐにできました(一度にスクロールする要素の数、など)。

ダウンロードページにも色々と解説してくれているのですが、如何せん英語ですので、まだ全部は理解できていません。
ひとまず、現在までに分かった使い方を紹介していきます。

使い方

※ちょっと表現が分かりにくいですが、スライド表示する各要素をまとめたものを「リスト」と呼ぶことにします。

HTMLとJavascriptの紐付け方

「.news_slider」と一緒に入力したclass名を、HTMLファイル内のスクリプトにある以下の箇所にも入れてください。

$(".○○○").accessNews({

リストのタイトル

HTMLファイル内のスクリプトで、以下の箇所がリストのタイトルになります。

newsHeadline: "○○○",

[08.12.09 追記]

後でよくよく見たら、スクリプトの下に注釈(英語)がありました。

newsHeadline: "Top Stories" (String) | Each unique slider (id) or set of sliders (class) can receive a headline.

でもよく分かりません。
共通の名前でグループを作れるとかいうことかなぁ?

スクロールのスピード

HTMLファイル内のスクリプトで、以下の「normal」に特定の文字列を入力することでスクロールスピードを変更できます。

newsSpeed: "normal"

今までに試したところ、「fast」と「slow」は有効でした。
他にもあるかも知れませんが、3段階の調整ができたら十分かな、と個人的には思ってます。
ので、これ以上調べる予定なし。

[08.12.09 追記]

これについてもスクリプトの下に注釈(英語)がありました。

newsSpeed: "normal" (String/Integer) | "slow","normal","fast", or an integer, with 1 being the fastest animation.

整数でも指定できるのかと思い試してみたところ、1だろうが100だろうが違いはありませんでした。
(数値を大きくすると動きがぎこちなくなるような気がしますが、速度は変化なし)
大人しく「slow」「normal」「fast」を使っといた方が良さげです。

ダブルクォーテーションを外せばちゃんと指定できました。

1だと一瞬で切り替わって、スライドしているようには見えません。
だいたい500くらいで「normal」と同じくらいになります(300くらいで「fast」、700くらいで「slow」)。
1000まで行っちゃうとかなり遅いです。
10000とかにしてみると、遅すぎて逆に楽しくなります。

数値を使えば細かい指定ができるのですが、その分計算が重くなるのかどうも動作がぎこちないような感じ(気のせいかも知れないですが)。
なので、よほど微妙な指定をする必要がない限り、「slow」「normal」「fast」を使っておいた方が無難かと思われます。

各要素の幅とマージン

「.item」のclass名が付いた<div>要素が、一つのユニットとなります。

この「.item」には「width」と「margin-right」が指定されており、これらの合計がリスト全体の幅やスクロールの移動量の基準になります。
それぞれの数値は自由に変えられますが、「margin」にしたり「margin-left」にしたりしても効果はなく、「margin-right」しか使用できません。
(スクリプトが認識・算出できないという意味で、もちろんレイアウトは変わります)

「.item」内での構造は自由みたいなので、凝ったレイアウトにする場合などはそちらで工夫を。

一度にスクロールする移動量

先述の通り、スクロールの移動量は「.item」の「width」と「margin-right」の合計が基準になります。

デフォルトではこれの2倍、つまり要素2つ分を一度にスクロールする設定になっています。
しかし、1つずつずらしていきたい場合や、逆にサムネイルを10個くらい並べて一度に入れ替えたい、なんてこともあるでしょう。

それを設定するには、要するに倍率を変えてやればいいわけです。

なので、「jquery.accessible-news-slider.js」の中に4ヶ所ほどある「*2」を、任意の倍率にすべて一括置換してやります。
(1つずつスライドさせる場合は「*1」に、5つの場合は「*5」に、という具合)

かなり乱暴な方法ですし、スクリプトをちゃんと理解しているワケではないので、不安がないといえば嘘になります。
なりますが、どうやらちゃんと動いてくれているみたいなので、とりあえず放置。
何かおかしくなったらそのとき考えます(いいのかそれで!?)。

[08.12.09 追記]

最後の「*2」が、「View All」をクリックしたときに表示される枠の幅であることが判明。

jQuery(".container",p).css("left","0px").css("width",aNewsSlider.itemWidth*2+"px")

参考にしたサイト

その他([09.01.09 追記])

こちら↓でも紹介記事がアップされていました。
[JS]パネルがスムーズにスライドするアクセシブルなスクリプト | コリス




-JavaScript・jQuery
-, , , ,

Copyright© btmup Blog , 2024 All Rights Reserved Powered by AFFINGER5.