13 オブジェクト、画像、アプレット

目次

  1. オブジェクト、画像、アプレットの概説
  2. 画像の包含: IMG要素
  3. 一般的包含: OBJECT要素
    1. オブジェクトのレンダリング規則
    2. オブジェクトの初期化: PARAM要素
    3. オブジェクトのグローバルな命名スキーム
    4. オブジェクトの宣言とインスタンス化
  4. アプレットの包含: APPLET要素
  5. 埋め込み文書に関する注意
  6. イメージマップ
    1. クライアント側イメージマップ: MAP要素とAREA要素
    2. サーバ側イメージマップ
  7. 画像、オブジェクト、アプレットの視覚的プレゼンテーション
    1. 幅と高さ
    2. 画像及びオブジェクトの周囲の空白
    3. ボーダー
    4. 配置
  8. 代替テキストの指定方法

13.1 オブジェクト、画像、アプレットの概説

HTMLのマルチメディア機能を使うと、著者は、ページ中に、画像、アプレット(自動的にダウンロードされてユーザの機械で走るプログラム)、ビデオクリップ、外部HTML文書などを含めることができる。

例えば、文書にPNG画像を含めるために、著者は次のように書ける。

<BODY>
<P>グランドキャニオンのアップです:
<OBJECT data="canyon.png" type="image/png">
これはグランドキャニオンの<EM>アップ</EM>です。
</OBJECT>
</BODY>

以前のバージョンのHTMLでは、著者はIMG要素によって画像を含めることができ、またAPPLET要素によってアプレットを含めることができた。しかしこの2つの要素には、幾つかの限界がある。

これらの問題に対処するため、HTML 4ではOBJECT要素を導入する。 これは、あらゆる目的に適う、一般的オブジェクト包含の解決策を提供するものである。 OBJECT要素を使うと、HTML著者は、ユーザエージェントがオブジェクトをプレゼンテーションするのに必要なすべて――すなわちソースコード、初期値、実行時データ――を指定できる。 本仕様では、「オブジェクト」という語を、人々がHTML文書中に置きたいと考えるようなモノを示すために用いる。そうしたモノについて示す語としては、一般に、アプレット、プラグイン、メディアハンドラ等が使われる。

OBJECT要素は、既存の要素の働きの幾つかを受け継ぐものとなっている。 働きをまとめた、次の表を検討されたい。

含めたいもの 特定要素 一般要素
画像 IMG OBJECT
アプレット APPLET (推奨しない。) OBJECT
他のHTML文書 IFRAME OBJECT

この表は、どの形式を埋め込むにも、特殊解と一般解があるということを示している。 OBJECT要素は、将来のデータ形式を実装する場合の解決策にもなる。

画像を含めるには、著者はOBJECT要素かIMG要素のどちらを使ってもよい。

アプレットを含めるには、著者はOBJECT要素を用いるべきである。なぜならAPPLET要素は推奨されないからだ。

あるHTML文書を他のHTML文書に含めるには、著者は新登場の IFRAME要素かOBJECT要素のどちらを用いてもよい。 どちらの場合でも、埋め込まれた文書は主文書から独立した状態のままである。 視覚系ユーザエージェントは、埋め込まれた文書を、主文書中の、異なるウインドウでプレゼンテーションしてよい。 文書の埋め込みに関する OBJECT要素とIFRAME要素の比較については、埋め込み文書に関する注意の項を参照されたい。

画像及び他の埋め込みオブジェクトには、ハイパーリンクが関連づけられることもできる。そのリンクは、標準的リンク機構でも、イメージマップでもよい。 イメージマップとは、埋め込みオブジェクトに反応領域を指定し、各領域にリンクを割り当てるものである。 アクティブにされると、そのリンクは、文書の取得や、サーバでのプログラムの実行などを引き起こす。

以下の各節では、マルチメディアの埋め込みや、埋め込んだものでイメージマップを生成するために、著者が利用できる様々な機構を説明する。

13.2 画像の包含: IMG要素

<!-- To avoid problems with text-only UAs as well as 
   to make image content understandable and navigable 
   to users of non-visual UAs, you need to provide
   a description with ALT, and avoid server-side image maps -->
<!ELEMENT IMG - O EMPTY                -- Embedded image -->
<!ATTLIST IMG
  %attrs;                              -- %coreattrs, %i18n, %events --
  src         %URI;          #REQUIRED -- URI of image to embed --
  alt         %Text;         #REQUIRED -- short description --
  longdesc    %URI;          #IMPLIED  -- link to long description
                                          (complements alt) --
  name        CDATA          #IMPLIED  -- name of image for scripting --
  height      %Length;       #IMPLIED  -- override height --
  width       %Length;       #IMPLIED  -- override width --
  usemap      %URI;          #IMPLIED  -- use client-side image map --
  ismap       (ismap)        #IMPLIED  -- use server-side image map --
  >

開始タグ: 必須、終了タグ: なし

属性定義

src = uri [CT]
この属性は、画像リソースの所在を指定する。ひろく認知されている画像フォーマットの例には、GIF、JPEG、PNGなどが挙げられる。
longdesc = uri [CT]
この属性は、当該画像の長文説明へのリンクを指定する。 この説明は、alt属性を用いて提供される短い説明を、補完する必要がある。 画像がイメージマップと結び付いている場合、この属性はイメージマップの内容についての情報を提供する必要がある。 サーバ側イメージマップにおいては特に重要である。 IMG要素はA要素の内容となり得るので、ユーザエージェントの機構に関して、まず先に「長文説明」リソースへアクセスするためのユーザインターフェイス機構は、後にhref属性のリソースへアクセスするための機構とは異なっていなければならない。
name = cdata [CI]
この属性は、当該要素に名前をつけ、スタイルシートやスクリプトから参照できるようにする。 注意。 この属性は、後方互換性の目的で含まれることとなったものである。アプリケーションは、要素の識別に、id属性を用いるべきである。

別途定義がある属性

IMG要素は、現在文書中の、当該要素定義箇所に、画像を埋め込む。 IMG要素に内容はない。 通常はsrc属性が指し示す画像と行の中で置き換えられるが、左寄せや右寄せにされた画像は行の外に「浮動」する。

