Text Layout Framework による 新たな文字表現
今月号の記事
- 2008年最も注目を集めた記事は何？
the Edge newsletter/ADC 人気記事トップ10 - アニメーターのためのFlash CS4（1）
モーショントゥイーン - wonderfl：サイト上でFlashを作成できる！
ActionScriptを勉強できる！ - Text Layout Framework による 新たな文字表現
- Adobe Dreamweaver CS4：Subversion機能の利用ガイド
- 日本ユーザーの声を反映したFireworks CS4
- ナイスなセッション、見逃していませんか？
アドビ西村がおすすめする
Adobe MAX Japan 2009おすすめセッション - サービス & サポート情報
- イベント／セミナー情報
Adobe Flash Player 10 と Adobe AIR 1.5 には、DTP 用アプリケーションと同等の文字組を可能にする新しいテキストエンジンが搭載されています。これを扱うのが今回ご紹介する Text Layout Framework です。これによってこれまでの Web の常識を覆す文字表現が可能になります。30以上の言語環境に対応し、選択、編集、コピー&ペースト、リガチャやカーニング等を含んだ文字制御や縦中横の設定、インライン画像やリンクの埋め込みといったこともできます。さらに、これらの設定は HTML と似た XML 形式のマークアップ（TextLayout XML）で記述されていて、ActionScript を使って動的にスタイルを変更させたり、すべて外部の XML ファイルに記述して動的に読み込むこともできます。これらはすべて ActionScript 3.0 によって実現されており、Flash CS4 Professional のような特定のソフトウェアの機能というわけではありません。本記事で実際にその柔軟性と可能性を感じて頂ければと思います。
Flash によるオンラインテキストエディタ
まずは Adobe Labs - Text Layout Editor Demo Application にアクセスして下さい。まるでデスクトップのアプリケーションが起動したかと見紛うようなエディタ画面が表示されますが、これはすべて Flash 上で動作しており、他のサーバーテクノロジーや Web サービス等は一切使用されていません。大変リッチで様々な設定が行えることに驚かされます。まだベータ段階であり、メニュー等の日本語化や動作が緩慢な点は何卒ご了承下さい。
試しに、左側のエディタ上でなにか文字を入力した状態で、下段にある「DATA SOURCE」タブの「Markup...」ボタンをクリックして下さい。以下のようなダイアログウィンドウが開き、その中に HTML にたいへんよく似た XML 形式で記述されたコードが表示されます。これが、Text Layout Framework で使用されるマークアップ言語です。ここでは、この XML 形式の言語を仮に TextLayout XML と呼ぶことにします。試しにコードの一部を変更し、「Import」ボタンをクリックして下さい。
オンラインテキストエディタ上の表示が変化したのではないでしょうか。このダイアログウィンドウはコピー&ペーストすることもできますので、エディタ上で編集した内容を別のテキストエディタにコピーして編集したり、新たに作成した TextLayout XML をこのウィンドウにペーストして実際の表示を確認したりすることができます。このようにして作成した TextLayout XML ファイルは、ActionScript を使って呼び出すこともできますし、直接 ActionScript の中に命令として記述することも出来ます。
TextLayout XML の詳細につきましては、Text Layout Framework Overview のText Layout Framework Markup の項をご参照下さい。
TextLayout Framework によるレイアウトの設定
Adobe Labsで公開されているText Layout Editor Demo Application を開くと、ウィンドウ右側のパネルに各レイアウト設定が表示されます。それぞれ各パネルの設定内容は以下のようになっています。なお、設定を適用するためには、ウィンドウ左側のテキスト入力画面上であらかじめその適用させたい文字列を選択している必要がありますのでご注意下さい。
 |
CHARACTER | 文字 |
|---|---|---|
| Font | フォント | |
| Lookup | デバイスフォントと埋め込みフォントのどちらを使うか | |
| Size | フォントサイズ | |
| Leading | 行送り量 | |
| 太字、イタリック、下線、取り消し線、上添え字、下添え字、縦中横 | ||
| Kerning | 文字のカーニングの有無 | |
| Tracking Right | 右寄せ | |
| Tracking Left | 左寄せ | |
| Case | 書式。文字の大文字小文字 | |
 |
