ちょろちょろと書いてるprototype.jsとjQuery両方のライブラリを使って、同じ動作をするものを作ってみよう…の第3弾として、Ajaxらしく、別ファイルを読み込んでページ内に表示する…というものをやろうとしたのですよ。
実際、ページ内に表示する動作はサクサクっと実現出来たんですが、エラー処理の部分でちょっと――というか、かなり？　もたもたしています。

こういう動作をやる場合、普通にAjax.Updater（*prototype.js）又はobject.load（*jQuery）を使えばいいのでしょうが…読み込む対象のファイルがNot Foundのとき、つまり404 errorとなる場合に、サーバの設定によって挙動がかわってくるようなのですね。

ちょっと推測混じりでアレなのですが、恐らく.htaccessなどで独自エラーページを表示させるようにしている場合は、そこで指定されたエラーページを取得し（→Ajaxリクエストは正常終了する）、取得したエラーページ自体を表示している・・・っぽい？？
独自のエラーページに飛ばされているロリポップサーバにおいた時はそんな感じなのですよ。
Apache標準（？）のNot Foundページをそのまま出しているさくらWebだと、普通にonFailureに書いた処理を返しているんですけどねぇ。
ちなみにさくらWebの方で.htaccessを設定し、独自エラーページをおいた場合にはロリポと同じ挙動になるので、たぶん状況としては間違ってない・・・と、思う。たぶんきっとおそらく。（超弱気）


しかし、Not Foundのときにサーバ設定次第で挙動が変わる…なんて事になるとしたら、Ajax.Updater使えないなぁ…。
いやFile Not Foundにならないようにすればいいんですけどね！　でも万が一のエラー処理は考えておきたいし――以下グルグル悩み中

前回に続いて、今度はフォームの操作を行うJavaScriptのサンプルっぽいものを作成。



サンプルページはこちら


基本コンセプトは『選択した項目の値によって、別項目の初期値を切り替えたり、使用可・不可を切り替えたりする』動作をJavaScriptで制御する、というもの。

実際に作ってみての感想は、prototype.jsだと$Fのように、フォームの値を直接読み込むようなものが用意されていたりなど、フォーム関連の処理（？）が結構簡単だったんだなぁ…ということかな。
でもjQueryの擬似セレクタ（「:」で始まるやつ）もなかなか面白い…。擬似セレクタを使うことで、今回作ったサンプルより、もっと効率よく動かせる方法もありそうですが、今はとりあえずコレで。


さて、次は何のサンプルを作ってみようかな？　なんか楽しくなってきた

ちなみにフォームの操作(1)ってしてますが、たぶん2・3…と続くような気がします。入力値チェックとか、formの値を渡す挙措とか、将来的にはそのへんも突っ込んでいけたらいいなぁと思うので。

---

追記
前回の開閉スクリプト、jQuery版の方をちょっと修正…というか、ちょっとだけ別の方法をつかったものもあげてみました。
ページLoad時にulタグをチェックするときeachループを使わない方法、みたいなもの。なんかこっちの方が断然スッキリ…。

なんだか結構暇だったので（…）ちょっとこんなものを作ったりしてました。



リスト開閉サンプルページはこちら

かなりざっくりとしたサンプルです　誰のためと言うより、自分の備忘録みたいな感じなので、コレくらいでいいかなぁ…と。
一応コンセプトは次のような感じ。

初期値ではリスト1のみOPEN。リスト2・3は閉じている。
リスト1〜3のリンクをクリックすると、それに応じて開閉する。

初期状態のOPEN/CLOSE設定も、prototype.jsを使ってJavaScriptで制御しています。（CSSでdisplay: noneにしたりはしていない）
もっとスマートなやり方は多々あると思うんですが、まぁ…これが私の限度ってことで。

まずはprototype.jsでオーソドックスなサンプルをいくつか作ったら、今度は同じ所作をするものをjQueryで作ってみようと思っています。