本書では、以前、家族写真のリンクを例示した。ここでは現在文書に写真を直接挿入することとする。

<BODY>
<P>旅行から戻りました! 湖畔での家族写真です:
<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
     alt="湖畔での家族写真">
</BODY>

この埋め込みは、OBJECT要素でも、次のように実現できる。

<BODY>
<P>休暇から戻りました! 湖畔での家族写真です:
<OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png"
        type="image/png">
湖畔での家族写真
</OBJECT>
</BODY>

alt属性は、画像が表示できない場合にのみレンダリングされる、代替テキストを指定する(これについては、後述の代替テキストの指定方法の項を見よ)。 ユーザエージェントは、画像をサポートしていないか、ある特定の画像形式をサポートしていないか、または画像を表示しないよう設定されているような場合にのみ、代替テキストを表示するようにしなければならない。

次に、longdesc属性をどう使って詳しい説明へとリンクするのかを例示する。

<BODY>
<P>
<IMG src="sitemap.gif"
     alt="HP Labのサイトマップ"
     longdesc="sitemap.html">
</BODY>

alt属性は、画像についての短い説明を提供する。 その内容は、ユーザにとって、 longdesc属性が指定する長文説明――この例では「sitemap.html」――へのリンクを辿るかどうかを判断するのに十分な内容である必要がある。

画像の大きさや、配置、ボーダーなどについては、オブジェクト、画像、アプレットの視覚的プレゼンテーションの項を参照されたい。

13.3 一般的包含: OBJECT要素

<!ELEMENT OBJECT - - (PARAM | %flow;)*
 -- generic embedded object -->
<!ATTLIST OBJECT
  %attrs;                              -- %coreattrs%i18n%events --
  declare     (declare)      #IMPLIED  -- declare but don't instantiate flag --
  classid     %URI;          #IMPLIED  -- identifies an implementation --
  codebase    %URI;          #IMPLIED  -- base URI for classid, data, archive--
  data        %URI;          #IMPLIED  -- reference to object's data --
  type        %ContentType;  #IMPLIED  -- content type for data --
  codetype    %ContentType;  #IMPLIED  -- content type for code --
  archive     CDATA          #IMPLIED  -- space-separated list of URIs --
  standby     %Text;         #IMPLIED  -- message to show while loading --
  height      %Length;       #IMPLIED  -- override height --
  width       %Length;       #IMPLIED  -- override width --
  usemap      %URI;          #IMPLIED  -- use client-side image map --
  name        CDATA          #IMPLIED  -- submit as part of form --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  >

開始タグ: 必須、終了タグ: 必須

属性定義

classid = uri [CT]
この属性は、オブジェクト実装の所在をURIで指定するために用い得る。 これは、埋め込むオブジェクトの形式に依って、dataと同時に、あるいはその代用として 用いてよい。
codebase = uri [CT]
この属性は、classid属性、data属性、及びarchive属性で指定される相対URIを解決するための基本パスを指定する。 この指定がない場合、デフォルト値は現在文書の基本URIとなる。
codetype = content-type [CI]
この属性は、 classid属性が指定するオブジェクトをダウンロードする際に想定されるMIMEタイプを指定する。 この属性は任意選択だが、classid属性を指定する際には併せて指定するよう推奨する。なぜならこれによって、サポートしていないMIMEタイプの情報をユーザエージェントがロードしないですむからである。 この指定がない場合、デフォルトではtype属性の値となる。
data = uri [CT]
この属性は、オブジェクトデータの所在をURIで指定するために用い得る。 オブジェクトデータとは、例えば画像を定めるオブジェクトにおける画像データなどであり、より一般的には、シリアル化状態のオブジェクトであって再生成に用いることができるもの、である。 この値が相対URIであった場合、codebase属性に対する相対URIとして解釈する必要がある。
type = content-type [CI]
この属性は、data属性が指定するデータのMIMEタイプを指定する。 この属性は任意選択ではあるが、data属性を指定する際には併せて指定するよう推奨する。なぜならこれによって、サポートしていないMIMEタイプの情報をユーザエージェントがロードしないですむからである。 オブジェクトを取得する際に、サーバが返すHTTP応答ヘッダのContent-Typeとこの属性の値が異なっていた場合には、HTTPのContent-Typeが優先する。
archive = uri-list [CT]
この属性は、オブジェクトに関連するリソースを含むアーカイブ群を示すURIを、空白区切りで指定するのに用いてよい。アーカイブは、classid属性やdata属性が指定するリソースを含んでいるであろう。 アーカイブを事前ロードすると、一般に、オブジェクトのロード時間短縮に繋がる。相対URIで指定されたアーカイブは、codebase属性に対する相対指定として解釈される必要がある。
declare [CI]
この論理型属性が存在する場合、当該のOBJECT定義を宣言であるのみとする。オブジェクトは、後にこの宣言を参照するOBJECT定義によってインスタンス化されねばならない。
standby = text [CS]
この属性は、オブジェクトの実装とデータをロードしている待ち時間にユーザエージェントがレンダリングし得るメッセージを指定する。

別途定義がある属性

ほとんどのユーザエージェントは、 テキスト、GIF画像、色、フォント、その他幾つかのグラフィック要素などの、一般的データ形式をレンダリングするための内部機構を備えている。 自前ではサポートしていないデータ形式をレンダリングするために、ユーザエージェントは一般に、外部アプリケーションを走らせる。 OBJECT要素を使うと、著者は、データを外部的にレンダリングすべきなのか、著者が指定するプログラムによってユーザエージェント内でレンダリングすべきなのかを制御できる。

一般的には、著者は次の3種類の情報を指定する必要があるであろう。

OBJECT要素を使うと、著者は、この3種のデータすべてを指定できる。 しかし、著者が3つを一度に指定する必要がない場合もあるであろう。 例えば、データ自体を含んでいてちょっとしたアニメーションとして働くアプレットなど、オブジェクトによってはデータを必要としないものもあるだろう。 また、実行時の初期化を必要としないものもあるだろう。 更に、GIF画像などのようにユーザエージェント自身にとって当該データ形式のレンダリング方法が既知であるために、実装情報の追加が不用であるような場合もあるであろう。

