03 | 2017/04 |  05

  1. 無料サーバー

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

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

スポンサーサイト

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

 

jquery.js (1.4) による要素位置の測定と適正な配置 (2) コード解読(1)

jquery.js ( ver1.4 ) における要素の位置指定等に関わるコード解読

解読対象コードは以下のメソッド等とし、この順に解読を行います。なお対象とする jquery.js はバージョンアップされたばかりの ver 1.4 とします。

jQuery.offset オブジェクト(5785~5854行)の概要

このオブジェクトには 3 つのメソッドが定義されます。

initialize は、ブラウザ特性を把握するために幾つかのプロパティを設定するメソッドです。

この「幾つかのプロパティ」とは次に列挙した 5 つで、これらは、jQuery().offset() メソッド解読において後述するように、要素の正確な位置算出を行うために使われ、それは同時に、各ブラウザの CSS に関する特性を捉えることになります。

  1. jQuery.offset.doesNotAddBorder : 或るボックスの offsetTop を算出する際に、直上の親ボックスのボーダー値を加算しないか(true)、加算するか(false)
  2. jQuery.offset.doesAddBorderForTableAndCells : table 内の或るセルの offsetTop 値を算出する際に、table ボックスのボーダー値を加算するか(true)、否か(false)
  3. jQuery.offset.supportsFixedPosition :或る要素を強制的に top:20px の位置に fixed 配置して、その offsetTop 値が 20px か 15px ならば true、その場の場合には false。 これは safari が offsetTop をマイナス 5 してしまうバグ対応のようだ。( 5px は offsetParent の top ボーダー幅である。)
  4. jQuery.offset.subtractsBorderForOverflowNotVisible : 或るボックス要素 A の offsetParent 要素の overflow 値を hidden にし、その position をrelative に指定した際に、A.offsetTop 値を A.offsetParent のボーダー高さだけマイナスするか(true)、しないか(false)
  5. jQuery.offset.doesNotIncludeMarginInBodyOffset : document.body に marginTop 値を設定した時に、body.offsetTop 値にその marginTop 値を加算しないか(true)、加算するか(false)

上の 5 つのプロパティは、ブラウザのそれぞれの仕様を個別具体的に把握するために用意されたもので、jQuery.offset オブジェクトの 1 つの目的は、この 5 プロパティチェックにあると言えるでしょう。これらのプロパティによってブラウザ毎のバグや仕様の差異がチェックされ、位置算出で補正が必要かどうか判断されるのです。

jQuery.offset オブジェクト内で定義される 2 つめのメソッド jQuery.offset.bodyOffset は、document.body の margin 値を top/left 値に追加し、その値をオブジェクトとして返します。返値の top/left 値は document.body のボーダー辺のドキュメント座標値を示すはずです。しかし、Firefox では body 部に border がある場合に、奇妙な offsetTop/Left 値を返すので、正確な座標値にならない場合があります。(このことの詳細は後述します。)

jQuery.offset オブジェクト内で定義される 3 つめのメソッド jQuery.offset.setOffset は、jquery.js ver1.4 で新設されたものです。

これまでの jQuery(elems).offset インスタンスメソッドは読み取り専用でしたが、ver 1.4 では、elems HTML要素(静的配置の場合も含む)を、配置換えする引数を取ることができるようになりました。この引数は配置換え先となる top、left プロパティを持つオブジェクト(仮に obj と呼ぶ)か、elems のインデックス番号 i と、i 毎の obj の 2 つの引数をもつ関数か、そのいずれかとなります。

jQuery.offset オブジェクトの 5 つのプロパティについて

前のエントリイで触れた W3C Working Draft 04 August 2009 - CSSOM View Module における offsetTop/Left プロパティ定義案を標準と考えた場合、jQuery.offset オブジェクトの 5 つのプロパティが、ブラウザ(全て windows 版)毎にどのようになるのかを一覧にしてみました。

ここに、doesNotSubtractBorderInBodyOffset は私が独自に作成したプロパティです。document.body にゼロではない border 幅が設定されている場合に、document.body.offsetTop 値から、このボーダー値が減じられてしまうかどうかを調べるために設けたものです。

