jQuery 非依存のもの

今は jQuery に頼ることが多いですが、他のライブラリなどとの相性で使えない場合などもあるかと思うので、まずはjQuery 非依存のスクリプト。

heightLine.js

ブロックレベル要素の高さを揃えるheightLine.js[to-R]

読み込む JavaScript は1つ。
スクリプトまでのパスは適宜変更してください。

<script type="text/javascript" src="path/heightLine.js"></script>

指定方法1

heightLine という class を指定した要素の高さが揃います。

<div class="sample">
    <div class="heightLine">
        <p>sample</p>
        <p>sample</p>
    </div>
    <div class="heightLine">
        <p>sample</p>
    </div>
</div>

指定方法2

heightLine の後ろに -(ハイフン)と好きなグループ名を付けた class を指定すると、各グループで高さが揃います。

<div class="sample">
    <div>
        <p class="heightLine-group1">sample<br />sample</p>
        <p class="heightLine-group2">sample</p>
    </div>
    <div class="heightLine">
        <p class="heightLine-group1">sample</p>
        <p class="heightLine-group2">sample<br />sample<br />sample</p>
    </div>
</div>

指定方法3

heightLineParent という class を指定した要素の子要素の高さが揃います。

<div class="heightLineParent">
    <div class="sample1">
        <p>sample</p>
        <p>sample</p>
    </div>
    <div class="sample2">
        <p>sample</p>
    </div>
</div>

状態によっていろいろな指定方法ができ、便利なスクリプトですが、1秒ごとに文字サイズを取得して高さの再計算を行なうため、拡縮のタイミングと若干ズレが生じます。
待てばちゃんと高さが揃うので問題ないのですが、気になる人はここが気になるかもしれません。
なお、このスクリプトは MIT ライセンスで公開されています。

jQuery プラグイン

いろいろなものがあるようですが、ここ最近使った2つ紹介。

fixHeight.js

複数のブロック要素の高さを揃えてくれる「fixHeight.js」をアップデートしました | Blog | STARRYWORKS inc.

jQuery プラグインなので、jQuery と fixHeight.js を読み込んで置く必要があります。
スクリプトまでのパスは適宜変更してください。

<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/fixHeight.js"></script>

指定方法1

fixheight という class を指定した要素の子要素同士の高さが揃います。
下の例の場合、fixheight の子要素である sample1と sample2の高さが揃います。

<div class="fixheight">
    <div class="sample1">
        <p>sample</p>
        <p>sample</p>
    </div>
    <div class="sample2">
        <p>sample</p>
    </div>
</div>

子要素が多く、子要素が2行以上になった場合には、全要素の高さを揃えるのではなく、各行の中で高さが揃います。

指定方法2

fixHeightChild という class を指定した要素同士の高さが揃います。

<div class="sample">
    <div class="fixHeightChild">
        <p>sample</p>
        <p>sample</p>
    </div>
    <div class="fixHeightChild">
        <p>sample</p>
    </div>
</div>

指定方法3

fixHeightChild のあとに任意の文字列を繋げた class が指定された要素同士の高さが揃います。
下の例の場合、fixHeightChildParagraph が指定された p タグの高さが揃います。

<div class="sample">
    <div>
        <p class="fixHeightChildParagraph">sample</p>
        <p>sample</p>
    </div>
    <div>
        <p class="fixHeightChildParagraph">sample<br />sample</p>
        <p>sample</p>
    </div>
</div>

先に挙げた heightLine.js とほぼ同じ指定の仕方で指定できます。
なお、このスクリプトは MIT ライセンスで公開されています。

jquery.flatheights.js

jQuery でブロック要素の高さを揃えてみる – 徒書

こちらも jQuery プラグインなので、jQuery と jquery.flatheights.js を読み込んで置く必要があります。
スクリプトまでのパスは適宜変更してください。

<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/jquery.flatheights.js"></script>

上記2つのスクリプトを読み込み、高さを揃えたい要素に対し、flatHeights() メソッドを実行します。

指定方法1

$() の中は jQuery で指定できる形式ならなんでも指定できるよう。
カンマ区切りでの複数の指定ももちろんできます。

$(function(){
    $('.boxes').flatHeights(); // .boxes が付けられた要素の高さが揃う
    $('#box1 > div').flatHeights(); // #box1 の子要素（例では div）の高さが揃う
    $('#box2, #box3, #box4').flatHeights(); // 指定した要素同士の高さが揃う
});