著者は、オブジェクト実装とレンダリング対象データの所在をOBJECT要素によって指定する。 一方、実行時の値を指定するのに、著者はPARAM要素を用いる。 これについてはオブジェクトの初期化の項で説明する。

OBJECT要素は、HEAD要素の内容として出現し得る。 ユーザエージェントは一般にHEADにある要素をレンダリングしないので、著者は、HEADにあるすべてのOBJECT要素について、レンダリングされるような内容を持たせないようにする必要がある。 HEAD要素中に OBJECT要素を含ませる例については、フレームデータの共有の項を参照されたい。

フォーム中のOBJECT要素については、フォームのコントロールに関する項を参照されたい。

本仕様は、実装を識別するためのclassid属性と、実装に渡すデータを指定するdata属性とを同じOBJECT要素で指定する場合の挙動は規定しない。 移植性を高めるため、著者は、追加データを取得できる場所を実装に示すには、PARAM要素を用いる必要がある。

13.3.1 オブジェクトのレンダリング規則

ユーザエージェントは、次の優先規則にしたがってOBJECT要素を解釈しなければならない。

  1. ユーザエージェントは、まずオブジェクトのレンダリングを試みねばならない。 要素の内容をレンダリングしないようにする必要があるが、直接の子要素に PARAM要素(オブジェクトの初期化参照)あるいはMAP要素(クライアント側イメージマップ参照)がないかどうかについて、要素の内容を検証しなければならない。
  2. 設定、リソースの欠落、誤った設計など、何等かの理由によってオブジェクトをレンダリングできない場合、ユーザエージェントは、要素内容のレンダリングを試みねばならない。

著者は HEAD要素中に出現するOBJECT要素には、内容を含めないようにする必要がある。

次の例では、OBJECT要素によってアナログ時計のアプレットが文書に埋め込まれている。このアプレットは、Python言語で書かれており、追加的データや実行時の値を必要としない。 classid属性で、アプレットの所在が指定されている。

<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
</OBJECT>

この時計は、ユーザエージェントが当該のOBJECT宣言を解釈するとすぐにレンダリングされるという点に注意されたい。 オブジェクトのレンダリングを、当該オブジェクトの最初の宣言よりも遅延させることも可能である。これについては後述する。

著者は、ユーザエージェントが時計をレンダリングできない場合のためにOBJECT要素の内容として代替テキストを記し、上記の宣言を完成させる必要がある。

<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
アニメーションする時計。
</OBJECT>

OBJECT要素の重要な設計目標の1つに、代替オブジェクトレンダリングを指定するための機構を提供することが挙げられる。 埋め込まれるOBJECT宣言は、どれも、代替オブジェクトを指定し得る。 最も外側のOBJECTをレンダリングできない場合、ユーザエージェントは、内容のレンダリングを試みるが、その内容が別のOBJECT要素等であっても構わないのである。

次に、代替レンダリングの働きを説明するために、複数のOBJECT宣言を埋め込んだ例を示す。 ユーザエージェントは、次の順番で、自分がレンダリングできる最も最初のOBJECT要素をレンダリングしようと試みる。 (1) Python言語で書かれた地球アプレット。 (2) 地球のMPEGアニメーション。 (3) 地球のGIF画像。 (4) 代替テキスト。

<P>                 <!-- 最初にPythonアプレットに挑戦 -->
<OBJECT title="宇宙から見た地球" 
        classid="http://www.observer.mars/TheEarth.py">
                    <!-- 次にMPEGビデオに挑戦 -->
  <OBJECT data="TheEarth.mpeg" type="application/mpeg">
                    <!-- 次にGIF画像に挑戦 -->
    <OBJECT data="TheEarth.gif" type="image/gif">
                    <!-- だめならテキストをレンダリングする -->
     宇宙から見た<STRONG>地球</STRONG>。
    </OBJECT>
  </OBJECT>
</OBJECT>

最も外側の宣言は、データや初期値を必要としないアプレットを指定している。 2番目の宣言は、MPEGアニメーションを指定しており、MPEGを処理する実装の所在を定めていないので、アニメーションが処理されるかどうかはユーザエージェントに依存する。 ここではtype属性も指定し、MPEGをレンダリングできないユーザエージェントがネットワークからTheEarth.mpegを取得しなくてすむようにしてある。 3番目の宣言はGIFファイルの所在を指定し、更に全ての機構が働かなかった場合のための代替テキストを含んでいる。

行内データ対外部データ。 レンダリング対象のデータは、行内あるいは外部リソースの、2つの方法で供給され得る。 行内の場合は概してレンダリングが早いが、大量のデータをレンダリングするには不便である。

次に、どのように行内データをOBJECTに供給するのかを例示する。

<P>
<OBJECT id="clock1"
        classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="data:application/x-oleobject;base64, …base64のデータ…">
    時計。
</OBJECT>

オブジェクトの大きさ、配置、ボーダーについては、オブジェクト、画像、アプレットの視覚的プレゼンテーションの項を参照されたい。

13.3.2 オブジェクトの初期化: PARAM要素

<!ELEMENT PARAM - O EMPTY              -- named property value -->
<!ATTLIST PARAM
  id          ID             #IMPLIED  -- document-wide unique id --
  name        CDATA          #REQUIRED -- property name --
  value       CDATA          #IMPLIED  -- property value --
  valuetype   (DATA|REF|OBJECT) DATA   -- How to interpret value --
  type        %ContentType;  #IMPLIED  -- content type for value
                                          when valuetype=ref --
  >

開始タグ: 必須、終了タグ: なし

属性定義