前にprototype.jsとjQueryとどっちを使ったらいいかわかんない…的記事を書いたと思いますが、判らないなら両方使って比較すればいいんじゃん！　みたいなね（笑）。
限りなく力技と言う気もしますが、まぁキニシナイ



2008.07.03修正
同じ動作をするjQuery版ページも作りました。リスト部分のHTMLは全く同じで、JavaScriptの部分だけ変わっています。
こうやって見ると、なんだかjQuery版の方がスッキリって感じが個人的にはするなぁ…。

次はフォームの操作（といっても入力チェックとかではなく、選択した項目によって表示を切り替えるとかそういう程度の）に関してのページをつくろーと思っています。

最近ちょっと気になって調べていたことがあるんです。

Ajaxianでの「Ajaxian 2007 Survey Results」によると、『The frameworks that you have used or considered using』（→使ったことがある or 使おうと思っているフレームワーク）は、

1位：Prototype（68.4％）
2位：Scriptaculous（58.7％）
3位：jQuery（47.5％）
4位：Yahoo UI（40.3％）
5位：Dojo（38.3％）
　　　　　　　　〜以下略

と言う風になっていました。

前年（2006年）の調査時と比較すると、1・2位は変わっていないのですが、2006年に6位だったjQueryが2007年になって一気に上がってきたのが印象的といえる…のかな？

アンケートの見出し的に考えると複数選択可能なんだろうなぁと思うんですが（アンケート項目本体は探せなかった…）、Scriptaculousの動作がPrototype.js使用が前提である事を考えると、ベースとなるフレームワークとしてはPrototype.jsとjQueryの2つが実質「人気上位」になるんでしょうかねぇ。


で…ここまでが前置き（長っ）。

Prototype.jsとjQuery、新しい案件で「どっちを使おうか」って迷うことありませんか…？　私はいつも迷います。そしてかなりグルグル悩みます。
サイト修正とかで『既存のライブラリをそのまま使う』とかなら悩まないんですけどねぇ。まるっと新しいページを作る場合に、どっちの方がいいんだろう…と考え込んでしまいます。

私としてはPrototype.jsの方が長く使っているので（※使っているだけで使いこなせていないけど！）、基本的に構文はPrototype.jsの方が馴染み深いんですが、jQueryも面白いですよね…？　複数要素の指定とか、メソッドチェーンって言うんですか？　同じオブジェクトに対して複数のメソッドをつなげて書くことができるアレとか。Prototype.jsでも出来るんですかね？　実はv1.5までしかPrototype.jsって使ったこと無くて…orz

ちなみに今でこそ「メソッドチェーン面白い！」と言える私ですが、数ヶ月前に始めてjQueryのソースを見たと気は「へ？　なんでこんなに一杯ずらずらと命令ッポイの繋がってるの…？？？」と目が点状態でしたね。調べればちゃんと判ることだったんだけど、調べる前にソースを見てたからなぁ…。（ええ、マニュアルを読まない人です！）

知人は「Prototype.jsよりjQueryの方が簡単そうな気がする」って言いますが、どうなんでしょうね…？

…ホント試しただけって感じなんですがね。

詳細はこちら↓
http://web-material.com/ajax_test/png_script/

現在、スクリプトは4種類ほどあるようです。
多分iepngfix.jsかalphafilterを使われる人が多いと思うんですが、ie7.jsでも透過pngを実現できるそうなので、それもサンプルに入れてみました。ie7.jsは、IE7ッポイ動作を実現させるスクリプトなので、pngの透過も一緒に（笑）達成しているみたいですね。

とりあえず、どれも「何かがちょっと足りない」というものを抱えている感じがしますね。まぁそれはしょうがないことだなぁと思うんですが。

基本的には
pngを背景にセットしたとき、positionやrepeatを解釈しない
というのが一番大きいかな、と思います。

最近自分で透過pngを多用したページを作ったときは、iepngfix.jsを使いましたが、こうやって比較してみると、htcファイルを使うものが結構優秀な気がします。（※あくまで主観です！！！）

