TLFの最近のブログ記事
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.htmlFlash 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 での埋め込み例
package {
import flash.display.Sprite;
public class TaigaFont extends Sprite {
[Embed(
source = "asset/font/KozMinPro-Bold.otf",
fontName = "testFont",
mimeType = "application/x-font",
embedAsCFF = "true",
advancedAntiAliasing = "true",
unicodeRange = "U+5927, U+96c5" //大雅
)]
public static const FONT:Class;
}
}
上記コードは、フォントを埋め込んだクラスを 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+RepriseAdobe Open Source : FontTranscoder.java
http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/modules/compiler/src/java/flex2/compiler/media/FontTranscoder.javazenoplex : 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 上で「定義へ移動」を実現させるためには、下記手順が必要です。
必要なもの
Flash Builder 4 Beta
( Flex Builder 3 では動作しません。Flash Builder 4 Beta のシリアルは、Flex Builder 3 のライセンスを持っている方のみ、こちらから入手できます。 )Flex SDK
( 4.0.0.8702 以降のバージョン )
手順
＜Flash Builder 4 Beta のインストールフォルダ＞sdks\4.0.0\frameworks\libs\netmon.swc を、＜自分で用意した Flex SDK＞\frameworks\libs にコピー
新規 Flex プロジェクトまたは、AcrionScript プロジェクトを作成
作成したプロジェクトのライブラリパスの設定で、textLayout.swc の参照を削除
＜自分で用意した 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
作成した flashx フォルダを、作成したプロジェクトのデフォルトパッケージにコピー
設定ファイル (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 が修正されバージョンアップすれば、上記手順はすべて不要になると思うのですが、当面はこれでしのげれば…といったところでしょうか。
TLF のオープンソース化が決定し、さっそく Flex SDK 4.0.0.8702 にソースが同梱されています。 バグに関しても、JIRA に投稿できるようです。
Text Layout Framework Team: The Text Layout Framework is now Open Source!
http://blogs.adobe.com/tlf/2009/07/the_text_layout_framework_is_n.html
面白くなってきましたね。
このエントリでは、日本語の縦書きについて書きます。
サンプル ( 画面とソース : Build 465 でビルド )
http://labs.taiga.jp/flex3/TLFSample05/
http://labs.taiga.jp/flex3/TLFSample05/srcview/
サンプルについて、簡単にまとめます。
- TextLayoutFormat クラスで、TextFlow のフォーマットを一括で定義しています。
- textAlign, direction, blockProgression プロパティを変更して縦書きを実現しています。
- justificationRule プロパティの値を JustificationRule.EAST_ASIAN ("eastAsian") にしないと、「。」などの表示位置がおかしくなる場合があります。
- justificationStyle プロパティは TLF 専用ではないので、JustificationStyle クラスの説明を確認してください。
- 縦書きにすると、描画位置が ContainerController.container の矩形領域の外になってしまうことに注意してください。
表示する分には問題なさそうなんですが、テキスト編集やマウス操作をするようなものを作るには、まだ厳しい段階なのかなと思いました。
少し間が空いてしまいましたが続きを書きます。
このエントリを書いている時点で、TLF のビルドのバージョンは 465 なのですが、まだクラス名が変わったりパッケージ構成が変わったりと、色々大変なようです。
サンプル ( 画面とソース : Build 465 でビルド )
http://labs.taiga.jp/flex3/TLFSample04/
http://labs.taiga.jp/flex3/TLFSample04/srcview/
今回アップしたサンプルは、カラムを複数定義したものなので、カラム系のプロパティについて簡単にまとめます。
- TextFlow.columnCount プロパティで、カラム数を定義します。
- TextFlow.columnGap プロパティで、カラム間のギャップを定義します。
- TextFlow.columnWidth プロパティで、単一カラムの幅を定義します。
- columnCount と columnWidth とは併用可能ですが、columnWidth が優先されます。
ついでにサンプルでは、ContainerController.container プロパティとして使用しているプライベートクラス MySprite の中身も少し更新しました。
入力文字列の描画領域が、ContainerController.container の矩形領域超えると、scrollRect プロパティにもちょっかい出しているようで、再設定しています。
ここら辺の詳細フローには興味があるのですが、ソースが見れないのは残念です。
つい先日知ったばかりなのですが、TLF の Weekly Builds が Adobe Labs で公開されています。( ご丁寧に Feed も配信しています )
http://labs.adobe.com/downloads/textlayout.html
早速ダウンロードして中身を見てみたところ、以前 3 つあった SWC...
- textLayout_conversion.swc
- textLayout_core.swc
- textLayout_edit.swc
が
- textLayout.swc
…という一つの SWC に統合されていました。
一部クラス名やメソッド名も変わっています。
サンプル ( 画面とソース : Build 432 でビルド )
http://labs.taiga.jp/flex3/TLFSample03/
http://labs.taiga.jp/flex3/TLFSample03/srcview/
flashx.textLayout.elements 編
Overview of the flashx.textLayout.elements package
http://livedocs.adobe.com/labs/textlayout/flashx/textLayout/elements/package-detail.html
TLF は、主に flashx.textLayout.elements によって定義されます。
モデルはテキストを表すために、下記のような階層的な Tree を使います。[*1]
[*1] : flashx.textLayout.elements クラスの構造
Tree のルートノードは、常に TextFlow クラスのインスタンスです。
div や p など見慣れた HTML 要素のような名前もありますが、これらはすべてクラスとして用意されています。[*2]
[*2] : TLF で使用できるタグ一覧
TextFlow はコンテナとしてテキスト全体を表しています。
文字のみだと分かりづらいので、サンプルを用意しました。
編集とアンドゥ機能をつけたものです。
マークアップを使用したサンプル ( 画面とソース )
http://labs.taiga.jp/flex3/TLFSample01/
http://labs.taiga.jp/flex3/TLFSample01/srcview/
すべてクラスを使用したサンプル ( 画面とソース )
http://labs.taiga.jp/flex3/TLFSample02/
http://labs.taiga.jp/flex3/TLFSample02/srcview/
ちなみに、それぞれのサンプルで MySprite という Sprite のサブクラスを使用していますが、TLF が内部的に addChild() や removeChild() を頻繁に繰り返している様子を確認するためです。trace() の出力を追っていると、テキスト系クラス制御のヒントになり見ていて面白いですね。
なお、今回もでしたが、仕事が忙し目なので、次の更新も少々遅れるかも知れません。
[ 追記 ] : nod せんせいにいわれて気付いたんですが、TLFSample02 のようにマークアップエレメントのクラスをひとつひとつ生成して addChild() して使うケースでは、文字が二重に入力されてしまうようです。これはバグでしょうか？困りますね。
