jQueryでグラフを書く

集計データをグラフ化したいなー、ということでどういう道具が使えるの探してみました。
以前、河合さんがFlashで描くライブラリについて取り上げていたのだけれど、iOS系で表示できないとやだね、ということで、Flashじゃないものを探してみました。

で、まずは、Google Chart API
Googleさんが、Web baseのAPIとして提供しているもの。Analyticsの中でも使われているとか。
GETのQUERY STRINGで値を渡すらしい。描画はサーバサイドの画像処理ですね。
データが外に漏れるのを嫌うシチュエーションでは使いにくそうです。

JavaScript系はどんなかなというところで、出てきたのがflot
こちらは、jQuery系プラグインで、シンプルにまとまっていてよさそう。Canvasに描画するんですね。
使うのも比較的簡単。divのプレースホルダをもってきて、$.plot() というメソッドに、データと
オプションの配列と一緒に渡す。シンプル。

コードはこんな感じ

$(document).ready(function() {
	var data_results_cumulative = [[1301270400000,0],[1301875200000,8.25],[1302480000000,22],[1303084800000,29],[1303689600000,36.5]];
	var data_plan_cumulative = [[1301270400000,12],[1301875200000,24],[1302480000000,36],[1303084800000,48],[1303689600000,60]];
	var data_firstplan_cumulative = [[1303689600000,16]];
	var ticks = [1301270400000,1301875200000,1302480000000,1303084800000,1303689600000];

	$.plot($("#graph"), [
		{ label: "results", data: data_results_cumulative, color: 2},
		{ label: "plan", data: data_plan_cumulative, color: 0},
		{ label: "first plan", data: data_firstplan_cumulative, color: 1},
	],
	{
		series: {
			lines: { show: true },
			points: { show: true }
		},
		legend: {
			position: "nw"
		},
		xaxis: {
			mode: "time",
			timeformat: "%y-%m-%d",
			tickSize: [7, "day"],
			ticks: ticks
		},
		yaxis: {
			ticks: 10,
			min: 0,
		},
		grid: {
			backgroundColor: { colors: ["#fff", "#eee"] },
		}
	});

});

ページをゆるふわっと表示する jQuery Chaining Effects Plugin (jquery.effectchain.js)

はいこんにちは!今回はこことかここみたいなサイトのページ表示エフェクトを簡単に実現するプラグインをつくってみたのでそのご紹介です!

Internet Explorer 6+, Safari 5, Google Chrome 8, Firefox 3.6, Opera 11 で動作確認済み。不具合や動作報告などありましたらコメント欄でご連絡ドーゾ。


動作デモ

画像ではお伝えしにくいので、映像で。最初の 20 秒までがプラグインのデモになります。


特徴

簡単な記述でリッチなページ表示演出ができます。また、カスタムデータ属性を使って要素ごとにアニメーションを変えたりインターバル・ディレイを指定して表示のタイミングを制御することも可能です。(すごい!)


ダウンロード

ソースコードは GPL v2 と MIT ライセンスのデュアルライセンスです。


使い方

一般的なプラグインと同様 jQuery と一緒にプラグインファイルを script タグで読み込みます。js ファイルで完結しているので追加の CSS などはロードする必要はありません。(あんしん!)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.effectchain.js"></script>

jQuery は 1.4.3 以降を使ってください。こちらでは 1.4.3, 1.4.4, 1.5 で動作確認済みです。

一番シンプルな使い方

スクリプトをロードした状態で以下の記述を行うと、ページ内の div 要素がマークアップした順番でぱらぱらと表示されます。(かんたん!)

jQuery(function($) {
    $("body").effectChain({ target: "div" });
});

引数を指定して動作のカスタマイズ

引数を取ることもできます。(カスタマイザボー!)

jQuery(function($) {
    // アニメーション対象要素を包含する親となる要素を指定します
    // 親要素自身はアニメーション対象とはなりません
    $("#container").effectChain({
        // アニメーション対象の要素を指定します
        // jQuery Selector が使えます
        target: ".effectChain",
        // アニメーションが始まるまでの時間をミリ秒で指定します
        delay: 0,
        // アニメーション間隔をミリ秒で指定します
        interval: 50,
        // アニメーションの順序を指定します
        // true: DOM の逆順, false: DOM の正順
        reverse: false,
        // 各要素のアニメーション開始前の初期スタイルを指定します
        css: {
            opacity: 0
        },
        // animate 関数の引数を配列で指定します
        // 配列の要素がそれぞれ第一引数、第二引数に相当
        args: [{
            opacity: 1
        }, {
            duration: 500,
            easing: "swing"
        }]
    });
});

jQuery.animate() メソッドについてはこちらが詳しいです。

要素ごとのカスタマイズ