ただ、透過gifならば、こういったスクリプト的なものに頼らず透過ができるわけなので、極力透過pngを使わず、gifで事足りるようなデザインにすれば良いのかもしれませんね。
とはいえ、モノによってはgifよりpngの方が綺麗なのも確かなので、pngつかいたいな〜って気分もよく判るんですが…（笑）。

※ライセンスについては変更になる可能性もあるので、使用する前に必ず確認すること！

【商用でも使えるスクリプト】

Lightbox JS v2.0
prototype.js + scriptaculous.js
CreativeCommons License（CC by 2.5）
http://www.huddletogether.com/projects/lightbox2/
http://www.huddletogether.com/projects/lightbox2/#example
全ての基本。商用可なので使い勝手もいいですね。


ThickBox
jQuery
MIT License
http://jquery.com/demo/thickbox/
http://jquery.com/demo/thickbox/#examples
画像だけでなくHTMLテキストもポップアップに出来るように。


Smoothbox : Thickbox for mootools
mootools
MIT License
http://gueschla.com/labs/smoothbox/
ThickBoxをmootools用に変えたもの。基本機能はおなじはず。


Lightbox Plus
独自ライブラリ
CreativeCommons License（Lightboxに準じる）
http://serennz.sakura.ne.jp/toybox/lightbox/?ja
http://serennz.sakura.ne.jp/toybox/lightbox/?ja#sample
Lightboxの改造版。作者が日本の方なのでマニュアルとか全部ニホンゴなのがいいですね。


iBox
独自ライブラリ
MIT License
http://www.ibegin.com/labs/ibox/
画像以外にHTMLやYouTube動画（※サンプルはYouTubeへのリンクをウィンドウ化）も表示できるらしい。


Prototype Window Class
prototype.js + scriptaculous.js
MIT License
http://prototype-window.xilinus.com/
http://prototype-window.xilinus.com/samples.html
最近ちょっとイチオシなのが、このスクリプト。
テーマCSSを導入することで外観が簡単に変えられるのもいいです。
複数の画像（やHTML）を同時に拡大ポップアップさせることも可能。


GreyBox
独自ライブラリ
LGPL License
http://orangoo.com/labs/GreyBox/
http://orangoo.com/labs/greybox/examples.html
ナビゲーションバーがページ上に、かなり大きく表示される。
スライドショーなんかの場合は使いやすくていいのかも。
大きい画像を表示させたいときには邪魔かな…。


ModalBox
prototype.js + scriptaculous.js
MIT License
http://www.wildbit.com/labs/modalbox/
http://code.google.com/p/modalbox/
MaxOS風味に「画面の上の方」にウィンドウが出る。画像用というよりHTML表示用っぽい。
でもMac使わないのでこれがホントにMac風なのか謎…。


Facebox
jQuery
MIT License
http://famspam.com/facebox
角丸Windowでの表示になるのが可愛いですね。
配布ソースにはjQueryはセットされていないので別途ダウンロードが必要。


Google Maps Lightbox
独自ライブラリ
ライセンス不明
http://www.emich.be/en/gmlightbox/
Google mapをLightbox風に表示するためのスクリプト。Google Mapsを使うためのAPI Keyは別途必要。
サンプルは上記ページ内の「I’ve been there and there, but would also like to go there too.」の、there部のリンクをクリックで。
背景に敷いているのがpngファイルなので、IE6だとMapの「下」のグレイ背景が半透過にならない（んだと思う）。


prettyPhoto
jQuery
ライセンスの明記はなし
http://www.no-margin-for-errors.com/projects/prettyPhoto/
角丸Windowでの表示。
コメントのやり取りに「Q：We would to use it in a commercial product and we are unsure if we can do it.」「A：You can use it the way you want, it's free to use/modify.」とあるので、商用OKだと思われる。




【商用有償なスクリプト】

