まだ制作用のPCにFlash CS5が入っていない（というか、CS4も入っていない。使ってるのはCS3です）ので、このままだとTLFが使えない。CS5はそのうち導入する予定だけど、取り急ぎFlashDevelop + Flex4SDKの組み合わせでなんとかならんか試してみます。

サンプルの入手

SourceForgeにAdobeがTLFのページを作っているので、そこからサンプルファイルをゲット。

Text Layout Framework / Dashboard

上記のページの上の方にある「Download examples.」というリンクをクリックして、サンプルファイル一式の詰まったzipファイルをダウンロード。解凍して出てくるのは「actionscript」「flex」という2つのフォルダ。「flex」の方はmxmlでの開発用なので、今回使うのは「actionscript」フォルダの方かな。

FlashDevelopで開く

FlashDevelopを立ち上げ、上部メニューから「プロジェクト＞プロジェクトをインポート」を選択。ダウンロードした「actionscript」フォルダの中にある「TextLayout¥.actionScriptProperties」を選択。

すると無事にプロジェクトが開いた！やった～。

早速Ctrl+Enterでプロジェクトをテスト。あれ？エラーが出る？？

C:¥Program Files¥FlashDevelop¥Tools¥flexsdk¥frameworks¥flex-config.xml(53): Error: unable to open ‘libs/player/9.0/playerglobal.swc’

む。FlashPlayerの書き出しバージョンの問題か？というわけで、FlashDevelopのプロジェクト設定の「書き出し」タブでプレーヤーのバージョンをFlashPlayer10に変更。

改めてプロジェクトをテスト。すると・・・おお、ビルド成功！！

swcの読み込み

さてさていろいろいじってみるか。・・・と思ったものの、あれ？TLF関係のクラスのコード補完が出ない？調べてみると、どうやらTLF関連のswcファイルを設定しないとコード補完などが使えない様子。というわけで、swcファイルを読み込みます。

FlashDevelopのインストール時にFlexSDKも一緒にインストールした場合、TLF関連のswcであるtextLayout.swcは、以下の場所にあります。

C:¥Program Files¥FlashDevelop¥Tools¥flexsdk¥frameworks¥libs¥textLayout.swc

というわけで、プロジェクト設定の「コンパイラー設定」タブを開きます。

で、「Advanced | 高度な設定」の中にあるSWC Librariesの行をクリックし、右端に表示されるボタンをクリックして出てくる「文字列コレクション　エディタ」のウィンドウに上記のパスをペースト。

すると、TLF関係のクラスに色がついて、コード補完も使えるようになりました！

ちなみにこのswcファイル、先程のSourceForgeのサイトからも落とせる模様。

File Manager – SourceForge Downloads

上記のDownload textLayout_build.zipと書いてある箇所をクリックすると、swcやらasやらドキュメントやらまとめて入ってるzipファイルがゲットできます。Looking for the latest version?と書いてあるから、ひょっとするとSDK付属のものとバージョンが違うのかな？

縦書きの表示

次に縦書き表示に挑戦。参考にしたのは下記のページ

feb19.jp blog – Flash CS5 を予習　～Text Layout Framework (TLF) 編～

先程のAdobeのサンプルに、feb19さんのコードを参考にしてコードを追加してみました。とりあえず縦書き表示させるために、TextFlow.directionプロパティとTextFlow.blockProgressionプロパティを設定。

