jQueryプラグイン Part1

半ば自分用のメモとして書きます。
ついでにご覧の方の参考になれば幸いです。


◯jqDock
MacのDock風エフェクト。
jquery.jqDock.min.jsはコンパクトバージョン。

そのエフェクトは素晴らしいんですが、なかなかビミョ〜なガイダンス（英語）しかありません。
しかもそのガイダンスまでAjaxバリバリで表示する徹底ぶり（上記リンクページ上部の「introduction」の行）。
結局、そのページのソースに良い感じの説明コメントが記載されていて、こちらの方が理論派には分かりやすいかもしれません。


ポイント

・jqDockとはどんなものか
アイコンの最大サイズはオリジナル画像のサイズです。
最小サイズは後述するオプション設定で変更できます。
htmlは非常にこざっぱりしていて、余計なタグやスクリプト記載はありません。
jquery.jqDock.jsとjquery.jqDock.min.jsとの違いについての説明は見当たりません。同じソースながら、コメントや記載をコンパクトにしたものがminバージョンなのかもしれません。

・prototype.jsとの共存は難しい、、かも

そもそも$()がぶつかっています。
なのでコンフリクトを防止するステップを追加するんですが（前回記載）、プラグインは当然コンフリクトのないjQueryオンリーの状態で書かれています。
jqDock自体を改造しないと使えません。
私は面倒なので改造しませんでした。
prototype.jsで重宝していたのは$()とAjax.Updater、Ajax.Requestだけだったので、同じ機能を持つjQueryであれば問題ありません。

・htmlの記載例

<div id='menu2' class='demo'>
    <a href='index.php?dt=2' title='Camera'>
        <img src='images/m2/Camera.png' alt='' />
    </a>
    <img src='images/m2/Floppy.png' alt='Floppy' title='Floppy' />
</div>

aタグでimgタグを囲んでも、imgタグのみでもDockのアイコンとして同じ振る舞いをします。
ただし、imgタグのみのアイコンにリンク等を設けるには、後述するJava Scriptが必要です。当然か。。。
画像数は考える必要がありません。jqDockの方で自動調整してくれるようです。
classの記載も気にする必要はありません。デモ用に使われてるCSS用のクラスなようです。

・あった方がよさげな初期設定Java Script

 jQuery(function($){
  $('div.dock>img').each(function(i){
      $(this).one('click', function(){ location.href = 'index.php?dt='+(i%5); return false; });
  });
  $('div.dock').each(function(i){
   var opts = {align:'right', size:60, distance:72, coefficient:1.5, labels:'ml', duration: 500};
   $(this).jqDock(opts);
  });

  $('div.dock a>img').not($('#icons a>img')).bind('click', function(){
   var Href = $(this).parent().get(0).href;
   if(Href && !/^javascript:/i.test(Href)){ //change location...
    location.href = Href;
   }else{ //trigger a click handler?...
    $(this).parent().trigger('click');
   }
   return false;
  });
 });

３行目：imgタグのみでリンクできる設定をしている部分ですね。
６行目：オプション設定の部分です。※詳細は後述
１０行目〜：imgタグでのクリックを適用しているセクション（と思われます）。

・オプション設定
ガイダンスを要約しました。他にもオプションはあるようですが、ひとまず基本動作設定を。

- align : 'top' , 'middle' , 'bottom' , 'left' , 'center' , 'right'
 デフォルトは'bottom'。
 動かないポイント（ライン）を設定します。
- coefficient : 数値
 デフォルトは1.5。
 カーソルからの距離とアイコンの拡大比率を設定する数値です。
 1がリニアです。
- distance : 整数
 デフォルトは54[pix]。
 アイコン拡大が反応するカーソルとの距離です。
- duration : 整数
 デフォルトは500[ms]。
 ドックが反応するまでの遅延設定です。マウスのon、off両方の共通値です。