指定方法2

各行で要素の高さを揃えたい場合、fixHeight.js は自動でやってくれましたが、jquery.flatheights.js はちょっと指定が複雑になります。
例は各行が4つずつの場合。

$(function(){
    var sets = [], temp = [];
    $('#box5 > div').each(function(i){
        temp.push(this);
        if (i % 4 == 3){ // 1行の数を指定し、1を引いた数を右に指定
            sets.push(temp);
            temp = [];
        }
    });
    if (temp.length) sets.push(temp);

    $.each(sets, function(){
        $(this).flatHeights();
    });
});

先に挙げた2つとの違いは既存の HTML で使用する際にスクリプト用の指定を追記をしなくていいということ。
適用される範囲を調整するために id や class の追記が必要な場合もあるかもしれませんが、基本的には指定を追加しなくて大丈夫です。
なお、このスクリプトは MIT ライセンスで公開されています。

まとめ

jQuery プラグインのものは初めて使ったものが動作が遅く、heightLine.js を使用することがほとんどでしたが、上で挙げた2つのプラグインはそこまでのもたつきは感じなかったです。
また、秒ごとの監視ではなく、文字の拡縮動作を監視し、動作があったときに高さが変わるので、最近は jQuery プラグインのものを使うことが多いです。

今回紹介した jQuery プラグイン2つの大きな違いは適用される箇所の指定を HTML 側で指定するか、JavaScript 側で指定するかです。
僕は HTML 側に直接いろいろと class を追加するのが好きじゃないので、jquery.flatheight.js を使うことが多いです。

JavaScript を使用することで、泣く泣く変更をお願いしていたようなデザインが実現できるようになることもあるので、作者の方々に感謝の言葉しか出てきません。ホント助かってます。ありがとうございます。

他にもこんな素晴らしいプラグインがあるよという方はぜひぜひ教えてください。

関連投稿

• 要素の高さをそろえる jQuery プラグイン The EqualHeights jQuery Plugin
  category: JavaScript > jQuery tags: JavaScript+jQuery.
• タイル状にアニメーションして画像を切り替える jQuery プラグイン jFancyTile
  category: JavaScript > jQuery tags: JavaScript+jQuery.
• IE6で透過 PNG を使えるようにする JavaScript DD_belatedPNG
  category: JavaScript tags: IE6+JavaScript+透過 PNG.

FLASH と見間違えてもおかしくないです。
jQuery ってすごいなーとしみじみ。

jFancyTile: A jQuery tile shifting image viewer plugin
（デモ）

このプラグインは、ここに触発されて作ったそうです。これもすごくかっこいいです。
Making a Mosaic Slideshow With jQuery & CSS

使い方

画像表示部分の指定は以下の通り

<div id="selector">
<ul>
<li><img src="images/img01.jpg" alt="Title 01" /></li>
<li><img src="images/img02.jpg" alt="Title 02" /></li>
<!-- More images -->
</ul>
</div>

見て分かるように、特殊なコーディングテクニックは必要ないです。必要なのは、囲む div に id を付けること。
画像の alt に入れたテキストが画像の上に表示されます。

<head> 内で必要なファイルを読み込み、jfancytile() の指定をします。
CSS の内容、ファイルまでのパスは適宜変更してください。

<head>
<link rel="stylesheet" type="text/css" href="css/jfancytile.css"/>
<script type="text/javascript" src="js/jquery.jfancytile.js"></script>
<script type="text/javascript">
$("#selector").jfancytile();
</script>
</head>

デフォルトのままのセッティングでいいのであれば、ここで終了。デモ1と同じように動くはずです。

挙動のカスタマイズ

デモ2のように、プラグインの挙動をカスタマイズしたい場合、以下のものを調整してみてください（書かれているのはデフォルト値）。

$("#selector").jfancytile({
inEasing: "swing",
outEasing: "swing",
inSpeed: 1000,
outSpeed: 1000,
rowCount: 8,
columnCount: 13,
maxTileShift: 3
});

inEasing

タイルから画像に変化する時のイージングアニメーション

outEasing

画像からタイルに変化する時のイージングアニメーション

inSpeed

タイルから画像に変化する時のアニメーションスピード（ミリ秒）

outSpeed

画像からタイルに変化する時のアニメーションスピード（ミリ秒）

rowCount

列の数（数が多くなるとタイルの高さが低くなる）

columnCount

段の数（数が多くなるとタイルの横幅が狭くなる）