Highslide JS
独自ライブラリ
CreativeCommons License（CC by-nc 2.5）
http://vikjavev.no/highslide/
http://vikjavev.no/highslide/#examples
他のLightbox系と違うのは、複数の画像を同時に拡大ポップアップさせることも可能なこと？
Flashコンテンツの表示もOK。


LightView
prototype.js + scriptaculous.js
CreativeCommons License（CC by nc-nd 3.0）
http://www.nickstakenburg.com/projects/lightview/
細かいカスタマイズがパラメータセットで可能なライブラリ。
PDFやSwfファイルも対応してるというのがすごいかも…。
Prototype.jsがv1.6.0.2以上で動作なので、最新のものを使う必要あり。


FancyZoom
独自ライブラリ
non-commercial（非営利？）の場合Free
http://www.cabel.name/2008/02/fancyzoom-10.html
IEとFireFoxで多少見栄えに差異がある（閉じるボタンの位置etc）けど、動作は可愛い。
複数画像を同時表示できそうに見えるけど、1つのみ。
bodyタグにonloadイベントを設定する必要があるが、代わりに各Aタグに対して特定要素の追加（たとえばclassの追加）をする必要はない。「rel="nozoom"」を追加すると、その画像は拡大表示しなくなる。blogとかで使うにはタグ追加の面倒がなくて便利。

jQuery＋ドロップダウンメニュー（またはプルダウンメニュー）で検索すると、大体がSuckerFishタイプのスクリプトにたどりつくわけです。

このスクリプトが、私にとってはすごく謎。

$(document).ready(function(){ $("#nav-one li").hover( function(){ $("ul", this).fadeIn("fast"); }, function() { } ); if (document.all) { $("#nav-one li").hoverClass ("sfHover"); } }); $.fn.hoverClass = function(c) { return this.each(function(){ $(this).hover( function() { $(this).addClass(c); }, function() { $(this).removeClass(c); } ); }); };
メニュー項目（#nav-one li）の要素にマウスオーバー（hover）したときに、fadeInで表示するのはいいんだけど、マウスを外したときは勝手に消してくれてるの？？　というのが判らない。

▽Open more.

ちなみに、これで悩んだのは、SuckerFishのスクリプトと同じようにして書いたプルダウンメニューの、ぺらっと垂れ下がる部分とFlashコンテンツが重なったときに起きる色々を回避しようとしてたら、特定条件でプルダウンが動かないという謎動作が発生してしまったとかで（Mac SafariとIE7で、どっちかしか動かないみたいなそんな感じだったはず？　私の案件じゃなかったのでうろ覚えだ…）、どうやらfadeInを使わなければ大丈夫ッポイ！　ということで（ポイってあたりが不安たっぷりなんだけど…）無理やりぐりぐりと書き換えたのが、2つ目のコード。

$(document).ready(function(){ $("#nav-one li").hover( function(){ $("ul", this).show(); }, function() { $("ul", this).hide(); } ); if (document.all) { $("#nav-one li").hoverClass ("sfHover"); } }); $.fn.hoverClass = function(c) { return this.each(function(){ $(this).hover( function() { $(this).addClass(c); }, function() { $(this).removeClass(c); } ); }); };
正直構文があってるのかは今でも「？？？」なんだけど、動いてるからいいか…みたいな…。

確かにfadeInを使ってふわっと（？）表示されるのは綺麗なんだけどねー。show/hideを使うと、そういうエフェクトは入らないのでさっぱりシンプルな表示になります。私はこの方が好きだな。

Close.△

Prototype Window ClassというJavaScriptのソースを使いました。
名前の通りにprototype.jsと一緒に使うライブラリなんですが、JavaScriptのalert dialogをちょっとお洒落な感じに変えたりが出来ます。



