05 | 2017/06 |  07

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jquery.js による要素位置の測定と適正な配置 (1) はじめに

jQuery インスタンスメソッドである jQuery().offset や jQuery().position の解読を行おうと思い立って、jquery.js コードを睨み続けた結果、改めて offsetTop、offsetLeft について検討を加える必要があると思われました。

偶々、W3C による CSSOM View Module Working Draft が 2009年8月4日に公表されていたこともそうする必要性を高めました。 ( CSSOM View Module 作業草案 )、

たとえ「作業草案」とはいえ、拠って立つことのできる offsetTop/Left プロパティの定義として受け止めることの出来る内容となっています。こうして、この定義によって各ブラウザの差異を検証出来ることも、offsetTop/Left について再考するきっかけとなりました。

CSSOM View Module 作業草案 2009/8/4(以下「CSSOM VM草案」) における offsetParent、offsetTop/Left の定義

※ 以下は意訳であり、レイアウトボックスに関する名称は下図に拠り一部日本語化しました。

A.offsetParent の返値
1. 次の場合には null を返す。
  • A の中に CSS layout box が全くない場合
  • A がルート要素(HTMLタグ)の場合
  • A が body 要素の場合
  • A の position 算出CSSスタイル値が fixed の場合
2. A が map 要素内の area 要素の場合には、直近の祖先 map 要素を返す。
3. 次の場合には A の直近祖先要素を返す。
  • 直近祖先要素の position 属性が static ではない時
  • 直近祖先要素が body 要素の時
  • A の position 算出CSSスタイル値が static で、かつ祖先要素が td, th または table の時
A.offsetTop の返値
  1. A が body 要素の場合か、A に CSS layout box がない場合には、ゼロ
  2. A の offsetParent が null か body の場合には A の top border 辺の y 座標値
  3. 初期包含ブロックの原点を基準(つまり document 座標)として、A の border 辺の y 座標値から、offsetParent の padding 辺の y 座標値を減じた値
A.offsetLeft の返値
  1. A が body 要素の場合か CSS layout box がない場合には、ゼロ
  2. A の offsetParent が null か body の場合には A の left border 辺の x 座標値
  3. 初期包含ブロックの原点を基準(つまり document 座標)として、A の border 辺の x 座標値から、offsetParent の padding 辺の x 座標値を減じた値

CSSOM VM草案 における offsetTop/Left 定義の要点

上の CSSOM VM 草案の定義で押さえておかねばならないことは、第一に document.body.offsetTop/Left の返値を常にゼロと定義したことです。つまり、body 要素に margin、padding あるいは border があろうがなかろうが、それらとは無関係にゼロとしたことが重要な点です。

別のエントリイ(offsetLeft,offsetTop,offsetWidth そして offsetHeight──静的配置要素の絶対位置を確実に取得する方法について)で詳細に述べたように、FireFoxは、その最新版(Ver 3.5.7)においても body 要素に border が存在する場合には、document.body.offsetTop/Left は何とボーダー幅のマイナス値を返してしまいます。これは CSSOM VM 草案を待たずとも、奇妙な仕様と言わざるを得ません。

因みに、Windows 系の他のブラウザ(IE8、Opera10.10、Chrome 3.0.195.38、safari4.0.4)の標準モード及び後方互換モードでは、Firefox のような奇妙な演算は起こらず、たとえ body 部に border が設定されていたとしても、document.body.offsetTop/Left は全てゼロを返します。Firefox だけが「マイナス border-width」 という奇妙な値を返します。

第二に、確認を含めて押さえておくべきことは、分かりやすく記述すれば A.offsetTop/Left の値は、A.offsetParent 要素のパディング辺と A.offsetTop/Left が起動された A 要素の border 辺との間のピクセル数になる、と定義されていることです。

この点では msdn の エレメントの大きさと位置を測定する に掲載されている図は、明らかに間違っています。(その図では、A.offsetParent のパディング辺から A のパディング辺までの距離を A.offsetTop/Left としています。これは 10 年以上前から掲載されている図ですが、当時の IE 5 あたりの、今日呼ぶところの互換モード仕様に基づくものと解釈することも出来ない、誤った図になっています。)

