jQueryを使ったボタンのマウスオーバー時のアニメーションですが、
少し気になっていた事がありました。
それは、素早く、マウスオーバー/アウトを繰り返すと、
マウスオーバーした回数だけアニメーションが後からきっちりと実行されてしまうもの。
結構よくみかける気がします。

マウスオーバーしてアウトして再度オーバーしてってした時に
前のアニメーションをキャンセルしてないのでこうなっていると思うのですが、
動き的に気持ち悪かったのでちゃんと出来ないもんかと思って見てみました。
ググってみるともうかなり古い話題のようで書いている方がいました。

[jQuery]こんな機能があったんだ。jQuery stop()

わかりやすいです。
stop()でアニメーションをキャンセルさせる事ができるようです。
試してみました。

・マウスオーバーした回数だけイベントが発生する
デモ

$(document).ready(
	function(){
		$("#over1 li img").hover(function(){
			$(this).fadeTo("fast", 0.1);
		}, function(){
			$(this).fadeTo("fast", 1);
		});
	}
);

・stop()でキャンセルした場合
デモ

$(document).ready(
	function(){
		$("#over1 li img").hover(function(){
			$(this).stop().fadeTo("fast", 0.1);
		}, function(){
			$(this).stop().fadeTo("fast", 1);
		});
	}
);

stop()の引数は二つあり、それぞれにtrueかfalseを設定することでキャンセルして次の動作に移るかどうか、などを制御できるようです。
それを見て思い出したのがフラッシュでtrick7さんが昔書いておられた「気持ちよいアニメーションの考察」的な記事です。

trick7 – ロールオーバー効果へのこだわり2

上記のstop()を使えばこれを実現できるのでは、と思い、試してみました。

とりあえず幅を伸ばしてみる

デモ

$("#over2 li").each(function(i){
	var color = $(this).attr("rel");
	$(this).css({backgroundColor:color});
	$(this).hover(function(){
		$(this).stop(true, false).animate({
			width:300,
			easing:"easeOutCubic"
		}, 300);
	}, function(){
		$(this).animate({
			width:100
		},{
			easing:"easeOutCubic",
			duration:800
		});
	});
});

動きにイージングを使用したかったので、jQueryのイージング用のプラグインを入れました。
jQuery Easing Plugin (version 1.3)

リストタグ li の幅を広げてアニメーションさせています。
背景色はliの属性にrelを持たせて、その中で指定しています。
【HTML】

<div id="over2">
	<ul>
    	<li rel="#006699">リスト1</li>
    	<li rel="#cc3333">リスト2</li>
    	<li rel="#66cc66">リスト3</li>
    </ul>
</div> 

確かに動きとしては出来たのですが、テキストの背景としてこの動きをさせたいです。
しかし幅を0pxから100pxとかにしてしまうと色々おかしくなってしまうためこのままでは出来ません。

背景画像のアニメーション

で、色々考えたのですが、表示はほとんどこのままで背景画像を動かせばいいのでは、と思いました。
最初はanimateの中に、backgroundPosition、を書いてみたのですが動きません。
ググってみると、それをそのまま出来る様にするプラグインがあるようです。

Background-Position Animations | jQuery Plugins

解説はこちらの記事にありました。

jQueryでテキストリンクのマウスオーバー時に動きをつける | Webクリエイターボックス

背景画像には以下のものを用意しました。

これを右にスライドさせて実現する想定です。
で、上記サイトを参考にさせてもらいつつ、出来上がったものが以下。

デモ

$("#over3 li a").each(function(i){
	$(this).hover(function(){
		$(this).stop(true, false).animate({
			backgroundPosition:"(0px 0px)"
		},{
			easing:"easeOutCubic",
			duration:100
		});
	}, function(){
		$(this).animate({
			backgroundPosition:"(-100px 0px)"
		},{
			easing:"easeInCubic",
			duration:600
		});
	});
});

やはりもっと気持ちよくするには微調整がもろもろ必要っぽいですが、
とりあえず、出来ました。

まとめ

jQueryを使えばいとも簡単に想定の動きを実現することが出来ました。
JSの書き方も、多少のクセはあれど、ASを書いている感覚とそこまでかけ離れてはおらず、すんなり入れました。

ブラウザチェックなどが大変そうなイメージはありますが、動きの実現自体は比較的簡単に出来るんだな、と感じました。楽しい。
もっとバリバリ使えるように勉強していきたいです。

