昨年公開したjqueryプラグイン「ImageProtecter」ページをきちんと作成しました。公開したもののすっぽかしていたのもあったので。。

このプラグインと雑誌アエラの公式サイトで正式に採用しています。
一部コンテンツのみですが。

あくまで簡易的なものです。右クリックで画像保存のダウンロードをしても出来ないようにしているだけ。
スクリーンショット取ってまでする人には効果なし。そういう意味ではFLASHで作っても同じ事だと思う。何故かたまにFLASHだから大丈夫と思っている担当の人がまだいるみたい。

良い説得材料にはならないやもしれないけども、class指定だけで簡単に出来るから手間にもならずに実装出来る強みがあると思う。
将来的にはblank.gifなくとも出来るようにしたいなぁ…

皆さん使う機会あれば使ってくださいね！

いやはや、jqueryやっていて今更気づきました。
気づかず別の手法でやっていた自分も恐ろしいですが、考えてみれば当然なのです。

$("#test")

上記では”test”のid属性を持っているタグを取得するjQueryの作法です。
通常Javascriptで変数などを扱って値の有無で処理を変える場合

var test;
if(test){
　//処理内容
}

とすると思います。上記のように変数の有無で処理内容を実行するかどうかを決めるのです。
じゃあjQueryでも。。

if($("#test")){
　//処理内容
}

これじゃ駄目なのです！
jQueryだと$(“”)にてjQuery独特のオブジェクトを取得するので、true,falseは返ってきません。
なのでif文で囲っても無駄。じゃあどうすれば良いの？

if($("#test").length){
　//処理内容
}

上記が正解です。そのオブジェクトがいくつあるのかがlengthで返ってくるので、id=”test”がない場合は0が、複数ある場合は1,2,3,…と返ってくるわけです。

考えたら当たり前なのですが、意外と陥りがちな所かと。
自分は1年近くjQueryやってて気づきませんでしたorz
これからはlength使うべし。自分メモ。

jQueryで作る Ajaxアプリケーション

沖林 正紀
技術評論社

Amazon.co.jp で詳細を見る

この本、なかなか見直し勉強には良かったです。

半年前位から、JavascriptのライブラリにjQueryのライブラリを使っているのですが
拡張用のプラグインが非常に豊富でうれしい限りです。

制作現場でもよく使っているプラグインをまとめてみました。

IE PNG Fix
IE6などは、まだまだ制作現場ではユーザシェアから言っても対応必須です。
PNG使えれば自由なデザインの幅も広がります。そんな可能性を広げてくれるプラグインです。

