IE9ではDOMContentLoaded をサポートするようだ

category-icon

 こんにちは、martinです。久しぶりの書き庫な気がします。

 IE9のプラットフォームプレビューLink が出ていたんで、インストールしてみました。最初に試したことは、他の主要なブラウザでは実装済みのDOMContentLoadedがサポートされているかなぁ、ということでした。現時点では、まだでしたが、IEBlogLink によると今後のロードマップに、DOMContentLoadedのサポートがあるようです。DOMContentLoaded自体は、DOM Level 3 Eventsには定義されていないので、IE9が標準仕様に忠実であろうとするならば実装は微妙だなぁ、と思っていたんですが、HTML5には定義されていますLink (注意: リンク先はかなりページが重い)ね。

 IE9でDOMContentLoadedがサポートされるのはまことに喜ばしいことですが、IE9が普及するのはまだまだずっと先の話でしょう。なので現状では、IE向けにはDOMContentLoaded相当の機能を自前で実装する必要があります。世の中には、jQueryを始めとした便利なJavaScriptライブラリーがいくつかありますが、猫も杓子もDiego Perini氏が発見したdoScrollメソッドを使う手法Link に則っています。ppBlogでのoParts.jsでも、doScrollの実行をもって、DOMパース完了とみなすやり方で実装しています。

 さて、このdoScrollメソッドですが、MSDNの説明にあるように、

The doScroll method is available on all objects, regardless of whether they support scrollbars.

引用元: doScroll Method (A, ABBR, ACRONYM, ...)Link

 ほぼすべての要素について適応可能です。多くのJavaScriptライブラリーでは、

document.documentElement.doScroll('left');

 というふうに、document.documentElementに適用しているケースが殆どですが、何でも良いので、以下のようなやつもOKです。

(function(){
  if(navigator.userAgent.match(/MSIE/)){ // IEなら
   try {
     new Image().doScroll(); // new Imageオブジェクトについて適用
     onReadyFunc(); // DOM構築後に最初に呼び出す関数
   } catch(e){ setTimeout(arguments.callee, 1);}
  } else { // IE以外
   document.addEventListener("DOMContentLoaded", onReadyFunc, false); // DOM Level 3 Events相当
  }
})();

 別にnew Imageオブジェクトをdocument.bodyappendChildする必要もありませんし、メモリーリークも起こしません。以下のようにコメント文を生成するメソッドcreateComment()を用いても良いでしょう。これも、既存の文書に作ったコメントをappendする必要はなく、ただ宣言するだけで動きます。

(function(){
  if(navigator.userAgent.match(/MSIE/)){ // IEなら
   try {
     document.createComment().doScroll(); // document.createCommentについて適用
     onReadyFunc(); // DOM構築後に最初に呼び出す関数
   } catch(e){ setTimeout(arguments.callee, 1);}
  } else { // IE以外
   document.addEventListener("DOMContentLoaded", onReadyFunc, false); // DOM Level 3 Events相当
  }
})();

 doScroll()の引数は省略可能です。省略するとscrollbarDownが適用されるので、document.documentElement.doScroll()だと、実際に画面がスクロールしてしまうかもしれません(なのでたいてい”left”を指定している)。new ImageやcreateCommentだと、DOMツリーに追加するわけではないので引数は省略して構いません。

 new Image().doScroll()なんて、短い記述で済むんでいいなぁ、と思うけれど。

 


— posted by martin at 09:50 am   commentComment [2]  pingTrackBack [0]

OLリスト要素の番号を制御したい

category-icon

 久しぶりのエントリーです。自分のもので恐縮ですが、ウェブログの方のエントリーLink で著作物の引用をしようとした際に、オリジナルがそうであったのでリスト番号付きで文章を引用しようと思いました。引用したい文章は、143節から150節までなので、OL要素を用いてリスト番号を付けようかなと。しかし、任意の番号からリスト番号を割り当てる方法を知らなかったので(普通は、1,2,3,...と割り振られる)、調べたついでにエントリーとして残しておきます。

 HTML4.01 strictより古い(あるいはTransitional)仕様では、(非推奨ながら)OL要素にstart属性があるので、下の例のように任意の番号から始めることができます。

<ol start="143">
 <li>パリ</li>
 <li>ストラスブール</li>
 <li>ブリュッセル</li>
 <li>ロンドン</li>
</ol>

 しかしながら、HTML4.01 strict ~ XHTML1.0 strictでは、このstart属性が(なぜか)廃止されています。CSSで指定可能だからなのか、その辺りの背景は知りませんが、とにかく廃止されています。ppBlogでは、基本的にXHTML1.0 strict相当でHTMLソースを生成しているので、あまり気楽にはstart属性を使えません(例えば、W3CのValidatorLink にかけると誤った使用とのエラー表示になる)。なので、どういう指定方法があるのか調べてみました。