アニメーション対象の各要素にカスタムデータ属性を指定することで要素ごとのパラメータを指定することができます。カスタムデータ属性に対応するパラメータは以下のとおりです。(グレート!)

  • data-fxchain
    • effectChain メソッドの引数にパラメータを上書きします
  • data-fxchain-params
    • animate メソッドの第一引数のパラメータを上書きします
  • data-fxchain-options
    • animate メソッドの第二引数のパラメータを上書きします

カスタムデータ属性はシングルクォーテーションで囲い、データは JSON フォーマットで記述します。以下のサンプルを参考にしてみてください。

<div id="#container">
    <div class="effectChain"
        data-fxchain='{ "css": { "fontSize": "10px" } }'
        data-fxchain-params='{ "fontSize": "18px" }'>
        フォントが 10px から 18px にかけて大きくなる
    </div>
    <div class="effectChain"
        data-fxchain='{ "interval": 0 }'>
        次の要素のアニメーションが始まるまでの間隔を 0 にする<br />
        ↓ と同時に登場
    </div>
    <div class="effectChain"
        data-fxchain='{ "interval": 0 }'>
        ↑ と ↓ と同時に登場
    </div>
    <div class="effectChain"
        data-fxchain='{ "interval": 0 }'>
        ↑ と同時に登場
    </div>
    <div class="effectChain"
        data-fxchain='{ "delay": 500 }'
        data-fxchain-options='{ "duration": 1000 }'>
        500 ミリ秒待ってからアニメーション開始
    </div>
</div>

具体的な実装はデモサイトのソースコードを参考にしてみてください!(なげやり)


というわけでいかがでしょうか?! このプラグインを使ってふるふわ愛され上手を目指して頑張りましょう!!!(?)

jQuery の animate() メソッドをアニメーション以外に応用する方法

前回と同じようなネタですが、今度は逆転の発想で jQuery.animate() をアニメーション以外にも応用する方法をご紹介します。時間の経過が伴う処理の場合は今回の方法を使ったほうが直感的です。

謝辞

今回のサンプルは Steven Wittens 氏の canvas 要素に対して jQuery.animate() 関数を利用する方法を参考にさせていただきました。

http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon

上記ページのデモの空中をベーコンが飛び交うさまは一見の価値ありです。(笑)


jQuery.animate() で音声のフェードイン・フェードアウトを実装する

Live Demo (requires Google Chrome, Firefox 3.5 or higher, Safari 3 or higher)

HTML5 から audio 要素と JavaScript を使ってネイティヴで音声を再生・制御する仕組みが用意されました。この機能を使ってオーディオのフェードイン・フェードアウトを jQuery.animate() メソッドを応用して実装してみます。

HTML

<body>
	<div>
		<button id="fadeIn">Fade In</button>
		<button id="fadeOut">Fade Out</button>
	</div>
	<audio>
		<!-- for Safari, Chrome -->
		<source src="sallsamma_ting.mp4" />
		<!-- for Firefox, Opera -->
		<source src="sallsamma_ting.ogg" />
	</audio>
</body>

制御用のボタンと、オーディオタグを記述しておきます。ブラウザによってサポートする音声形式が異なるので MP4 と Vorbis を指定しておきます。

JavaScript

// プロパティ保持用のダミーの div 要素を作成する
// jQuery.exntend() メソッドを使って volume というプロパティを初期値 0 で追加する
var vars = jQuery.extend($('<div>')[0], { volume: 0 });

jQuery(function($) {
	var audio = $("audio:first")[0];	// 要素の参照を取得する
	audio.volume = 0;	// 初期設定 (0 = 無音, 1 = 最大音量)

	// イベントの割り当て
	$("button#fadeIn").live("click", fadeIn);
	$("button#fadeOut").live("click", fadeOut);

	/**
	 * フェードインしながら再生開始
	 */
	function fadeIn(e) {
		if (!audio.paused) {
			return;
		}
		audio.play();
		$(vars).stop().animate({ volume: 1 }, {
			easing: "linear",
			duration: 2000,
			step: function() {
				audio.volume = this.volume;	// this == vars
			}
		});
	}

	/**
	 * フェードアウトしながら再生停止
	 */
	function fadeOut(e) {
		if (audio.paused) {
			return;
		}
		$(vars).stop().animate({ volume: 0 }, {
			easing: "linear",
			duration: 2000,
			step: function() {
				audio.volume = this.volume;	// this == vars
			},
			complete: function() {
				audio.pause();
			}
		});
	}
});

3 行目がキモです。vars というダミーの要素を生成して volume というプロパティを追加します。fadeIn(), fadeOut()varsvolume プロパティを jQuery.animate() で操作することにより、フェードイン・フェードアウトを実現しています。もちろんイージングを取り替えたり duration を変更してフェードの効果を変更することも可能です。

