Of ChaichanPapa-World !

Home/Menu

ストリクトなHTMLの基礎講座

オブジェクト要素の概説

◆ はじめに

本ページは、イマイチ謎の要素、オブジェクト要素をいろいろ調べてみました。
しかし、まだ、本質には、とどいていません。徐々に迫っていきます。ご期待ください。

まずは、オブジェクト要素/属性の説明です。

尚、2002/04/28現在、IEでのオブジェクト要素は、ActiveX専用要素と思ってください。他の用途では使わない方が無難です。(経験上から...ブラウザどころかOSが...)

◆ オブジェクト要素/属性の説明

画像、動画、サウンド、アプレット、ActiveX、各種プラグインデータ、テストデータ、CSVデータ、 他のHTML文書等をマークアップする要素です。

まずは、インライン要素で、object要素中に別のobject要素を含める事が出来ます。外側のobject要素の記述が優先して実行され、中のobject要素の記述は外の記述が実行出来ない場合の代りに用いられます(だからalt属性やonobject要素は存在しない)。また、属性は以下の通りです。

オブジェクト要素の属性

data属性
オブジェクトとして配置するデータのURIを指定します。
type属性
data属性で指定されたデータのMIMEタイプを指定します。
classid属性
実行プログラムのURIを指定します。ちなみに、JavaAppletのスキーム名は、「Java:」です。
codetype属性
classid属性で指定された実行プログラムのMIMEタイプを指定します。
archive属性
オブジェクトに関連するアーカイブのURIを指定します。
codebase属性
data属性、classid属性、archive属性で相対URIが指定したときの基準となるURIを指定します。
width属性
オブジェクトの幅を「ピクセル数」または、「%」で指定します。
height属性
オブジェクトの高さを「ピクセル数」または、「%」で指定します。
usemap属性
map要素のname属性で指定されている名前のURIを指定して、画像にクライアントサイド・イメージマップを対応付けます。 あくまでも、URIで名前のみでないことに注意してください。つまり、名前の前に「#」が必要です。本来、仕様上は他のファイルのイメージマップも含みますが、現状の多くのブラウザは、対応していません。
declare属性(declare="declare")
宣言のみで、実行されません。実行するには、他のアクションが必要です。
standby属性
オブジェクトのロード中に表示させるメッセージを指定します。
name属性
他から参照することが出来るようにするための名前を指定します。
tabindex属性
タブキーでのマップ間移動の順番を指定します。順番は0から32767を指定できます。
非推奨属性
align属性、border属性、hspace属性、vspace属性です。これらは、スタイルシートで対処しましょう。

◆ 画像のサンプル

将来的には、画像データの表示は、img要素からobject要素に置き換わっていくようです...。

サンプルソース

<div>
<object data="../img/chaichan.gif" type="image/gif" width="100" height="80">
<span>TEST画像表示です。</span>
</object>
</div>

サンプル実行

TEST画像です。

サンプル説明

N6では、img要素と全く同じ感じになりますが、内object要素以外の代替が効きません。
IE5.5では、width属性、height属性が指定されていないと何も表示されません。また、指定して表示されてもインラインフレームみたいな感じになり、img要素とは雰囲気が違いますし、N6と同じで代替も効きません。
N4.xは、全くダメです。しかし、逆に内object要素以外の代替が効きます。まぁこれは、外object要素が無視されているのだからと思いますが...。

結果、現状(2001/5)では、画像はimg要素の方が無難です!

◆ JavaAppletのサンプル

将来的には、img要素と同じく、applet要素もobject要素がに置き換わっていきます。すでにapplet要素は、HTML4.01では、非推奨です。

サンプルソース

以下のサンプルは、シンプルなお絵かき帳です。マウスで何か書いてみてください。

<div>
<object codetype="application/java" CODEBASE="../applet/" classid="java:jlearn09.class" WIDTH="300" HEIGHT="300">
<span>テストJavaAppletです。</span>
</object>
</div>

サンプルソース実行

テストJavaAppletです。