name = cdata
この属性は、親オブジェクトによって理解されると考えられる、実行時パラメータの名前を定める。 プロパティ名に大文字小文字の区別があるかどうかは、個々のオブジェクト実装に依存する。
value = cdata
この属性は、name属性が指定する実行時パラメータの、値を指定する。 このプロパティ値はHTMLに対しては意味を持たず、オブジェクトからの問い合せによって意味が定まる。
valuetype = data|ref|object [CI]
この属性は、value属性の型を指定する。可能な値は次の通り。
  • data: この属性のデフォルト値である。 value属性で指定された値が、文字列として評価されオブジェクト実装に渡されるということを意味する。
  • ref: value属性で指定された値が、実行時値を保存しているリソースのURIであることを意味する。 これにより、対応ツールは、与えられたURIをパラメータであると識別できる。 URIは、オブジェクトに対してあるがままで、すなわち解決されずに渡される必要がある。
  • object: value属性で指定された値が、同一文書にあるOBJECT宣言を参照する識別子であることを意味する。 この識別子は、宣言されたOBJECT要素に設定されているid属性の値と同値である必要がある。
type = content-type [CI]
この属性は、valuetype属性が"ref"に設定されている場合にのみvalue属性が指し示すリソースのMIMEタイプを指定する。 従ってこの属性の値は、その型のリソースが、value属性が指し示すURIで発見されることをユーザエージェントに示す。

別途定義がある属性

PARAM要素は、オブジェクトが実行時に必要とするような値の集合を指定する。 1つのOBJECT要素または APPLET要素の内容に、PARAM要素は幾つ出現してもよく、どんな順序であってもよいが、これを包含するOBJECT要素あるいはAPPLET要素の、内容の先頭部分に置かれていなければならない。

名前及び値の構文は、オブジェクト実装によって理解されるものと仮定する。本仕様は、ユーザエージェントが名前/値の組をどのように取得する必要があるかについても、また二度出現するパラメータ名をどのように解釈すべきかについても、規定しない。

次に、再度時計の例を用いて、PARAM要素の用法を示す。 ここでは、アプレットが、その初期の高さと幅という2つの実行時パラメータを処理できるものと仮定する。 この場合、2つのPARAM要素を用いて、初期サイズを40×40ピクセルに指定できる。

<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
御利用のユーザエージェントはPythonアプリケーションをレンダリングできません。
</OBJECT>

次の例では、オブジェクトの"Init_values"パラメータの実行時データが、外部リソースであるGIFファイルに指定されている。 そこで、valuetype属性の値が"ref"に設定され、かつvalue属性がリソースを指し示すURIとなっている。

<P><OBJECT classid="http://www.gifstuff.com/gifappli"
       standby="エルヴィスをロード中">
<PARAM name="Init_values"
       value="./images/elvis.gif">
       valuetype="ref">
</OBJECT>

ここで、レンダリング機構をロードしている間にユーザエージェントがメッセージを表示できるよう、standby 属性をも設定していることに、注意されたい。

OBJECT要素をレンダリングする際、ユーザエージェントは直接の子要素であるPARAM要素のみを狙って検索し、パラメータをOBJECTに送らねばならない。

従って、次の例では、"obj1"がレンダリングされる際には"param1"が"obj1"に適用され、"obj2"には供給されない。 また"obj1"がレンダリングされずに"obj2"がレンダリングされる場合は"param1"は無視され"param2"が"obj2"に適用される。 どちらのOBJECTもレンダリングされない場合は、どちらのPARAMも適用されない。

<P>
<OBJECT id="obj1">
   <PARAM name="param1">
   <OBJECT id="obj2">
      <PARAM name="param2">
   </OBJECT>
</OBJECT>

13.3.3 オブジェクトのグローバルな命名スキーム

オブジェクト実装の所在は、URIで与えられる。 URIの概説の項で説明した通り、絶対URIの最初の部分はそのURIが指し示すデータの転送に用いる命名スキームを指定する。 HTML文書の場合、スキームは大概「http」である。 アプレットによっては他の命名スキームを採用するものもあるであろう。 例えば、Javaアプレットを指定する場合、著者は「java」で始まるURIを用いてもよく、ActiveXアプレットの場合は「clsid」を用いてよい。

次の例では、JavaアプレットがHTML文書に埋め込まれている。

<P><OBJECT classid="java:program.start">
</OBJECT>

codetype属性を設定することで、ユーザエージェントは、自身にJavaアプリケーションを扱う能力があるかないかによって取得するかどうかを決定できるようになる。

<OBJECT codetype="application/java-archive"
        classid="java:program.start">
</OBJECT>

レンダリング方式によっては、実装を識別する追加情報と、それがどこで得られるかを知らされねばならないようなものもある。著者はオブジェクト実装に対して、codebase属性を通じてパス情報を知らせることができる。

<OBJECT codetype="application/java-archive"
        classid="java:program.start">
        codebase="http://foooo.bar.com/java/myimplementation/"
</OBJECT>

次の例では、classid属性で、clsid命名スキームで始まるURIによってActiveXオブジェクトの所在を指定している。 data属性は、レンダリングすべきデータ(他の時計)の所在を定めている。

<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="http://www.acme.com/ole/clock.stm">
このアプリケーションはサポートされていません。
</OBJECT>

13.3.4 オブジェクトの宣言とインスタンス化

ここまでの例では、単独のオブジェクト定義のみを説明してきた。 仮に文書が1つのオブジェクトの複数のインスタンスを含む場合、オブジェクトの宣言とインスタンス化を分離することが可能である。 宣言と実体化の分離には、幾つかの利点がある。

あるオブジェクトの宣言で、ユーザエージェントの読み込み時点で即実行されることを避けるためには、論理型属性のdeclareOBJECT要素に設定する。 同時に、著者は、OBJECT要素のid属性を一意な値に設定し、当該宣言を識別しなければならない。 後にオブジェクトをインスタンス化する際に、この識別子が参照される。

宣言されるだけのOBJECT要素は、最初のOBJECTインスタンスよりも前に、文書に出現しなければならない。

declare属性を伴って定義されるオブジェクトは、当該オブジェクトを参照する要素がオブジェクトのレンダリングを要求する度に、インスタンス化される。 そうした要求は、例えばオブジェクトを参照するリンクがアクティブにされたり、当該オブジェクトを参照する他のオブジェクトがアクティブになったりすることで、生じる。

次の例で宣言しているOBJECTは、リンクによって参照されることでインスタンス化される。 そこで、強調されているテキストをクリックすることなどによって、このオブジェクトはアクティブになる。

