次の方法で共有

HTML クリップボードの形式

  • [アーティクル]

クリップボードを使用して HTML テキストを転送するための要件は、シナリオによって異なります。 この記事では、HTML ドキュメントのフラグメントの切り取りと貼り付けについて説明します。 クリップボードを介して HTML ドキュメント全体を転送するための要件がある場合があります。ただし、この記事は、選択した HTML テキストのフラグメントを転送する必要があります。 そのため、HTML ドキュメント全体をクリップボードにコピーする必要があるメソッドは、重すぎると見なされます。

CF_HTML クリップボード形式を使用すると、生の HTML テキストとそのコンテキスト (外部 HTML) のフラグメントを ASCII としてクリップボードに格納できます。 これにより、上記の周囲のすべてのタグで構成される HTML フラグメントのコンテキストをアプリケーションで調べて、HTML フラグメントの周囲のタグを属性で確認できます。 このようなフラグメントを解釈する方法はアプリケーションによって決まりますが、IE4/MSHTML の実装に基づいていくつかの基本的なガイドラインがここに含まれています。

クリップボードの正式な名前 (RegisterClipboardFormatで使用される 文字列) は "HTML Format" です。

説明

CF_HTML はテキスト クリップボード形式ですが、常に UTF-8 エンコードを使用します。 ここでの UTF-8 の使用は、Windows API がテキスト文字列 、特に人間が判読できる (ローカライズ可能な) 文字列を表すために UTF-16 を使用するという一般的な規則の例外であることに注意してください。

CF_HTML クリップボードの一般的なレイアウトや構文は、次のように擬似 Backus-Naur 形式で記述できます。

Note

この文法は非規範的です**

<cf-html>                ::= <description-header> <context>
<context>                ::= [<preceding-context>] <fragment> [<trailing-context>]

<description-header>     ::= "Version:" <version> <br> ( <header-offset-keyword> ":" <header-offset-value> <br> )*
<header-offset-keyword>  ::= "StartHTML" | "EndHTML" | "StartFragment" | "EndFragment" | "StartSelection" | "EndSelection"
<header-offset-value>    ::= { Base 10 (decimal) integer string with optional _multiple_ leading zero digits (see "Offset syntax" below) }
<version>                ::= "0.9" | "1.0"
<fragment>               ::= <fragment-start-comment> <fragment-text> <fragment-end-comment>
<fragment-start-comment> ::= "<!--StartFragment -->"
<fragment-end-comment>   ::= "<!--EndFragment -->"
<preceding-context>      ::= { Arbitrary HTML }
<trailing-context>       ::= { Arbitrary HTML }
<fragment-text>          ::= { Arbitrary HTML }
<br>                     ::= "\r" | "\n" | "\r\n"

説明ヘッダーとオフセット

description ヘッダーには、クリップボードのバージョン番号とオフセットが含まれており、コンテキストとフラグメントの開始位置と終了位置を示します。 説明は、ASCII テキスト キーワード (keyword)の一覧の後に文字列が続き、コロン (:)で区切られています。

  • Version: クリップボードの vv バージョン番号。 開始バージョンは Version:0.9。 Windows 10 20H2の時点で、これは今 Version:1.0です.
  • StartHTML: クリップボードの先頭からコンテキストの先頭までのオフセット (バイト単位)、コンテキストがない場合は、 -1。
  • EndHTML: クリップボードの先頭からコンテキストの末尾までのオフセット (バイト単位)、コンテキストがない場合は、 -1。
  • StartFragment: クリップボードの先頭からフラグメントの先頭までのオフセット (バイト単位)。
  • EndFragment: クリップボードの先頭からフラグメントの末尾までのオフセット (バイト単位)。
  • StartSelection: オプション。 クリップボードの先頭から選択の開始までのオフセット (バイト単位)。
  • EndSelection: オプション。 クリップボードの先頭から選択の終了までのオフセット (バイト単位)。

StartSelection および EndSelection キーワード (keyword)は省略可能であり、アプリケーションでこの情報を生成しない場合は両方とも省略する必要があります。

CF_HTML クリップボード形式の今後のリビジョンでは、ヘッダーが拡張される可能性があります。たとえば、HTML は StartHTML オフセットから始まり、後で複数の StartFragment と EndFragment ペアを追加して、フラグメントの連続しない選択をサポートできます。

オフセット構文

バイト オフセットを生成するプログラムの便宜上、オフセット値を任意の量のゼロ桁 '0'で左に埋め込む必要があります。 その理由は、オフセットの HTML をスニッフィングするプログラムが、各キーワード (keyword)の出力バッファーに 10 (10) ゼロを書き込むことができるからです (例: StartHTML: 0000000000)。 その後、正確な StartHTML オフセットがわかっている場合 (例: 71)、プログラムはバッファー内の右端のゼロを "71" で上書きできます (例: 結果 StartHTML: 0000000071)。

クリップボードでサポートされている文字セットは Unicode (UTF-8) のみです。 UTF-8 と ASCII の最初の文字は一致するため、説明は常に ASCII ですが、コンテキストのバイト数 (StartHTMLで開始) は UTF-8 でエンコードされた他の文字を使用できます。