$(function(){
　　$("img[@src$=png]).pngfix();
});

とても簡単にPNGの導入が出来る優れものなのです。

Rounded Corners
角丸を現状のHTMLでコーディングするのはとても大変です。
CSS3では仕様の中に角丸があるのですが、FFとsafariのみしか対応していないから現状だと一番スマートなやり方かな？

$(function(){
　　$('.rounded').corners();
});

※corners(“30px 10px”)等と書くと角丸具合も自由に変えられます。

Star Rating
アマゾンなどにある星マークの評価をする機能を実装できます。
若干DB等に調整を入れる必要はありますが、コミュニティサイトなどを作る際に簡単に導入出来るのが魅力的です。

$(function(){
　　$("#star").rating('star.php', {maxvalue:5, curvalue:2});
});

jQuery lightbox
有名なLightBoxのjQuery版です。通常だとprototype.jsやscriptaculous.jsを読み込んだりしなければいけないのでどうしても肥大化してしまうのですが、プラグインなので、他に必要なのはjQueryのみ。

$(function() {
　　$('#gallery a').lightBox({fixedNavigation:true});
});

jQuery Image　Protecter
最近は減ってきましたが、一部企業案件などで話がよく出るのですが「画像をダウンロード出来ないようにしてほしい！」、実際はキャプチャ取ってしまえば取れるのですが右クリックで保存出来ないような処置を加える事が出来ます。
このプラグインはmootoolにあったImage Protecter dwProtecterを参考にjQueryに僕が作り変えたものなのです。

$(function(){
　　$(".protect").ImageProtector({image:"images/blank.gif"});
});

まだまだ、他にも便利なプラグインがあります！
本家には色々なプラグインがカテゴライズされているので、是非とも欲しいプラグイン探してみてください。
ぱっと使って試せるのがプラグインの魅力なので、仕事などで使う際の参考にどうぞ！！

jQuery 本家

先日PHPSPOTさんの記事で画像をプロテクションする仕組みのJavascriptが取り上げられていました。
自サイトの画像の保存をプロテクションする仕組み
早速使ってみたところ

• mootoolで動作する
• 画像に付けたリンクまで消えてしまう

との感じでトレードオフが気になったので、jQueryのプラグインとして作り直してみました。
あまりmootoolやprototypeとかライブラリでソースと読み込みをごちゃごちゃさせたくないよね！
（ちなみに僕はjQueryベースでJavascriptを構築していく事が多いので。。）
そんなわけで、上記のような問題点も解消！わーパチパチw

お仕事などでダウンロードさせたくないんだけど、出来ない？とか言われた際に
サクッと導入出来るので良いと思います。

こんな感じでいけます！

ダウンロードはここからどうぞー

スターレーティングを簡単に作成する時に重宝しているjQueryのプラグイン
jQuery Star Rating Plugin 2.4
http://www.fyneworks.com/jquery/star-rating/

便利なんだけど大きなサイトとかで使う場合、デフォルトだと何度もクリック出来ちゃう。
なので、いたずら防止で以下のコードを追加してあげます。

63行目以下ののclickイベントを以下の形に変更

click: function(n, el, settings){	// Selected a star or cancelled
$.rating.groups[n].current = el;
var lnk = $(el).children('a'); val = lnk.text();
// Set value
$.rating.groups[n].valueElem.val(val);
//
//ここから追加
$.rating.groups[n].readOnly = true;
$.rating.groups[n].valueElem.siblings('.star_group_'+n)
.addClass('star_readonly')
.removeClass('star_live')
.unbind("mouseover mouseout");
//ここまで

// Update display
if($.rating.groups[n].readOnly == false){	//このif文も追加
	$.rating.event.drain(n, el, settings);
	$.rating.event.reset(n, el, settings);
// click callback, as requested here: http://plugins.jquery.com/node/1655
if(settings.callback) settings.callback.apply($.rating.groups[n].valueElem[0], [val, lnk[0]]);
}//閉じも忘れずに。
}

1回★のレーティングした後は更新ボタン押さないといけないようになりました。
古いバージョンだとイベントなどが毎回読み込まれていたようですが、新しいバージョンだと
設定部分にイベント関数が来てたりと、随分内容が変わっていました。
古いバージョンだと

settings.cancel = <span class="synConstant">false</span>;

とclickのアクションに追加するだけなので楽ちんだったけど
イベント周りがバラバラだったので、新しい方がすっきりしてると思いました。

やはりXMLよりJSONデータの方がJavascriptでは使いやすいみたい。当然…か

以下のようなデータを用意する

var data = {
	'news' : {
		1 : {
			'date' : "2008年3月21日",
			'title' : "コンテンツ更新しました",
			'contnets' : "JSONって扱いが楽"
		},
		2 : {
			'date' : "2008年3月19日",
			'title' : "リニューアルしました",
			'contnets' : "うまくやれます<br />こんな感じでタグもOK"
		}
	}
}

上記、呼び出すJavascriptは

var view="";
for(i=1;i<3;i++){
	view += '<div class="news">';
	view += '<p class="date">'+data["news"][i]["date"]+'</p>';
	view += '<p class="title">'+data["news"][i]["title"]+'</p>';
	view += '<p class="contnets">'+data["news"][i]["contnets"]+'</p>';
	view += '</div>';
}

としてあげると。。

<div class="news">
	<p class="date">2008年3月21日</p>
	<p class="title">コンテンツ更新しました</p>
	<p class="contnets">JSONって扱いが楽</p>
</div>
<div class="news">
	<p class="date">2008年3月19日</p>
	<p class="title">リニューアルしました</p>
	<p class="contnets">うまくやれます<br />こんな感じでタグもOK</p>
</div>

ってな感じで出力されますね。
うーん指定が簡単(^ー^)
XMLのパースだとXMLHttpRequest使うとか、ライブラリ使うなどする必要があるのがなぁ…
自力で書けなくはないが、あまりお勧めじゃないかも。XMLの扱いがブラウザ毎で若干挙動違うのも面倒かも。

FLASHとかでもJSON使えるからリンク載せときます。
CMSで吐き出したJSONデータをFLASHとHTMLページで連動させるとすれば結構良いですね。

FLASHでJSONデータの読込

先日からクライアントのJavascript導入の声がいくつかあったので試してみた。
mootoolのFx.Elementsと
コンテンツ表示およびCSSの切り替えをする必要があった。

結論
mootoolとjQueryは共存出来ないごめんなさい…出来ました！

■構成

• jquery.js　← いわずとしれたjQuery
• mootools.js　←　mootool
• imageMenu.js　←　youmosさんで配布されていたスライドメニュー
• test.js　　　←　jQueryのレイヤ表示のイベントやCSS切り替え関数

test.jsソースの汚さは気にしない気にしない

function showMenu(title){
	$("#layer1").hide();
	$("#layer2").hide();
	$("#layer3").hide();

	if(title=="title1"){
		$("#layer1").show();
	} else if(title=="title2"){
		$("#layer2").show();
	} else if(title=="title3"){
		$("#layer3").show();
	}
	changeCss(posi);
}
function changeCss(titleName){
	$('link[@rel*=style][@title]').each(function(i){
		this.disabled = true;
		if(this.getAttribute('title') == titleName) this.disabled = false;
	});
}
$(document).ready(function(){ changeCss(); });

だた、こいつらを

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/imageMenu.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>

と順番に並べるとIE6,7共にエラー…orz
firefoxはおっけーなのに。。
どうも「$(document).ready()」自体がエラー出てることを考えると$()自体の呼び方が相殺されてるっぽい。
スクリプトの呼び出し順を変えるとエラーの出方が変わります(ﾟдﾟ;)ｱﾜﾜ
確かにmootoolにも$()の考え方も一応あるみたいだし…もうちょっと調べないと。情報求ム

■解決済み（追記）
コンフリクト回避をjQuery側で設定してあげれば良いようですね。

jQuery.noConflict();

jQuery と prototype.js を同時に使う。（$(); のコンフリクト回避）

これでmootoolやprototypeでも問題なく動作します。

昔は、JavascriptのonLoadは<body>部分に「<body onLoad=”hoge”>」と書くか
Jsファイル内に「window.onload = hoge;」とでもしてあげれば良かった。無名関数って奴？←よく分かってないので指摘求ム。
でも最近だとリスナー登録する形で書くのが主流だから…

function errorfunc(){ alert("エラーだとさ"); }
addEventListener('load',errorfunc,false);

もしくは…

txt = "エラーだとさ";
addEventListener('load',function(){ alert(txt); },false);

前者の場合は、第二引数に関数名指定。たぶんweb上でよく見るのはこっちか？
後者の場合は、関数名を直接書いてるけど引数書けるから良いかなーと思っていたら以下の記事

addListener()やattachEvent()で引数

まだいろいろあるみたい。もうちょっと調べます。