<P><OBJECT declare
        id="earth.declaration" 
        data="TheEarth.mpeg" 
        type="application/mpeg">
   宇宙から見た<STRONG>地球</STRONG>。
</OBJECT>
…中略…
<P>イケてる<A href="#earth.declaration">地球のアニメーション!</A>

次の例は、実行時の値として他のオブジェクトを指定する方法を示す。 この例では、詩であるテキストを詩文閲覧用の仮設的機構に送っている。 詩テキストを特定のフォントでレンダリングするため、このオブジェクトは、「font」と命名された実行時パラメータを認識する。 このパラメータ値は、それ自体が1つのオブジェクトであり、フォントオブジェクトを挿入する(ただしレンダリングはしない)ものである。 フォントオブジェクトと詩文閲覧オブジェクトの間の連携は、 (1) id属性値 "tribune" をフォントオブジェクト宣言に割り当て、 (2) referring to it from the 詩文閲覧オブジェクトのPARAM要素から、valuetype属性とvalue属性を用いてidを参照することで、実現される。

<P><OBJECT declare
     id="tribune"
     type="application/x-webfont"
     data="tribune.gif">
</OBJECT>
…ここで【S.T. Coleridgeの】KublaKhan.txtからの詩文を表示…
<P><OBJECT classid="http://foo.bar.com/poem_viewer" 
           data="KublaKhan.txt">
<PARAM name="font" valuetype="object" value="#tribune">
<P>このステキな詩文閲覧装置が得られないんですね…。
</OBJECT>

declare属性をサポートしないユーザエージェントは、OBJECT宣言の内容をレンダリングしなければならない。

13.4 アプレットの包含: APPLET要素

APPLET要素は、そのすべての属性と共に、推奨しない。代わりに OBJECTの利用が望ましい。

正式な定義については移行型DTDを参照のこと。

属性定義

codebase = uri [CT]
この属性は、アプレットの基本URIを指定する。 この属性の指定がない場合、デフォルトは現在文書の基本URIと等しくなる。 この属性の値は、現在文書が含まれているディレクトリのサブディレクトリまでしか参照し得ない。 注意。 サブディレクトリ制限は、一般的慣習やHTML 3.2仕様からは逸脱している。しかしHTML作業グループは、セキュリティ上の理由から、このバージョンの仕様には制約を残すこととした。
code = cdata [CS]
この属性は、当該アプレットの、コンパイル済サブクラスを含むクラスファイル名、あるいはクラスファイル自体を含むクラスを取得するためのパス名の、どちらかを指定する。 この値は、当該アプレットのcodebaseで指定された基本URIに基づいて解釈される。 code属性かobject属性のどちらか一方が存在しなければならない。
name = cdata [CS]
この属性は、アプレットインスタンスの名前を指定する。 これによって、同じページにあるアプレット同志が互いを発見しあい、連携することが可能になる。
archive = uri-list [CT]
この属性は、クラスや「事前読み込み」するリソースが含まれているアーカイブのURIを、コンマ区切りリストで指定する。 各クラスは、所定のcodebaseに基づき、AppletClassLoaderインスタンスを用いてロードされる。 アーカイブの相対URIは、当該アプレットのcodebase属性で解決される。 リソースの事前読み込みは、アプレットの動作効率を非常に向上させることができる。
object = cdata [CS]
この属性は、アプレットのある状態の直列化表現を含むリソースを命名する。この名前はcodebase属性との関連づけによって解釈される。 直列化データは、アプレットのクラス名は含むが実装は含まない。 クラス名は、クラスファイルあるいはアーカイブから当該実装を取得するために使われる。

アプレットが「復元」される際、start()メソッドは呼び出されるが、init()メソッドは呼び出されない。 元のオブジェクトが直列化される時に有効だった属性は、リストアされない。 当該APPLETインスタンスに渡されるどんな属性も、このアプレットで利用できる。 この特徴を用いる際に、著者は最大限の注意を払う必要がある。 直列化する際にはアプレットは停止しておくべきである。

code属性かobject属性のどちらか一方が存在しなければならない。 もしcode属性とobject属性の両方があった際は、双方が異なるクラス名を提供する場合のみがエラーである。

width = length [CI]
この属性は、アプレットの表示領域の初期幅を指定する。アプレットが生成するウインドウやダイアログは除く。
height = length [CI]
この属性は、アプレットの表示領域の初期の高さを指定する。アプレットが生成するウインドウやダイアログは除く。

別途定義がある属性

Java対応ブラウザのすべてがサポートしているこの要素を使うと、設計者は、HTML文書にJavaアプレットを埋め込むことができる。 この要素は推奨しないこととし、代わりにOBJECT要素を奨める。

APPLET要素の内容は、アプレットをサポートしていないユーザエージェントや、サポートしないよう設定されているユーザエージェントに対する、代替情報として働く。 それ以外のユーザエージェントは、内容を無視しなければならない。

推奨しない例:
次の例では、APPLET要素がJavaアプレットを文書に埋め込んでいる。 codebase属性が与えられていないので、このアプレットは現在文書と同じディレクトリにあると仮定される。

<APPLET code="Bubbles.class" width="500" height="500">
泡が動き回るJavaアプレットアニメーション。
</APPLET>

上の例は、OBJECT要素によって次にように書き直せる。

<P><OBJECT codetype="application/java"
        classid="java:Bubbles.class"
        width="500" height="500">
泡が動き回るJavaアプレットアニメーション。
</OBJECT>

アプレットの初期値は、PARAM要素で与え得る。

推奨しない例:
前者のJavaアプレット例は:

<APPLET code="AudioItem" width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
歓迎の音楽を奏でるJavaアプレット。
</APPLET>

OBJECT要素で次のように書き換え得る:

<OBJECT codetype="application/java"
        classid="AudioItem" 
        width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
歓迎の音楽を奏でるJavaアプレット。
</OBJECT>

13.5 埋め込み文書に関する注意