クリップボード形式ヘッダー (<br> 以上) の行の末尾は、CRLF (Windows)、LF (Unix)、または Lone CR (アーキック) で表されます。

フラグメント、選択、およびそのコンテキスト

要素 説明ヘッダー 開始位置と終了文字位置に有効な HTML が必要です
Context StartHTML および EndHTML はい
Fragment StartFragment および EndFragment はい
選択ツール StartSelection および EndSelection いいえ

Context

コンテキスト は有効で完全な HTML ドキュメントです。ただし、これは、ユーザーの選択を含む元の HTML ドキュメント全体が逐語的に引き継がれるという意味ではありません。逆に、最小限の整形式の HTML ドキュメントにすることができます。

このコンテキスト には、 フラグメント とその前のすべての周囲のタグ (開始タグと終了タグが含まれます。これらの先行する周囲のタグは、HTML ノードまで、フラグメントのすべての親ノードを表します)。 上記の記事例には、 <base href=""> と <title> 要素の使用を許可する完全な HTML <head> 要素があります。 たとえば、この要素を挿入して、この追加情報を取得できます。 HTML のフラグメントをクリップボードにコピーするアプリケーションは、そのような要素がまだ存在しない場合に、それをコンテキストに含める <base href=""> 要素を作成することを選択できます。 これにより、HTML フラグメント内の非絶対 URI を解決できます。

HTML フラグメントの基本的な貼り付けのために十分な情報がフラグメントに含まれるため、 コンテキスト は省略可能です。 コンテキストが格納されていない場合は、フラグメントのみが格納され、 StartHTML=EndHTML=-1。

Fragment

フラグメント (上記<fragment-text>) には、有効な HTML フラグメントが含まれています。

有効な HTML フラグメントは、1 つの外側の HTML 要素で構成されます。 この要素は、正しく入れ子になっている場合に、子孫 HTML 要素を含めることができます。 たとえば、フラグメントは、3 つの <p> 要素を含む 1 つの <div> 要素である可能性があります。 3 つの <p> 要素を含む <span> 要素で構成されるフラグメントは、 <span> 要素 (1要素) に子としてブロック レベルの要素を含めることができないため無効になります。

したがって、フラグメントは、ユーザーがテキスト選択を 行った画面上の より大きな領域 を効果的に表します (コピーなど)。 選択範囲には、選択したテキストに加えて、選択したテキスト内に終了タグがある要素の開始タグと属性、および含まれる開始タグのフラグメントの末尾にある終了タグが含まれます。 これは、HTML フラグメントの基本的な貼り付けに必要なすべての情報です。

フラグメント の前と後に HTML コメント <!--StartFragment--> と <!--EndFragment--> を付け、フラグメントの開始位置と終了位置を示す必要があります。これらの HTML コメントは、各コメント自体に空白文字を含めずに 逐語的に使用する必要があります。 したがって、フラグメントの開始と終了は、 ヘッダ StartFragment と EndFragment によるこれらのコメント と の存在によって示されます。 ツールは、この情報を生成することが期待されます。 この冗長性は意図的なものであり、フラグメントの開始を (バイトカウントから) 見つけて、HTML ツリー内でフラグメントの位置を直接マークできるようにするために導入されました。

選択ツール

基本的な貼り付けに十分な情報がフラグメントに含まれているため、 選択 は省略可能です。 選択範囲が格納されていない場合、 StartSelection と EndSelection はどちらもヘッダーに格納されません。

存在する場合、 選択 はユーザーが選択した 正確な テキスト範囲 (フラグメント内) です。これにより、適切な形式でバランスの取れた開始タグと終了タグと終了タグ なしで、選択した正確なテキストを示すことによって、フラグメントに情報が追加されます。

選択範囲 はテキストの実行を表すことができるので、 任意の 要素で開始し、後続の要素または先祖要素で終わる可能性があります。 したがって、HTML を使用してテキストの選択を表すことはできません。

シナリオ

次のシナリオでは、IE4/MSHTML HTML エディターが HTML の切り取りと貼り付けを処理する方法について説明します。他のアプリケーションは、これらのシナリオに従う場合と従わない場合があります。 ここで説明するクリップボード形式は、アプリケーションがどのように機能するかを柔軟に選択できるようにするためのものです。 (これらのシナリオでは、適切な HTML、つまり重複するタグがないことを示しています)。

シナリオ 1 - HTML の単純なフラグメント

次の HTML テキストを想定します。

<body>This is normal. <b>This is bold.</b> <i><b>This is bold italic.</b> This is italic.</i></body>

これは次のように表示されます。

問題はありません。 これは太字です。これは太字の斜体です。これは斜体です。

ユーザーが上記の HTML テキストを MSHTML ベースのアプリケーション (MSHTML、 別名 Trident、インターネット エクスプローラーのエンジン) に読み込んだ場合、MSHTML は HTML の部分文字列のコピーを次のように処理します。

  1. ユーザーは、前または末尾の空白を含まないテキストを選択します 。たとえば、上の例の "bold This is bold italic This" です。
  2. テキストをクリップボードにコピーするには、[コピー] コマンド ボタンをクリックします。

