Raphaelでクリッカブルマップの参考になるサイト。

Raphaelを使ってクリッカブルマップを作ろうと思っていますが、
思っている通りのことを実現しているサイトがあったのでリンクメモです。
http://freejoblistings.ca/
（■追記：jsのソースを見ると、あまりに詳細で難解なので、現時点では無理だと判明。。
すごいな。）

以下のフォーラムで作者の人がクリッカブルなマップについて何か書いてるのでメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/8406d083c5dcab65/d59a01dcd3c8130d?lnk=gst&q=freejoblistings#d59a01dcd3c8130d

liveでRaphaelを触って学べるサイト

raphael_liveというページがありました。
コードを書きかえると、すぐその場で実行でき、Raphaelが効率的に学べそうです。
http://craic.com/tutorials/javascript/raphael_live/raphael_live.html

Flashにおけるwonderflみたいな感じですね。
簡易的な。

素晴らしい。

Raphaelでelementにmethodを適用させる方法メモ。

Raphaelで、あるelementにメソッドを適用する方法のメモです。

Raphael.el.red = function () {
    this.attr({fill: "#f00"});
};

というように、elなどで表したものをthisでattrを適用させる、
といったように宣言しておき、

paper.circle(100, 100, 20).red();

あとは普通にelのところに、オブジェクトを書くだけ。

解説は以下にありました。
http://raphaeljs.com/reference.html#plugins-elements

とあるプラグインのソースの意味が分からないので学習中。。。

getColor()はスペクトラム上の次の色を返すらしい。

raphaelでgetColor()は、スペクトラム上で次の色をオブジェクトに返す機能らしい。
便利だ。


http://raphaeljs.com/reference.html#getcolor

SVGの書き方（描き方）を勉強してみた。

SVGでのラインの書き方が、W3Cのサイトに載っていた。
面白い。

http://www.w3.org/TR/SVG/paths.html#PathData

基本的に大文字と小文字は、絶対位置と相対位置の違いの様子。

Mで始点に移動。
Zが終点。

Lが線を引く。（あるパスのソースを見ていて、小文字の「l」が「|（パイプ）」に見えており、「パイプって何を意味する記号だろう。。。」と悩んでいた。。小文字のエルだった。。。）

Hがhorizontal lineすなわち水平線（横線）。
Vが垂直線。vertical line

Cがちょっとややこしいが、ベジェ曲線。Mで始点を指定し、Cでコントロールポイント（イラレでおなじみ）の位置を指定、その次のx,y座標でもう一つのコントロールポイントを指定。そして最後のx,y座標で終点を指定。その四点で、曲線が描ける。
面白い。

Sはちょっと難しくて、まだよく分かりません。どうも、先のCの二つのコントロールポイントの位置関係を反映するようで、新しくコントロールポイントを一つ指定し、終点を指定してやれば、二つ目のコントロールポイントは、先にCで指定した二つのコントロールポイントの位置関係を反映してくれる様子。（くどい書き方ですね。。）

Qは、quadradでコントロールポイント一つと、始点終点で良い様子。こっちの方が分かりやすそう。
Tは、コントロールポイントが、やはり中間地点を軸に反転したものとして反映され、終点を書けばOKという、ショートハンド（省略）記述の様子。

なるほど。

解説PDFもあった。
http://tutorial.jp/graph/svg/svgman.pdf

■以下、Raphaelで地図のSVGスケールを変えるために、本家フォーラムの関連ディスカッションURIをメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/e1a3889a37dfeac3/e42fb35ad07fe528?lnk=gst&q=map#e42fb35ad07fe528

以下は、マップ上のオブジェクトをダブルクリックして、ajaxで他のファイルを読み込み表示させるためのメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/8406d083c5dcab65/171a2adf124e4e05?lnk=gst&q=map#171a2adf124e4e05

ナビゲーションプラグイン（アニメ）

ナビゲーションでいい具合に変化するものをjQueryで探していて、
かなり気に入ったものがあったので、メモです。

jQuery background position（プラグイン）
http://snook.ca/archives/javascript/jquery-bg-image-animations/
http://snook.ca/technical/jquery-bg/（demo)

animated-navigation
http://www.tyssendesign.com.au/articles/animated-navigation-items-using-jquery/
http://www.tyssendesign.com.au/examples/animated-nav.htm(demo)

jQueryで、時間差関数実行ライブラリ

jQueryを使って、時間差で、複数の処理を段々実行することができないかと思い、
探していたら、いいものが公開されていました。

http://developmentor.lrlab.to/postal/jquery/jquery.delay.html

素晴らしい。
思っていた通りのものです。
これから実装なり。

jQueryでコールバック関数を直接書く時のメモ

jQueryのコールバック関数を直接書く方法のメモです。

jQueryでコールバック関数を直接書くときは、
$("#main").fadeIn(1000,function(){$("#sub").fadeIn(1000)});
のように、
function()を、指定の引数番目に書き、
{}中かっこのデリミタの中に、新しく選択要素とイベント処理を書く。

かっこ、中かっこの入れ子で間違えがちなので注意。