XHTML1.0 strict での対応

 大きく2通りのやり方があると思います。ひとつはCSSのみでの制御。もうひとつはJavaScriptを用いての制御です。具体的なサンプルを見てみましょう。このサンプルでは2通りでのやり方を載せています。

      →http://p2b.jp/demo/any-numbering-ordered-list1.htmlLink

 CSS2.1のみで任意のリスト番号を指定することができますが、counter-resetや擬似要素の:beforeなどを使う必要があり、IE7以下では対応していません。まだまだIE6/7を無視できない現状、気軽に使えませんし、何より使い方が分かりづらい

shot1
CSSのみで制御。リスト番号が文字に埋もれて見にくい。

 また、CSSのみでの制御では、上のスクリーンショットにあるように、リスト内容が長く折り返しが生じる場合、li:beforeによって挿入されたリスト番号が文章に埋もれてしまい、視認性に欠けます。

 2つ目は、JavaScriptで制御する方法です。比較的簡単に実装でき、どのブラウザも対応しています。また、下のショットのように、CSSのみでやる場合と違って、リスト番号はOL要素本来のリスト表示を使うので、リストの数字が文章に埋もれることはないです。

shot2
JavaScriptで指定。リスト番号は文章と独立していて視認性に優れる。
 スクリプトが無効な環境でも、リスト番号自体は表示されるのでCSSのみでの方法より良いのではと考えます(もっとも番号は1から振られますが)。
function numberingStart(){
 document.getElementById("js-way").start = 143; // LI要素のstart属性を指定
}

HTML5での対応

 さて、HTML5では、どうやらOL要素のstart属性は復活しそうな感じLink です。なので、HTML5にしてしまえば、とても簡単に実装できます。このエントリーの最初に書いたように記述すればOKです。HTML5化ですが、乱暴にいえば、冒頭のDOCTYPE宣言を以下のようにすれば良いです。

<!DOCTYPE html>  /* HTML5のDOCTYPE宣言はすごくシンプル */

 簡単ですね。そのうちppBlogもHTML5化予定ではあります。HTML5でのサンプルを挙げておきます。ValidなHTML5です。

      →http://p2b.jp/demo/any-numbering-ordered-list2.htmlLink

 ちなみに、CSSのみでのやり方では、counter-reset, li:beforeなどを用いてますが、これらのプロパティーは、OL要素に限らずH2要素など、いろんな要素に使用可能です。

      →参考 http://www.w3.org/TR/CSS2/generate.html#countersLink

 最後にですが、最初に挙げたウェブログでのエントリーでは、JavaScriptで指定してます。記事のテキストエリアで以下のように記述しています。

[script]
oParts.start(function(){ o('#Buddha').$.start = "143"; });
[/script]

まとめ

 XHTMLなページが多い現状、廃止されたOL要素のstart属性は使うのに抵抗がある。代用としてCSS2.1のcounter-resetなどで実現できるが、その指定はややこしく、またstart属性の完全な代用ではないし、何よりIE6/7が未対応。JavaScriptでstart属性を指定するやり方は、ややトリッキーではあるが、すべてのブラウザで意図通りに指定可能である。

 次世代のHTML5なページにすれば、OL要素のstart属性が問題なく使えるようだし、現状のブラウザでも問題ない。

— posted by martin at 03:42 am   commentComment [0]  pingTrackBack [0]

CSS3のtransformをIE8でも使いたい

category-icon

 こんばんは、martinです。FirefoxやWebKit系のSafari、グーグルのChromeなどは、CSS3の魅力的な機能を色々取り入れています。中でも、CSS3のtransformLink やドロップシャドウ系は、ブログで写真を見せる場合などに凝った演出が出来るので、仕様が正式に決まるのが待ち遠しいですね(そう言えば、ボックスのドロップシャドウ box-shadowですが、CSS3の勧告候補から消えたLink のかなぁ)。便利な仕様だとは思うのですが。

 ちなみに、transformとは「変形」のことで、CSSのみで画像やらボックスやらを自在に回転させたり、ゆがませたりできる優れものです。で、例によってIE系はCSS3の対応は遅れています。とは言っても(これまたいつものように)transformに関しては、IEは実にIE5.5の時から似たようなものを実装していましたLink ! なので、それらを駆使すれば、CSS3相当のtransformが実装できそうです。

 transformが使えると何がうれしいって、例えば以下のようなポラロイド写真みたいなギャラリーがCSSのみで簡単に出来ます。実は下のショットはIE8でのものです。
CSS3-transform-IE8
IEでもCSS3のtransform相当のことが出来る

 画像の回転に関して、FirefoxやWebKit系は、画像の中心を回転軸として回転させます(なので回転軸は移動しない)。これは直感的で分かりやすいです。これに対して、IEは回転軸が指定した回転角度によって刻々と移動します。なので、標準仕様に似せようと思うと、回転軸を動かさない様にするための補正計算が必要になります。この計算にちょっとてこずりましたが、何とか回転軸が動かないような補正をすることが出来ました。