////////////////////////////////////////////////////////////////////////////////<br />
//<br />
//  ADOBE SYSTEMS INCORPORATED<br />
//  Copyright 2008-2009 Adobe Systems Incorporated<br />
//  All Rights Reserved.<br />
//<br />
//  NOTICE: Adobe permits you to use, modify, and distribute this file<br />
//  in accordance with the terms of the license agreement accompanying it.<br />
//<br />
//////////////////////////////////////////////////////////////////////////////////</p>
<p>package {<br />
	import flash.display.Sprite;<br />
	import flash.text.engine.TextBaseline;<br />
	import flashx.textLayout.formats.BlockProgression;</p>
<p>	import flashx.textLayout.compose.StandardFlowComposer;<br />
	import flashx.textLayout.container.ContainerController;<br />
	import flashx.textLayout.elements.ParagraphElement;<br />
	import flashx.textLayout.elements.SpanElement;<br />
	import flashx.textLayout.elements.TextFlow;<br />
	import flashx.textLayout.formats.Direction;</p>
<p>	/** Simplest possible &quot;Hello, World&quot; text example */<br />
	public class HelloWorld extends Sprite<br />
	{<br />
		public function HelloWorld()<br />
		{<br />
			var textFlow:TextFlow = new TextFlow();<br />
			textFlow.locale = &quot;ja&quot;;<br />
			textFlow.direction = Direction.LTR;<br />
			textFlow.blockProgression  = BlockProgression.RL;</p>
<p>			var p:ParagraphElement = new ParagraphElement();<br />
			textFlow.addChild(p);</p>
<p>			var span:SpanElement = new SpanElement();<br />
			span.text = &quot;当帝の外戚の大臣一派が極端な圧迫をして源氏に不愉快な目を見せることが多くなって行く。つとめて冷静にはしていても、このままで置けば今以上な禍いが起こって来るかもしれぬと源氏は思うようになった。&quot;;<br />
			span.fontSize = 24;<br />
			p.addChild(span);</p>
<p>			textFlow.flowComposer.addController(new ContainerController(this, this.stage.stageWidth, this.stage.stageHeight));<br />
			textFlow.flowComposer.updateAllControllers();<br />
		}<br />
	}<br />
}

feb19さんのコードと比べると、一部のクラス名が変わっている模様（DisplayObjectContainerController → ContainerControllerとか）
んでテストしてみたのがこちら。

おお～。縦書きになってる！・・・けど、文末の句読点の位置おかしくね？ということで、その後feb19さんのページを参考にさらにコードをいくつか追加みたんですが、まだ解決せず。今後の課題ですな。とりあえず、縦書きが表示できたので今日のところは良しとします。
追記：解決しました。textFlow.directionの値がDirection.RTLだったのをDirection.LTRにしたら直りました。

ちょっと戸惑ったのはTextFlowインスタンス。これ、DisplayObjectじゃないんですね。じゃあどうやってステージ（など）に表示させてるんだろう？と思ったら、feb19さんの記事に書いてありました。

テキストを入れていったら、TextFlow.flowComposer.addController() で DisplayObejctContainer のツリーに参加させて、TextFlow.flowComposer.updateAllContainers() で内容を更新します。

なるほどー。TextFieldとは全く扱い方が違うんですね。これは早く慣れねば。

まず、自分の環境はまだFlashDevelop3.1.0だったので、これを3.1.1にバージョンアップ。でもって起動すると、憧れの（？）プロファイラパネルが出現！まあでもパネルが出ただけで喜んではいけない。プロファイラパネルの目覚まし時計アイコンをクリックしてプロファイラを開始。次に通常通りにIDE（Flash CS3）の方でflaファイルを開き、FlashDevelopではプロジェクトファイルを開き、FlashDevelop側からプロジェクトをテスト！すると・・・

おお、動いとる！
というわけで、どうやら全く問題なくプロファイラが使えるようです。すばらしい！

と思って安心して、しばらくしてからもう一度やってみると・・・動かない。

何故？と思いいろいろ試してみたのですが、どうも私の環境では

1. まずFlashDevelopを起動する。
2. プロファイラパネルの「プロファイラを開始」ボタン（目覚まし時計のアイコン）をクリックしてプロファイラを開始しておく。
3. FlashIDEを起動する（この際、通常のFlashIDE起動より若干時間がかかる）。
4. flaファイルを開いてテスト（パブリッシュプレビュー）を行う。

・・・という順番で作業を行った場合にプロファイラが作動しました。

うーん、なんなんでしょうね。FlashIDE側の設定か、あるいはFlashDevelop側の設定か、それとも他の何かか・・・。まあ、いずれにせよ、なんとかプロファイラが使えそうなので、しばらくこれで様子見てみます。

追記：

twitterでの馬鹿全さんやflabakaさんの発言などによると、どうも特に起動順とか関係なしにフツーに使えるらしい。むー、ウチの環境固有の問題ですかね・・・。

flabaka – FlashDevelop3.1.1のプロファイラを使ってみる

時間のあるときに別のマシンでも試してみます。

• FlashDevelop3.1.0 RTM – FlashDevelop.jp
• 馬鹿全 – FlashDevelop 3.1.0 RTM リリース

まずは旧バージョンをsettingファイルも含めて完全にアンインストール。その上で新バージョンをインストールして起動。馬鹿全さんの記事を参考にTools → Program Setings → FlashDevelop → Selected Locale を en_US から ja_JP に変更して FlashDevelop を再起動。これで晴れて日本語版に！