fadeIn(),fadeOut()などは第二引数に書き、
animate()は第四引数に書く。（演出を指定しない場合は、第三）

追記：「コールバック」って、「call back」すなわち「電話をかけ直す」「呼びもどす」みたいな英語だから、 一度ある関数で何かの処理をして、また別の関数を呼んで処理をさせる、という意味ですね。どうも「コールバック関数」という言葉の意味がつかみにくかったのですが、やっとイメージが掴めました。

英語環境にいるかいないかで、プログラミング関連の初期習得にはけっこう差があるんだろうな、と良く思います。

$(this)はかっこで囲む

jQueryで要素自身を選択する時は、$(this)とかっこで囲む。
 普通に他のDOM要素選択の時のように。
メモです。

opacityのクロスブラウザ対策

filter: alpha(opacity=50);

のように書けば、IEもOK.。

まあまあ他は、opacity:0.5;とかで良さそうかな。

JS自体の話題じゃないすが、jsでの記述に関連していたので、メモです。 

jQueryのfadeOutの挙動が面白い。

jQueryのfadeOutで面白い現象が起きたのでメモです。
（fadeOutを指定していない要素まで一緒に消えてしまうバグ？）

例えば#main,#subという二つのブロック要素を用意し、
#mainをjQueryで $("#main").fadeOut(3000);などと設定し、
#subをcssで予め、position:relative;にして、
left top;と指定し、
 $("#sub").animate({left:"100px",top:"100px"},1000);
とか指定します。

するとブラウザで確認すれば、fadeOutを指定してない#subまで一緒にfadeOutしてしまうではないですか(笑)

どうも、
.animateで({top:"100px"},1000);
と上の要素に連動しているから、影響を受けるようですね。

ちょっと楽しい。

このtopを指定しなければいいかと消したら、
上の#main要素が消えた後に、「ガコッ」と下の#sub要素が上がってしまう、という現象に変わりました(笑)。
ま、これは当然の挙動ですね。
上のブロックが消えるわけですから。

jQuery、奥が深いです。
たのしや。

透過PNG実装。（Unitpngfix.js）

透過PNGをIE6でも実装するjsを色々あたってみて、Unitpngfix.jsがかなり気に入りました。
http://labs.unitinteractive.com/unitpngfix.php

clear.gifという透過GIFファイルを一枚読み込んで、
<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js">
<![endif]-->
とインクルードするだけ。

png24でも、CSSでのbackground画像でもきれいに透過表示してくれます。
ほんとうに手軽でびっくり。
ありがたや。。
（でもbackground-positionについてはまだこれからとのこと。確かにIE6では背景を繰り返すと表示が崩れたりするようです。ああ、IE6。。。）

galleryを作る必要があるのでメモ。

jQueryで良さそうなギャラリーのメモをいくつか。

gallaria
http://galleria.aino.se/
定番。とてもいい感じです。

smooth div scroll
http://www.maaki.com/thomas/SmoothDivScroll/#quickdemo
いい感じでスクロールしてくれますね。

sliding gallery
http://www.meadmiracle.com/SlidingGalleryDemo1.htm (デモ）
http://www.meadmiracle.com/SlidingGallery.aspx
中心をクリックすると大きくなり、横の画像をクリックすると新しい画像が立体的に迫ってでてくる感じがいいです。



s3Slider
http://www.serie3.info/s3slider/demonstration.html(デモ）
http://www.serie3.info/s3slider/
フェードイン、フェードアウトで画像が移り変わり、これまたいい感じです。

pikachoose
http://pikachoose.com/demo/(デモ）
イメージキャラが某超有名キャラのパクリなのが微妙ですが…
これも定番的なギャラリーとして使えそうです。
で、実装方法のページ。

そして、全てのネタ元は、以下のサイトです。お世話になりましたm(_ _)m
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/

■以下、もうひとつとてもいい感じのものを見つけたので、追加。
Gallerifiic
http://www.twospy.com/galleriffic/index.html
http://www.twospy.com/galleriffic/example-2.html (デモ）

■すごく素晴らしい動きをするものがあったので追加。
Roundabout Shapes
http://fredhq.com/projects/roundabout-shapes/
http://fredhq.com/projects/roundabout/demo/images/(デモ）

cluetipも良さそう。

cluetipというtooltipプラグインもかなり良さそうなので、リンクをメモしておきます。
http://plugins.learningjquery.com/cluetip/demo/

$.load、簡単すぎて素晴らしすぎ。

jQueryで
$.loadを使うと、
ものすごく簡単にAjaxでファイルをインクルードでき、
しかもGET、POSTもできる、というからおそろしくありがたい。

http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/

上記サイトを参考に、
カレンダーアプリで、2010年2月を表示させようとしたら、以下のようにデータを渡すとOK。
$("#test").load("month.php", { year: "2010", month: "2" } );

あまりにも簡単だったので、たまげました。

AjaxでシームレスPOSTしたいので探しました。

AjaxでformをシームレスにPOSTさせたい、と思っていて、いいものを探していたら、
良さそうなのがあったので、メモです。

「Ajaxify」という名のプラグインですね。
http://plugins.jquery.com/project/Ajaxify