IE rotation
IEでは、ボックスはx軸とy軸に2点が常に接しつつ、すべるように回転するので軸が常に動く。

 で、とりあえずモノになりそうなものが出来たのでデモサイトを挙げておきます。画像へのマウスオーバーで拡大なんてのもCSSのみで出来るのですが、それもIEで動くようにしています。

 

→「CSS3 Transformを使ったギャラリー(IE互換)Link

 FirefoxやSafariでは、完全にCSS3のみで実現していて、IEでは、IE特有のフィルター機能をJavaScirptを通して操作しています。ボックス要素のドロップシャドウについては、以前、まぁまぁ凝ったスクリプトを書きましたLink が、新たに要素を追加しないといけないなど、あまり納得のいくものではありませんでした。今回ドロップシャドウに関しては、あまり凝ることはせずに、IEのフィルター機能を素直にそのまま使っています。
progid:DXImageTransform.Microsoft.dropshadow(enable=true,OffX=3, OffY=7, Color='#11000000', Positive='true');

 実は最近知ったのですが、フィルターのColorには通常のRGB形式だけでなく、透明度も指定できる#AARRGGBBの形式が使えるので、黒色の透明度を高くすればより影っぽくなります。CSS3レベルのぼやけた感じまでは出ませんが、まぁ、これで良しとしましょう。

 使い方は、簡単で、形はHTCファイルですが、JavaScriptの外部ファイルとして動作するようにしてます。これは、以前のドロップシャドウのスクリプトと同じです。それをIEのみが解釈する条件コメントの中に書いています。
<!--[if IE]>
 <script type="text/javascript" src="js/css3transform.htc"></script>
<![endif]-->

 これを書いておくだけで、スタイルシートに記された

     -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
などを解釈して、IEのフィルター機能(Matrix Filter)で同等のことを表現します。デモページにあるように、IEでもCSS3のtransformはおよそ実現できるみたいです(まぁ、そもそもがIEのMatrix仕様を参考に実装したのでしょうけど)。

 このスクリプトを添付しておきます。

添付ファイル: css3transform.htcattachedIcon 

 


— posted by martin at 01:02 pm   commentComment [20]  pingTrackBack [0]

 

タグモード表示の改善

category-icon

 こんばんは。コメントで、タグエントリーを総表示するときの仕様についてアドバイスがあり、確かにそうだなと思ったので。現状では、タグモードのとき(このサイトに表示されているタグのアイコンをクリックした時)、下のショットのように、縦にリスト表示されます。
shot1
数が少ないうちはよいですが・・・。

 これは、アーカイブ表示に準じてそうしたのですが数が増えてくると縦表示は見辛いですね。もっとも、スタイルシートの制御で横に並べることは出来ますが、タグクラウドの特徴のひとつである「エントリー数に応じて文字の大きさを制御する」というところまではしていませんで(PHPプログラムのmodules/tags.inc.phpの方で)。

 なので、modules/tags.inc.phpをタグクラウド表示に見合うように修正しました。適切にスタイルシートを設定すると以下のような表示になります。このショットはこのサイトでの例なのですが、タグ数が少ないのであまり雲って感じではないんですが、増えてくると見栄えも違ってくるでしょう。これよりもうちょいタグ数が多い、個人ブログの方はこんな感じLink です。
shot2
どんどん増やしていきたいなぁ。

 ちなみに、テーマ「ベーシック」での、この部分の表示は以下のようにしています。参考になれば。クラス名などは従来通りです。

/*---------------------------[ タグ 一覧表示用 ]----------------------*/
div.tags-list {
  width: 450px;
  margin: 30px auto;
  background: url(Images/clouds96.png) right top no-repeat;
}
div.tags-list ul {
  list-style: none;
  margin-top: 60px;
}
div.tags-list ul li{
  margin: 0 6px 3px 6px;
  white-space: nowrap; /* 日本語ワードの改行を適切にするための指定 */
  display: inline;
  text-align: center;
  zoom: 1;
}
div.tags-list h3 {
  margin: 2em auto;
  color: navy;
}

 これに対応したmodules/tags.inc.phpを添付しておきます。

 あ、追記ですが、この添付ファイルの最初の方に、

$minFontSize = 13;  // 最小文字サイズ(ピクセル)
$maxFontSize = 36;  // 最大文字サイズ(ピクセル)

という2行があります。これはタグ表示の文字サイズを制御するためのものです。エントリー数に応じて、タグの文字が大きくなっていきますが、際限なく大きくなっても困るので、上限を設けています。ピクセル指定です。適宜、調整して下さい。

添付ファイル: tags.inc.phpattachedIcon 

— posted by martin at 09:29 am   commentComment [2]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0060 sec.
prev
2017.12
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31