TLFの最近のブログ記事
来週 2011 年 2 月 7 日 ( 月 ) に、工学社から Flex 4 の書籍が発売されます。
タイトルは『 Flex 4 プログラミングガイド』で、初の単行本…単著になります。
内容は、Flex 4 SDK についての解説がほとんどで、新機能と Spark コンポーネントについて掘り下げて書きました。( 目次は工学社のサイトから )
Flex 4 マスターシリーズが基になっているような箇所もありますが、元々私が担当していた箇所は加筆し、担当していなかった箇所はほぼゼロから書き下ろしています。 初級～中級者をターゲットにしていますが、日ごろ業務で使いこなしている上級者も退屈しないような内容にしたつもりです。
サンプルプロジェクトの FXP を 70 点強収めた CD-ROM 付きで、価格は ¥2,415 ( 本体 ¥2,300 ) です。
同業者さまはもちろん、教育、学術系の方々も、よろしければ是非。
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/