PARAGRAPH | 段落 |
| Alignment | 揃え | |
| Margin | 左と右のマージン幅 | |
| Space | 段落の前と後に空けるスペース量 | |
| Just Rule | 段落境界線 | |
| Direction | 組み方向 | |
| Leading Base | 行送りの基準位置 | |
| Leading Direction | 行送りの方向 | |
 |
TAB | タブの設定 |
| Show Ruler | ルーラーの表示、非表示 | |
| Position | ルーラー上におけるタブの位置 | |
| Tab Type | タブに対する文字列の基準位置 | |
 |
ADVANCED CHARACTER |
詳細文字形式 |
| Digit Case | 数字表記における文字種別 | |
| Digit Width | 数字表記における文字幅 | |
| Dominant Baseline | 基準となるベースラインの選択 | |
| Alignment Baseline | ベースライン揃え | |
| Baseline Shift | ベースラインの移動 | |
| Ligatures | 合字。2文字以上の文字を1つとして表示。 | |
| Rotation | 文字の回転 | |
| Alpha | 文字の透明度 | |
| Break | 折り返し時の改行設定 | |
| Locale | 言語設定 | |
 |
ANTIALIAS | アンチエイリアス |
| Antialias | 使用するアンチエイリアスの形式を選択 | |
| Grid Fit | サイズの小さいフォント等、アンチエイリアス時にグリッドに合わせることで読みやすさを向上させるかどうか | |
 |
CONTAINER | 段組 |
| Alignment | 段組の揃え | |
| Columns | 段数 | |
| Columns Width | 段の幅 | |
| Columns Gap | 段間の幅 | |
| Geometry | 上下左右の余白設定 | |
| First Line Offset | 先頭行のオフセット | |
| First Line Offset Basis | 先頭行のオフセットに対する基準 | |
 |