MSHTML は、次のようにこの HTML テキストを Windows クリップボードに配置します。

Version:1.0
StartHTML:0121
EndHTML:0272
StartFragment:0006
EndFragment:0106
StartSelection:0180
EndSelection:0225
<html><!--StartFragment--><body>This is normal. <b>This is bold.</b> <i><b>This is bold italic.</b> This is italic.</i></body><!--EndFragment--></html>

シナリオ 2 - HTML でのテーブルのフラグメント

次の HTML テキストを想定します。

<BODY><TABLE BORDER><TR><TH ROWSPAN=2>Head1</TH><TD>Item 1</TD><TD>Item 2</TD><TD>Item 3</TD><TD>Item 4</TD></TR><TR><TD>Item 5</TD><TD>Item 6</TD><TD>Item 7</TD><TD>Item 8</TD></TR><TR><TH>Head2</TH><TD>Item 9</TD><TD>Item 10</TD><TD>Item 11</TD><TD>Item 12</TD></TR></TABLE></BODY>

これは次のように表示されます。

Head 1 項目 1 項目 2 項目 3 項目 4
項目 5 項目 6 Item 7 項目 8
Head 2 Item 9 項目 10 Item 11 Item 12

テーブルからの HTML の部分文字列のコピーを MSHTML が処理する方法

ユーザーがマウスを使用して、表のセル 項目 6、 項目 7、 項目 10、および 項目 11 をカバーするテキスト選択を行う場合。 この選択内容はクリップボードにコピーされます。

次に示す内容は、クリップボードに表示されます (これは IE4/MSHTML の解釈であることに注意してください)。 わかりやすくするために改行が追加されています。

<!DOCTYPE
<HTML>
<BODY>
<TABLE BORDER>
<!--StartFragment-->
  **<TR>
    <TD>Item 6</TD>
    <TD>Item 7</TD>
  </TR>
  <TR>
    <TD>Item 10</TD>
    <TD>Item 11</TD>
  </TR>**
<!--EndFragment-->
</TABLE>
</BODY>
</HTML>

選択範囲は、 StartSelection と EndSelectionで区切られ、太字で表示されます。

シナリオ 3 - 順序付けられたリスト <ol> のフラグメントをプレーン テキストに貼り付ける

次の HTML テキストを想定します。

<BODY><OL TYPE="a"><LI>Item 1<LI>Item 2<LI>Item 3<LI>Item 4<LI>Item 5<LI>Item 6</OL></BODY>

これは次のように表示されます。

  1. 項目 1
  2. 項目 2
  3. 項目 3
  4. 項目 4
  5. 項目 5
  6. 項目 6

MSHTML が HTML 番号付きリスト 項目の部分文字列のコピーを処理する方法

  1. ユーザーは、 項目 3 の先頭から 項目 4 まで、および 項目 5の末尾までテキストを選択します。 ユーザーが Copy コマンドを呼び出します。
  2. 次の HTML はクリップボードにあります (わかりやすくするために改行が追加されます)。 <!--Star/EndFragment --> コメントの正確な場所は、ユーザーがブラウザーのテキスト選択ロジックをどのように処理したかによって異なります。
<html>
<body>
<ol>
<!-- StartFragment-->
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<!-- EndFragment-->
</ol>
</body>
</html>

このフラグメントを空のドキュメントに貼り付ける場合は、次の HTML が作成されます。

<body>
<ol>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>

これは次のように表示されます。

  1. 項目 3
  2. 項目 4
  3. 項目 5

シナリオ 5 - 部分的に選択したリージョンを貼り付ける

次の HTML テキストを想定します。

<p>IE4/MSHTML is a WYSIWYG Editor that supports:</p>
<ul><li>Cut<li>Copy<li>Paste</ul>
<p>This is a Great Tool!</p>

これは次のように表示されます。

IE4/MSHTML は、次をサポートする WYSIWYG エディターです。

  • 切り取り
  • コピー
  • 貼り付け

これは優れたツールです!

MSHTML が HTML 番号付きリスト 項目の部分文字列のコピーを処理する方法

ユーザーは、マウスを使用してテキストの選択をドラッグします(例: "WYSIWYG Editor that supports: Cut Cop")。 プレーンテキストであるかのように、その選択は次の壊れた HTML フラグメントのようになります。

WYSIWYG Editor, which supports:</p>
<ul>
  <li>Cut</li>
  <li>Cop

ユーザーが [コピー] コマンド ボタンを押すと、クリップボードは次のようになります (わかりやすくするために改行が追加されています。太字のテキストは、ユーザーが実際に選択した内容を示します)。

<html>
<body>
<!-- StartFragment-->
<p>WYSIWYG Editor, which supports</p>
<ul>
	<li>Cut</li>
	<li>Cop</li>
</ul>
<!-- EndFragment-->
</body>
</html>

次の点に注意してください。

  • "WYSIWYG" より前のテキストが削除されました。
  • リスト項目 (<li>Paste</li>) は、ユーザーの選択に含まれていないため削除されました。
  • "コピー" の "y" が削除されました。

関連項目

クリップボード