条件分岐コメント、ラジオボタン

条件分岐コメント、ラジオボタン

条件分岐コメント、ラジオボタン

Michael Wallent
Lead Program Manager, DHTML
Microsoft Corporation

July 17, 1998
日本語版最終更新日 1999 年 3 月 19 日

先月行われた、Internet Explorer 5 Developer Preview に関するオンラインチャットでは、リリースの際に発表されたドキュメントで十分に説明されていなかった新しいテクノロジに大きな関心が集まりました。私が「条件分岐コメント」に触れたときには、いぶかしげな投稿がいくつも見られました。チャットではあまり細かい点には触れられなかったので、ここで説明することにします。

また、このチャットでは、私が頭の中に答えを持ち合わせていなかった質問が他にも2つありました(そう、DHTML Dudeでさえ、SDKを見なければならないことがあるのです。

ラジオボタン

第1の質問はかなり簡単でした。ラジオボタンのグループを使用するとき、チェックされている方の値を取得する最も簡単な方法は何かというものです。私は、チェックされている値を返すメソッドが公開されているものと思っていましたが、残念なことにそれは間違いでした。

私たちが社内で使用しているページのコードを紹介します。

<HTML>
<BODY STYLE="font-family: verdana">
<H2>Radio Button Value Check</H2>
<FIELDSET STYLE="width:100px">
<LEGEND>Milestone</LEGEND>
<INPUT TYPE=radio
  NAME=milestone VALUE="Beta 1">Beta 1<BR>
<INPUT TYPE=radio
  NAME=milestone CHECKED VALUE="Beta 2">Beta 2<BR>
</FIELDSET>
<BR><BR>
<INPUT VALUE="Show Checked" TYPE=button
  onclick="alert(getRadioValue('milestone'));">
<SCRIPT LANGUAGE="Jscript"><!--
function getRadioValue(radioName) {
  var collection;
  collection = document.all[radioName];
  for (i=0;i<collection.length;i++) {
    if (collection[i].checked)
    return(collection[i].value);
  }
}
//--></SCRIPT>
</BODY>
</HTML>

基本的に、ラジオボタンのセットを相互排他的にするためには、すべてのラジオボタンに同じ"name"プロパティを与えるようにします。 getRadioValue()メソッドは、選択された値を取得したいラジオボタングループの名前をパラメータとして取ります。メソッドはドキュメント内のその名前を持つすべての項目を繰り返し処理し、checked == trueになっている要素のvalueプロパティを返します。この関数は任意のラジオボタンのセットに使用できます。

また、視覚的に特徴のあるグループの作成に、HTML 4.0の新しい<FIELDSET>タグと<LEGEND>タグが使用されていることに注意してください。これらのタグはInternet Explorer 4.0と5.0の両方でサポートされています。

HTML Editing Component

チャットでのもう1つのホットなトピックは、独自のアプリケーションの中でInternet Explorer 4.0と5.0に付属しているHTML Editing Componentを使用する方法でした。アプリケーションの中で、Outlook ExpressとVisual InterDev?で使用されているのと同じ編集コンポーネントを使用することができます。

HTML Editing Component に関する情報はこちらです。

HTML は状況による

私がよく受ける質問に、次のようなものがあります: 「コンテンツを Internet Explorer 5 以外のブラウザで違和感なく表示するにはどうすればいいのですか?」

これまで、この質問に対する答えは、サーバー上でブラウザの正体を判別するか、クライアント上でスクリプトを使ってバージョン情報を判別するというものでした。しかし、これにはいくつかの制限がありました。サーバー上での検出には時間がかかりますし、管理が難しいことがあります。ブラウザの正体の判別は必ずしも簡単ではなく、管理のオーバーヘッドを増やす可能性がありました。そこで、われわれはこの問題を検討し、処理を簡単にしてくれるテクノロジを考えつきました。それが条件分岐コメントです。

条件分岐コメントには2つの種類があります。1つは他のブラウザにコンテンツをスキップさせるもの(downlevel-hidden)で、もう1つは他のブラウザに読ませるが(downlevel-revealed)、Internet Explorer 5 にスキップさせることができるものです。

例:

<!--#if IE 5#>
Welcome to Internet Explorer 5
<!#endif#-->
<!#if ! IE 5#>
Please upgrade to Internet Explorer 5
<!#endif#>

最初のコメントブロックは downlevel-hidden ブロックです。他のブラウザはこれをコメントとして読みますが、Internet Explorer 5は、この式がtrueに評価されれば、コメントでない普通のコンテンツとして読みます。

第2のコメントブロックは downlevel-revealed ブロックです。他のブラウザはブロック内のコンテンツを普通のコンテンツとして扱います。Internet Explorer 5は、式がtrueに評価されれば、これを完全に無視します。

構文図が好きな人のために、詳しい情報を示しておきます。

downlevel-revealed   ->  <!#if expression #>
                           html
                         <!#endif#>
downlevel-hidden     ->  <!--#if expression #>
                           html
                         <!#endif#-->
expression           ->  term
expression           ->  expression | term
term                 ->  value
term                 ->  term & value
value                ->  true
value                ->  false
value                ->  !value
value                ->  (expression)
value                ->  comparison
comparison           ->  feature
comparison           ->  feature version
comparison           ->  lt feature version
comparison           ->  lte feature version
comparison           ->  gt feature version
comparison           ->  lte feature version
feature              ->  [A-Za-z][A-Za-z0-9]*
version              ->  [0-9][A-Za-z0-9.]*

Internet Explorer 5のDeveloper Previewでは、テスト可能な"feature"は"IE"だけです。今後のInternet Explorer 5のリリースでは、テスト可能な条件がさらに追加される予定です。

スキップされたコンテンツは、ドキュメントのオブジェクトモデルには現れないので、余分なダウンロードコストなしに、ページ内の同じコンテンツの異なる表現を簡単に作成することができます。

たとえば、何らかのコンテンツに対してアルファフィルタを適用する場合を考えます。

<DIV STYLE="filter: alpha(opacity=50)">
This is filtered
</DIV>

Internet Explorer 4.0 では、アルファフィルタを適用した文字の画像を指定するIMGタグを作成しておき、ページ上でブラウザ検出コードを使って、ブラウザの種類に応じてこれを"display:none"に設定することになります。しかし、この場合でも画像のソースはダウンロードされるので、Internet Explorerを使った場合でもページサイズは同じになります。

条件分岐コメントを使うと、次のようなことが可能です。

<!--#if IE #>
<DIV STYLE="filter: alpha(opacity=50)">
This is filtered
</DIV>
<!#endif#-->
<!#if ! IE #>
<IMG SRC="filteredtext.gif">
<!#endif#>

ごく小さなHTMLコードを使って、同じ効果を持つ2つのバージョンを用意し、ブラウザには片方だけを表示させることができます。また、IMGタグは完全にスキップされるので、画像がダウンロードされることはありません。さらに、どのページを表示するのかを調べるためにスクリプトエンジンが起動されることもないので、ページのロードにかかる時間が短縮されます。

では、来月またお会いしましょう。

Michael Wallent は、Internet Explorer 担当のグループプログラムマネージャです。

ページのトップへ

ラジオ ボタン

HTML Editing Component

HTML は状況による

ラジオボタン