とりあえず、開発環境を整えるところから始めなければ。

JavaScriptでリンクにマウスオーバーしたら、ツールチップを出すようにしたいんだけど。
ツールチップの中身はHTMLで好きに変えれるように。

ってな感じの事を言われたので、色々調べてやってみました。
JSはあんまし触った事ないし、とりあえずjQuery使ってやったら出来るかも、みたいな浅い知識しかないわけですけど、
なんとか出来ました。

なんでjQueryなの、とかは聞かないで下さい

まずはとりあえずググってみた。
すると、こういったものがあった。

CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips | CSS Lecture

おー！まさに！！といった動きなんですが、問題が。
これだと、ポップアップの中身がHTMLで書けないんです。
実際にポップアップするところのソース。

<a href="#cssLecture" title="サンプルリンク1">サンプルリンク</a>

デモのページを見てもらえばわかるとおり、このやり方は、aタグのtitleの中身をポップアップする仕様です。
なので、titleの中でタグを展開するわけにもいかず…。

で、他にも色々見てたんだけど、なかなかドンピシャのものがなかったので、作ってしまおう、と。
そんなこんなで出来たものがこれ。

サンプル

jQueryは今日時点で最新のものを使用しています。(v.1.3.2)

JavaScriptのソース。

//tooltip.js

$(document).ready(function(){

	var a_ele = $("a.tooltip");

	a_ele.mouseover(function(e){
		var name = e.target.name;
		var div_ele = $("div#" + name);
		div_ele.css({"opacity":0, "display":"block"});
		div_ele.fadeTo("fast", 0.9);
	});
	a_ele.mousemove(function(e){
		var name = e.target.name;
		var div_ele = $("div#" + name);
		var x = e.pageX + 20;
		var y = e.pageY;
		div_ele.css("left", x);
		div_ele.css("top", y);
	});
	a_ele.mouseout(function(e){
		var name = e.target.name;
		var div_ele = $("div#" + name);
		div_ele.css({"display":"none"});
	});
});

全然たいした事はやってなくて、要するに、
リンクにマウスオーバーしたら指定のidのdivブロックを表示してポジションを変えて、
マウスムーブしたらそのポジションを更新して、
マウスアウトしたら、そのブロックを非表示にする、って感じです。

マウスアウトした時にフェードアウトさせようと思ったけど、
なんか動きがおかしくなったのでやめました。

HTMLはこんな感じ。

<a href="#" class="tooltip" name="tip1">jQuery tool tip test</a><br />

<div id="tip1" class="mainText">TEST POP UP ver1.0</div>

classにtooltipって名前があるものが対象となって、nameで指定したidを持つdivをポップアップ表示させます。
なので、複数作る場合はこう。

<a href="#" class="tooltip" name="tip1">jQuery tool tip test 一つ目</a><br />
<a href="#" class="tooltip" name="tip2">jQuery tool tip test 二つ目</a><br />
<div id="tip1" class="mainText">ポップアップ一つ目</div>
<div id="tip2" class="mainText">ポップアップ二つ目</div>

デモ

この複数ある時にそれぞれ指定したポップアップを出す部分が結構悩んだ。

あとは、divの中を好きに変えたらいいんではないかと。
classはポップアップに関係ないので、ここでCSSの指定をしてもらったら良いと思います。

何かありましたらコメント下さい。

参考リンク：
jQuery 1.3.2 日本語リファレンス
jQuery入門

前回、書いた通り、ブログ開設当初から、コメントが出来ない状態にあったのですが、

なんとか、コメント出来るようになりました。

調整前は、サインインしないとコメント出来ないようになっており、
さらにサインインするにはユーザー登録が必要と、なんともめんどくさく、敷居が高いことになっており、
さらに極めつけは、ユーザー登録が出来ない状態、と、もう踏んだり蹴ったりの状態でした、、。

で、なんでこんなことになってるのか、と、テンプレートを初期化したりしてみたり、と、色々試してみたのですが、
原因はなんとも簡単な事でした。
最初はコメントフォームのテンプレートに問題があるんだろう、と、ソースとにらめっこしたり、コメントの設定を「すべて自動的に公開する」にしてないからかも、とか、色々やってたんですが、いずれをしても解消されず。
結構ハマってしまったのですが、調べてるうちにまさに、なページを発見。

「小粋空間」コメント投稿フォームをデフォルトで表示する＆「匿名でコメントすることもできます。」の文言を修正する

