Internet Explorer 5.5 を使った編集可能な Web ページの作成方法

Internet Explorer 5.5 を使った編集可能な We...

Peggi Goodwin
Microsoft Corporation

May 2000
日本語版最終更新日 2000 年 9 月 13 日

目次: この記事では、Internet Explorer の解析およびレンダリングエンジンへの HTML 拡張機能である MSHTML について説明します。MSHTML を使用することにより、ブラウザ内で Web ページを編集することができます。

テキスト編集機能
 Web オーサリング機能
 エディタのアクティベーション
 編集コマンドの実行
 編集可能なコンテンツの永続化
 エレメントビヘイビアと編集
 まとめ

とうとう Microsoft®Internet Explorer の洗練された HTML 編集機能を直接 Web ページに組み込めるようになりました。Microsoft の HTML エディタは、Internet Explorer の HTML 解析およびレンダリングエンジンに組み込まれた拡張機能です。Internet Explorer 4.0 以来、MSHTML エディタは、HTML ベースのテキストエディタや Web オーサリングアプリケーションを開発するホストアプリケーション向けに HTML 編集用プラットフォームを提供してきました。ただし従来バージョンでは、エディタはドキュメントが「デザイン」モードのときしか使えませんでした。Internet Explorer 5.5 を使えば、ドキュメントやドキュメント内の個々の要素を実行時に編集可能と宣言でき、Web 作成者はブラウザ内で完全な WYSIWYG での HTML 編集ができるようになります。

MSHTML エディタは、テキストとフォームの両方で最も頻繁に使われる編集機能をサポートする、簡単で強力なスクリプトモデルを公開します。これにより、洗練されたオンライン編集アプリケーションを開発したり、ユーザー側で書式付きテキストや画像などを入力できる独自のフォームを作成したり、ユーザーが作成した各自のコンテンツで書き換えることのできるページを Web サイトに挿入したりできます。Web 作成者は、テキスト編集機能を使ってオンラインテキストエディタを開発したり、フォームの編集機能を使ってオンライングリーティングカード送信アプリケーションを開発したりすることが考えられます。

テキスト編集機能

下記のテキスト編集機能は、旧バージョンの Internet Explorer でサポートされており、Internet Explorer 5.5 でもサポートされています。これらの機能にはすべて対応するコマンドがあり、スクリプトから実行できます。ただしキーボードのショートカットキーは除きます。

テキストの書式設定 :
- フォントフェイス (Times Roman、Arial、Courier など)
- フォントサイズ
- テキストのスタイルおよび装飾 (斜体、太字、下線、取り消し線、上付き、下付き)
- テキストの色
- 背景色
段落書式 :
- インデント
- インデント解除
- 左揃え、右揃え、中央揃え、および両端揃え
- テキストの方向 (右から左、または左から右)
リスト編集 :
- 番号付きリスト
- 箇条書きリスト
- 任意の階層への入れ子
選択サービス :
- マウスのドラッグによる範囲選択
- ダブルクリックによる単語の選択
- トリプルクリックによる段落選択
- キーボードによる選択（ Shift+ 矢印、Home+ End ）
ハイパーリンクとブックマークの自動検出 (ナビゲーション可能にする)
無制限の「元に戻す」と「繰り返し」
テキストの入力方法 :
- 挿入
- 上書き
標準的なショートカットキーのサポート :

切り取り（ Ctrl + X)	コピー（ Ctrl + C ）	貼り付け（ Ctrl + V ）
太字（ Ctrl + B ）	斜体（ Ctrl + I ）	下線（ Ctrl + U ）
元に戻す（ Ctrl + Z ）	繰り返し（ Ctrl + Y ）	ハイパーリンク（ Ctrl + K ）
検索（ Ctrl + F ）	すべて選択（ Ctrl + A ）	テキストブロックの選択（ Ctrl + 左クリック）

Internet Explorer 5.5 の新機能

Internet Explorer 5.5 の新しい便利な編集機能の 1 つは言うまでもなく、ブラウザの実行時に編集操作ができる機能ですが、これについては後で解説します。テキスト編集に特化した Internet Explorer 5.5 の他の新機能と改良機能は次の通りです。

縦書きテキスト編集
双方向編集
「元に戻す」と「繰り返し」の一括実行
自動検出の「元に戻す」
切り取り、コピー、貼り付け作業時の書式の維持
空白行での書式の維持