以上の 2 点は、offsetTop/Left を理解し、使いこなす上で極めて重要な基礎的なことであり、コード作成上 offsetTop/Left を使用して要素位置を知り、その結果を踏まえて何らかの要素を配置する場合には、ブラウザ固有の「偏差」(バイオス)によってずれが生じないように留意する必要があります。(ここでは敢えて「バグ」と言う表現は使わないことにします。何故ならば、CSSOM View Module はまだ作業草案段階であって、勧告に至っていないからです。)

HTML文書内の要素位置取得方法の要点

はじめに

要素の正確な位置を知りたい場合( 絶対配置、相対配置又は静的配置のいずれの場合においても )、あるいはそれを踏まえて適正な位置に任意の要素を配置しようとする場合、ブラウザ毎に個別に対応するのは大変な手間となります。そこで様々な W3C 勧告が作られ、それを基準としてブラウザが作られてきました。しかし、未だに各ブラウザごとに固有のバグがあるため(特に IE では多数のバグがある)、バグ対策が不可欠となります。

また、IE で初めて採用され、その後各ブラウザが採用した、offsetParent や offsetTop/Left プロパティは、要素の位置を知るために非常に有効な読み取り専用プロパティですが、現時点では標準的仕様さえ存在しないため、利用に当たっては適正な個別対策が必要となります。

jquery.js における要素位置の把握方法の概要

jquery.js では、要素のドキュメント上の絶対座標を取得するメソッドとして jQuery().offset() を、また基準要素( つまり offsetParent 要素 )からの相対座標を取得するメソッドとして jQuery().position() を、それぞれ用意しています。また、これらのメソッド内で jQuery.offset オブジェクトの各プロパティが利用されます。(jquery.js ver 1.3.2 #4172~4197)

以下にこれらのコード解読を行いますが、その前に、jquery.js の位置算出方法の特徴に触れておきたいと思います。注目すべきことは 2 つあります。

第一に、getBoundingClientRect() メソッドという、余り見かけないメソッドを使うことによって、位置取得コードを非常に簡単にしていることです。このメソッドは(おそらく)全てのブラウザで同一の値が得られるので、クロスブラウザ対策が不要なのだと思います。

第二に、getBoundingClientRect() メソッドに対応していないブラウザへの対策として、良く行われているようなブラウザ判別法を採用していないことです。

よく見かけるコードでは、ブラウザ毎や描画モード毎に条件分岐させて、それ毎のプロパティ値を取得します。しかし、jquery.js はそのような伝統的手法を採用しません。

まず、位置算出対象とする HTML 文内に、Javascript コードによって visibility:hidden; position:absolute 状態の複数の要素( 要素 A 及びその offsetParent となる B 要素など )を挿入します。これによって、ブラウザ毎に位置算出値が異なる可能性を持った要素を作ります。

次に、A や B の offsetTop や offsetLeft 値を取得し、それが正しい値とならない場合にのみ、ブラウザによって描画され適用されたスタイル値( 算出スタイル値 )を取得して、正しい値を求めるのです。

このように CSS 算出スタイル値、つまり実際に描画された状態における CSS 値を利用することで、ブラウザのバグや固有のプロパティ仕様を「あるがままに受け入れ」、結果としての要素位置を算出している訳です。

なお、Windows 系の主要ブラウザ( IE、Firefox、Opera、safari、Chrome )では、標準モードでも互換モードでも、全て getBoundingClientRect() メソッドをサポートしているので、offsetParent/Top/Left プロパティを利用する位置算出コードは利用されないことになります。

もう一つ、コード解読を行う前に、 IE の名誉のために是非とも触れておかねばならないことがあります。

上に述べた jquery.js で定義された メソッドやオブジェクトにおいて、要素位置取得用に利用されるメソッドとプロパティ ── getBoundingClientRect()、offsetParent、offsetTop、offsetLeft ── は、全て IE が最初に実装し、他のブラウザも追随して採用した、という事実です。

Netscape Navigater が初めて採用し、しかし他のどのブラウザも採用しなかった layer オブジェクトとは対照的に、当時の IE4 や IE5 が意欲的に定義し、採用した所謂 DHTML モデルが、今日主流となっている W3C 勧告の DOM や CSS に至る起爆剤となったことは、過去において、IE が勝手な仕様を作り続けてきたことが混乱を招来してきたとしても、記憶に留めておくべき重要な事実でしょう。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/749-c2fe4809

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 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が開きます。

----------
201001130001
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。