サンプル説明

今回テストして分かったことは、IE5.5では、JavaAppleは、object要素では、使用しないほうがいいです。
画像データの時と同じくCODEBASE属性が効かないのはもちろんですが、OSダウンまで巻き込む状態になり、かつ再立ち上げしてもおかしな状態になり、今は、なんとなく直りましたが...。一時は、OS再インストールかって思いました。ほっ...。

あと、画像データの時とちがって、IE5.5では、代替は上手くいっています。

N6でも、たまにN6自体がストール(OSまでは影響しない)して、80%の出来って感じです。

結果、現状(2001/5)では、JavaAppletはapplet要素の方が無難です!
HTMLは、トランジショナル(Transitional)でやるしかないです...。

◆ ActiveXによるMID再生のサンプル

ActiveXなのでIEオンリーです。

サンプルソース

<div>
<object name="MIDplay" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="../mid/sakura.mid">
<param name="ShowControls" value="true">
<param name="ShowTracker" value="true">
<param name="ShowDisplay" value="true">
<param name="ShowGotoBar" value="true">
<param name="ShowStatusBar" value="true">
<span>テストMID再生です。</span>
</object>
</div>

サンプルソース実行

テストMID再生です。

サンプル説明

classid属性の値は、ActiveXコントロールのクラスの識別子でWINDOWSのレジストリの値がそのまま使用されます。サンプルには示しませんでしたが、JavaScriptでこのオブジェクトのメソッドやプロパティを動的に操作することが出来ます。しかし、詳細はいまのところ不明です...。(play,stopメソッドぐらいは、分かりますが...。)

◆ ActiveXによるデータバインディングのサンプル

IE4以上では標準でTDC(Tabular Data Control)という、データバインディング機能のActiveXが利用できます。

この機能を利用すると、テーブル等に表示するデータをHTML文書とは別の外部のファイルに持つことが出来ます。
逆にいうと、外部テキストデータファイルのデータを簡単にHTML文書に取り込むことが出来ます。
つまり、外部テキストデータファイルにデータが追加されれば、HTML文書を直すことなく、データが反映されます。

以下に外部テキストデータファイルのデータをテーブルとセレクトボックスへ取り込むサンプルを示します。

テーブルのサンプルソース

以下は、object要素で読み込んだデータをテーブルへ設定するサンプルです。

<div>
<!-- object要素でTDCコントロールオブジェクトを作成し、外部テキストデータファイルを読み込みます。-->
<object id="bindingDT" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
    <param name="DataURL" value="sellist.txt">
    <param name="UseHeader" value="true">
    <param name="TextQualifier" value="'">
</object>

<!-- 外部テキストデータファイルの内容です。-->
<a href="sellist.txt">外部テキストデータファイルの内容</a>
<br>
<br>

<!-- テーブルに外部テキストデータファイルの内容をコピーします。-->
<table datasrc="#bindingDT" border="1">
<thead>
<tr><th>list text</th><th>list value</th></tr>
</thead>
<tbody>
<tr><td><div datafld="text"></div></td><td><div datafld="value"></td></tr>
</tbody>
</table>
</div>

テーブルのサンプルソース実行

外部テキストデータファイルの内容

list textlist value

テーブルサンプル説明

まず、主役のobject要素で、TDCコントロールオブジェクトを作成し、外部テキストデータファイルを読み込みます。パラメータは、以下の通りです。

DataURL
外部テキストデータファイルのURIを指定します。
UseHeader
trueで外部テキストデータファイルの一行目をフィールド名定義行とします。
TextQualifier
フィールドの区切り文字(デリミタ)を指定します。

次に、datasrc属性でデータのソース全体をtable,span要素と関連付けして、datafld属性でデータのフィールドを関連付けます。面白いのは、テーブルの場合、データある分だけtr,td要素まで付加されて展開されることですね。

セレクトボックスサンプルソース

以下は、object要素で読み込んだデータを動的にセレクトボックスのリストへ設定するサンプルです。