上の表の説明
  1. W3C の列は W3C Working Draft 04 August 2009 - CSSOM View Module での提唱案に従った場合の各プロパティ値です。これを標準と考えて各ブラウザを比較してみます。

  2. すると、標準モードで border なしの場合、Opera と IE8 では doesNotAddBorder が false となることにおいて、Chrome では doesAddBorderForTableAndCells が false となることにおいて、最後に Firefox では doesNotSubtractBorderInBodyOffset が false となることにおいて、それぞれ標準とは異なっています。
    つまり、W3C 草案に全て一致するブラウザは現在存在しません。

  3. supportsFixedPosition は、position:fixed をサポートしない IE 及び Opera の後方互換モードでは false となります。

  4. Firefox では document.body に ゼロ幅ではない border がある時とない場合とで、offsetTop/Left が異なる値を示します。border があると offsetTop/Left 値は「マイナスボーダー幅」となるのです。標準でも互換でもいずれのモードでも同様です。

    そこで、doesNotIncludeMarginInBodyOffset プロパティを作って調査しました。

    こうして、Firefox だけが border 有無によって offsetTop に異なった値を返すことが判明しましたが、これは明らかにバグというべきでしょう。

  5. IE8 の場合、doesNotAddBorder は標準モードと互換モードで異なる値になります。これは IE 互換モードの content.width/height が W3C 標準と異なって border 辺までの値として定義されていることに関連していると推測されます。

subtractsBorderForOverflowNotVisible プロパティの目的

W3C CSS2.1 の仕様として、position : absolute と position : relative では配置原点が異なります。前者は offsetParent のパディング辺が基準となり、後者は offsetParent の内容辺が基準になります。そして内包されるボックスの margin 辺がそれぞれの配置原点に配置されます。(下図参照)

subtractsBorderForOverflowNotVisible プロパティは、或る要素 B の absolute 属性を一時的に relative に変更すると共に、B の overflow 属性を hidden にして、包含要素 C の padding 値だけ当該要素を右下に移動させた時に、当該要素内に静的に配置された子要素 A も B と一緒に動くかどうかを調べています。

上述の「 jQuery.offset オブジェクトの 5 つのプロパティ 」 に掲載した表にあるように、Windows 系の主要ブラウザにおいては、標準モードであれ互換モードであれ、subtractsBorderForOverflowNotVisible プロパティは全て false となります。ですから、どんなブラウザで、このプロパティ値が true となるのか分かりません。つまりこのプロパティの必要性が判然としません。

因みに、その他の jQuery.offset オブジェクトのプロパティでは、私が独自に設定した doesNotSubtractBorderInBodyOffset も含めて、いずれかのブラウザの、いずれかのモードにおいて、他と異なる値となるので、これらのプロパティはブラウザ特性を把握するために必要であることが分かるのですが、subtractsBorderForOverflowNotVisible プロパティだけは、必要性が分かりません。

このプロパティは、Mac 系のブラウザや Windows 系の他のブラウザにおいて、必要なのかもしれませんが、チェックし得ないため不明です。

jQuery.offset オブジェクトコード解読

■jQuery.offset オブジェクト
   // jQuery.offset オブジェクトの定義を開始する