Internet Explorer 5.5 では初めて縦書き編集ができるようになりました。この機能は、主に中国語や日本語の編集を対象にしたものですが、通常の ASCII テキストでも正しく機能します。欧文フォント文字は右方向に回転されます。つまり、テキストブロック全体が時計回りに回転したように表示されます。Internet Explorer 5.5 では、双方向のテキストのサポートも著しく改良されています。これは主にヘブライ語やアラビア語のテキストに使われます。ただし、英語などラテン系言語の特定の単語やフレーズがアラビア語やヘブライ語のテキストに挿入されることもよくあります。Internet Explorer 5.5 では、ラテン文字セットを検出すると、テキストの入力方向は自動的に左から右になり、ヘブライ語やアラビア語の文字セットを検出すると右から左に戻ります。

「元に戻す」と「繰り返し」の一括実行では、ユーザーは 1 度に 1 文字ではなく、文全体を削除したり元に戻したりできます。また、何らかの理由によりリンクを有効にしたくない場合には、Backspace キーを使って自動検出したリンクを元に戻せるようになりました。

エディタは、テキストのコピーや貼り付けをするときに書式をより確実に維持できるようになりました。たとえば、Verdana フォントを使った赤い太字のテキストをコピーし、Times Roman フォントの黒い文字のテキストブロックに貼り付けても、Verdana フォントの赤い太字は維持されます。書式は空白行でも維持されるようになりました。16 ポイントの斜体の Haettenschweiler として行を書式化すれば、Return キーを何回か押してから上に戻って空白行にテキストを入力すると、ドキュメントの標準フォントではなく 16 ポイントの斜体の Haettenschweiler でテキストが入力されます。

Web オーサリング機能

Internet Explorer の HTML エディタでは、以下の基本的な Web 作成機能が今までと同様にこれからもサポートされます。

挿入:
- コントロール
- IFrames
- イメージ
- マーキー
- 水平線
コントロールの選択
UI のアクティベーション

コントロール、IFrame、イメージ、マーキー、水平線、テーブルのすべてには、共通するものがあります。各要素には独自のレイアウトがあるのです。レイアウトがあるというのは、基本的にオブジェクトが矩形だということです（幅や高さを指定するか、contentEditable として設定するだけで、どのような要素にもレイアウトを持たせることができます）。レイアウト要素にコンテンツがある場合、そのコンテンツのレイアウトはその矩形の境界によって決まります。

マウスの左ボタンを押したままドラッグすれば、テキストを選択する場合と同様に、レイアウト要素の範囲選択ができます。ただし、レイアウト要素が編集可能なコンテナの中にある場合には、要素をクリックするか、<TAB>キーを使ってそこまで移動することで、その要素を選択できます。要素が要素選択されていると、その矩形の境界の四隅と辺の中点に「グラブハンドル」が表示されます。選択されている要素は、そのすべてのコンテンツをひとまとめにしてドラッグしたり削除したりできます。マウスでグラブハンドルをドラッグすれば要素のサイズを調整できます。また、選択されている状態のときに要素をクリックしたり <ENTER>キーを押したりすると、その UI がアクティブになります。要素の UI がアクティブになると、その周りに斜線の境界ができ、そのコンテンツを編集できるようになります（イメージや水平線のようにコンテンツのない要素は除きます）。

Internet Explorer 5.5 の新機能

これらはすべてフォームエディタの標準機能に過ぎません。Internet Explorer 5.5 は、フォームと Web ページの作成を簡単にそして楽しくする、とても便利な新機能もサポートしています。これらの新機能は以下の通りです。

2 次元の絶対配置
リアルタイムのサイズ調整
複数選択
選択不能の UI 要素

2 次元（ 2D ）の絶対配置を使えば、ユーザーは、ドラッグアンドドロップだけで要素をページ上のどこにでも配置できます（必要なレイアウトを正確に設定するため作成していた複雑なテーブルはもう必要ありません）。

リアルタイムのサイズ調整機能を使えば、ユーザーは、要素のサイズを調整する際に WYSIWYG のフィードバックをリアルタイムで取得できます。ユーザーのマウスのドラッグに合わせてアウトラインを描画し、ボタンの解放時に要素のサイズを自動調整するのではなく、ユーザーがグラブハンドルをドラッグするのに合わせてリアルタイムで要素のサイズを調整します。

