より機能豊富なデータ エントリ
Dave Massy
Microsoft Corporation
October 23, 2001
日本語版最終更新日 2001 年 12 月 4 日
このコラムのソース コードのダウンロード
先月のコラム、
「表を楽しむ」にフィードバックをお寄せ頂きありがとうございました。
多くの有益な修正項目や要求がありました。
今後のコラムで表に関するトピックを再度取り上げ、
これらの問題のいくつかについてお話し、
この機能を提供する一連のビヘイビアをさらに拡張したいと思います。
先月のコラムが公開された後に、
Microsoft® Internet Explorer® 6.0 の最終的な製品版が利用できるようになりました。
Internet Explorer の開発チームは、
このリリースで多くの分野に取り組み、
以前のバージョンの機能強化を行いました。
特に注目したいのは、
W3C  (World Wide Web Consortium) によって開発された
Platform for Privacy Preferences (P3P) Project
(英語) をサポートするようになった点です。
このサポートにより、
ユーザーは自分たちがブラウザに入力した情報がどのように使用されるかを制御できるようになります。
(「Internet Explorer 6 のプライバシー機能」をご覧ください。)
これは非常に重要な開発です。
インターネットを使用しているとき、
ユーザーは自分たちの情報がセキュリティで保護されていると確信できる必要があります。
Internet Explorer 6.0 は、
CSS1 (Cascading Style Sheets 1) と DOM Level 1 を完全にサポートする高品質な実装を提供するだけでなく、
CSS2、CSS3、および DOM Level 2 をサポートするように機能強化されました。
また、最近 W3C によって推奨された Synchronized Multimedia Integration Language (SMIL 2.0) のサポートについても注目する必要があります。
SMIL 2.0 はドキュメント内でエレメントやマルチメディアのタイミングおよび同期を可能にします。
(詳細については、
MSDN の記事「Basics of HTML+TIME Animation (英語)」をご覧ください。)
Internet Explorer 6 の機能の詳細な説明については、
「Internet Explorer 6 のハイライト」をご覧ください。
挨拶状を送信する
このコラムでは、
Internet Explorer 5.5 以降の機能豊富な HTML 編集のサポートについてお話したいと思います。
これらの例を体験するには、Internet Explorer 5.5 以降が必要であることに注意してください。
Internet Explorer 5.5 では、
以前のバージョンで未成熟だった HTML 編集のサポートが大幅に強化され、
Dynamic HTML を使用して新しいシナリオを使用することが可能になっています。
この機能が何を提供するかを理解するには、
「Greeting Card Designer (英語)」をご覧ください。
この例では、テキストや画像を挿入して、
挿入したテキストや画像を選択したりサイズを変更できる Greeting Card Designer を作成します。
背景の一部は、きれいなグラデーションになっていて、
大量のリソースを使用する画像を使用する代わりに、
宣言フィルタ サポートを使用しています。
また、Control キーを押したままで、
画像やテキストなどの複数のオブジェクトを選択できることにも注目してください。
さらに、この例では "ライブ サイズ変更" を提供します。
画像の隅をドラッグして画像のサイズを調整すると、
画像の輪郭だけでなく画像全体が表示されます。
これは HTML 編集のサポートを使用して何が行えるかを示す楽しい小さな例です。
この Greeting Card Designer を拡張して、
このようなカードを電子メールアカウントに送信する送信ボタンを追加したり、
受信者がカードを表示できるように Greeting Card Designer をサーバー上に配置することは間単に想像できるでしょう。
この機能の中心部には、
Internet Explorer に完全に組み込まれた強力な編集エンジンがあります。
Internet Explorer 4.0 以降では、HTML 編集の機能がプラットフォームに含まれていました。
この機能は、
Microsoft® Outlook® Express などのプログラムで HTML 形式の電子メールを作成および編集するために利用されています。
Internet Explorer 5.5 では、
エディタの機能を拡張して、
Internet Explorer の主要なコンポーネントをホストするプログラムからこれらの編集機能を拡張したり、
オーバーライドできるようにしました。
Windows アプリケーションの一部として HTML 編集をホストすることに興味のある方は、
「Internet Explorer 5.5 の MSHTML 編集プラットフォーム 」をご覧ください。
この記事では、このテクノロジについて、およびこのコンポーネントをホストする方法について説明しています。
このテクノロジは、既に行った作業を利用して、
アプリケーションに付加価値を提供することに集中できるような手助けをします。
ブラウザで DHTML を使用する場合にこのテクノロジを使用する意義は、
DHTML オブジェクトでこの同じ機能が contentEditable プロパティ (英語) として公開される点です。
あるエレメントの contentEditable に TRUE を設定すると、
そのエレメントのコンテンツは編集可能になります。
そのエレメントの子エレメントのいずれの contentEditable にも FALSE が設定されていない場合は、
そのエレメントのすべての子エレメントも編集可能になります。
編集ビヘイビア
この機能だけでは特に興味深いと思われないかもしれませんが、
この機能を ダイナミック HTML やビヘイビア テクノロジと組み合わせると、
私たちが Outlook Express などのアプリケーションで期待する電子メールのような高品質の HTML テキスト編集を提供するコンポーネントを作成できます。
このコンポーネントは、Web ページで簡単に再利用できます。
たとえば、ディスカッション掲示板などのアプリケーションではユーザーはより説明的なコメントを利用できるようになります。
サンプルの表示。
(このコラムの完全なサンプル コードは、
この資料の上部にあるリンクを使用して自己解凍型の実行可能ファイルとしてダウンロードできます。)
<HTML xmlns:ed>
<?import namespace=ed implementation=editor.htc />
<HEAD>
<TITLE>Compose</TITLE>
</HEAD>
<BODY style="filter:
progid:DXImageTransform.Microsoft.Gradient(startColorstr='deepskyblue',endColorstr='white');"
leftMargin=0 topMargin=2 rightMargin=0 marginwidth="0" marginheight="0"
style="font-family:verdana;">
<center>
<ed:mailEditor style="height:60%;" />
</center>
</div>
</span>
</BODY>
</HTML>
このビヘイビアは HTML コンポーネントまたは HTC ファイル editor.htc として実装されています。
そのため、このビヘイビアはこの機能を提供するために HTML およびスクリプトで構成されています。
この特定のビヘイビアに関して興味深いことは、
このビヘイビアがアタッチされるビヘイビアではなく、
エレメント ビヘイビアとして実装されている点です。
エレメント ビヘイビアは Internet Explorer 5.5 で導入され、
コンポーネントの機能をカスタム エレメントにバインドするより堅牢な形式を提供します。
この場合、エレメントは <ed:mailEditor/> タグです。
(エレメント ビヘイビアの詳細については、
「エレメント ビヘイビア」をご覧ください。)
このビヘイビアは Internet Explorer 5.5 のみで利用できる編集機能を公開しています。
したがって、堅牢なバインドの利点だけでなく、
コンテンツの viewlink のカプセル化をも提供するエレメント ビヘイビアを使用することが理に適っています。
viewlink テクノロジ
(概要については、
「Viewlink の概要」をご覧ください)
を使用することは、
編集中のコンポーネントがホスト ドキュメントに表示されないことを意味します。
ただし、コンポーネントが意図的に公開しているプロパティを使用した場合、
編集中のコンポーネントが表示されます。
このテクノロジでは、名前空間の衝突が問題にならないので、
これらのコンポーネントの使用はさらに堅牢になります。
このビヘイビアに関して興味深いもう 1 つの点は、
今度はこのビヘイビアがさらに別のビヘイビアを使用して色を選択するドロップ ダウン メニューなどを処理している点です。
ここでは、コンポーネントを使用して新しいコンポーネントを作成し、潜在的に複雑な機能を提供する方法を示しています。
送信
これで、HTML ページ内で使用できる合理的な編集コンポーネントを持つようになりました。
しかし、このエディット ボックス内にはまだ編集したリッチ メッセージがあるので、
メッセージを実際にサーバーに保存し、
私の考えが永遠に失われてしまわないようにしたいと思います。
既定ではカスタム エレメントは自動でフォームの送信に関与しないので、
このコンポーネントをフォームの送信に含めるために、
ちょっとトリックを使用する必要があります。
このトリックでは非表示の入力フィールドを使用して、
送信が発生したときに編集コンポーネントのコンテンツを非表示の入力フィールドにコピーします。
この結果、編集コンポーネントのコンテンツがフォームの送信に含まれます。
サーバー上でデータをどのように許可しているかにもよりますが、次のようなコードが機能します。
<FORM ACTION="http://...sample.asp" METHOD="POST" onsubmit="GetSource();">
<INPUT id=in1 TYPE="hidden" NAME="CONTROL4" SIZE="20,5">
<ie:mailEditor style="height:60%;" id=editor />
<P><INPUT TYPE=SUBMIT>
</FORM>
<script>
var inputElem = null;
function GetSource()
{
inputElem = document.body.all.in1;
inputElem.value = editor.docsource;
}
</script>
ダウンレベル
考慮するべきことがもう 1 つあります。
この機能をサポートしていない以前のブラウザを使用しているユーザーはどうなるのでしょうか ?
この問題に取り組む場合いくつかのアプローチがあります。
サーバー上のブラウザのバージョンを確認して、
使用しているブラウザの機能に応じて異なるページを供給することもできます。
このアプローチは複雑なアプリケーションにおいて有効なアプローチですが、
既にお話したディスカッション掲示板などの場合には別のアプローチがあります。
「Conditional Comments (英語)」を使用します。
条件分岐コメントを使用すると、機能豊富な編集用の HTML を含むだけでなく、
IE 5.5 以前のブラウザ用のより平凡な入力フィールドを含む単一のページを作成できます。
ダウンレベルのブラウザでこのページを表示すると、
追加の HTC ファイルはダウンロードされず、
オーバーヘッドが最小限に抑えられます。
ただし、Internet Explorer 5.5 以降のユーザーは自動的により機能豊富な編集を体験できます。
次の例では、フォームの送信先サーバー リソースを確立していないので、
送信コードを省略していることに注意してください。
サンプルの表示。
<HTML xmlns:ed>
<?import namespace=ed implementation=editor.htc />
<HEAD>
<TITLE>Compose</TITLE>
</HEAD>
<BODY style="filter:
progid:DXImageTransform.Microsoft.Gradient(startColorstr='deepskyblue',endColorstr='white');"
leftMargin=0 topMargin=2 rightMargin=0 marginwidth="0" marginheight="0"
style="font-family:verdana;">
<center>
<!--[if gte IE 5.5]>
<ed:mailEditor style="height:60%;" />
<![endif]-->
<![if ! gte IE 5.5]>
<input type="text" style="height:300;width:500" >
<![endif]>
</center>
</div>
</span>
</BODY>
</HTML>
編集のまとめ
繰り返しになりますが、
これらのビヘイビアはスクリプトと HTML で構成された HTC ファイルです。
特定の要求を満たすようにこれらのビヘイビアを変更することをお勧めします。
これらのビヘイビアについて興味深い拡張および修正を発見した場合は、
DHTMLDud@Microsoft.com までご連絡ください。
DHTML Dude
|
