CSS3のnth-childやnth-last-childを使って途中の連続した要素を指定する

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

CSS3から追加されたnth-childやnth-last-childという擬似クラス。前者が前からの要素を指定する擬似クラスで後者が後ろからの要素を指定する擬似クラスとなります。
この二つのよく見る例が、:nth-child(3)と一つだけの要素を指定したものや、:nth-child(2n)と偶数番目の要素だけ指定したものをよく見ますが、連続した要素を指定することもできます。
例えば、最初の5つを指定したい場合は下記のようになります。

上記の書き方だと、liタグの最初の5つの要素の背景を赤にするとなります。逆に、6つ目以降だと下記のようになります。

後ろからで考えたい場合は、nth-childの部分をnth-last-childとするだけです。

ところで、上記の例は確実に最初か最後を指定しなけければいけませんが、途中の連続した要素を指定したい場合ということが、稀にあるかもしれません(あまりないとは思いますが)。
続きを読む

FlashのブログパーツをFlashが動くブラウザのみに表示させる(ついでに非同期化)

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

iPhoneやiPadなど、Flashが使えない端末が増えていく中、Flashを使っているブログパーツなどはまだまだ多くあります。自分も、ブログに使ってるわけではないですが、別に運営しているサイトでブログパーツを利用しています。これではiPadなどで見ると『Flash Playerをインストールしてください』と何の解決にもならない記述が表示されてしまい、困ることがあります。
しかも、そのブログパーツの読み込みがかなり遅く、ページ全体の読み込みの遅延の原因となっています。
というわけで今回は『Flashの動かない環境ではFlashを読み込まない』『ブログパーツを非同期で読み込む』という二点を調べてみたのでそのメモ。

まずは、『Flashの動かない環境ではFlashを読み込まない』を実装。使用するのは、ヤフオクのブログパーツ
Flashの可否なんて分かる方法なんてあるのだろうか? と思っていたのだけれども、すぐに見つかりました。
FlashPlayerがインストールされているか検出するJavaScript | Web活メモ帳
というわけで、下記のようなコードを書いて実装。

以下、実行結果。

試しに、Adobe Flash Player を有効または無効にするを参考に無効にしたうえでページを開くと『Adobe Flash Playerは、Adobe Flash Playerインストールガイド(Yahoo!ダウンロードセンター)から無料で入手できます。』といった記述はされず、空白のままでした。
続きを読む

自動切り替え機能をつけたカルーセルにマウスが乗ったら停止する方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

昨日の続き(自動切り替え機能のないカルーセルライブラリに自動切り替え機能をつける方法 | while(isプログラマ))

jQuery最高の教科書を読んでいたらスライドショーを作るという項目があって、その中にマウスが乗ったら自動切り替えを停止するという項目があり、「なるほど!」と思ったので機能作ったサンプルページを少しだけ拡張してみました。

以下が今回作成したJavaScriptのコード

8~10行目でタイマー処理の関数を作成し、11~13行目でタイマーの停止処理の関数を作成。23~26行目でマウスが乗ったり離れたりした時の処理を書いています。
これで、クリックした途端にタイマーが発動して切り替わるという心配がなくなりそうです(もちろん、マウスを載せていても自動切り替え処理をいれたいという場合には別の処理が必要ですが)。

以下、サンプルページ。
自動カルーセル切り替え

自動切り替え機能のないカルーセルライブラリに自動切り替え機能をつける方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

一定時間経過すると自動的に右側の画像に切り替えるカルーセルライブラリを探してみたものの、レイアウトがよさそうなライブラリには自動切り替え機能がなかったので仕方なく自分でつけることにしました。
というわけで今回はその方法を紹介。

今回のサンプルは『Flipster』というカルーセルライブラリを利用(参考:レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」 | bl6.jp)。ただ、今回やろうとしている方法はたいていのカルーセルライブラリで利用できると思います。

まずは、上記のライブラリを使ったHTMLを作成。例えば下記のようなコードになると思います。

ただ、このままでは画像をクリックするか、Nextボタンをクリックしないかぎり先にすすみません。これに一定時間経過すると自動で切り替える機能をつけるため、下記のようなコードを16行目と17行目の間に追加します。

以下、サンプルページ。
自動カルーセル切り替え

やっていることは単純です。4行目のsetIntervalで7秒ごとにautoFlipsterという関数を実行するようにし、autoFlipster関数の中ではネクストボタンをクリックする(2行目)という処理を行っています。自動切り替え機能のついていないカルーセルライブラリには大抵、次へ進むボタンを生成する機能があると思うので、このライブラリじゃなくても同じようにできるはずです。

ただし上記の問題は、自分でNextボタンなどをクリックしたすぐ後に発動する可能性があるということ。Fripsterには切り替えが発生した時に実行する関数を記述するプロパティとして『onItemSwitch』があるのでなんとかなりそうですが、ない場合その対処はちょっと難しいかも。

2013/01/26追記:
と思ったけど、マウスを乗せた時のみ停止させるという方法でなんとかできそうです。
自動切り替え機能をつけたカルーセルにマウスが乗ったら停止する方法 | while(isプログラマ)

jquery.vgrid.jsでランダムソートする時の注意

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

可変グリッドレイアウトのjQueryプラグインとして人気(だと思う)のjQueryプラグインにjquery.vgrid.jsというものがあります(可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog)
そのプラグインのサンプルとしてランダムソートを実装したページがあります。
demo007 – Dynamic Image Grid Example | jquery.vgrid.js
確かに、『Random Sort』ボタンを押すと、ランダムに並び替わっているように思えます。ソースコードを見てみると、下記のような実装方法になっていました。

2~4行目がソート用の記述になるようです。Math.random()関数で乱数を取得し、0.5より大きければ1を、小さければ-1を返すことでランダムな並び替えの実装をしているようです。
なお、上記のランダムソートの返り値部分は下記のようにすることもできます(参考:Javascript:javascriptで配列の中身をランダムに並び替える | raining)。

ところでjquery.vgrid.jsに限った話ではないのですが、この方法には偏りがでてきます。並び替えの対象データが多ければ分かりにくいのですが、少ないと分かりやすいです。試しに先ほどのデモページから要素をDELETEという文字をクリックして消していき、10個ぐらいまでにしてみてからランダムボタンをクリックしてみてください。端の要素はほとんど動かないようになったと思います。

この偏りの解決策としては、Fisher-Yatesというアルゴリズムがあります。
参考:最速インターフェース研究会 :: 実践JavaScriptで配列をシャッフルする方法リファクタリング
ようは、while文で配列の最後の要素から順番に見ていき、それとランダムで選んだ要素のどれかと交換していくという方法です。単純だしこちらのほうが早いような気もします。

ただし、残念ながらjquery.vgrid.jsでは並び替え用の関数を渡す必要があるのでこの方法はつかえなさそうです。
ということで自分は、要素要素にランダム値を関連付けし、そのランダム値を見て昇順で並び替えるようにしました。
例えば、以下の様な感じです。

2行目でjQueryのdata関数を使い、それぞれの要素にランダムな値を関連付けし、6行目でそのランダム値を見て昇順に並び替わるようにしています。全然凝ったことしてるわけではないのですが、sort用の関数を渡さなきゃいけない場合はこういう方法が使えるという参考までに。もっといい方法があれば教えてください。

以下、サンプルページ。
query.vgrid.jsを使ったランダムソートのサンプル