複数選択を使えば、ユーザーは複数の要素を 1 度に選択でき、ドラッグやサイズの調整を同時に行えます。

新しい「unselectable （選択不能）」属性を指定すれば、ユーザーがクリックしても現在の選択対象が破棄されないユーザーインターフェイス要素を Web ページに作成できます。この属性は、特に現在の選択対象の書式変更を行うコントロールの作成に便利です。これについてはあとで説明します。

エディタのアクティベーション

エディタをアクティブにする方法は 2 つあります。ドキュメント全体をデザインモードに設定するのが最初の方法です。2 番目の方法は、閲覧モードで実行時に個々の要素を編集可能にするときに使えます。閲覧モードでドキュメント全体を編集可能にするには、ドキュメントの本文に contentEditable 属性を設定します。

ドキュメントをデザインモードに設定する方法

ドキュメント全体をデザインモードに設定するには、ドキュメントオブジェクトに直接 designMode プロパティを設定します。ドキュメントがデザインモードに設定されていると、スクリプトは実行されません。ドキュメントの中からデザインモードのオンとオフを切り換えられるボタンを作成するのは良い考えのように思えますが、うまくいきません。ユーザーがボタンをオンにすると、デザインモードに固定されてしまうからです。次にボタンをクリックしても、選択されるだけでクリックはされません。もう 1 度ボタンをクリックすると、その値を編集できるようになります。したがって、デザインモードを使う場合には、フレームや IFrame 内のドキュメントに designMode プロパティを設定すべきです。以下の例は、IFrame 内のドキュメントのデザインモードを有効にする方法を示します。

<script for="btnDesign" event="onclick">
  targetDoc = document.frames(0).document;
  if (targetDoc.designMode == "On")
    targetDoc.designMode = "Off";
  else
    targetDoc.designMode = "On";
</script>
<button id=btnDesign>DesignMode</button>
<iframe src="blank.htm" style="border: black thin; width:100%; height:200px"></iframe>

designMode プロパティの値は、小文字で指定した場合でも、頭文字は常に大文字に変換されて格納されます。プロパティの値を検査するときにはこのことに注意してください。 designMode プロパティの標準値は「Inherit」です。

閲覧モードで要素を編集可能にする（またはデザインモードで編集不可にする）方法

Internet Explorer 5.5 では、ドキュメント自体が閲覧モードのときでも、個々の要素を編集するためにエディタを開くことができます。 contentEditable 属性を True に設定するだけで、閲覧中でも要素を編集できます。以下の例は、この属性を設定して、テキストボックスのように振る舞う領域を作成します。

<span contentEditable=true style="width:150; border:lightgrey 3px inset"></span>

スクリプトを使って要素を編集可能にするのも同じくらい簡単です。以下の例は、スクリプトから「foo」という ID を持つ要素に contentEditable 属性を設定する方法を示します。

foo.contentEditable=True;

デザインモードで要素を編集可能にしたくない場合は、 contentEditable 属性を False に設定します。しかし、このようにした場合でも、要素はレイアウトを維持するので、デザインモードでコントロールを選択、ドラッグ、サイズ調整できます。

foo.contentEditable=False;

contentEditable 要素の継承と入れ子

contentEditable 属性は継承されるので、要素を contentEditable として宣言すると、子要素もすべて標準で編集可能になります（ contentEditable 属性の既定値は「Inherit」）。

contentEditable 属性を False に設定すれば、 contentEditable 要素の子孫を編集不可にできます。ただし contentEditable 属性を設定すると、要素は固有のレイアウトを持つようになります。これは要素の contentEditable 属性を True と False のどちらに設定しても同じです。またレイアウトを持つ要素が編集可能なコンテナの中にある場合、ユーザーがコンテナ内をクリックすると要素が選択されることに注目してください。要素が要素選択されている場合、ユーザーは表示されるグラブハンドルを使って、その要素をドラッグしたりサイズ調整したりできます。これは、編集可能な要素の中に編集不可の要素を入れ子にすべきではないということではなく、注意が必要だということです。

要素が編集可能かどうかを判定する方法