2枚目が追加で用意されているテーマファイルを適用したもので、デフォルトは3枚目のような表示になります。
表示文にはHTMLタグが使えるので、警告画像とか置きたいわぁ〜って時にも便利でいいのかも。
画像のサンプルの場合（※2枚目）「<strong>アラートサンプル</strong><hr noshade size=1>className:alphacubeを適用しています」というコードを記述しています。

▽Open more.

まずライブラリとCSSをリンクします。
<!-- JS --> <script language="javascript" src="js/prototype.js"></script> <script language="javascript" src="js/window.js"></script> <!-- CSS --> <!-- ・default：Prototype Window Classの基本CSS ・alert：アラートウィンドウ用のCSS ・alphacube：追加デザイン用のCSS --> <link rel="stylesheet" href="css/default.css" type="text/css" media="screen,projection"> <link rel="stylesheet" href="css/alert.css" type="text/css" media="screen,projection"> <link rel="stylesheet" href="css/alphacube.css" type="text/css" media="screen,projection">
<!-- 1つ目：追加デザインを付加しています --> <a href="#" onclick="Dialog.alert('<strong>アラートサンプル</strong><hr noshade size=1>className:alphacubeを適用しています', {width:300, height:100, okLabel: '閉じる', className:'alphacube'});return false;">アラートサンプル（alphacube）</a> <!-- 2つ目：標準デザインでのアラート --> <a href="#" onclick="Dialog.alert('<strong>アラートサンプル</strong><hr noshade size=1>デフォルトのアラートはこちら', {width:300, height:100, okLabel: 'OK'});return false;">アラートサンプル（デフォルト）</a> 　
Dialog.alertの1つ目のパラメータに表示する文字列を、2つ目のパラメータにオプション項目を書きます。すっきりとしていて判りやすいですね。

Close.△

ExtJSでのツリーメニュー（仮）


前提
・必要ライブラリをリンク
・script〜/scriptまではheadタグ内に
・ツリーを表示させるためのIDをbody内に
　（例：　<div id="mytree"></div>　）


参考：http://www.ext-japan.org/

▽Open more.

<script type="text/javascript" charset="utf-8"> //<![CDATA[ var App = function(){ // shorthand var Tree = Ext.tree; return { init: function(){ var treePanelObj = new Tree.TreePanel({ el: 'mytree', // BODY内のIDとあわせる animate: true, autoScroll: true, containerScroll: true, // rootVisible: false＝第1階層を隠す // rootVisible: true＝第1階層を表示(*default) rootVisible: true, // true＝高さを自動調整（伸び縮みする） // false＝CSS等で決めた高さで固定（スクロール？） autoHeight: true, // ドラッグを許可する？[T/F] enableDD:false, //dropConfig: { appendOnly: true }, loader: new Tree.TreeLoader() }); // TreeSorterにするとソートするらしい？TreeNodeでかいたまま // new Tree.TreeSorter(treePanelObj, { folderSort: false }); new Tree.TreeNode(treePanelObj, { folderSort: false }); // +++ memo +++ // id　→　各ツリーノードのID // text:　→　ツリーに表示される文字列 // leaf: true　→　true：ノード末端ICON　falseでフォルダ // cls: 'クラス名' // クラス名を指定する // cls:'clsName01 clsName02', // かさねづけもOK // href:'url', // リンクURL // hrefTarget:"_blank", // 新しいWindowで開く // expanded:true　→　初期状態でノードOPEN　falseでCLOSE(*default) // ※expandedは設定したノードのみが対象なので、 // 　深い階層のものを初期からOPENして見せたい場合、 // 　上位にある親ノードすべてにexpandedを設定しておく必要がある var json = [{ id: 'tree01', text: 'ツリーその１', expanded: true, children: [ { id: 'tree01-01', text: 'Google', leaf: true, href:'http://www.google.co.jp/', hrefTarget:"_blank"}, { id: 'tree01-02', text: 'test02', leaf: true }, { id: 'tree01-03', text: 'test03', leaf: true }, { id: 'tree01-04', text: 'test04', leaf: true } ] },{ id: 'tree02', text: 'ツリーその２', children: [ { id: 'tree02-01', text: 'Google2[target self]', leaf: true, href:'http://www.google.co.jp/' }, { id: 'tree02-02', text: 'test02', leaf: false, children:[ { id: 'tree02-02-01', text: 'Google3[target self]', leaf: true, href:'http://www.google.co.jp/' } ] }, { id: 'tree02-03', text: 'test03', leaf: true }, { id: 'tree02-04', text: 'test04', leaf: true } ] },{ id: 'tree03', text: 'ツリーその３', children: [ { id: 'tree03-01', text: 'Google3', leaf: true, href:'http://www.google.co.jp/', hrefTarget:"_blank"}, { id: 'tree03-02', text: 'aaa', leaf: true }, { id: 'tree03-03', text: 'sss', leaf: true }, { id: 'tree03-04', text: 'ddd', leaf: true }, { id: 'tree03-05', text: 'fff', leaf: true }, { id: 'tree03-06', text: 'ggg', leaf: true }, { id: 'tree03-07', text: 'hhh', leaf: true }, { id: 'tree03-08', text: 'jjj', leaf: true }, { id: 'tree03-09', text: 'kkk', leaf: true }, { id: 'tree03-10', text: 'lll', leaf: true }, { id: 'tree03-11', text: 'qqq', leaf: true }, { id: 'tree03-12', text: 'www', leaf: true } ] }]; // root node var rootObj = new Tree.AsyncTreeNode({ text: 'ツリーテストですよ', draggable: false, // ドラッグしない id: 'rootNode', children: json }); treePanelObj.setRootNode(rootObj); // 表示 treePanelObj.render(); rootObj.expand(); //this.debug(treePanelObj); }, debug: function(v){ console.log(v); } }; }(); Ext.onReady(App.init, App, true); //]]> </script>
面倒で（…）テスト時はHTML内にガリゴリコードを書いてしまったけど、本当は外部ファイルにするべきものですね。