著者は、他の文書にリンクするのではなく、元HTML文書に直接埋め込みたいと考えることもあるであろう。 そうした目的に、著者は IFRAME要素かOBJECT要素のどちらを用いてもよいが、両要素には幾つか異なる点がある。 両者の内容モデルが異なるだけでなく、 IFRAME要素は目標フレーム(詳しくは目標フレーム情報の指定の項を参照せよ)となることができ、さらにユーザエージェントによって印刷やHTMLソース表示等のフォーカス対象として「選択する」こともできる。 ユーザエージェントは、例えば選択フレームの周囲にボーダーを描くなどして、選択したフレーム要素と選択されないフレームとを区別するようにレンダリングするであろう。

埋め込み文書は、それを含む元文書とは完全に独立している。 例えば、埋め込み文書の相対URIは、元文書の基本URIではなく埋め込み文書の基本URIを用いて解決される。 埋め込み文書は、単に子ウインドウなどで他の文書の中にレンダリングされるだけであり、他の点では独立した存在なのである。

例えば、次は、OBJECT定義がある位置にembed_me.htmlの内容を埋め込むものである。

…前略…
<OBJECT data="embed_me.html">
注意: embed_me.html を埋め込めません。
</OBJECT>
…後略…

OBJECT要素の内容が、data属性で指定されるデータがロードできない場合に限ってレンダリングされねばならないという点を、思い起こされたい。

当該文書ファイル自体が自分自身に埋め込まれているケースを扱うユーザエージェントの挙動は、規定しない。

13.6 イメージマップ

イメージマップを使うと、著者は、画像やオブジェクトに複数領域を指定し、各領域に対して、文書の取得やプログラムの実行などの動作を指定することができる。 領域がユーザによってアクティブにされると、その動作が始まる。

イメージマップは、オブジェクトに対して当該オブジェクト上の反応可能領域指定を関連づけることによって生成される。

イメージマップには次の2種類がある。

クライアント側イメージマップの方が、サーバ側イメージマップよりも、少なくとも次の2点で優れている。 まず、非グラフィック系ユーザエージェントでブラウズしている人々にとってもアクセス性がよい点。そして、ポインタが反応領域上にあってもなくても即座に結果が返る点である。

13.6.1 クライアント側イメージマップ: MAP要素とAREA要素

<!ELEMENT MAP - - ((%block;) | AREA)+ -- client-side image map -->
<!ATTLIST MAP
  %attrs;                              -- %coreattrs%i18n%events --
  name        CDATA          #REQUIRED -- for reference by usemap --
  >

開始タグ: 必須、終了タグ: 必須

<!ELEMENT AREA - O EMPTY               -- client-side image map area -->
<!ATTLIST AREA
  %attrs;                              -- %coreattrs%i18n%events --
  shape       %Shape;        rect      -- controls interpretation of coords --
  coords      %Coords;       #IMPLIED  -- comma-separated list of lengths --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  nohref      (nohref)       #IMPLIED  -- this region has no action --
  alt         %Text;         #REQUIRED -- short description --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >

開始タグ: 必須、終了タグ: なし

MAP要素の属性定義

name = cdata [CI]
この属性は、MAP要素で定義されるイメージマップに名前を割り当てる。

AREA要素の属性定義

shape = default|rect|circle|poly [CI]
この属性は、領域の形状を指定する。取り得る値は次の通り。
  • default: 領域全体を指定する。
  • rect: 長方形の領域を定める。
  • circle: 円形の領域を定める。
  • poly: 多角形の領域を定める。
coords = coordinates [CN]
この属性は、スクリーン上の位置と形状を指定する。値の数と順序は、定義された形状が何であるかに依存する。可能な組合わせは次の通り。
  • rectの場合: left-x、top-y、right-x、bottom-y【左端のx座標、上橋のy座標、右端のx座標、下端のy座標】。
  • circleの場合: center-x、center-y、radius【中心のx座標、中心のy座標、半径】。 注意。 半径の値がパーセント指定であった場合、ユーザエージェントは、最終的な半径の値を、対応するオブジェクトの幅と高さから求める必要がある。半径は、幅か高さのどちらか小さい方【の2分の1】にする必要がある。
  • polyの場合: x1、y1、x2、y2、…、xN、yN【各頂点のxy座標組】。 多角形を閉じるために、最初のxy座標組と最後の組は、等しい必要がある。 各々が異なる値である場合、ユーザエージェントは、多角形を閉じるための追加的座標組を推定する必要がある。

座標は、オブジェクトの左上隅からの相対値とする。すべての値は長さである。 値はすべて、コンマで区切る。

nohref [CI]
この論理型属性を設定した場合、当該領域が関連リンクを持たないことを指定する。

ある要素をイメージマップに関連づける属性

usemap = uri [CT]
この属性は、これが設定された要素と、イメージマップとを関連づける。イメージマップはMAP要素で定義される。 usemap属性の値は、関連づけられるMAP要素のname属性値に合致しなければならない。

別途定義がある属性

MAP要素は、他の要素と関連づけられる、クライアント側イメージマップ(あるいは他のナビゲーション機構)を指定する。関連づけられる要素は、IMGOBJECTINPUTである。 イメージマップは、 usemap属性を通じて他と関連づけられる。 MAP要素は、画像との関連抜きで、一般的ナビゲーション機構として用いてもよい。

あるOBJECT要素にusemap属性が存在している場合、それはこの要素に画像が含まれていることを暗示している。 さらにまた、このOBJECT要素がクライアント側イメージマップと連携している場合、ユーザエージェントは、クライアント側イメージマップだけを用いて、ユーザとOBJECTとの対話を実装してよい。 これによって、音声ブラウザやロボットなどのユーザエージェントは、OBJECTとの対話を、OBJECTの処理抜きで実現でき、更にユーザエージェントはオブジェクトを取得したり処理したりしないと決断してもよい。 OBJECTとイメージマップが連携している場合、著者は、すべてのユーザエージェントが当該オブジェクトを取得したり処理したりするとは期待しないようにすべきである。