要素が編集可能かどうかを判定するには、 contentEditable 属性の値を調べるだけでは不十分です。要素に contentEditable 属性がなくても、その祖先のコンテンツ編集機能を継承しているかもしれません。また、テキストボックスのように標準で編集可能な要素もあります。さらに、要素を含んでいるドキュメントがデザインモードになっていることも考えられます。要素が編集可能かどうかを確実に判定する唯一の方法は、 isContentEditable プロパティを調べることです。 isContentEditable プロパティは、これらの可能性をすべて反映します。このプロパティは読み取り専用で、結果はブール値です。以下の例は、ID が「foo」の要素が編集可能かどうか判定する方法を示します。

result=foo.isContentEditable;

編集コマンドの実行

Internet Explorer 5.5 の基本的な編集機能のほとんどは、コマンドを発行して使用します。MSDN Online の文書に、使用可能なコマンドの一覧と、コマンドに指定する引数が解説されています。

編集コマンドを実行するには、 document.execCommand を呼び出して、コマンド ID に対応する文字列を渡します。コマンドにユーザーインターフェイスがある場合には、それを表示するかどうか指定する 2 番目の省略可能なパラメータがあります。ユーザーインターフェイスを表示するには整数 1、表示しない場合には整数 0 を渡します。このパラメータは普通、編集コマンドには使われません。規定値は 0 なので、3 番目のパラメータを使用する場合を除き（この場合、2 番目のパラメータにも値を渡す必要があります）、このパラメータを使う必要はまずありません。3 番目のパラメータも省略可能です。このパラメータは、コマンドに渡す任意の引数を渡すために指定します。普通は最初の引数を渡すだけです。

たとえば、複数選択を有効にする場合は document.execCommand("MultipleSelection") を呼び出します。リアルタイムのサイズ調整機能を有効にする場合は document.execCommand("LiveResize") を呼び出すだけです。2 次元の位置設定を有効にする場合は document.execCommand("2D-Position") を呼び出します。

注 2 次元の位置設定は、CSS スタイルが position:absolute に設定されている要素にだけ有効になります。

下の例では（図 1 参照）、 contentEditable 属性、 unselectable 属性、および実行可能な 3 つのコマンドを使って、Web ページで使用する簡単なテキストエディタを作成しています。実際にはこれは div タグの中に div タグを埋め込んでおり、外側の div タグの一番下に 3 つのボタンがあります。これらのボタンは document.execCommand メソッドを使って、現在の選択対象の書式を設定します。内側の div タグは contentEditable であり、外側の div タグとボタンは unselectable です。外側の div タグとボタンが unselectable なので、ユーザーは現在の選択範囲を取り消さずにそれらをクリックできます。これは特にボタンを使うときに便利です。なぜなら、contentEditable 領域内のテキストを何か選択してから［Bold］ボタン、［Italic］ボタン、［Underline］ボタンをクリックしていくときに、その都度テキストを選択し直す必要がないからです。

<div align=center>
<div unselectable="on" align=center 
 style="height:300; width:400; background-color:powderblue; border:outset powderblue">  
  <br>  
  <div id=foo contenteditable align=left    
   style="height:250; width:350;background-color:white; font-face:Arial; padding:3;    
   border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;">  
  </div>  
  <br>  
  <button unselectable="On" onclick='document.execCommand("Bold");foo.focus();'   
   style="width:80; background-color:powderblue; border-color:powderblue">   
   <B>Bold</B></button>  
  <button unselectable="On" onclick='document.execCommand("Italic");foo.focus();'    
   style="width:80; background-color:powderblue; border-color:powderblue">   
   <B><I>Italic</I></B></button>  
  <button unselectable="On" onclick='document.execCommand("Underline");foo.focus();'    
   style="width:80; background-color:powderblue; border-color:powderblue;">   
   <B><U>Underline</U></B></button>
</div>
</div>

図 1 でもう 1 つ注目すべきことは、スクロールバーの色が指定できるようになったことです（これは Internet Explorer 5.5 のもう 1 つの新機能です）。

Dd163916.createwp01(ja-jp,MSDN.10).gif

図 1 ：テキストエディタの作成

編集可能なコンテンツの永続化