以下のページ群の中で、formでPOSTして、それをGETする様子が体感できました。
http://max.jsrhost.com/ajaxify/demo.php
New v2 features内のform、practical examples内のRegistration formの二つが、自分のやりたいことに近いです。

jQuery、裾野が広いなあ。。

■追記：更にajaxで良さそうなformプラグインがあったので、メモです。
名前はそのまま「ajaxForm」。
http://jquery.malsup.com/form/#getting-started
これはファイルアップローダーもあるとか。
あと、ajaxSubmitという兄弟分もある様子。
ざっとしか目を通していないので、また良く読まねば。。

Ajax Uploader発見。

AjaxなアップローダーがjQueryでないかと思ったら会ったのでメモ。
http://valums.com/ajax-upload/

特定のファイルタイプのみに絞るコードまでドキュメントがある。
親切だ。

jQueryのAjax＆DB＆PHPの連動のための準備（自己メモ）

jQueryを使って、付箋アプリが公開されており、これをヒントにつくり直せばかなり使えそう。
で、メモ。
追々取り組むべし、自分。
http://blog.caraldo.net/2010/01/jqueryphp.php

jQuery UIでauto completeが標準に。(ver 1.8にて）

Ajaxで郵便番号入力をauto completeさせようとして、一応実装で来たのですが、
新しいjQuery UI（1.8）のサイトを見ていたら、標準実装されていました！
すご。
http://jqueryui.com/demos/autocomplete/

様々なオプションがあり、DBからキャッシングするオプションなどもあり、まったく望んだままのものが用意されていました。
http://jqueryui.com/demos/autocomplete/#remote-with-cache

jQueryさまさまですなあ。。。。

jQueryUIのsortableメモ。

jQueryのsortableで、複数の要素をソート可能にし、かつその順番をDBに保存したくてググると、色々参考になるサイトがあったのでメモです。

http://jqueryui.com/demos/sortable/

http://blog.firstlife.jp/2008/11/11/JQuery Sortableを使って順番入れ替え機能の作成

http://allabout.co.jp/internet/javascript/closeup/CU20080130A/

http://ponk.jp/?p=1887

Beauty tipsで表示崩れ。（きっと自分のCSSミス）

Beauty tipsが、IE8,Chrome上ではOKなのですが、IE6,Firefox3.6上ではなぜかツールチップがずれます。。

DEMOを各ブラウザで見ると崩れていないので、
自分の実装がおかしいんだな、と。。

CSSでおそらく何か変な書き方をしているか、
競合しているのかな、と。。

要対策なり。

■追記（トラブル解消記）：
やはりBeauty tipsの表示崩れの問題は、
制作途中のページ群のCSSで、
ネガティブマージンや、bodyにtext-align:center等を指定していたのが問題だったと判明。
それらをきれいにしたら、無事直りました。

自分の問題だった。

bodyなどにざっくり大胆なCSSを設定するのはやはり避けた方がいいですね。

beauty tips のIE8上でのエラー、回避。

前の記事で書いた、beauty tipsのIE8上でのエラー回避ができましたのでメモ。

対策が
http://plugins.jquery.com/node/8716#comment-4709に書いてありました。
ありがたや。
（自分の環境だけでなく、一般的なエラーだったようです。jQuery本体との絡みもあったようで。）

ともあれ、

非圧縮版の722行目あたりで、
this.btOff = function() {

var box = $(this).data('bt-box');
の次に、
if (typeof box == 'undefined') {
return;
}
を加えたら、OKに。

これでエラー表示なく行けそうです。。。

IE上にて、tooltip使用時のエラー。。

（■以下の文章に関する追記です：自分の環境では、以下の文章のエラーは回避されました。回避メモはこちらに。）

自分の環境で、IE8にて、unitipやBeautyTipsなどを使っていると、エラーが出力されます。。
(話題と関係ないですが、unitipsで使われる透過PNG対策js、いい感じです。）

（バージョンは、beauty tipsが0.9.5-rc1、jQueryが1.3.2です。unitipはなんだっけな。。）

どうも、
'this[...].style' は Null またはオブジェクトではありません。
といったエラーや、(beautyTips使用時,jquery132の3838行目に関して）
エラーメッセージ: 'document.getElementById(...)' は Null またはオブジェクトではありません。
といったエラー（Unitip使用時、unitip.jsの確か200行目以下あたり。。）
がでます。

悩ましい。

いろいろやってみると、
まだtipが表示されているところにmouseoverになるとエラーとなるようだ、と分かってきました。

が、jsに関して初学者なので、対処がまだよく分かりません。

実運用に移行するためにも、このエラーは克服せねば。。

Chrome,FFでは問題ないのですが。。
ま、自分の実装の仕方がまずいのかな。。

■追記：qtipなら大丈夫だったのですが、自動的にウインドウサイズを把握して、左右や上下にチップが移動してくれないので、今回はやはりbeautytipsあたりを使いたいところです。
頑張ろう、自分。

■追記２：Beauty tipに関してはエラー回避方法が分かったので、http://learnaboutjs.blogspot.com/2010/05/beauty-tips-ie8.html
にメモしておきました。