MAP要素の内容モデルは、著者に対し、次のどれかを含むことを許容する。

  1. 1つ以上のAREA要素。 この要素に内容はないが、イメージマップの区割りと、各領域に関連づけるリンクとを指定する。 ユーザエージェントは一般にAREA要素をレンダリングしない点に注意されたい。 したがって、著者は各AREA要素についてalt属性で代替テキストを指定しなければならない(後述の代替テキストの指定方法の項を参照のこと)。
  2. ブロックレベルの内容。 この内容には、イメージマップの区割りと、各領域に関連づけるリンクとを指定するA要素が含まれている必要がある。 ユーザエージェントはMAP要素のブロックレベル内容をレンダリングする必要があるという点に注意されたい。 著者は、よりアクセス性が高い文書を生成するために、こちらの手法を用いるべきである。

1つのMAP要素が混合内容、すなわちAREA要素及びブロックレベル内容の両方を含む場合、ユーザエージェントは、AREA要素を無視しなければならない。

著者は、イメージマップの区割りを、AREA要素で完成させるか、A要素で完成させるか、または混合内容の場合はその両方で完成させる必要がある。 著者は、古いユーザエージェントが AREA要素で指定される区割りを扱い、新しいユーザエージェントが機能豊富なブロック内容の扱いに長けていることから、混合内容を用いたいと考えるであろう。

2つ以上の区割りが重なり合っている場合、文書中で最も早く出現する領域定義要素が優先し、ユーザ入力に反応する。

ユーザエージェント及び著者は、グラフィックが得られない場合やユーザエージェントがグラフィックにアクセスできない場合のために、グラフィック系イメージマップに関する代替テキスト内容を提供する必要がある。 例えば、ユーザエージェントは、altテキストを用いてグラフィック系イメージマップの位置にテキストリンクを生成してよい。 こうしたリンクは、キーボード入力や音声入力など、様々な方法でアクティブにできる。

注意 MAPには、HTML 2.0ユーザエージェントとの後方互換性はない。

クライアント側イメージマップの例 

次の例では、OBJECT要素に対応するクライアント側イメージマップが生成されている。 OBJECT要素がレンダリングされる場合にはイメージマップの内容をレンダリングさせたくないので、OBJECT要素の中に MAP要素を「隠して」いる。 言い換えると、MAP要素の内容は、OBJECTがレンダリングできない場合にのみレンダリングされる。

<HTML>
   <HEAD>
      <TITLE>クールなサイト!</TITLE>
   </HEAD>
   <BODY>
     <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
     <MAP name="map1">
       <P>このサイトの構成:
       <A href="guide.html" shape="rect" coords="0,0,118,28">利用案内</a> |
       <A href="shortcut.html" shape="rect" coords="118,0,184,28">直行</A> |
       <A href="search.html" shape="circle" coords="184,200,60">検索</A> |
       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">トップ10</A>
     </MAP>
     </OBJECT>
   </BODY>
</HTML>

OBJECTがレンダリングされる場合であってもイメージマップの内容をレンダリングさせたいと望むこともあるであろう。 例えば、OBJECT要素とイメージマップを連携させつつ、同時にページの冒頭と末尾にテキストのナビゲーションバーを配置したいといった場合である。 この目的により、次の例では、MAP要素をOBJECTの外で定義している。

<HTML>
   <HEAD>
      <TITLE>クールなサイト!</TITLE>
   </HEAD>
   <BODY>
     <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
     </OBJECT>

     …この他のページ内容…

     <MAP name="map1">
       <P>このサイトの構成:
       <A href="guide.html" shape="rect" coords="0,0,118,28">利用案内</a> |
       <A href="shortcut.html" shape="rect" coords="118,0,184,28">直行</A> |
       <A href="search.html" shape="circle" coords="184,200,60">検索</A> |
       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">トップ10</A>
     </MAP>
   </BODY>
</HTML>

次の例では、上と同等のイメージマップを、AREA要素を用いて生成している。 altテキストの用法に注意されたい。

<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
   <P>ナビゲーションバー。
   </OBJECT>

<MAP name="map1">
 <AREA href="guide.html" 
          alt="利用案内" 
          shape="rect" 
          coords="0,0,118,28">
 <AREA href="search.html" 
          alt="検索" 
          shape="rect" 
          coords="184,0,276,28">
 <AREA href="shortcut.html" 
          alt="直行" 
          shape="circle"
          coords="184,200,60">
 <AREA href="top10.html" 
          alt="トップ10" 
          shape="poly" 
          coords="276,0,276,28,100,200,50,50,276,0">
</MAP>

今度は、これまでと同じMAP宣言を用い、OBJECT要素の代わりにIMG要素を使用する類例を示す。

<P><IMG src="navbar1.gif" usemap="#map1" alt="ナビゲーションバー">

次の例では、イメージマップの共有方法を示す。

入れ子のOBJECT要素は、ユーザエージェントが特定データ形式をサポートしていない場合の代替手段を提供するのに有用である。

<P>
<OBJECT data="navbar.png" type="image/png">
  <OBJECT data="navbar.gif" type="image/gif">
    …画像を説明するテキスト…
  </OBJECT>
</OBJECT>

ユーザエージェントがPNG形式をサポートしていない場合、GIF画像のレンダリングを試みる。例えば音声出力ユーザエージェントなど、GIFもサポートしていない場合、内側のOBJECT要素の内容として提供されているテキスト記述をデフォルトとする。 OBJECT要素がこのように入れ子にしてある場合、著者はイメージマップを次のように共有させられる。

<P>
<OBJECT data="navbar.png" type="image/png" usemap="#map1">
  <OBJECT data="navbar.gif" type="image/gif" usemap="#map1">
     <MAP name="map1">
     <P>このサイトの構成:
      <A href="guide.html" shape="rect" coords="0,0,118,28">利用案内</a> |
      <A href="shortcut.html" shape="rect" coords="118,0,184,28">直行</A> |
      <A href="search.html" shape="circle" coords="184,200,60">検索</A> |
      <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">トップ10</A>
     </MAP>
  </OBJECT>
</OBJECT>

次の例は、イメージマップの反応不能領域を生成する目的で、どのようにアンカーを指定し得るかを説明している。 最初のアンカーは、関連リンクを持たない小さな円形領域を指定している。 2番目のアンカーは、中心が等しい、大きな円形領域を指定している。 この両者によって、中心部が反応不能で周辺部が反応可能となっている環状領域が形成される。 小さい円で大きい円を上書きしなければならないので、アンカー定義の順序が重要である。