maxTileShift

タイルが移動できる位置の最大量

イージングの動きはかなり種類があるので（違いが微妙なものもありますが）、好みのアニメーションを選びましょう。
それぞれの動きは、jQuery Easing Plugin の Example をいろいろ試して確認してみてください。

プラグインがどのように動いているか

プラグインが実際どのようにうごいているか、という内容です。
使用する上ではしらなくても大丈夫なので、興味がない場合はすっ飛ばしてください。

1. 画像を解析して、alt の内容・サイズ・画像のソースを取得する
2. 一番大きな画像のサイズに合わせて囲いを作る
3. HTML から <li> を除去する
4. ナビゲーションボタンを作って、囲いの中に入れる
5. rowCount と columnCount に基づいて、必要なタイルの数を計算する
6. 各タイル用の div を作って、タイルを作る
7. background-image に画像を適用し、background-position で正しい位置に画像をずらす。
8. タイルの集合に title を追加する
9. ランダム位置とフェードアウトする機能を追加する
10. 指定した位置とフェードインする機能を追加する

という流れでこのプラグインが動いているそうです。

既知の問題

CPU に負荷がかかる。

rowCount、columnCount の値が大きすぎると、ブラウザがクラッシュする。

時々画像のプロパティが読み込めず、極端に小さいサイズになってしまう。

リロードすればちゃんと動くようになるけど、ちょっとね…。

Firefox に比べて、Chrome と Safari の挙動がちょっと違う。

画像が全部読み込まれた後であれば、Chrome/Safari の挙動が正しい挙動。

まとめ

Firefox では不安定、Chrome と Safai では重いですね。
動きは素晴らしいと思うだけに残念です。

また、僕の検証環境では IE6、IE7で動作しませんでした。
画像のおもしろい見せ方ができるプラグインですが、日本国内では IE6、IE7ユーザーがまだまだ多いようなので、使いどころは難しいかもしれません。

関連投稿

• 要素の高さをそろえる jQuery プラグイン The EqualHeights jQuery Plugin
  category: JavaScript > jQuery tags: JavaScript+jQuery.
• IE6で透過 PNG を使えるようにする JavaScript DD_belatedPNG
  category: JavaScript tags: IE6+JavaScript+透過 PNG.
• キャラクターと背景が動きまくる jQuery プラグイン（おまけつき） jQuery.spritely
  category: JavaScript > jQuery tags: JavaScript+jQuery.

このプラグインを使用すると、FLASH のような動きを、iPhone のような FLASH 非対応のデバイスでも見られるようになります。
※“クリック”と書いてある箇所は iPhone などのデバイスでは、“タッチ”になります。

jQuery Spritely | Spritel
※リンク先がデモも兼ねています。

ページを開くと、背景がスクロールしていて、その上に鳥が2羽飛んでいます。

これだけでも充分すごいんですが、ページのどこかをクリックすると…

マウスのある場所まで降りてくる！

背景がスクロールしているエリアから飛び出して、本文のところまで降りてきてくれます。
うっかりクリックしちゃっても降りてくるので、若干うざったいところもありますね。

下にテキストがあろうが、画像があろうが関係なく降りてきます。
邪魔なときはちょっと離れたところをクリックして、どいてもらいましょう。

そして、鳥が2羽いるのにも意味があります。
飛んでこないほうの鳥をクリックすると…なんと、飛んでくる鳥が入れ替わるんですｗ

プラグインについて

このプラグインで使用するのは、sprite() と pan() の2つだけ。簡単です。
この2つのメソッドで、要素に指定している背景画像のアニメーションが実現できます。

2つのメソッドの違いは

• pan は背景画像を左右どちらかからもう一方にスライドして、それを繰り返す
• sprite にはフレームという概念がある

ということ。
詳しくは以下の参照。

sprite()

サンプルで使われているのは鳥の部分。
鳥の画像はこれ。

この画像を3コマの繰り返しにするならフレームの指定は、

$('#bird').sprite({fps: 12, no_of_frames: 3});

と、こんな感じでできます。
つまり、CSS Sprite を使って、それを切り替えることでアニメーションにしているってことですね。
上のコードだと、画像を3コマに分割して（no_of_frames: 3の部分）、1秒間に12コマのアニメーションになります。

デモページのように、クリックでマウス位置まで降りてくるようにするなら、

$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();

とすればできるようです。