なんと、設定するところがあったのね、、、orz
ブログ管理画面の「設定」→「登録/認証設定」の「認証方式」のチェックボックスがそれ。

それを、解除したりなんなりすると、無事、コメントがサインインなしで出来るようになりました。

と、ホッっとしたのもつかの間、またもや新たな問題が。

なんと、コメントのプレビュー画面が表示されない。

自分のもう一つのブログ（？）の方ではちゃんと表示出来るのに、当ブログでは表示されない！

なんかインデックステンプレートにあるJSとか、システムテンプレートとかが関係ありそうだけど、さっぱりわからん。
というか、システムテンプレートがおかしくなってしまっています。
同じ名前のテンプレートが三つもあります。
なので、テンプレートを編集して保存しようとすると、「同名のテンプレートがあります」とかってエラーが出て保存出来ない状態に、、。

これは調べてみると、どうやら、MT４のバグの可能性があるみたいです。

「Materializing」MT4システムテンプレートでちょっと不都合発生
「Vicuna CMS」個別記事、コメント投稿プレビューでのapplyCookieエラーについ&

この下のフォーラムでのやりとりがまさに今の状態。
解決されてないし、、。

また一からやり直す気力もないので、暫定的な処理として、プレピューボタンを取ってしまいました、、。

なので、コメントはプレビュー出来ません。コメントそのものは出来るはずです。
また何か問題があったらご連絡してくださると助かります。

それにしても、fladdictさんがMTからWordPressに移行したり
（MT3のデフォルトのテンプレートでされてたのは、てっきり何かこだわりがあってのことだと思ってましたw）
周りでもWordPressの方がいい、みたいな意見を聞いたりして、今回のこのめんどくさい事もあって、
なんか強烈にMTからWordPressに移行したくなってる、、。
とりあえず触ってみるかな、、？
VicunaにもWordPressのテーマあることだし。

コメントが投稿できない、という問題が発生中です、、。

そのためただいま調整中。

現状の状態でコメントを投稿しようとすると、
「Preview」をクリックすると、書いたコメントが全部消え、
「POST」をクリックすると、「登録しなければなりません。」とかってでます、、。
で、サインインのリンクがあるから、そこをクリックすると、とび先は、MTの管理画面のページだし、、。

なんとか、登録とかそんなん必要なくコメントを書けるようにしようとしているんですが、
よくわかりません、、。

Vicunaのフォーラムに近い書き込みがあったのですが、ちょっと違うような、、。

ちょっと本腰いれて探ってみないといけないっぽいです。

とりあえず、テンプレートを初期化したらなんとかならんもんか、と思って、初期化してみたため（なんとかはならず、、orz）若干デザインが変わっております。
むしろこっちのほうが見やすい！？とかはさておきw、閲覧には支障が出ていないため、また近々調整します。
（ゴールデンウイークに突入する確率が大、ですが、、）

もう少し早く気づけばよかったのですが、、。
今までコメント書こうとして書けなかった方、申し訳ないです！！

タグクラウド機能をつけました。
その下にはブログパーツを張りました。

MT4標準のタグクラウドのスタイルシートを触った感じです。

タグクラウドの作成は以下のサイトを参考にさせて頂きました。

• VICUNA CMS トピック：タグクラウド
• 3ping.org – Tag Cloudのスタイル
• Movable Type 備忘録 – TagSupplementals プラグインでタグクラウドを作る

タグクラウド

Tag Cloudとは、エントリー記事や、写真につけられた「タグ」を多い順や、人気のある順に、フォントの大きさや色で区別した、「タグの集まり」を、視覚化したものです。
日付が古くなったりすると、文字の色が薄くなる、など、色々な機能がついたものもある。
（今回付けた分も日付が古ければ古くなる、、、らしいです）

このタグクラウド、スタイルはスタイルシートで設定されていて、タグの一覧を取得してきて、それを多いものはフォントサイズが大きいスタイルを、少ないものは小さいスタイルを適用、といった具合に制御しているようなのですが、
イマイチどうなっているのかがわからない。

ということで、仕組みを探るべく、ググってみたのですが、結論から言うと、よくわかりませんｗ

ここに少し詳しく書いてありました。PHPを使用した解説です。
全ての件数から、個々の件数の偏差値を求める、といった辺りが、キモなのでは、、、と思いました。

あと、Ruby on Railsを使って作る解説をちょくちょくみました。
Rubyとか、PHP以上にさっぱりなのでこれも全くです。