いかがでしたでしょうか。今回は音声のフェードイン・フェードアウトを実装してみましたが、他にも色々応用できると思います。ぜひチャレンジしてみてください!それでは!

JavaScript でロード時にコンテンツの再描画が発生しても初期状態がちら見えしないようにする方法 (HTML5 的には valid だぜ)

どうもこんにちは。

ページをロードする際に JavaScript でコンテンツの再描画が発生するような処理を行う場合、IE など一部のブラウザではスクリプト実行前の状態が一瞬表示されてから再描画される場合があります。

これって結構カッコ悪いのでどうにか出来ないか試行錯誤してみたところ、いい感じの方法が見つかったのでご紹介します。


HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample</title>
<!-- 初期状態は非表示 -->
<style type="text/css">body { visibility: hidden; }</style>
<noscript>
<!-- スクリプトが無効な場合は以下の指定がカスケードされる -->
<style type="text/css">body { visibility: visible; }</style>
</noscript>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(function($) {
	//
	// DOM の再描画が発生する処理
	//

	// スクリプトから表示状態を指定する
	$("body").css({ visibility: "visible" });
});
</script>
</head>
<body>
<h1>Sample</h1>
</body>
</html>

ポイント

毎度のことながら jQuery を使っていますが、ポイントは以下のとおり。

  1. body の初期状態を visibility: hidden にする
  2. script でコンテンツの操作終了後に bodyvisibility: visible に変更する
  3. JavaScript を無効にしているユーザ向けに noscript 内で visibility: visible に設定する
    • これがないと 2 が実行されないため何も表示されなくなってしまいます

残念なところ

XHTML では head 内に noscript を置くことが出来ないので invalid になってしまいます。一方 HTML5 では (今のところ) head 内の noscript には link, style, meta を格納しても良いことになっているのでこの方法が使えます。(上記コードは HTML5 Validator をきちんとパスします。) 実用志向と言われるだけありますね!

情報

jQuery Easing Plugin のイージング関数を直接利用する方法

はいどうも。ここのところ JavaScript に熱中してます。ということで今回は jQuery の Easing 関数を直接利用する方法をご紹介します。

Easing (イージング) 関数って?

イージング関数とは加速・減速を数式で表したもので、滑らかなアニメーションを表現する際に使われる関数です。jQuery においては jQuery.animate() メソッドの内部で利用されています。標準では linear と swing しか用意されていませんが、jQuery Easing Plugin にて 30 種類ものイージング関数を追加することができます。それぞれの効果についてはこちらのサイトの解説が詳しいです。

そんな素敵なイージング関数ですが jQuery.animate() 以外の処理に応用できたら夢が広がりそうな気がしませんか?

サンプル

Easing 関数の実体は jQuery.easing 下に定義されます。jQuery.easing.イージング名() で関数呼び出しができます。(ショートハンドを使った場合は $.easing.イージング名() です。)

var step = [];
for (var i = 0; i < 10; i++) {
	// 引数リスト: 第一引数は null 固定, 現在のステップ数, 初期値, 目標値, 総ステップ数から 1 を引いたもの
	var value = jQuery.easing.easeOutExpo(null, i, 0, 1, 9);
	step.push(value);
}
console.log(step);

実行結果

[
	0,
	0.5370626438563548,
	0.7856890042867318,
	0.9007874342519875,
	0.9540707971163875,
	0.9787376562472754,
	0.9901568667976963,
	0.9954432459391558,
	0.9978905083224759,
	1
]

0~1 の間を easeOutExpo で 10 分割したものが得られました。今度は easeInOutCirc を使って 0 ~ 100 のあいだを 15 分割してみます。

var step = [];
for (var i = 0; i < 15; i++) {
	// 引数リスト: 第一引数は null 固定, 現在のステップ数, 初期値, 目標値, 総ステップ数から 1 を引いたもの
	var value = jQuery.easing.easeInOutCirc(null, i, 0, 100, 14);
	step.push(value);
}
console.log(step);

実行結果

[
	0,
	0.5128340694606492,
	2.084257625004504,
	4.824604854737435,
	8.967409667585507,
	15.00728938881174,
	24.246062318114358,
	50,
	75.75393768188563,
	84.99271061118826,
	91.03259033241449,
	95.17539514526257,
	97.91574237499549,
	99.48716593053935,
	100
]

このようにイージング関数にて生成した値をアニメーション以外のところに応用することで jQuery.animate() 以外でもイージング関数を使うことが出来ます。何に使うかは……あなた次第!(すぐ思いつくところでは canvas 要素とか?)

というわけでお粗末様でした。

preload preload preload