次はフォントを自分好みに変更。まずはツール→環境設定→FlashDevelopの中からフォント指定部分を下記のように設定。

「10pt」や「8pt」で設定しても、何故か上記のように中途半端な数字になっちゃうんですよね。まあいいや。

次にコード表示のフォントを変更。ツール→シンタックスカラーリングの変更、で、それぞれの言語のdefaultのフォントスタイルを下記に設定。

これでOK！

今回のアップデートではHTML編集でZen-Codingが使えるようになってます。ちょっとした編集なら、わざわざAptanaを同時起動しなくても良さそう（ちなみにFlashDevelop上でのZen-CodingのショートカットはCtrl+B）。FlashDevelop万歳！

追記

ClockMakerさんのブログに今回のバージョンアップについてのまとめ記事がありました。

待望の日本語化も! FlashDevelop 3.1.0 RTMが登場 | ClockMaker Blog

変数のリネームができるリファクタ機能っての、便利そうですね！あとデバッガー機能も。ただ、デバッガー機能の方は「プラグインとして提供されている」らしいんですが、具体的にどのような方法で導入するのか、あとでちょっと調べてみようと思います。

さらに追記

どうやら下記スレッドでPhilippe氏が返信してる「Re: FlashDevelop 3.1.0 RTM released」の内容がデバッガー機能についての説明かな？

FlashDevelop.org – View topic – FlashDevelop 3.1.0 RTM released

"アドビ、「Flash Professional CS5」を発表–iPhoneでFlashのネイティブ対応が可能に:モバイルチャンネル – CNET Japan"

Adobe LabsにもFlash CS5のページができてました。

"Adobe Labs – Adobe Flash Professional CS5"

どうやら目玉はiPhoneアプリへの対応。ツールを使うことで、FlashアプリをiPhoneのネイティブアプリに変換し、App Storeからダウンロード提供することが可能になるらしいです。

しかし、まだCS4も導入してないんだけどなあ・・・。CS4を飛ばして一気にCS5に移行かなあ。

追記：上条氏のブログにも記事が出ました。

"Flash Professional CS5 のアナウンスと iPhone – akihiro kamijo"

「XML ベースの FLA ファイル」ってのは、subversionなどを使ったバージョン管理が可能になるってことでしょうね。「ActionScript エディタの改良」とありますが、FlashDevelop並になるんでしょうか。

馬鹿全 – FlashDevelop 3.0.3 RTM リリース

例によって下手に飛びついてインストールした結果おかしくなるのもアレなので、しばらくは様子見しよう。

昨日のSpark project 勉強会 #10の中で、Adobeの西村さんがFlash Builderの特徴（？）として挙げていた項目の中に、「ASDocの参照機能」と「getter/setterを一発で設定できる」というものがあった様に記憶してるんですが、これらの機能はFlashDevelopでも存在するんですね。

Flash Develop + CS3 – Flash OOP Japan
以下、上記ページからの引用：

【FlashDevelopコードアシスト.xls】

［Ctrl］ ＋ ［Space］	文脈に応じたコードヒントが表示されます。”.”の後や途中まで入力したプロパティ名など、色んなところで使ってみてください。
［Ctrl］ ＋ ［Shift］ ＋ ［Space］	メソッドの () の中で使用すると、そのメソッドの引数に関して説明が表示されます。メソッドにASDocがあればそれに応じた説明が表示されます。説明が多い場合は省略して表示されますが、その際は［F1］キーで拡大できます。なお、IMEが全角の場合は無効となるので注意してください。
［Ctrl］ ＋ ［Alt］ ＋ ［Space］	そのプロジェクトで使えるクラスのリストが表示されます。
［Ctrl］ ＋ ［Shift］ ＋ ［1］	最新版 Beta6 より追加された新機能で、文脈に応じたコード生成を行います。 例えば、 ・addEventListener() の、引数内のイベントタイプ・ハンドラ関数名よりイベントハンドラ関数のコード生成 ・変数名より getter/setter 関数のコード生成 ・関数内のローカル変数をインスタンスプロパティへ変換しコード生成 マウスカーソルの位置を変えて実行してみてください。なお、公式Wikiにはキャプチャ画像つきで詳しく載っています。 http://www.flashdevelop.org/wikidocs/index.php?title=Features:Generation

FlashDevelop、すばらしい！（Adobeさん、スイマセン・・・）