• railsblog – railsで簡単にタグクラウドを作る – acts_as_taggable_redux
• つくるぶガイドブログ: Rails プラグイン acts_as_taggable_redux でタグクラウドを作ろう

この辺のサーバサイドが絡んだ（？）プログラムも勉強していかないといけません、、。

ブログパーツ

ブログパーツは単に右のナビの下に置いただけです。

書くエントリーのページにまで置いてしまうと、いちいちの読み込みがうっとおしいかと思いましたので、トップにのみ設置しました。
（書くエントリーページまで２カラムのレイアウトにするのもめんどくさかったですし)

とりあえず、「FICC Another Bookmark Beta」と、「まる。てん、てん・」「を置いてみました。
これからも順次（うっとおしくならない程度に）増やしていくつもりです。

富士急ハイランドの「ええじゃないかブログパーツ」（？）も貼付けようかと思ったのですが、
ちょっとトップに張るにはうるさかったので、やめました。
代わりにここに張っておきます。

PSP用ソフト、「無限回廊」を買った。

IQのようなパズルゲームで、ルールや見た目なんかはかなりシンプル。
アイデア勝負な感じ。

公式サイトにて動画等を見れます。

単純に人(？)が歩いているだけで、それを上手いこと誘導してゴールに導く、
って言う趣旨のゲームってのは今までにありました。
ピクミンとか。ちょっと違うかも。

とにかく、主人公？は強制で動いていて、第三者として観測している自分が周りの状況を操作して目的を達成する、というゲームはよくあると思う。
自分で全てを操作できないだけに上手くいかない→ゲームになる、といった具合かな。

最近ダウンロードしたFlashゲームもまさにそういった感じのもので、
ひたすら走り続けるプレイヤーを、ジャンプのみさせて、障害物を乗り越え点数を稼いでいく、といった感じ。
ボタン一つで操作できる、ものすごく簡単なゲームなんだけど、それだけについプレイしてしまう。

こういったゲームをしてて思うのが、特に映像に凝っているわけでもなく、仕組みもいたって単純。だけど面白い。ついやってしまう。
そういった面白さ、というのは、ファミコンなどの昔の低スペックのゲームに特に現れていた気がする。
今のゲームではビジュアルや操作性にこだわり、ものすごいゲーム、という風になっているけれど、
こういった昔の単純なゲームの方が純粋に中身で勝負していて、単純ながらもよく考えられていて面白い。
（今のゲームが悪いと言っているわけではなく、方向性の問題。）

また、がっちり作ってあるわけではないので良い意味での余裕があって、遊ぶ人によって様々な遊び方が出来ると思う。
Line Riderとかはまさに。
（こんなリンク集があった。）
ゆとりがある事によって、逆に幅が広がる、といったような。

シンプルで分かりやすく、けれど面白くておくが深い、そんなんが一番いい。
（それが一番難しいんだろうけど、、）

とりあえず、昔のファミコンのソフトでもやって勉強しますか。

FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]

この記事の冒頭、

当時の僕は、条件文とonEnterFrameの力技でなんとかFlash制作するレベルでした。静的Webデザイナー→Flashデザイナーというコースでしたので、JAVAのようなプログラム知識はほとんど皆無でした。

の、条件文とonEnterFrameの力技でなんとかFlash制作するレベルと、いうところ。

最近になってやっとクラスを使ったオブジェクト指向っぽいものを作ろうとしているところなわけで、
ちょっと前まではまさにこの状態だった。
その前がタイムライン。
考えればちゃんと道筋をたどってるなー、と。

これはHTMLの時にも思ったことでもある。

[HTML]
フレームレイアウト
　　↓
テーブルレイアウト
　　↓
CSSレイアウト
　　↓
　　↓　　　　　←いまココくらい
XHTML+CSS

[Flash]
タイムラインアニメーション
　　↓
スクリプトメイン
　　↓　　　　　←いまココくらい
　　↓
オブジェクト指向

こんな感じ。
これが正統進化なのかどうかは、ともかく、
きっちり道筋は踏んでるんではないかと。
確かに時間はかかってる気がするけれど、急がば回れ、千里の道も一歩から、という通り、
例えカメでも進んでいることは事実。

どんな形でも成長が感じれるのは良い事だ。

そんなわけで、記事で紹介されてたこの本でも読みますか。
って、もう取り扱ってないのか、、。