編集可能なコンテンツをどのように永続化するか決めるのは開発者です。Active Server Pages （ ASP ）を使用している場合は、編集可能なコンテンツをフォーム形式にして、 Post メソッドを使ってそれらを ASP ページに送り、望みの方法でサーバーに格納できます。ASP ページについては ASP SDK で説明されているので、ここでは詳しく解説しません。もっと面白い方法は、おそらく UserData ビヘイビアを使ってクライアントでデータを永続化することです。

UserData ビヘイビア

UserData ビヘイビアは、contentEditable 要素のコンテンツをユーザーのマシンの記憶領域に永続化する優れた方法です。ビヘイビアは、再利用可能なスクリプトと HTML をカプセル化する方法として Internet Explorer 5.0 で導入されました。ビヘイビアは、HTC （ HTML Component ）ファイルという独自のファイルに格納されます。このファイルは、クライアントドキュメントのヘッダ部分にある CSS スタイルブロックから参照されます。ビヘイビアは、CSS スタイルと同じ方法で要素に適用します。ビヘイビアと要素を関連付けたら、その要素を対象に、ビヘイビアに属するすべてのメソッドを呼び出せます。

UserData は、ビヘイビアがどれ程強力かを示す良い例です。UserData ビヘイビアを使って、Save や Load メソッドに指定する UserData ストアに異なる名前を与えることで、1 ページに含まれている複数の要素のコンテンツを永続化できます。唯一の制限は、1 ページあたり 64KB まで、1 ドメインにつき 640KB までしか格納できないことです。次の例は、1 つの contentEditable 要素のコンテンツを永続化する方法を示しています。

この例の要素は、contentEditable が設定された「foo」という div オブジェクトです。UserData ビヘイビアを宣言するヘッダ内のスタイル宣言に注目してください。ビヘイビアは、要素のクラスを「userData」と宣言することによって contentEditable 要素にアタッチされています。これにより、UserData ビヘイビアが公開する setAttribute、 getAttribute、Load、 Saveなどのメソッドを、あたかも要素自体を対象にしたメソッドのように使えます（データを永続化するためのストア名と属性名は自由に指定できます。ただし、属性名は getAttribute と setAttributeメソッドの間で一致していなければならず、ストア名は Load と Save メソッドの間で一致していなければなりません）。