2008.03.19
・rootVisible、autoHeight、expandedを追加
・ExtJapanへのリンク追加

Close.△

前から趣味でチョコチョコ調べていたExtJSですが、なんか今度お仕事で使う気配が。
使うことは無いだろうケド…と見ていたものを実際に使うことになるとは、なんだか不思議な気分です　まぁ、まったく知らないものをゼロから仕事で使えって言われるより、断然いいんですけどねー。
過去の私、ちょっとだけエライ　とか一瞬だけ思ったのはナイショです。

ただ「やってみたいといわれている内容」と「ExtJSで実装できる内容」を考えると、もっと軽量で簡単なJavaScriptライブラリでも良いんじゃないかとか思ってるのもナイショ…。多機能な分、ライブラリとしては重いしなぁ。ま、私は今まで自習した成果を仕事に応用できるチャンスがあるのはありがたい事です。ふふふ、楽しみだな。仕事の内容は結構（スケジュール的に）きついけど…。


ちなみにExtJSのサイトにあるサンプルは、どうも「多機能なこと」を見せすぎていて、「サンプルとして見る分には格好いい」けど、それを応用して自分なりのものを作ろうとすると「うわ、これどう変えていったらいいんだ！？」とかなり悩む罠が。
最初に簡単そうなツリーメニューのところからやり始めたとき、サンプルにPHPが使われていたために、あわててPHPをインストールしてあるところにファイルをコピーし直した記憶が懐かしいです…
あとはサンプルだと、ツリー項目をDrag＆Dropで動かしたりとかが出来るんですが、もしそれをHTMLページのメニューに応用しようとした場合、Drag＆Dropでメニュー項目が勝手に動いてしまっては不都合なんだよーってとき「はて、どこを直せばいいんだ？？」と迷うかもしれませんね。（というか、私はちょっと悩んだ）
こういうとき、英語のドキュメントを読むだけの語学力がないことが悔やまれます。もちっと真面目に英語を勉強すればよかったー…orz