- labels : ブーリアンまたは文字列 , true , 'tl' , 'tc' , 'tr' , 'ml' , 'mc' , 'mr' , 'bl' , 'bc' , 'br'
 デフォルトはfalse。
 文字列の意味は、
  't' : top
  'm' : middle
  'b' : bottom
  'l' : left
  'c' : center
  'r' : right

・スタイルシート
jqDockページのソースを元に説明しています。

-水平＆固定型：ブラウザ画面左上に固定される水平タイプです

#menu4 {position : absolute; top : 0px; left : 0px;}

-水平＆相対型：ページ構成に準じて配置される水平タイプです

#menu1 {position : relative; top : 100px; padding-left : 131px;}

-垂直＆固定型：ブラウザ画面右上に固定される垂直タイプです

#menu2 {position : absolute; top : 0px; right : 0px;, width : 50px;}

垂直＆相対型のサンプルがないので、できないのかな？？
個人的に今は必要ないので試してません。

docks(div.jpDock)の設定がabsoluteポジション、ゼロpadding, margin、かつoverflowがvisible、widthとheightが定まっている場合、デフォルトの背景色は、、↓

div.jpDock {background-color : transparent;}

ラベル(div.jqDockLabel)はabsoluteポジションでゼロmargin（topとleftも定義された上で）でのみ得られます。あとはあなた次第です。
デフォルトの設定は↓