<!-- script要素でTDCコントロールのmoveNext()メソッドを起動し、セレクトボックスに項目を追加します。-->
<script type="text/javascript">
function bindingDT2sellist(){

    var obj=document.forms[0].sellist.options; //セレクトボックスオブジェクトを変数へ代入

    while(bindingDT2.recordset.EOF == false){  //読み込んだ外部テキストデータがなくなるまで処理

        //new演算子でOptionオブジェクトを作成し、セレクトボックスオブジェクトへ代入
        obj[obj.length]=new Option(text_hidden.innerText,value_hidden.innerText);

        //moveNext()メソッドで読み込んだ外部テキストデータの次フィールドデータへ移動
        bindingDT2.recordset.moveNext();
    }
}
</script>
<div>

<!-- 非表示span要素にテキストデータファイルの内容をコピーします。-->
<span id="text_hidden" style="display:none" datasrc="#bindingDT2" datafld="text"></span>
<span id="value_hidden" style="display:none" datasrc="#bindingDT2" datafld="value"></span>

<!-- 外部テキストデータファイルの内容です。-->
<a href="sellist.txt">外部テキストデータファイルの内容</a>
<br>
<br>

<!-- object要素でTDCコントロールオブジェクトを作成し、外部テキストデータファイルを読み込みます。-->
<object id="bindingDT2" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
    <param name="DataURL" value="sellist.txt">
    <param name="UseHeader" value="true">
    <param name="TextQualifier" value="'">
</object>

<form>

<!-- あらかじめ空のセレクトボックスを用意します。 -->
<select name="sellist"></select>
<br>

<!-- Loadボタンをクリックするとセレクトボックスに項目が設定される。-->
<input type="button" onclick="bindingDT2sellist()" value="Load">
<br>

<!-- valueボタンをクリックすると該当項目の値がアラートボックスへ表示される。 -->
<input type="button" onclick="alert(sellist.options[sellist.selectedIndex].value)" value="value">
</form>
</div>

セレクトボックスサンプルソース実行

Loadボタンをクリックしてみてください。object要素で読み込んだデータを動的にセレクトボックスのリストへ設定します。

外部テキストデータファイルの内容



セレクトボックスサンプル説明

object要素の説明は、テーブルの時と全く同じです。

datasrc属性でデータのソース全体をspan要素と関連付けして、datafld属性でデータのフィールドを関連付けます。

最後にJavaScriptのbindingDT2sellist()関数を簡単に説明します。

  1. セレクトボックスオブジェクトを変数へ代入します。
    var obj=document.forms[0].sellist.options;
  2. 読み込んだ外部テキストデータがなくなるまで処理します。
    (テキストデータがなくなるとrecordset.EOFはtrueになる。)
    while(bindingDT.recordset.EOF == false){
  3. new演算子でOptionオブジェクトを作成し、セレクトボックスオブジェクトへ代入します。
    obj.lengthは、Optionオブジェクトが追加されると自動的に長くなります。
    Option(xxx,yyy)は、Optionオブジェクトのコンストラクタで、セレクトボックスのテキスト、値の順で設定します。
    obj[obj.length]=new Option(text_hidden.innerText,value_hidden.innerText);
  4. また、セレクトボックスのテキスト、値は、あらかじめID参照をするためにspan要素へ読み込ませます。
    テキスト:<span id="text_hidden" style="display:none" datasrc="#bindingDT" datafld="text"></span>
    値:<span id="value_hidden" style="display:none" datasrc="#bindingDT" datafld="value"></span>
  5. moveNext()メソッドで読み込んだ外部テキストデータを次フィールドデータへ移動させます。
    bindingDT.recordset.moveNext();
  6. 尚、TDCコントロールオブジェクトには、以下のようなメソッドあります。
    • moveNext() - 次のフィールドデータへ移動
    • movePrevious() - 前のフィールドデータへ移動
    • moveFirst() - 最初のフィールドデータへ移動
    • moveLast() - 最後のフィールドデータへ移動

Home/Menu/HTML概説リファレンス