active() はページを開いた時に sprite をアクティブにするメソッドで、activeOnClick() は、クリックした時に sprite をアクティブにするメソッドだそうです。
$(‘body’).flyToTap() の部分で、どこがクリックされたかを見て、sprite をクリックされた場所に移動させます。
ランダム移動のメソッドが指定されている場合、数秒後に元にいた場所に戻ります。

sprite をランダム移動するには、以下のような指定をします（speed はミリ秒で指定）。

$('#bird')
    .sprite({fps: 8, no_of_frames: 3}
    .spRandom({
        top: 70,
        left: 100,
        right: 200,
        bottom: 340,
        speed: 4000,
        pause: 3000
    });

pan()

デモページの丘の部分です。

div（サンプルでは #trees）に背景画像を指定して、その背景画像を background-repeat: repeat-x; と指定し、以下の指定をします。

$('#trees').pan({fps: 30, speed: 2, dir: 'left'});

スピード（1フレームあたりのピクセル数）と1秒あたりのフレーム数はそれぞれ個別に指定できます。
1秒あたりのフレーム数を高くしすぎると、パフォーマンスが低下するので（特にモバイル）、アニメーションのスムースさとパフォーマンスの適正なバランスをとりましょう。

背景画像を多層にするには、単純に画像ををお互いの下に置くか、z-index を調整すればできます。
遠い場所にあるものをより遅く動かすと、きれいに見えるそうです。

小ネタ

ページ内をクリックすると鳥が飛んできてくれるのは上で書きましたが、ページの最下部をクリックするとちょっと変な挙動に。

最下部で鳥を呼ぶと、ページの高さがちょっとだけ増えます。
ということは、ページをもうちょっと下までスクロールできるようになります。

これを延々と繰り返すと、どんどん下までページを伸ばせる…という、どうでもいい小ネタです。

あ、でも隠しておいたテキストなりリンクなりを探させる、という使い方もあるかもしれませんね（そんなにないと思いますが）。

まとめ

対応ブラウザは以下の通り

• Internet Explorer 6以上
• Firefox
• Safari
• Chrome
• Opera

バー ジョン番号が特に書いていないですが、おそらく最新版でテストしていると思われます。
また、モバイルでは、iPhone、iPad、iPod Touch に対応しているそうです。

モバイルでも快適に動作させるためにも、過剰な使用は避けましょうとのこと。

ライセンスは、jQuery 本体と同じく、MIT もしくは GPL Version 2のデュアルライセンスということになっています。
利用者は商用・非商用を問わず無料で使用できるとのことです。

この記事を書いている時点でのバージョンは0.1と、まだまだ開発が進みそうなプラグイン。
今後どのようにパワーアップしてくれるのか楽しみです。

関連投稿

• 要素の高さをそろえる jQuery プラグイン The EqualHeights jQuery Plugin
  category: JavaScript > jQuery tags: JavaScript+jQuery.
• IE6で透過 PNG を使えるようにする JavaScript DD_belatedPNG
  category: JavaScript tags: IE6+JavaScript+透過 PNG.

The EqualHeights jQuery Plugin
demo

jQuery と jquery.equalheights.js を読み込み

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.equalheights.js" type="text/javascript"></script>

下記のように要素の高さを揃えたい箇所を指定すれば、内要素が異なる高さを持つ要素の高さを揃えられます。

$(document).ready(function() {
$(".columns").equalHeights(100,300);
});

上記の記述では、column というクラス名がついた要素に対して高さを揃えます。
.equalHeights(100,300) の部分で min-height と max-height を指定できます。値として auto も使えるみたいです（作者デモは auto を使っている）。300px を超えたらスクロールバーが出てきます。

既知のバグとして、要素内に画像を含み、その画像に height の指定がない場合、IE で正確に高さが計算できないことがあるそうです。その場合、スクリプトが高さをゼロとみなしてしまうようです。

また、いくつかのブラウザでリサイズ時にもう一度スクリプトを読まないといけない場合があるらしく、その場合は下記のようなスクリプトを書いてね、とのこと。

$(".columns").resize(function(){
$(".columns").equalHeights();
});

ここまで書いておいて言うのもなんですが、こういう jQuery でやるのも楽だけど、ヨモツネットさんの記事（書籍などに紹介されていない display : inline-block について）のほうが JavaScript に依存しないし、好きだな。

jQuery をガシガシ使いたい人は使ってみてください。

関連投稿

• 透過 PNG を使う時に注意すること2
  category: CSS tags: IE6+JavaScript+透過 PNG.