div.jqDockLabel {border:0px none; padding:0px 4px; font-weight:bold; font-size:14px; font-style:italic; white-space:nowrap; color:#000000; background-color:transparent;}
div.jqDockLabelLink {cursor:pointer;}
div.jqDockLabelImage {cursor:default;}

設定例です↓
右側固定の垂直型、白地に小さい＆太字ではない＆深紅のラベル。

#menu2 div.jqDockLabel {color:#cc0000; background-color:#ffffff; padding:1px; font-size:12px; font-weight:normal;}

こんなもんだと思います、、が、まだちょっとしたモノがあったような…。
もっと分かりやすく書きたかったんですが、予想以上に手間なもんで。。ごめんなさい。

鳥とjQuery

別々の投稿にすりゃいいんでしょうが、あえてごちゃまぜでど〜ぞ。


新しいWebサイト構築にあたって、jQueryというAjaxプロジェクトを採用してみました。
エフェクトはprototype系よりスムース＆DOMに親しんだ開発者にとってはprototypeより分かりやすい、、かも？

とはいえ今までprototypeを使ってきた者として、jQueryは新参者。
できれば同居してほしいわけですが…。
乱暴に言うならprototypeの方が文系、jQueryの方が理数系で、古くからのJava Script使いからするとjQueryの方が分かりやすかったりします。

まず、prototypeもjQueryも$()を使います。
基本中の基本、$()は完全にぶつかります。
prototypeと違って、jQueryの$()はDOM基準です。そう、ちっとばかし違うのですよ。

同居させる場合には、コンフリクト防止のために一文加える必要があります。
こんな感じ↓

jQuery.noConflict();
var j$ = jQuery;

これだけで従来のprototype系$()はそのまま、jQuery系の$()はj$()で対応できます。

この一文を「no_conflict.js」として分離して保存して、head内に、
script src="no_confrict.js" type="text/javascript"
と組み込んでいます。


慣れ親しんだprototype.jsと先進的なjQueryの共存ができます。。。。が。。。。。
ちょっとした落とし穴があったりして。
次回！！



そしてジョウビタキ氏。
もお、自由自在です。

１．反射するモノが好き！
クルマのサイドミラーが好きなのは分かっていましたが、ある日気付くと引っ掻き傷のようなものが…。
目撃者によると、ホバーリングしては元の位置（ミラーの上）に戻るという行動を繰り返している様子。
実際は傷じゃなくて、脂っこい指で触ったようなもの。
なにそれ？

２．呼ぶと来る
ジョウビタキ氏の鳴き声は大きく分けると２パターンしかありません。
口笛のような「ヒー」、何だか分からない「カツカツ」。
どうやら「ヒー」はテリトリー管理用（犬猫のような脅迫性はなく、「私はここで越冬しますね。どぉもどぉも。」ぐらいのユルさと思われる）。
「カツカツ」は近距離、あるいは独り言用？「ヒー」に比べると意味不明です。
でもその「カツカツ」をまねた舌打ちをすると、「ウチのヤツ」がすぐに来てくれます。

３．人工物がとにかく好き
ジョウビタキ氏がクルマ好きなのは１０年近く前から知ってますが、プレハブなども好きなのですよ。
観察してきた結果、やすらぎ＝里山（的な環境）、面白いもの＝（人間の）工業製品。


私の住む土地では、「オショウデン（セキレイ）とバカツカシ（ジョウビタキ）は絶対に殺してはいけない」という言い伝えがあります。
どちらも強烈に頭の良い鳥で（多かれ少なかれヒトをバカにしてる（笑））、多くの害虫を獲ってくれるというのもありますが、、、。

第二次世界大戦の食料危機の時代でも守られたことで（逆にムクドリやツグミは容赦なく捕らえられた）、日本での鳥とヒトの歴史の神秘を感じたりもします。


このような鳥とヒトの歴史、ご存知の方がいたらゼヒ情報ください！！！

野良鳥

暖かくなるとシベリアまでさまよっていくウチの野良鳥「ジョウビタキ」。

前回書いた通り、今年のウチの野良鳥は人なつこい。
、、じゃなくて、多分ウチの野良鳥に観察されてる。

どぉも、時間帯に関係なく居間の前のテラスをウロウロしている様子。
それどころか、中に入ろうとガラスにぶつかったことすら…。

ほんと、手乗りになるんじゃないかと思うほどです。
実際はあまのじゃくなんで、手が届きそうで届かない距離で尾羽ピョコピョコしながら視線を外し続けそうですが。


そう、ジョウ氏は意図的と思えるほど視線を外します。というか、180°反対を向いたりします。
ネコの世界では「敵対心はないよ」って意味らしいんですが、ジョウ氏達も同じなのか？？

勝手な予想では、あえてヒトを死角に入れる事でヒトがどう行動するか見ているんじゃないかと。
そこでヒトが何もしてこないから、「あぁ、こいつらはさほど危険ではないようだ」と判断してる気がします。


どこか人間に近い基準で判断するカラスや、あまりにシュール（天然？）すぎて意味不明なスズメ、「この世はおもちゃだらけ」セキレイとも違い、何だかニヒルで無邪気なジョウビタキ。
絶対にヒトがジョウ氏を観察してる以上にジョウ氏はヒトを観察してるよなぁ、と思うこのごろ。
トリ達とヒトの関係って面白い！



ウチの周りにいるスズメ達が、ヒヨドリやセキレイのように「羽ばたいては止める」波のような飛び方をしながら沢を上から下、下から上へ一直線に飛んで行く行動。
本来のスズメの飛び方ではありません。「絶対マネだ！」と思っていたんですが、このたび判明しました。
「セキレイのマネ」です。

そう、セキレイが全く同じ行動をしているのを見ました。
さらに、スズメがそのような飛び方をする際、羽ばたく時に必ず「ジュ」とか鳴きます。
セキレイもスズメと同じタイミングで鳴くんです。「ょぃしょ！」って感じ。
同じような羽ばたき方をするヒヨの場合、羽ばたく時に鳴くのを見た事がありません。直線で飛んで行く事もないし。

というわけで、ウチの周りのスズメがセキレイのマネをしているのは確実です。

ところがスズメのヤツら、ツバメのマネをするときと同じ、オリジナルより明らかにスピードや軽快感が劣ります（笑）。
でもでも、何だかやたらに一生懸命に楽しんでるんで、こちらも楽しくなってしまうわけです。


くだらないことばかりやってて憎めない（っつーか、強烈にかわいい）のがまたムカつく、スズメのヤツら！（笑）