5785:jQuery.offset = {
    // initialize メソッド定義を開始する。引数はない。
5786: initialize: function() {
     // ローカル変数定義
     /* 変数 html にはブラウザ特性をチェックするための 2 つの要素をセットしている。
      * 1 つは 4 辺共黒で塗りつぶした 5 px 幅のボーダーを持ち、コンテンツ幅も
      * 高さも 1 px の div タグ内に設けるチェック対象の空の div タグ。
      * そして 4 辺共黒で塗りつぶした 5 px 幅のボーダーを持ち、幅と高さを 1 px、
      * セル余白もセル間隔もゼロの table タグ内に配置するチェック対象の空 td タグ。
      * これらの 2 つの要素を document.body の左上隅にそれぞれ絶対配置して、
      * offsetTop プロパティを使ってブラウザ特性を測定する。
      */
5787:  var body = document.body, container = document.createElement('div'), innerDiv,
      checkDiv, table, td, bodyMarginTop = parseFloat( jQuery.curCSS(body, "marginTop", true) ) || 0,
5788:   html = '
     
'; 5789:      // ローカル変数 container のインラインスタイルを設定する。 5790:  jQuery.extend( container.style, { position: "absolute", top: 0, left: 0,       margin: 0, border: 0, width: "1px", height: "1px", visibility: "hidden" } ); 5791: 5792:  container.innerHTML = html; // container 要素内に html 要素を挿入する      // その container を body 要素最前部に配置する 5793:  body.insertBefore(container, body.firstChild);      // ローカル変数への代入。innerDiv は checkDiv 要素の parentNode となる。 5794:  innerDiv = container.firstChild; 5795:  checkDiv = innerDiv.firstChild; 5796:  td = innerDiv.nextSibling.firstChild.firstChild; 5797:  // ブラウザ特性判定プロパティその 1── doesNotAddBorder を定義 5798:  this.doesNotAddBorder = (checkDiv.offsetTop !== 5);      // ブラウザ特性判定プロパティその 2── doesAddBorderForTableAndCells を定義 5799:  this.doesAddBorderForTableAndCells = (td.offsetTop === 5);      // #5800 ~ 5804 は ver 1.4 で追加された。 5800:  // checkDiv の位置指定を fixed とし、top 値を 20px とする。 5801:  checkDiv.style.position = "fixed", checkDiv.style.top = "20px"; 5802:  // safari subtracts parent border width here which is 5px      // safari では親要素のボーダー幅 5px を減算する。      // ブラウザ特性判定プロパティその 3── checkDiv.offsetTop が 20 あるいは      // 15 の時には true を supportsFixedPosition プロパティに代入し、      // そうでない場合には false を代入する。 5803:  this.supportsFixedPosition = (checkDiv.offsetTop === 20 || checkDiv.offsetTop === 15);      // チェックを終えたので、chechDiv 要素の position と top プロパティの      // インラインスタイル指定を取り消す。 5804:  checkDiv.style.position = checkDiv.style.top = ""; 5805:  // checkDiv 要素の parentNode (これは offsetParent でもある)の      // overflow 属性を hidden とし、position 属性を相対配置とした上で 5806:  innerDiv.style.overflow = 'hidden', innerDiv.style.position = 'relative';      // ブラウザ特性判定プロパティその 4── subtractsBorderForOverflowNotVisible を定義 5807:  this.subtractsBorderForOverflowNotVisible = (checkDiv.offsetTop === -5); 5808:        // ブラウザ特性判定プロパティその 5── doesNotIncludeMarginInBodyOffset を定義 5809:  this.doesNotIncludeMarginInBodyOffset = (body.offsetTop !== bodyMarginToo); 5810:  // ブラウザ特性判定プロパティの設定を終えたので、container 毎 DOM Tree から削除する 5811:  body.removeChild(container); 5812:  this.initialized = true; // jQuery.offset.initialized プロパティを true に設定 5814: }, 5815: 5816: bodyOffset: function(body) { // bodyOffset メソッドの定義開始      // document.body 要素の offsetTop/Left 値をローカル変数に代入 5817:  var top = body.offsetTop, left = body.offsetLeft; 5818:  // jQuery.offset.initialize メソッドを起動する。 5819:  jQuery.offset.initialize(); 5820:  // doesNotIncludeMarginInBodyOffset が true ならば 5821:  if ( jQuery.offset.doesNotIncludeMarginInBodyOffset ) {       // body の marginTop/Left の算出スタイル値を加算する。       なお、加算しないことは正しい offsetTop/Left の仕様です。       従ってここで margin 値を加算するのは、jQuery.offset.top/left プロパティ       によって、body 要素のボーダー辺の位置を得るために他なりません。 5822:   top += parseInt( jQuery.curCSS(body, 'marginTop', true), 10 ) || 0, 5823:   left += parseInt( jQuery.curCSS(body, 'marginLeft', true), 10 ) || 0; 5824:  } 5825: 5826:  return { top: top, left: left }; 5827: }, 5828: // ver 1.4 で新設されたメソッドで、offset 値を設定するメソッドである。 5829: setOffset: function( elem, options, i ) { 5830:  // set position first, in-case top/left are set even on static elem      // 設定対象とする elem 要素の position 算出スタイル値が static ならば 5831:  if ( /static/.test( jQuery.curCSS( elem, "position" ) ) ) { 5832:   elem.style.position = "relative"; // relative に変更する。 5833:  }      // elem の jQuery インスタンス jQuery(elem) への参照を変数 curElem に代入 5834:  var curElem = jQuery( elem ),       // curOffset に curElem の offset メソッド適用結果を代入 5835:   curOffset = curElem.offset(),       // elem 要素の top 算出スタイル値を curTop 変数に代入する。 5836:   curTop = parseInt( jQuery.curCSS( elem, "top", true ), 10 ) || 0,       // elem 要素の left 算出スタイル値を curLeft 変数に代入する。 5837:   curLeft = parseInt( jQuery.curCSS( elem, "left", true ), 10 ) || 0; 5838:  // 引数 options が関数ならば 5839:  if ( jQuery.isFunction( options ) ) {       // i と curOffset を引数として options 関数を起動し、その返値を options に代入する。 5840:   options = options.call( elem, i, curOffset ); 5841:  } 5842:      // offset.top/left の設定値から offset.top/left の現在値を減算し、      // それに top/left の現在値を加算する。要するに、差分を現在値に加算する。 5843:  var props = { 5844:   top: (options.top - curOffset.top) + curTop, 5845:   left: (options.left - curOffset.left) + curLeft 5846:  }; 5847:   5848:  if ( "using" in options ) { // options に using プロパティ(値は関数)があれば 5849:   options.using.call( elem, props ); // props を引数として using 関数を起動 5850:  } else { // using がなければ 5851:   curElem.css( props ); // 対象要素を props に従って配置する。 5852:  } 5853: } 5854:};

続いて、2 つめのコード解読を行います。

jQuery().offset() メソッドの概要

このメソッドの目的は、知りたい HTML 要素の border 辺のドキュメント座標値 top 及びleft を知ることです。そのために上述のように、jQuery.offset.bodyOffset オブジェクトの top/left プロパティに、body 部の margin 値を加算して border 辺迄の座標を得ています。(#4248~4255)

この結果、body 要素自体に border(幅 W )がある場合には、body.offsetTop = 0 (但し、firefox のみ、body.offsetTop = - W となってしまう)ですが、$("document.body").offset().top = marginTop 値 となります(ここでも firefox の場合のみ、marginTop - W となってしまいます)。

各メソッドのサイズ測定箇所図

このメソッドでは CSSOM で定義されようとしており、現時点では何ら標準化されていない 1 つのメソッド( getBoundingClientRect )を使って、あるいは同様に標準化されていない 3 つのプロパティ( offsetParent、offsetTop 及び offsetLeft )を使って、要素のドキュメント座標を算出します。

A.getBoundingClientRect メソッドをサポートしているブラウザにおいては、要素 A のクライアント座標値が取得でき、その値はブラウザ間で差異がないので、容易にドキュメント座標値が取得できます。A.getBoundingClientRect メソッドで取得したクライアント座標値に window スクロール値を加算し、clientTop/Left値を減算すれば、要素 A の正確なドキュメント座標値が取得できます。

一方、ブラウザが getBoundingClientRect メソッドをサポートしていない場合には、offsetParent、offsetTop 及び offsetLeft を利用してドキュメント座標を取得するのですが、これらのプロパティはブラウザ毎に解釈が異なっていたり、バグがあったりするので、そのままでは正しい位置が取得出来ません。そこで、上で解読した jQuery.offset オブジェクトの 5 つのプロパティを駆使して、ブラウザ毎・標準互換別の offsetTop プロパティ算出値の差異を補正し、jQuery.offsetParent メソッドによって、ブラウザ間で定義が異なる offsetParent の一意的な確定を行います。

こうして要素のドキュメント座標値( border 辺迄の値 )をブラウザに依存せずに正確に算出する訳です。

jQuery().offset() メソッドの欠点

jQuery().offset() メソッドには欠点があります。body 部に border がある場合、Firefox だけ正しい要素位置が算出できないのです。この場合に jquery.js コードの jQuery().offset() で取得される top と left 値は、共に border 幅の値だけ過小になってしまいます。

そこで、エントリイを改めてその補正を行うコードを jquery プラグインとして作成して掲載する予定です。

jQuery().offset() メソッドの詳細解読
■jQuery().offset() メソッドコード
   // html要素オブジェクトに getBoundingClientRect が定義されていれば、
   // つまりブラウザが getBoundingClientRect メソッドに対応していれば、
5690:if ( document.documentElement["getBoundingClientRect"] )
    // jQuery().offset() メソッドを prototype オブジェクトに組み込む
5691: jQuery.fn.offset = function( options ) {
     // インスタンスに登録されている最初の要素への参照を elem に登録する。
5692:  var elem = this[0];
5693:  // elem がないか、document がないならば
5694:  if ( !elem || !elem.ownerDocument ){
5695:       return null; // null を返す。
5696:  }
5697:
5698:  if ( options ) { // 引数 options があれば
5699:   return this.each(function( i ) { // 対象要素を巡回処理
        // setOffset クラスメソッドを呼び出す。
5700:     jQuery.offset.setOffset( this, options, i );
5701:   });
5702:  }
5703:  // 対象要素が body の場合
5704:  if ( elem === elem.ownerDocument.body ) {
      // body を引数に bodyOffset クラスメソッドを 起動する
5705:   return jQuery.offset.bodyOffset( elem );
5706:  }
5707:  // インスタンスに格納されている最初の要素が document.body ならば
     // jQuery.offset.bodyOffset(document.body) の返値を返す。
     // ローカル変数定義。
     /* インスタンスに格納されている最初の要素の getBoundingClientRect()
      * オブジェクトへの参照を box に 、 document への参照を doc に、
      * document.body への参照を body に 、html 要素への参照を docElem に、
      * html.clientTop 又は document.body.clientTop 又はゼロを clientTop に 
      * html.clientLeft 又は document.body.clientLeft 又はゼロを clientLeft に、
      * それぞれ代入する。
      */
5708:  var box  = elem.getBoundingClientRect(), doc = elem.ownerDocument,
      body = doc.body, docElem = doc.documentElement,
5709:   clientTop = docElem.clientTop || body.clientTop || 0, 
      clientLeft = docElem.clientLeft || body.clientLeft || 0,
      // ローカル変数定義の続き
      /* top として、計測対象要素の top 値 + スクロール値 - clientTop を
       * left として、計測対象要素の left 値 + スクロール値 - clientLeft を
       * 代入する。
       */
5710:   top  = box.top  + (self.pageYOffset || jQuery.boxModel && docElem.scrollTop  || body.scrollTop ) - clientTop,
5711:   left = box.left + (self.pageXOffset || jQuery.boxModel && docElem.scrollLeft || body.scrollLeft) - clientLeft;
      // 返値定義
5712:
5713:   return { top: top, left: left };
5714: };
5715:// ブラウザが getBoundingClientRect に対応していない場合
5716:} else {
    // #5717~5783 は #5691~5714 に同じである。
5717: jQuery.fn.offset = function() {
5718:  var elem = this[0];
5719:
5720:  if ( !elem || !elem.ownerDocument ){
5721:   return null;
5722:  }
5723:
5724:  if ( options ) {
5725:   return this.each(function( i ) {
5726:     jQuery.offset.setOffset( this, options, i );
5727:   });
5728:  }
5729:
5730:  if ( elem === elem.ownerDocument.body ) {
5731:   return jQuery.offset.bodyOffset( elem );
5732:  }
5733:  jQuery.offset.initialize();
5734:  // ローカル変数定義
     /* elem に インスタンスに登録されている最初の要素(対象要素)への参照を、
      * offsetParent に elem の offsetParent への参照を、
      * prevOffsetParent に elem への参照を、doc に document への参照を、
      * docElem に html 要素への参照を、body に document.body への参照を、
      * defaultView に document.defaultView への参照を、prevComputedStyle に
      * document.defaultView.getComputedStyle(elem, null) オブジェクトへの参照を、
      * top に対象要素の offsetTop 値を、left に対象要素の offsetLeft 値を
      * それぞれ代入する。
      */
5735:
5736:  var offsetParent = elem.offsetParent, prevOffsetParent = elem,
5737:   doc = elem.ownerDocument, computedStyle, docElem = doc.documentElement,
5738:   body = doc.body, defaultView = doc.defaultView,
5739:   prevComputedStyle = defaultView ? defaultView.getComputedStyle(elem, null) 
      : elem.currentStyle
5740:   top = elem.offsetTop, left = elem.offsetLeft;
5741:
     // 対象要素の親要素を elem に代入し、elem が body で html でもない限り
     // 巡回走査する。
5742:  while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) {
5743:   if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ) {
5744:    break;
5745:   }
5746:
      // computedStyle 変数に対象要素の算出スタイルオブジェクトへの参照を代入する。
5747:   computedStyle = defaultView ? defaultView.getComputedStyle(elem, null) : elem.currentStyle;
      // スクロール値が重複加算されるのでその都度減算する。
5748:   top -= elem.scrollTop;
5749:   left -= elem.scrollLeft;
5750:
      // 親要素が offsetParent ならば
5751:   if ( elem === offsetParent ) {
       // 対象要素の親要素の offsetTop 値と offsetLeft 値を加算する。
5752:    top += elem.offsetTop;
5753:    left += elem.offsetLeft;
5754:
       /* 対象要素が 対象要素が table でも td でも th でもなく、かつ
        * doesNotAddBorder が true の場合、または、対象要素が table か
        * td か th で、かつ doesAddBorderForTableAndCells が true ではない場合
        */
5755:    if ( jQuery.offset.doesNotAddBorder && 
       !(jQuery.offset.doesAddBorderForTableAndCells && /^t(able|d|h)$/i.test(elem.tagName)) ){
        // 対象要素の親要素の border 幅値を top と left にそれぞれ加算する。
5756:     top  += parseInt( computedStyle.borderTopWidth,  10) || 0;
5757:     left += parseInt( computedStyle.borderLeftWidth, 10) || 0;
5758:    }
5759:
       // 対象要素の offsetParent の offsetParent を 変数 offsetParent に代入
5760:    prevOffsetParent = offsetParent, offsetParent = elem.offsetParent;
5761:   }
5762:
      // subtractsBorderForOverflowNotVisible が true で、overflow 属性値が
      // visible ではない場合には
5763:   if ( jQuery.offset.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ){
       // 対象要素の親要素の border 幅値を top と left にそれぞれ加算する。
5764:    top  += parseInt( computedStyle.borderTopWidth,  10) || 0;
5765:    left += parseInt( computedStyle.borderLeftWidth, 10) || 0;
5766:   }
5767:   // 対象要素の親要素の算出スタイルオブジェクトを prevComputedStyle 変数に
      // バックアップしておく。
5768:   prevComputedStyle = computedStyle;
5769:  }
5770:  // 対象要素の親要素の position 属性値が relative または static ならば、
5771:  if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ){
      // 最上位の offsetParent である document.body の offsetTop/Left 値を加算する。
5772:   top  += body.offsetTop;
5773:   left += body.offsetLeft;
5774:  }
5775:
     // ブラウザが position : fixed に対応しており、
     // かつ、対象要素の親要素の position 属性値が fixed ならば
5776:  if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ){
      // html.scroll 値か body.scroll 値の大きい方を top/left 値に加算する。
5777:   top  += Math.max(docElem.scrollTop, body.scrollTop);
5778:   left += Math.max(docElem.scrollLeft, body.scrollLeft);
5779:  }
5780:
5781:  return { top: top, left: left };
5782: };
5783:}

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

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