htmlText プロパティの使用

HTML 形式のテキストストリングを設定または取得するには、htmlText プロパティを使用します。標準の HTML には含まれていない 1 つのタグ textFormat を使用することもできます。サポートされているタグと属性の詳細については、HTML テキストでのタグの使用を参照してください。

Flex スタイルを使用してテキストフォーマットを指定することもできます。スタイルを使用してフォントの特性やテキストの太さなどの基本スタイルを設定し、 タグなどのタグを使用して、テキストセクション内で基本スタイルをオーバーライドできます。次の例では、<mx:Text> タグスタイルは青色、イタリック、14 ポイントのテキストを指定します。<mx:htmlText> タグには、カラーやポイントサイズをオーバーライドする HTML タグが含まれています。

<?xml version="1.0"?>
<!-- textcontrols/HTMLTags.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="450"
backgroundGradientColors="[#FFFFFF, #FFFFFF]">
  <mx:Text width="100%" color="blue" fontStyle="italic" fontSize="14">
     <mx:htmlText>
        <![CDATA[This is 14 point blue italic text.<br><b><font color="#000000" size="10">This text is 10 point black, italic, and bold.</font></b>]]>
     </mx:htmlText>
  </mx:Text>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

このコードの出力は、次のようになります。

<mx:Text> É^ÉOÉXÉ^ÉCÉãÇÕê¬êFÅAÉCÉ^ÉäÉbÉNÅA14 É|ÉCÉìÉgÇÃÉeÉLÉXÉgÇšéwíËÇµÇ‹Ç²ÅB<Default Para Font><mx:htmlText> É^ÉOÇ…ÇÕÅAÉJÉâÅ[Ç‚É|ÉCÉìÉgÉTÉCÉYÇšÉIÅ[ÉoÅ[ÉâÉCÉhÇ²ÇÈ HTML É^ÉOÇ™ä‹Ç‹ÇÍÇƒÇ¢Ç‹Ç²ÅB<Default Para Font>

HTML タグとテキストの指定

テキスト内で HTML タグが検出されたときに Flex コンパイラがエラーを生成しないようにするには、次のいずれかの方法を使用します。

CDATA タグ内のテキストを折り返します。
左の山カッコ（<）、右の山カッコ（>）およびアンパサンド（&）という HTML の区切り文字の代わりに <、> および & の文字エンティティを使用して、HTML マークアップを指定します。

文字エンティティの方法には多くの制限があるため、単純な HTML マークアップ以外のすべての HTML マークアップには、CDATA セクションを使用することをお勧めしています。

拡張された HTML マークアップは書き込みが面倒で、読み取りが困難な場合があります。
テキストに小なり記号とアンパサンド文字を含めるときに、複雑なエスケープシーケンスを使用する必要があります。

例えば以下のストリングを表示する場合は、次のようにします。

小なり記号（<）およびボールドテキスト。

CDATA セクションを使用しない場合は、次のテキストを使用する必要があります。

A less than character &amp;c#060; and &lt;b&gtbold text&lt;/b&gt.

CDATA セクションで、次のテキストを使用します。

A less than character &lt; and <b>bold text</b>.

HTML テキストの指定

テキストコントロールに HTML テキストを指定する場合、次の規則が適用されます。

CDATA セクションを、<mx:Text> タグのインライン htmlText プロパティで直接使用することはできません。テキストは、<mx:htmlText> サブタグまたは ActionScript コード内に入力する必要があります。
Flex では、MXML のプロパティ割り当てまたは ActionScript で CDATA セクション外に指定したテキスト内の連続する空白文字（改行、スペース、タブ）は畳んで表示されます。
テキストを CDATA セクションで指定した場合は、テキストコントロールの condenseWhite プロパティを使用して、空白文字を畳んで表示するかどうかを制御できます。デフォルトでは、condenseWhite プロパティは false になっており、空白文字は畳んで表示されません。
改行と段落には、HTML の および タグを使用します。ActionScript の CDATA セクションでは、\n エスケープ文字を使用することもできます。
割り当てステートメント内で、HTML テキストストリングを単一引用符または二重引用符で囲む場合（つまり、ストリングが <mx:htmlText> タグ内に置かれていない場合）、ストリングで使用されている引用符文字をエスケープする必要があります。
- 割り当て区切り文字に対して二重引用符を使用する場合、HTML 内では二重引用符（"）に対して " を使用します。ActionScript では、エスケープシーケンス（\"）を使用することもできます。
注意: 外部ファイルからテキストをロードしている場合、二重引用符をエスケープする必要はありません。ActionScript でテキストストリングを割り当てている場合にのみ、二重引用符のエスケープが必要です。
- 割り当て区切り文字に対して単一引用符を使用する場合、HTML 内では単一引用符（'）に対して ' を使用します。ActionScript では、エスケープシーケンス（\'）を使用することもできます。
HTML フォーマット済みテキストを入力するときは、二重引用符または単一引用符内に HTML タグの属性を含める必要があります。引用符で囲んでいない属性値は、テキストの不適切なレンダリングなど、予期しない結果を生み出す可能性があります。引用符内では、引用符のエスケープ規則に従う必要があります。詳細については、HTML テキストでの特殊文字のエスケープを参照してください。

次の例では、テキストを指定するために MXML および ActionScript を使用している、いくつかの簡単な HTML フォーマット済みテキストを示しています。

<?xml version="1.0"?>
<!-- textcontrols/HTMLFormattedText.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500">
  <mx:Script><![CDATA[
     //The following is on one line.
     [Bindable]
     public var myHtmlText:String="This string contains <b>less than </b>, &lt;, <b>greater than</b>, &gt;, <b>ampersand</b>, &amp;, and <b>double quotation mark</b>, &quot;, characters.";
  ]]></mx:Script>

  <mx:Text id="htmltext2" width="450" htmlText="{myHtmlText}" />
  <mx:Text width="450">
     <mx:htmlText>
        <!-- The following is on one line. Line breaks would appear in the output. -->
        <![CDATA[
           This string contains <b>less than</b>, &lt;, <b>greater than </b>, &gt;, <b>ampersand</b>, &amp;, and <b>double quotation mark</b>,&quot;, characters.
        ]]>
     </mx:htmlText>
  </mx:Text>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

各テキストコントロールには、次のテキストが表示されます。

This string contains less than, <, greater than, >, ampersand, &, and double
quotation mark, " characters.

HTML テキストでの特殊文字のエスケープ

HTML テキストでの特殊文字のエスケープに適用される規則は、CDATA セクションと標準テキストでは異なります。

CDATA セクション

htmlText ストリングを指定する場合、次の規則が適用されます。

ActionScript（<mx:htmlText> タグを除く）では、タブに対する \t、改行文字に対する \n など、特殊文字に対して標準のバックスラッシュエスケープシーケンスを使用できます。また多くの特殊文字をエスケープするため、単一引用符に対する \'、二重引用符に対する \" など、バックスラッシュ文字を使用することもできます。\< の組み合わせは使用できません。改行文字の前にバックスラッシュを入力しても、表示テキストには何の影響もありません。改行文字の前にバックスラッシュを使用すると、割り当てステートメントを複数のテキスト行に分割することができます。
ActionScript と <mx:htmlText> タグの両方で、HTML タグおよび数値文字エンティティを使用できます。例えば、\n の代わりに   タグを使用することができます。
表示テキストに左の山カッコ（<）、右の山カッコ（>）またはアンパサンド（&）文字を挿入するには、それぞれ対応する文字エンティティ（<、> または &）を使用します。単一引用符と二重引用符に対して、" および ' エンティティを使用することもできます。これらのエンティティは、Adobe® Flash® Player および Adobe® AIR™ で認識される唯一の名前付き文字エンティティです。Adobe® Flash® Player および Adobe® AIR™ では、円記号（\）に対する ¥ などの数値エンティティは認識されますが、それに対応する文字エンティティである ¥ は認識されません。
次のコード例では、htmlText プロパティを使用してフォーマット済みテキストを表示します。

<?xml version="1.0"?>
<!-- textcontrols/HTMLTags2.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500">
  <mx:Text width="100%">
     <mx:htmlText><![CDATA[<p>This string contains a <b>less than</b>, &lt;.
        </p><p>This text is in a new paragraph.<br>This is a new line.</p>]]>
     </mx:htmlText>
  </mx:Text>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

このコードは、次のテキストを表示します。

This string contains a less than, <.

This text is in a new paragraph.
This is a new line.

標準テキスト

次の規則が適用されます。

タグを開いたり文字エンティティを開始したりするときに、HTML で左の山カッコ（<）、右の山カッコ（>）またはアンパサンド（&）文字を使用するには、文字エンティティを使用する必要があります。詳細については、htmlText プロパティの使用を参照してください。
小なり記号（&#060; を使用）、アンパサンド（&#038; を使用）を表示するには、名前付きエンティティである & と HTML 数値エンティティを組み合わせたものを使用する必要があります。大なり記号、二重引用符、単一引用符には、それぞれ標準文字エンティティである >、"、' を使用します。その他のすべての文字エンティティについては、円記号（\）に対する &#165; のように、数値エンティティの組み合わせを使用します。
ActionScript（<mx:htmlText> タグまたはインライン htmlText プロパティを除く）では、円記号を使用して、タブ文字、改行文字、引用符などの特殊文字（アンパサンドを除く）をエスケープできます。どのような場合においても、正しくエスケープされた HTML タグや数値エンティティを使用できます。例えば、\n の場所に   タグや &#013; エンティティを使用できます。

HTML テキストでのタグの使用

htmlText プロパティを使用するときは、Flash Player および AIR でサポートされている HTML のサブセットを使用します。このサブセットでは、以下のタグがサポートされます。

アンカータグ（<a>）

アンカー（<a>）タグは、ハイパーリンクを作成し、次の属性をサポートします。

href ブラウザにロードするページの URL を指定します。URL は、ページをロードしている SWF ファイルの場所に対して絶対的でも相対的でもかまいません。

target ページをロードする先のターゲットウィンドウの名前を指定します。

例えば、次の HTML コードは、Adobe の Web サイトへの「Go home」というリンクを作成するものです。

<a href='http://www.adobe.com' target='_blank'>Go Home</a>

また、スタイルシートを使用すると、アンカータグに a:link、a:hover および a:active の各スタイルを定義できます。

<a> タグでは、リンクテキストは青になりません。テキストのフォーマットを変更するには、フォーマットタグを適用する必要があります。また、スタイルシートを使用すると、アンカータグに a:link、a:hover および a:active の各スタイルを定義できます。

Label、Text、および TextArea コントロールは、ユーザーが htmlText プロパティ内のハイパーリンクを選択したときに link イベントを送出できます。link イベントを生成するには、次の例に示すように、ハイパーリンクのリンク先の前に event: を付けます。

<?xml version="1.0"?>
<!-- textcontrols/LabelControlLinkEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    borderStyle="solid" 
    backgroundGradientColors="[#FFFFFF, #FFFFFF]">
    
    <mx:Script>
        <![CDATA[
            import flash.events.TextEvent; 

            public function linkHandler(event:TextEvent):void {
                myTA.text="link occured.";
                // Open the link in a new window.
                navigateToURL(new URLRequest(event.text), '_blank')
            }
        ]]>
    </mx:Script>
    
    <mx:Label selectable="true" link="linkHandler(event);">
        <mx:htmlText><![CDATA[<a href='event:http://www.adobe.com'>Adobe</a>]]></mx:htmlText>
    </mx:Label>  

    <mx:TextArea id="myTA"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

link イベントを生成するには、Label コントロールの selectable プロパティが true に設定されている必要があります。

link イベントを使用すると、イベントが生成され、ハイパーリンクのリンク先の event: に続くテキストが、イベントオブジェクトの text プロパティに含まれます。ただし、ハイパーリンクは自動的には実行されません。イベントハンドラ内から手動でハイパーリンクを実行する必要があります。これにより、アプリケーション内でハイパーリンクを変更することができ、場合によってはハイパーリンクの実行を禁止することもできます。

ボールドタグ（）

ボールド（）タグは、テキストをボールドとしてレンダリングします。埋め込みフォントを使用する場合、ボールド体が使用可能になっていないとテキストは表示されません。エンドユーザーのローカルシステムに存在すると予想されるフォントを使用する場合、そのフォントが存在しなければ、システムにより近似値のボールドフォントが使用されるか、ボールドの代わりに標準フォントが使用されることがあります。いずれの場合でも、ボールドタグ内のテキストは表示されます。

次のコードの一部では、bold という語にボールド体が適用されます。

This word is <b>bold</b>.

fontWeight スタイルを使用してコントロール内のすべてのテキストに設定したボールドフォーマットを、 終了タグでオーバーライドすることはできません。

ブレークタグ（ ）

ブレーク（ ）タグは、テキスト内に改行を作成します。このタグは、Label または TextInput コントロールには影響しません。

次のコードの一部では、line という語句の後で改行します。

The next sentence is on a new line.<br>Hello there.

フォントタグ（）

フォント（）タグは、カラー、フォント、サイズなどのフォント特性を指定します。

フォントタグは、次の属性をサポートします。

color テキストカラーを指定します。16 進数のカラー値（#FFFFFF）を使用してください。その他の形式はサポートされていません。

face 使用するフォントの名前を指定します。カンマで区切られたフォント名の一覧を指定することもできます。その場合、Flash Player および AIR は最初に利用可能なフォントを選択します。指定したフォントがシステムにインストールされていないか、または SWF ファイルに埋め込まれていない場合、Flash Player および AIR は代替フォントを選択します。次の例は、フォントを設定する方法を示しています。

size フォントのサイズをポイント単位で指定します。+2 または -4 など、相対サイズを使用することもできます。

次の例では、 tag: を使用します。

<?xml version="1.0"?>
<!-- textcontrols/FontTag.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
  <mx:TextArea height="100" width="250">
     <mx:htmlText>
        <![CDATA[
           You can vary the <font size='20'>font size</font>,<br><font color="#0000FF">color</font>,<br><font face="CourierNew, Courier, Typewriter">face</font>, or<br><font size="18" color="#FF00FF"face="Times, Times New Roman, _serif">any combination of the three.</font>
        ]]>
     </mx:htmlText>
  </mx:TextArea>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

このコードの出力は、次のようになります。

htmlText ÉvÉçÉpÉeÉB<Default Para Font>ÇÝÉ^ÉOÇšégópÇµÇ‹Ç²ÅB

イメージタグ（<img>）

注意: <img> タグは完全にはサポートされておらず、場合によっては機能しないこともあります。

イメージ（<img>）タグは、外部の JPEG、GIF、PNG および SWF ファイルをテキストフィールドに埋め込みます。テキストは、テキストフィールドに埋め込んだイメージの周囲に自動的に配置されます。このタグがサポートされているのは、複数行でテキストを折り返す、動的テキストフィールドおよび入力テキストフィールドのみです。

デフォルトでは、Flash はテキストフィールドに埋め込まれたメディアをフルサイズで表示します。埋め込みメディアのサイズを指定するには、<img> タグの height および width 属性を使用します。

一般的に、テキストフィールドに埋め込まれたイメージは、<img> タグの次の行に表示されます。ただし、<img> タグがテキストフィールドの最初の文字の場合、イメージはテキストフィールドの最初の行に表示されます。

<img> タグには、イメージファイルへのパスを指定するための、1 つの必須の属性 src があります。その他の属性は、すべてオプションです。

<img> タグは、次の属性をサポートしています。

src GIF、JPEG、PNG、または SWF ファイルへの URL を指定します。この属性は必須です。その他の属性はすべてオプションです。外部ファイルは、完全にダウンロードされるまで表示されません。

align テキストフィールド内の埋め込みイメージの水平方向の整列を指定します。有効な値は、left および right です。デフォルト値は left です。

height イメージの高さをピクセルで指定します。

hspace イメージの周りのテキストが表示されない領域の、水平方向の間隔を指定します。デフォルト値は 8 です。

id 読み込まれたイメージの識別子を指定します。これは、ActionScript を使用して、埋め込みコンテンツを制御するときに役立ちます。

vspace イメージの周りのテキストが表示されない領域の、垂直方向の間隔を指定します。

width イメージの幅をピクセルで指定します。デフォルト値は 8 です。

次の例では、<img> タグの使用方法と、テキストがどのようにイメージの周囲に流し込まれるかを示します。

<?xml version="1.0"?>
<!-- textcontrols/ImgTag.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[#FFFFFF, #FFFFFF]" width="300" height="300">
  <mx:Text height="100%" width="100%">
     <mx:htmlText>
        <![CDATA[
           <p>You can include an image in your HTML text with the &lt;img&gt; tag.</p><p><img src='../assets/butterfly.gif' width='30' height='30' align='left' hspace='10' vspace='10'>Here is text that follows the image. I'm extending the text by lengthening this sentence until it's long enough to show wrapping around the bottom of the image.</p>
        ]]>
     </mx:htmlText>
  </mx:Text>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

埋め込みイメージからのハイパーリンクの作成

埋め込みイメージからハイパーリンクを作成するには、次の例に示すように、<a> タグ内に <img> タグを埋め込みます。

<?xml version="1.0"?>
<!-- textcontrols/ImgTagWithHyperlink.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="500" borderStyle="solid">
  <mx:TextArea width="100%" height="100%">
     <mx:htmlText>
        <![CDATA[
           <a href='http://www.adobe.com'><img src='../assets/butterfly.gif'/></a>Click the image to go to the Adobe home page.
        ]]>
     </mx:htmlText>
  </mx:TextArea> 
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ユーザーが <a> タグで囲まれたイメージ上にマウスポインタを移動させても、マウスポインタは、標準のハイパーリンクのようにハンドアイコンに自動的に変わることはありません。ハンドアイコンを表示するには、TextArea（または Text）コントロールに buttonMode="true" を指定します。マウスのクリックやキー入力などの双方向性は、<a> タグに囲まれた SWF ファイルに登録されません。

イタリックタグ（）

イタリック（）タグは、指定されたテキストをイタリックフォントで表示します。埋め込みフォントを使用する場合は、イタリックフォントが利用可能である必要があります。利用できない場合、テキストは表示されません。エンドユーザーのローカルシステムに存在すると予想されるフォントを使用する場合、そのフォントが存在しなければ、システムにより近似値のイタリックフォントが使用されるか、イタリックの代わりに標準フォントが使用されることがあります。いずれの場合でも、イタリックタグ内のテキストは表示されます。

次のコードの一部では、italic という語にイタリックフォントが適用されます。

The next word is in <i>italic</i>.

fontStyle スタイルを使用してコントロール内のすべてのテキストに設定したイタリックフォーマットを、 終了タグでオーバーライドすることはできません。

リスト項目タグ（<li>）

リスト項目（<li>）タグは、タグで囲まれたテキストの先頭に黒丸を付けて、新しい行に表示します。これ以外の種類の HTML リスト項目には使用できません。終了の </li> タグは、改行を生成します（ただし、</li><li> を入力すると単一の改行を生成します）。HTML とは異なり、<li> タグを <ul> タグで囲むことはできません。例えば、次の Flex コードでは、2 つの項目を持つ黒丸付きリストが生成されます。

<?xml version="1.0"?>
<!-- textcontrols/BulletedListExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500">
  <mx:Text width="100%">
     <mx:htmlText >
        <![CDATA[
           <p>This is a bulleted list:<li>First Item</li><li>Second Item</li></p>
        ]]>
     </mx:htmlText>
  </mx:Text>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

注意: <li> タグは、Label コントロールでは正常に機能しません。TextInput コントロールでは、テキストの最初の文字の前に挿入する必要があります。

段落タグ（）

段落（）タグは、新しい段落を作成します。開始タグ（）では改行は強制されませんが、終了タグ（）では改行が強制されます。HTML 内とは異なり、 タグでは段落間に強制的にダブルスペースは挿入されません。スペースは、  タグで生成されるものと同一です。

 タグは、次の属性をサポートします。

align 段落内のテキストの整列を指定します。有効な値は、left、right、center、および justify です。

次のコードの一部では、2 つの中央揃えの段落を作成します。

<p align="center">This is a first centered paragraph</p>
<p align="center">This is a second centered paragraph</p>

テキストフォーマットタグ（<textformat>）

テキストフォーマット（<textformat>）タグでは、HTML テキストフィールド内で TextFormat クラスの段落フォーマットプロパティのサブセットを使用できます。このサブセットには、行間の行送り、インデント、マージン、タブストップなどが含まれます。テキストフォーマットタグとビルトインの HTML タグを結合することができます。テキストフォーマットタグは、次の属性をサポートします。

blockindent <textformat> タグ本体のテキストの左マージンからのインデントをポイント単位で指定します。
indent <textformat> タグ本体の先頭文字の左マージンまたはブロックインデント（指定されている場合）からのインデントをポイント単位で指定します。
leading 行間の垂直の行送りを指定します。
leftmargin 段落の左マージンをポイント単位で指定します。
rightmargin 段落の右マージンをポイント単位で指定します。
tabstops カスタムのタブストップを負でない整数の配列として指定します。

下線タグ（）

下線（）タグは、タグが付けられたテキストに下線を表示します。

次のコードの一部では、underlined という語句に下線を引きます。

The next word is <u>underlined</u>.

textDecoration スタイルを使用してコントロール内のすべてのテキストに設定した下線を、 終了タグでオーバーライドすることはできません。

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

Adobe Flex 3 ヘルプ

htmlText プロパティの使用

HTML タグとテキストの指定

HTML テキストでのタグの使用