FLOW | テキストの向きに関する設定 |
| Orientation | 組み方向 | |
| Direction | 左右の方向 | |
| Line Breaks | 改行設定 | |
| V.Scroll H.Scroll | 縦横スクロールカーソルの表示設定 | |
パネルを１つずつ見ると、沢山の設定項目があるために難しく感じるかもしれません。最初は一部のパラメータだけを変更して、それぞれの効果を確認しながら設定を行ってみて下さい。現在のところ Text Layout Framework におけるレイアウト設定内容の詳細は、Text Layout Component for Flash CS4 Professional Overview の英語による解説のみとなっております。今後のバージョンでは日本語を含めた各国語版のご提供を予定しておりますので、何卒ご了承下さい。
お好みの設定が行えたら「Markup...」ボタンをクリックしてTextLayout XML を生成し、コピー&ペーストでテキスト編集ソフトを使って任意の場所にファイルを保存して下さい。このようにして作成したTextLayout XML は、このあとの解説で ActionScript を使って動的に呼び出して Flash Player 上で表示させてみたいと思います。
開発環境のセットアップ
作成したTextLayout XML を表示させるためには、Flash の開発環境に Text Layout Framework が必要です。それぞれ以下の手順でインストールを行って下さい。
Flash CS4 Professional
Adobe Labs からText Layout Component for Adobe Flash CS4 Professional をダウンロードし、解凍を行って下さい。Flash CS4 Professional が終了した状態で Adobe Extension Manager CS4 を起動し、解凍後に生成される拡張子MXPの機能拡張書類を読み込み、インストールします。これによってFlash CS4 の コンポーネントパネルに新たに TextLayout コンポーネントが追加されます。このコンポーネントをステージ上にドラッグすることで Text Layout Framework が有効になります。
さらに、Flash CS4 には先ほど紹介した オンラインテキストエディタ と同様の機能を持つ Text Layout パネルがインストールされます。TextLayout コンポーネント をステージにドラッグした後、Flash CS4 の 「ウインドウ > その他のパネル > Text Layout 」をクリックしてパネルを表示させます。これによって、直接 Flash アプリケーション上で UI を使ったレイアウトの設定を行うことが出来ます。また、オンラインテキストエディタと同様、Text Layout パネル下側にある「Markup...」ボタンをクリックすることで、 TextLayout XML をコピー&ペーストしてデータのやりとりをすることもできます。
「TEXT Layout」パネルの編集内容を 「Send to Stage」でステージに反映
残念ながら Text Layout コンポーネント上に直接テキストの入力を行う事はできません。必ず Text Layout パネル下側にある「Get From Stage」と「Send to Stage」ボタンをクリックして更新を行って下さい。
なお、このようにFlash CS4 上で作成したテキストのレイアウトは、単にパブリッシュするだけで一切のコーディング作業を行うことなく Text Layout Framework を使用した swf を生成することが出来ます。
Flex Gumbo
open source Flex Gumbo build には既に Text Layout Framework が含まれた形で配布されていますが、ビルドによっては含まれていない場合も考えられます。解凍したSDKフォルダの中の frameworks/libs に textLayout... のファイル名で始まる 3 つの swc ファイルが存在するかどうかご確認下さい。もしないようであれば、別のビルドのダウンロードをお試し願います。
Flex 3.2
Adobe Labs から Text Layout Framework をダウンロード、解凍し、libs フォルダの中の3つのswcファイルを Flex SDK3.2/frameworks/libs にコピーします。
ActionScript を使って TextLayout XML を読み込む
開発環境のセットアップが終わりましたら、早速外部に保存したTextLayout XMLを読み込んでみましょう。あらかじめ作成したTextLayout XML ファイルを、Flash CS4 であれば FLAファイルと同階層、Flex Builder 3.02 であれば Source フォルダの中に入れて下さい。
Flash CS4 の場合は、ActionScript 3.0 形式の新規書類を作成し、「コンポーネント」パネルから TextLayout コンポーネントをステージ上にドラッグします。
次に以下のような ActionScript を記述します。ムービーを作成し、実際にTextLayout XML で設定したレイアウトの情報が反映されるかどうかお試し下さい。
import flash.events.Event;
import flash.net.*
// 使用するText Layout Framework クラスのロード
import flashx.textLayout.container.*;
import flashx.textLayout.compose.*;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextFilter;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.dataFormat = URLLoaderDataFormat.TEXT;
xmlLoader.addEventListener(Event.COMPLETE, loadComplete);
var xmlReq:URLRequest =new URLRequest("txtLayout.xml");
xmlLoader.load(xmlReq);
function loadComplete (event:Event):void {
//読み込んだXMLをセット
var markup:XML = new XML(xmlLoader.data);
//TextFlow インスタンスの作成
var myFlow:TextFlow=TextFilter.importToFlow(markup,TextFilter.TEXT_LAYOUT_FORMAT);
// コントローラを作成。初期サイズを縦横600ピクセルで設定し、DisplayObjectContainer に表示
var contr:IContainerController=new DisplayObjectContainerController(this,600,600);
// TextFlow の flowComposerプロパティを使って作成したコントローラを関連づけ
myFlow.flowComposer.addController(contr);
// 再描画
myFlow.flowComposer.updateAllContainers();
}
Text Layout Framework として追加された API の詳細につきましては、以下のオンラインリファレンスをご覧下さい。
Text Layout Framework API Reference
さらなる可能性を求めて
駆け足で Text Layout Framework をご紹介しましたが、察しの良い Edge 読者の皆さんは早くも様々なアイデアを思い付いているのではないでしょうか。Text Layout Framework はこのように、マークアップ言語とそれを表示する Flash Player とを分離して取り扱うことが出来ます。現在のところ TextLayout XML を作成するためには、ご紹介したようなオンラインテキストエディタや直接コードを手書きするくらいしかありませんが、今後専用の編集アプリケーションや、DTP 用の高機能なアプリケーションが直接書き出しに対応してくれることも考えられます。また、データ内容はあくまでもXMLであるため、サーバーアプリケーション等から動的に生成することで、さらに面白いインタラクティブな効果やデータの共有化が容易になることが予想できます。その他、Adobe サイトで提供しておりますデモムービーやサンプル等もあわせてご参照下さい。
- interactive feature demo (トップにあるムービー内の「start tour」ボタンをクリックして下さい)
- Beta Release Notes
- Text Layout Framework Team
 Simple Editor Text Layout Frameworkに同梱されているサンプル |
 interactive feature demo 画面右上の下向き矢印をクリックすると サンプルをダウンロードできる |
まだ Text Layout Framework はベータ段階ということもあり、日本語の開発環境やマニュアル等が不備な点をお詫びいたします。今後さらなる機能の追加と改善を重ね、新しい Web の可能性をご提供していきたいと思います。今後も何卒ご注目下さい。
