Flash CS5 の TLF テキストでは、クラシックテキストでは実現できなかったサロゲートペア文字の入力が可能になりました。

Flex 4 に置き換えて表現すると、MX のテキストコンポーネントでは実現できなかったサロゲートペア文字の入力が SPARK のテキストコンポーネントでは可能…ということになります。

さらに TLF には CharacterUtil というクラスが用意されており、任意の文字コードが上位サロゲートか下位サロゲートかを調べることができます。この機能を組み合わせることによって、任意の文字列がサロゲートペア文字かどうかを調べることもできます。

• サンプル ( 画面とソース : Flex 4.1.0.16076 でビルド )
  http://labs.taiga.jp/flex4/TLFSample09/
  http://labs.taiga.jp/flex4/TLFSample09/srcview/

• 参考

  • JIS X 0213:2000/2004 surrogate pairs
    http://w3.kcua.ac.jp/~fujiwara/jis2000/jis2004/jisx0213-2004-surro.html

  • [JavaScript] サロゲート・ペアに対応した文字列操作関数を書いてみた / LiosK-free Blog
    http://liosk.blog103.fc2.com/blog-entry-162.html

  • Flash Player 10.1でFlex Sparkの日本語インライン入力とサロゲートペア – kenichis::TechNotes
    http://d.hatena.ne.jp/kenichis/20100625/1277475909

前回のエントリに引き続き、今回は MXML で TLF に埋め込みフォントを適応させるサンプルをアップします。

TLF が使用されている Spark コンポーネントは、RichText と RichEditableText の 2 つで、AS で使用するのと比べてかなり楽に使えます。その代わり、Linked Containers 機能のみ使用できない仕様になっているため、注意が必要です。

• サンプル ( 画面とソース : Flex 4.0.0.10485 でビルド )
  http://labs.taiga.jp/flex4/TLFSample08/
  http://labs.taiga.jp/flex4/TLFSample08/srcview/
  アップしたサンプルでは、埋め込み許可リストに記載されている内容に基づき、小塚ゴシックを SWF に埋め込んでいます。
  http://www.adobe.com/jp/type/browser/legal/embeddingeula.html

• 参考
  Adobe Open Source : Spark Text Primitives – Flex SDK
  http://opensource.adobe.com/wiki/display/flexsdk/Spark+Text+Primitives

TLF に埋め込みフォントを適応させるための手段について書きます。
FTE の仕様上、TLF の埋め込みフォントフォーマットは DefineFont4(CFF) フォーマットである必要があります。( 従来の TextField に使用されているフォントフォーマットは DefineFont3 フォーマットです )

フォント埋め込み方法

AS, MXML のどちらを使用しても CFF 形式でフォントを埋め込むことは可能ですが、Flash Builder 4 β 2 付属の SDK(4.0.0.10485) で確認したところ、フォント埋め込み時の Embed メタデータタグの引数 cff が、embedAsCFF と名称変更されていたので注意が必要です。

AS での埋め込み例

上記コードは、フォントを埋め込んだクラスを SWF に書き出して、Loader クラスから外部読み込みして使用することを想定したものですが、この場合、基底クラスは Sprite または MovieClip クラスである必要があります。( Font クラスを基底クラスにしても mxmlc は SWF を書き出せますが、Loader が読み込んでくれません )

読み込み完了後、作成した TextFlow インスタンスの fontLookup プロパティの値を “embeddedCFF” (FontLookup.EMBEDDED_CFF) に定義して、TextLayoutFormat の fontFamily に取得したフォント名を定義します。

• サンプル ( 画面とソース : Flex 4.0.0.10485 でビルド )
  http://labs.taiga.jp/flex4/TLFSample07/
  http://labs.taiga.jp/flex4/TLFSample07/srcview/
  アップしたサンプルでは、埋め込み許可リストに記載されている内容に基づき、小塚明朝を SWF に埋め込んでいます。
  http://www.adobe.com/jp/type/browser/legal/embeddingeula.html

• 参考

  • Adobe Open Source : Font Embedding Reprise – Flex SDK
    http://opensource.adobe.com/wiki/display/flexsdk/Font+Embedding+Reprise

  • Adobe Open Source : FontTranscoder.java
    http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/modules/compiler/src/java/flex2/compiler/media/FontTranscoder.java

  • zenoplex : UNICODE RANGE GENERATOR
    http://www.zenoplex.jp/tools/unicoderange_generator.html

  • 高橋文樹.com : TextlayoutFrameworkやFlash.text.engineで埋め込みOpenTypeフォントを使う方法
    http://takahashifumiki.com/web/programing/710/

Linked Containers と呼ばれる機能のサンプルをアップしました。 TextFlow.flowComposer プロパティに、表示オブジェクト情報を持った複数の ContainerController インスタンスを登録することにより、柔軟なレイアウトを作ることができます。

これはなかなか面白いです。

• サンプル ( 画面とソース : Flex 4.0.0.9215 でビルド )
  http://labs.taiga.jp/flex4/TLFSample06/
  http://labs.taiga.jp/flex4/TLFSample06/srcview/

• 参考
  pekolog» ブログアーカイブ » Text Layout Frameworkによるブックビューア制作の流れ(1)
  http://b-o-w.jp/blog/2009/07/22/making_bcck_viewer_1/

オープンソースになった TLF ですが、FLash Builder 4 Beta 上で「定義へ移動」を実現させるためには、下記手順が必要です。

必要なもの

1. Flash Builder 4 Beta
   ( Flex Builder 3 では動作しません。Flash Builder 4 Beta のシリアルは、Flex Builder 3 のライセンスを持っている方のみ、こちらから入手できます。 )

2. Flex SDK
   ( 4.0.0.8702 以降のバージョン )

手順

1. ＜Flash Builder 4 Beta のインストールフォルダ＞sdks\4.0.0\frameworks\libs\netmon.swc を、＜自分で用意した Flex SDK＞\frameworks\libs にコピー

2. 新規 Flex プロジェクトまたは、AcrionScript プロジェクトを作成

3. 作成したプロジェクトのライブラリパスの設定で、textLayout.swc の参照を削除

4. ＜自分で用意した Flex SDK＞\frameworks\projects\textLayout 配下にある下記 4 つのフォルダをマージした flashx フォルダを新規に作成
   ( 下記プロジェクトをすべて結合したものが textLayout.swc として利用されています )

   • textLayout_conversion\src\flashx
   • textLayout_core\src\flashx
   • textLayout_edit\src\flashx
   • textLayout_textField\src\flashx

5. 作成した flashx フォルダを、作成したプロジェクトのデフォルトパッケージにコピー

6. 設定ファイル (flex-config.xml) を定義
   (TLF のソースに条件付きコンパイル用の定数が記述されているので、下記内容の設定ファイルを作成して、load-config オプションで指定します。個人的にはローカル設定ファイルをお薦めします。 )

   <flex-config>
    <compiler>
        <define>
            <name>CONFIG::debug</name>
            <value>false</value>
        </define>
        <define>
            <name>CONFIG::release</name>
            <value>true</value>
        </define>
    </compiler>
</flex-config>

これで、TLF を使ったコンテンツを作ってデバッグするとき、内部の動作が確認できます。

Flash Builder Beta が修正されバージョンアップすれば、上記手順はすべて不要になると思うのですが、当面はこれでしのげれば…といったところでしょうか。