<MAP name="map1">
<P>
<A shape="circle" coords="100,200,50">反応しません。</A>
<A href="outer-ring-link.html" shape="circle" coords="100,200,250">反応します。</A>
</MAP>

同様に、AREA要素のnohref属性は、当該領域に関連リンクがないことを宣言する。

13.6.2 サーバ側イメージマップ

サーバ側イメージマップは、クライアント側イメージマップで扱うにはイメージマップがあまりに複雑であるような場合に魅力的な手段となるであろう。

サーバ側イメージマップを定義できるのは、IMG要素とINPUT要素だけである。 IMG要素の場合はA要素中になければならず、かつ論理型属性のismap ([CI])が設定されていなければならない。 INPUT要素の場合は、そのtype属性が"image"でなければならない。

ユーザが画像をクリックしてリンクをアクティブにすると、文書が存在するサーバへとスクリーン座標が直接送られる。 スクリーン座標は画像に相当するスクリーンピクセル値として表現される。 ピクセル及びその計測方法に関する規範的情報は、[CSS1]を参照されたい。

次の例では、反応可能領域がサーバ側リンクを定めている。 そこで、画像のどこをクリックしても、クリック地点の座標がサーバに送られる。

<P><A href="http://www.acme.com/cgi-bin/competition">
        <IMG src="game.gif" ismap alt="狙撃地点"></A>

クリック地点は、次のようにしてサーバに渡される。 ユーザエージェントは、A要素のhref属性が指定するURIに、「?」、「x座標」、「,」、「y座標」の順で付け足した、新しいURIを導き出す。 この新しいURIに基づいて、リンクが辿られる。 例えば上の例で、ユーザがx=10でy=27の地点をクリックしたとすると、導き出されるURIは「http://www.acme.com/cgi-bin/competition?10,27」である。

例えば非グラフィック系ユーザエージェントでキーボード入力に依存しているとか、音声ベースのユーザエージェントなど、ユーザに対して特定座標を選ぶ手段を提供しないユーザエージェントは、リンクがアクティブにされた際に、座標「0,0」をサーバに送る必要がある。

13.7 画像、オブジェクト、アプレットの視覚的プレゼンテーション

IMG要素とOBJECT要素の、視覚的配置及びプレゼンテーションに関する属性は、推奨しないこととなった。スタイルシートを奨める。

13.7.1 幅と高さ

属性定義

width = length [CN]
画像・オブジェクトの幅を上書きする。
height = length [CN]
画像・オブジェクトの高さを上書きする。

指定されている場合、 width属性とheight属性は、ユーザエージェントに対し、画像やオブジェクトの本来の幅や高さを指定値で上書きするよう指示する。

オブジェクトが画像である場合、これは伸縮される。ユーザエージェントはオブジェクトあるいは画像を、著者が指定する幅や高さに合致するよう伸縮させるのに最善を尽くす必要がある。 ここで、大きさがパーセントで指定されていた場合、これが、画像、オブジェクト、アプレットの元々の大きさに対する比率ではなく、利用可能な垂直・水平方向の空間に対する比率であることに、注意されたい。

height属性とwidth属性は、ユーザエージェントに対して画像やオブジェクトの大きさに関する概念を知らせるので、ユーザエージェントは画像やオブジェクトに割り当てる空間を予約し、そのデータが届くのを待っている間も文書のレンダリングを継続できる。

13.7.2 画像及びオブジェクトの周囲の空白

属性定義

hspace = pixels [CN]
推奨しない この属性は、 IMGAPPLETOBJECT要素の、左右に挿入すべき空白の量を指定する。 デフォルト値は規定しないが、一般に、ゼロではない小さい大きさである。
vspace = pixels [CN]
推奨しない この属性は、 IMGAPPLETOBJECT要素の、上下に挿入すべき空白の量を指定する。 デフォルト値は規定しないが、一般に、ゼロではない小さい大きさである。

13.7.3 ボーダー

画像あるいはオブジェクトは、ボーダーで囲ってもよい。例えばユーザによって指定された場合や、画像がA要素の内容である場合など。

属性定義

border = pixels [CN]
推奨しない。 この属性は、IMG要素あるいはOBJECT要素のボーダーの幅を、ピクセルで指定する。 デフォルト値はユーザエージェントに依存する。

13.7.4 配置

属性定義

align = bottom|middle|top|left|right
推奨しない この属性は、IMGOBJECTAPPLET要素の、周囲の文脈に対する位置取りを指定する。

次のalign属性値は、周囲のテキストとオブジェクトとの位置に関係する。

残りの値であるleftrightは、オブジェクトを現在の左あるいは右マージンへ浮動させる。 これについては浮動オブジェクトの項で説明する。

配置解釈の違い。 ユーザエージェント間には、alignの解釈に違いがある。 あるものは当該要素の前にあるテキストの行しか考慮せず、あるものは当該要素の前後両方のテキストを考慮する。

13.8 代替テキストの指定方法

属性定義

alt = text [CS]
この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、代替テキストを指定する。代替テキストの言語は、lang属性で指定する。

非テキスト系の要素である、IMGAREA APPLETINPUT要素は、著者に対し、当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。 代替テキストを指定すると、グラフィックディスプレイ端末がないユーザ、フォーム非対応のブラウザを使っているユーザ、視覚障害のあるユーザ、音声合成装置のユーザ、グラフィック系ユーザエージェントを画像を表示しない設定で使っているユーザ、等の助けになる。

alt属性は、IMG要素とAREA要素では必ず指定しなければならない。 INPUT要素とAPPLET要素では任意選択である。

代替テキストは非常に役立つものであり得るが、取り扱いには注意しなければならない。著者は次の指針を守る必要がある。

実装者は、代替テキストが欠落しているケースをどう扱うかについて、アクセス性の項を参照する必要がある。


訳者代表: 内田明 (UCHIDA Akira)
email: uchida@happy.email.ne.jp