いつの間にか、JQuery1.7がリリースしていた。
今回のアップデートは、bind()やlive()に代わる新しいメソッドとかcallbackオブジェクトとかいろいろとアップデートしてるみたい。

More

お仕事用サイト「Branberyheag!!.jp」を公開。

最初は、自分のポートフォリオサイトを作るつもりなかったのですが、段々、システムが出来上がってくると、いい感じの完成度になってしまって、これを単純に公開するのも勿体ないなと思って、自分用のサイトにしてみた。

技術的な話をするとWordPressでできていて、カテゴリー、ページ、記事というようなシンプルな構成でできあがっている。ただ、ページ遷移は、なくてJQueryのload()を使って、HTMLを呼び出している。戻る、進むボタンを有効にするため、ハッシュタグをURLに組み込んで、あとはプラグインでの処理を行っている。

あとは、スライドショーは、Arrayに画像のパス、サイズをつっこんで、ページおくりしたときに呼び出している。DOMを操作して、消えたり出したりするよりは、処理が速いような気がする。

これを作ったときにいろいろとTipsが溜まったので、ネタを公開していきたい。

これ、フェーズ１なんで、もう少し手直しと機能を追加する予定。

以前やった、クライアント案件で、この技術を使えばもっといいものができたとこれを作りながら思った。いつか修正したいけどね。

JQureryプラグイン「skroll.js」がとても実用的だったので、メモ。

More

ゴールデンウィークで、遊びほけている間にJQuery1.6がリリースされていた。

大きく変わった点は、以下のとおり。

• チェックボックスのtrue/falseでチェックの操作が、attr()からprop()に分離。
• JQuryのパフォーマンスの向上。（バージョンアップするたびにあがっていて、すごい）

大きいところでは、こんな感じかなと思う。

あと、

• attr(),val()の拡張
• JQurey.map()が配列以外にも使える
• アニメーションの完全同期

他にもいろいろとバージョンアップしているぽいけど、インパクトの大きいものは、少ないかも。

JQuery Blog

http://blog.jquery.com/2011/05/03/jquery-16-released/

GinPen.com
http://ginpen.com/2011/05/04/jquery1-6/

Shinya Blog
http://shinya-blog.blogspot.com/2011/05/jquery16-attrprop.html

要素の高さを揃えるJavaScriptの仕組みがかいてあったので、メモ。
仕組み自体は、簡単だけどソースコードをどれだけシンプル書くかがキモだと思う。。。。

More

WordPress2.9で動いていたテンプレートに実装していたJavascriptがなぜか動かなくなった。どうしてだ？？と思ってエラーを調べても原因が分からなかった。とりあえず、スクリプトを全部作り直したかったので、丁度良い機会なのかもしれない。

さてさて、どうしたのかな。。。

原因として考えられるのは、JQueryは、headerCleanというプラグインを使っているんだけど、それのJQuery(つまりライブラリ)がうまく読み込まれてないいないのかもしれない。調べてみようかな。

ちょっと、jQueryでロールオーバーが必要になってきたので、調べたらプラグインではなくスクリプトとして記述の仕方が紹介されていたので、メモ。

<pre>jQuery(document).ready(function($) {
	var postfix = '_on';<!--more-->
	$('#gNavi a img').not('[src*="'+ postfix +'."]').each(function() {
		var img = $(this);
		var src = img.attr('src');
		var src_on = src.substr(0, src.lastIndexOf('.'))
		           + postfix
		           + src.substring(src.lastIndexOf('.'));
		$('<img>').attr('src', src_on);
		img.hover(
			function() {
				img.attr('src', src_on);
			},
			function() {
				img.attr('src', src);
			}
		);
	});
});

たったこれだけのソースでロールオーバーが再現できるなら良いかなと思った。何気に便利だと思う。最大のポイントは、img要素にclassタグで指定しなくてもいいということ。これなら、余計なclassをつけなくてもいい。

んで、この作者さんは、プラグインも作っているようなので、こちらもリンク。

• input 要素にも使えるjQueryのロールオーバープラグイン
• jQueryだけで画像のロールオーバーを実装する方法

jQueryで要素を見つけてそれがあるのかないのか判断するスクリプトを載せてみた。

要素が存在しない場合は
 jQuery("#id").size() == 0

 要素が存在する場合は
 jQuery("#id").size() > 0

gameQueryはJavaScript製/jQueryプラグインのオープンソースだそうだ。
試してみたけど、案外スムーズな動きにビックリした。デモでやってみたほうがいいかもしれない。

gameQueryを使ったオンラインゲームが出てきそうだ。昔、AJAXを使ったオンラインゲームがあったのを思い出した。いろんなゲームジャンルが作れそう。

ストリートファイター系ゲームまで！ゲーム用jQueryプラグイン「gameQuery」CommentsAdd Star
http://www.moongift.jp/2010/03/gamequery/

HTMLでコミュニティサイトで、いつも躓くのがアップロード機能だと思う。Flashのアップローダーを使うでなんとかしのいでたりとかしている。

そんなときに「Plupload」は、いいかもしれない。
複数ファイルアップロードの他にドラッグアンドドロップなどの気の利いた機能があるようだ。
これだったら、ユーザに負担をかけずに気軽にアップロードできるかもしれない。

Plupload