<html>
<head>
<style> .userData {behavior:url(#default#userdata);} </style>
<script for=window event=onload>
 DoLoad();
</script>
<script for=window event=onbeforeunload>
  DoSave();
</script>
<script>
function DoSave(){
  foo.setAttribute("content", foo.innerHTML);
  foo.save("EditContent");
}
function DoLoad(){
  foo.load("EditContent");
  content = foo.getAttribute("content");
  if (content != null) foo.innerHTML=content; 
}
function DoClear(){
  foo.innerHTML = "";
}
</script>
</head>
<body>
<p align=center>
  <button onClick='DoSave()'>Save</button>
  <button onClick='DoClear()'>Clear</button>
  <button onClick='DoLoad()'>Load</button>
</p>
<div id=foo class=userData contentEditable=true style="width:100%;height:90%">
</div>
</body>
</html>

図 2 に、contentEditable が設定された div オブジェクトと 3 つのボタンを示します。ユーザーはこれらのボタンを使って div オブジェクトのコンテンツを保存したり、保存したコンテンツをロードしたり、現在のコンテンツを削除したりできます。もう 1 つの巧妙な仕掛けとして、ユーザーがページから移動したときに window.onBeforeUnload イベントハンドラが、ユーザーによって入力されたコンテンツを自動的に記憶するという仕掛けがあります。あとでそのページに戻ってくると window.onLoad イベントハンドラが自動的にそのコンテンツを復元するようになっています。前に訪れた Web ページに戻ると、前回入力したコンテンツが残っているのです。びっくりしますよね。魔法のようです。

Dd163916.createwp02(ja-jp,MSDN.10).gif

図 2 ： UserData ビヘイビアを使用してデータを永続化

エレメントビヘイビアと編集

エレメントビヘイビアはカスタムエレメントですが完全に独立しており、もともとある HTML コントロールのように扱われます。上記のコンテンツ永続化の項では、任意の要素と関連付けられる UserData ビヘイビアを解説しました。エレメントビヘイビアは、通常のビヘイビアとは異なり、他の要素には適用できない独自の要素タグを持っています。ビヘイビアを要素自体から切り離すことはできません。

ViewLink エレメントビヘイビアとは、UI を生成する HTML を呼び出し元のドキュメントに挿入しておかなくても、その UI が閲覧時に表示されるエレメントビヘイビアです。ユーザー側で Web ページのソースを表示しても、見えるのは要素を表すタグだけです。要素をどのようにして表示しているかが分かるようなソースは表示されません。ViewLink にできるのはエレメントビヘイビアだけです。

エレメントビヘイビアのもう 1 つの重要な事実は、パーサが要素タグを認識できれば、そのビヘイビアを使用できることです。要素があるのにビヘイビアがまだロードされていないということは絶対にありません。こういった特徴を活かせば、エレメントビヘイビアはいつでもどこでも再利用できる独自の HTML コントロールを作成する優れた手段となります。

簡単な例

この例では、先述の簡単なテキストエディタ（図 1 ）にボタンをいくつか追加して面白くします。次にエディタを HTC ファイルでカプセル化し、ViewLink エレメントビヘイビアとして扱うようにパーサに命令する行を追加します。HTML ファイル内でこのコンポーネントのインスタンスを作成する方法も提示します。

HTC ファイル

次に、コンポーネントを定義するソースを含む HTC ファイルを解説します。タグ名を含む（この場合には「editBox」）上部の public:component 宣言に注目してください。HTML ファイルに挿入される新しいコンポーネントはこの名前で識別されます。 public:component 宣言の中には、このエレメントビヘイビアを ViewLink として指定する public:defaults viewLinkContent という宣言があります。DHTML で作成した最新のエディタをエレメントビヘイビアに変換するには、これらの宣言をファイル上部に追加し、拡張子に .htc を付けて保存するだけです。このファイルには「editBox.htc」という名前を付けます（要素と同じ名前をファイルに付ける必要はありませんが、こうしたほうが覚えておきやすいでしょう）。

<public:component tagName=editBox>
<public:defaults viewLinkContent/> 
</public:component>
 
<div unselectable="on" align=center style="height:250; width:425; background-color:powderblue; border:outset powderblue">
  <br>
  <div id=foo contenteditable align=left 
   style="height:200; width:370;background-color:white; font-face:Arial; padding:3; 
   border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;">
  </div>
  <br>
 
  <button unselectable="On" onclick='document.execCommand("Bold");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Bold">
   <B>B</B></button>
  <button unselectable="On" onclick='document.execCommand("Italic");foo.focus();'    
   style="background-color:powderblue; border-color:powderblue" title="Italic">
   <B><I>I</I></B></button>
  <button unselectable="On" onclick='document.execCommand("Underline");foo.focus();'
   style="background-color:powderblue; border-color:powderblue;" title="Underline">
   <B><U>U</U></B></button>
<button unselectable="On" onclick='document.execCommand("StrikeThrough");foo.focus();'
   style="background-color:powderblue; border-color:powderblue; text-decoration=line-through"
   title="Strike-through">
   <B>S</B></button>
   &nbsp;&nbsp;
    
 
  <button unselectable="On" onclick='document.execCommand("SuperScript");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Superscript">
   <B>^</B></button>
  <button unselectable="On" onclick='document.execCommand("SubScript");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Subscript">
   <B>_</B></button>
   &nbsp;&nbsp;
    
 
  <button unselectable="On" onclick='document.execCommand("InsertOrderedList");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Ordered List">
   <B>OL</B></button>
  <button unselectable="On" onclick='document.execCommand("InsertUnorderedList");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Unordered List">
   <B>UL</B></button>
  <button unselectable="On" onclick='document.execCommand("Outdent");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Outdent">
   <B>&lt;&lt;</B></button>
  <button unselectable="On" onclick='document.execCommand("Indent");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Indent">
   <B>&gt;&gt;</B></button>
   &nbsp;&nbsp;
    
 
  <button unselectable="On" onclick='document.execCommand("JustifyLeft");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Left Justify">
   <B>|&lt;</B></button>
  <button unselectable="On" onclick='document.execCommand("JustifyRight");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Right Justify">
   <B>&gt;|</B></button>
  <button unselectable="On" onclick='document.execCommand("JustifyCenter");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Center Justify">
   <B>&gt;|&lt;</B></button>
   &nbsp;&nbsp;
  <br>
 
  <button unselectable="On" onclick='document.execCommand("Cut");foo.focus();'
   style="background-color:powderblue; border-color:powderblue"><B>Cut</B></button>
  <button unselectable="On" onclick='document.execCommand("Copy");foo.focus();'
   style="background-color:powderblue; border-color:powderblue"><B>Copy</B></button>
  <button unselectable="On" onclick='document.execCommand("Paste")'
   style="background-color:powderblue; border-color:powderblue"><B>Paste</B></button>
   &nbsp;&nbsp;
  <button unselectable="On" onclick='document.execCommand("Overwrite");foo.focus();'
   style="background-color:powderblue; border-color:powderblue"><B>Overwrite</B></button>
</div>

HTML ファイル

HTC ファイルについては解説したので、次に HTML ファイルを見てみましょう。このファイルが他の HTML ファイルと異なるのは、ファイル上部の html 宣言の namespace 属性と、editBox 要素の実装の検索場所をパーサに伝える処理命令（ PI ）だけです。ネームスペースは、別々の HTC ファイル内に含まれている 2 つの異なるエレメントビヘイビアがたまたま同じ名前だった場合に備えて必要です。ネームスペースはエレメントビヘイビアを識別する手段を提供します。import ステートメントは、タグ名に「x」というプレフィックスが付いていた場合には、指定されている実装ファイル内でそのタグの定義を探すようにパーサに指示します。したがって、新しいコンポーネントのタグを使う場合には、必ず PI で宣言したネームスペース名をプレフィックスとしてそのタグに付けなければなりません（ XML のネームスペースとは違い、このネームスペースは Uniform Resource Name （ URN ）ではなく、タグに元々関連付けられているわけではありません。ネームスペースは HTML ファイルの作者によって定義され、そのネームスペースを宣言しているファイルにおいてのみ有効です。これは、特定の XML ファイルの XML ネームスペースに関連付けられているプレフィックスに似ています）。

<html xmlns:x>

<head>

<?import namespace=x implementation="editBox.htc" />

</head>

<body>

<x:editbox>

</body>

</html>

Dd163916.createwp03(ja-jp,MSDN.10).gif

図 3 ： ViewLink 要素のビヘイビア

まとめ

これで、単純なテキストエディタをエレメントビヘイビアとして作成する方法は理解できたでしょう。先に説明した UserData ビヘイビアを使ってコンテンツの永続化機能を追加したり、フォントとフォントサイズを選択するコントロールを追加すれば、このテキストエディタを簡単に拡張できます。コントロール、イメージ、マーキーを挿入するメニューやドロップダウンボックスを UI に追加したり、2 次元の絶対配置、複数選択、リアルタイムのサイズ調整をサポートしたりすれば、さらに拡張できます（もちろん、さらに見やすいユーザーインターフェイスを作成してもいいでしょう）。閲覧時編集機能、UserData の永続化、エレメントビヘイビアを組み合わせて作成できる便利な編集コンポーネントにはほとんど無限の可能性があります。

もちろん、エレメントビヘイビアを実装して編集可能な Web ページを作成する必要はありません。ViewLink は、作成したものをカプセル化して再利用する優れた方法です（ HTML のソースを公開する必要もありません）。

Internet Explorer 5.5 の新しい便利な編集機能はすべて解説しました。あとは読者の皆さん次第です。WYSIWYG でリアルタイムの編集可能な Web ページをさっそく実装しましょう（友人の羨望の的になること間違いなしです）。

ページのトップへ

プロファイル (個人情報) の管理 | お問い合わせ先 | MSDN Flash ニュースレター | 日本での個人情報の取り扱い | サイトマップ

テキスト編集機能

Internet Explorer 5.5 の新機能

Web オーサリング機能

Internet Explorer 5.5 の新機能

エディタのアクティベーション

ドキュメントをデザイン モードに設定する方法

閲覧モードで要素を編集可能にする（またはデザイン モードで編集不可にする）方法

contentEditable 要素の継承と入れ子

要素が編集可能かどうかを判定する方法

編集コマンドの実行

編集可能なコンテンツの永続化

UserData ビヘイビア

エレメント ビヘイビアと編集

簡単な例

HTC ファイル

HTML ファイル

まとめ

ドキュメントをデザインモードに設定する方法

閲覧モードで要素を編集可能にする（またはデザインモードで編集不可にする）方法

エレメントビヘイビアと編集