User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut
マウスカーソル位置、要素位置、要素サイズ、window サイズ、スクロール値などの値は、jQuery プラグインを作成する上で、あれこれの複数のプラグインに共通して必要となる基本的な情報であり、どのプラグインからも使用できるように定義することが求められる。
こうして複数のプラグインから共通して利用できるオブジェクトを作成した。
概要は以下の通り。
オブジェクト名は単純明快に F とし、次のように定義した。因みに jquery.js による jQuery クラスオブジェクトには F プロパティは存在しない。
$.F ={ // 要素の位置計測 getPos : function(elem){ if (!$(elem)||!$(elem).offset()) return false; var off = $(elem).offset(), pos = $(elem).position(); return { left : off.left, // 絶対座標横方向値 top : off.top, // 絶対座標縦方向値 posLeft : pos.left, // offsetParent座標横方向値 posTop : pos.top // offsetParent座標横方向値 } }, // 要素の大きさ計測 getSize : function(elem){ if (!$(elem)||!$(elem).width()) return false; if (elem===window){ return { //内容辺サイズ、border 辺サイズ cW:$(elem).width(), cH:$(elem).height(), oW:$(elem).outerWidth(), oH:$(elem).outerHeight() } } else { return { //内容辺サイズ、padding 辺サイズ、border 辺サイズ及び margin 返サイズ cW:$(elem).width(), cH:$(elem).height(), iW:$(elem).innerWidth(), iH:$(elem).innerHeight(), oW:$(elem).outerWidth(), oH:$(elem).outerHeight(), oMW:$(elem).outerWidth(true), oMH:$(elem).outerHeight(true) } } }, // スクロール値取得 getScroll : function(elem){ if (!$(elem)) return false; return {L:$(elem).scrollLeft(), T:$(elem).scrollTop()} }, // ノードに位置、サイズ及びスクロールの各プロパティを設定する。 eF : function(elem){ if (!$(elem)) return false; elem.pos = $.data(elem,"pos") || $.data(elem,"pos",$.F.getPos(elem)); elem.size = $.data(elem,"size") || $.data(elem,"size",$.F.getSize(elem)); elem.scroll =$.data(elem,"scroll") || $.data(elem,"scroll",$.F.getScroll(elem)); } } // $.F オブジェクトにwindowサイズとスクロール値及び // resize event ハンドラー, scroll event ハンドラーを登録する。 $(function(){ $.F.winSize = $.F.getSize(window); // 現在値の取得 $.F.winScrollPos = $.F.getScroll(window); // 現在値の取得 $.F.mousePos = {X:"0px",Y:"0px"}; // 初期値設定 //resize,scroll イベントハンドラー $(window).resize(function(){$.F.winSize = $.F.getSize(window)}) .scroll(function(){$.F.scrollPos = $.F.getScroll(window)}); // body 上での mousemove イベントハンドラー。マウス位置取得 $(document.body).mousemove(function(e){ $.F.mousePos={X:e.pageX, Y:e.pageY}; }); } })
$.F.eF メソッドにより任意の HTML 要素の位置、大きさおよびスクロール値を取得する。また、$.F オブジェクトの winSize 及び winScrollPos プロパティに、頁オープン時の window の大きさとスクロール値を取得し、かつ、これらの値は window resize 及び window scroll イベントに対応させた。更に $.F.mousePos プロパティに、mousemove イベントによるマウスカーソル位置を取得した。
なお、$.F オブジェクト定義時(つまり頁を開いた時)にマウスカーソルが当該 window 内にない場合もあるので、mousePos プロパティは初期値として {top:0,left:0} を設定した。そうしないとマウスカーソルが window 外にある場合には、$.F オブジェクト定義時に mousePos プロパティが未定義になってしまうからである。
eF メソッドにより取得された値は、対象となった HTML 要素オブジェクトの pos、size 及び scroll プロパティ値に格納される。このことを jQuery インスタンスで表現すれば、jQuery における対象要素表現 strings を expr として、jQuery(expr)[0].pos、jQuery(expr)[0].size、jQuery(expr)[0].scroll である。
DOM Ready 関数内で取得された window サイズ、スクロール値あるいはマウスカーソル絶対座標値は、$.F オブジェクトの winSize、winScrollPos あるいは mousePos プロパティに格納される。
■ 1 以上のプラグインコードを含む 1 つの任意のプラグインファイル内の冒頭で、 $.F オブジェクトを登録する。 (function($){ // 複数のプラグインから利用する F オブジェクトを定義する $.F={……}; $(function(){ $.F.winSize = $.F.getSize(window); ・・・ ・・・ $(document.body).mousemove(function(e){ $.F.mousePos={X:e.pageX, Y:e.pageY}; }); }); $.fn.pluginA = function(){ // プラグイン A // eF 関数を jQuery インスタンスの i 番目の要素を引数にして起動。これにより、 // 当該要素の絶対位置とオブセットペアレント内の位置が当該要素の pos プロパティに、 // 当該要素の大きさが当該要素の size プロパティに、 // 当該要素のスクロール値が当該要素の scroll プロパティに、それぞれ設定される。 $.F.eF(this[i]); ・・・・・・・ }; $.fn.pluginB = function(){ // プラグイン B $.F.eF(this[i]); ・・・・・・・ }; ・・・・・・・ })(jQuery) ■ 別のプラグインファイル内からの $.F オブジェクトの利用 (function($){ $.fn.pluginC = function(){ // プラグイン C // eF 関数を jQuery インスタンスの i 番目の要素を引数にして起動。これにより、 // 当該要素の絶対位置とオブセットペアレント内の位置が当該要素の pos プロパティに、 // 当該要素の大きさが当該要素の size プロパティに、 // 当該要素のスクロール値が当該要素の scroll プロパティに、それぞれ設定される。 $.F.eF(this[i]); ・・・・・・・ }; $.fn.pluginD = function(){ // プラグイン D $.F.eF(this[i]); ・・・・・・・ }; ・・・・・・・ })(jQuery)
90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。
多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。
StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。
クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。
起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。
ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。
無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。
画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。
複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。
Animation Gifファイルを作れる無料ソフト。
キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。
画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)
名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。
ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。
AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。
IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。
利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。
WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。
自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。
DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。