Adobe Flex コンポーネントの作り方

• はじめてのFlexコンポーネント
• 光るボタンを作ろう
• ソースコード閲覧用コンポーネント
• SWC形式での配布

Adobe Flex 2/3でのコンポーネントの作り方を紹介しています。今回は、既存アプリの有用な部分をコンポーネント化する方法を詳しく紹介します。その具体例として、以前、このコラムで開発した唐辛子というツールから、HTML化の部分だけを取り出して、ソースコードビューワーのコンポーネントを作ってみようと思います。

ここで学ぶポイント

• 既存アプリケーションをコンポーネント化すること
• ソースコードビューワーコンポーネントの制作

対象とする読者

• コンポーネントの作り方を知りたい人
• ソースコードの表示コンポーネントが欲しい人
• 既存アプリケーションをコンポーネント化してみたい人
• ある程度、Flex / ActionScript の知識がある人

制作の背景

以前、この技術記事の連載の中で、唐辛子というソースコードのHTML化を支援するツールを作る過程を紹介しました。これは、Flexで作っており、今回、このツールの HTML 表示の部分だけを取り出して、コンポーネントとしてリリースしたいと思いました。

そこで、今回、「唐辛子」という既存Flexアプリケーションから、再利用可能な部分を取り出して、コンポーネントにするまでの手順を紹介してみたいと思います。

Flexは、部品をコンポーネント化するのが簡単なので、できるだけコンポーネントとして再利用できる形に作っておく方が効率的でしょう。それでは、コンポーネント化の手順を確認していきましょう。

また、Webを「ソースコード HTML化」で検索してみると、唐辛子」が一番上に表示されるようになりました。それで、地味に使われていそうでしたので、これを、さらに再利用できる形で提供できたら役に立ちそうだと思ったのです。

SourceCodeViewer コンポーネントについて

はじめに、ここで作るソースコードのカラーリング機能を持つコンポーネント「SourceCodeViewer」です。はじめに、このコンポーネントの使い方を紹介します。

SourceCodeViewer は、SWC形式で提供されています。SWC形式のファイルは、コンポーネントやその他のアセットのアーカイブファイルです。コンポーネントやその他のファイルを１つのファイルとして提供することができます。コンポーネントを他人に配布する場合は、これを利用することで、手軽に利用してもらうことができます。

ここでは、Flex Builder から、コンポーネントを使う手順を紹介します。以下の手順に従って操作してみてください。Flexのソースコードを表示する簡単なプログラムを作ってみます。

（１）SourceCodeViewer のアーカイブをダウンロード

以下のサイトより、アーカイブを取得します。

• SourceCodeViewer のダウンロード
• http://flex-component.org/page/%E3%82%A8…

（２）アーカイブを解凍する

アーカイブを解凍して、bin フォルダにある、SourceCodeViewer.swc を取り出しておきます。

（３）Flex Builder でFlexプロジェクトを作成

Flex Builder を起動して、メニューから [ファイル - 新規 - Flexプロジェクト]をクリックします。そして、プロジェクト名に「TestSourceCodeViewer」をつけて[終了]ボタンをクリックします。

（４）コンポーネントを追加する

「SourceCodeViewer.swc」をプロジェクトに追加します。そのためには、メニューの[プロジェクト - プロパティ]をクリックします。そして、プロジェクトのプロパティダイアログを表示して、画面左の [Flex ビルドパス]をクリックします。そして、タブの[ライブラリパス]をクリックします。そして、画面右の[SWCの追加]をクリックします。

（５）デザインタブでコンポーネントを配置する

デザインタブを表示させます。すると、コンポーネントパネルの[カスタム]の項目に「SourceCodeViewer」が表示されます。これを、ドラッグ＆ドロップでステージに追加します。

（６）コードタブでソースコードを記述する

コードタブに切り替えてコードを記述します。ここでは、ローカルにあるファイル（Flex のソースコードが書かれたテキストファイル"Test.txt"）を読み込んで、ソースコードをビューワーに表示してみます。

file:TestSourceCodeViewer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:ns1="com.kujirahand.controls.*"

	layout="absolute"
	creationComplete="initHandler()">
	<!-- コンポーネントの配置 -->
	<ns1:SourceCodeViewer id="mainViewer"
		x="10" y="29" width="377" height="209"/>

	<!-- ファイルの読み込み -->
	<mx:HTTPService id="loadSourceService"
		url="Test.txt"
		resultFormat="text"
		result="loadSourceServiceComplete()"

		/>
	<mx:Script>
		<![CDATA[
		private function initHandler():void {
			loadSourceService.send();
		}
		private function loadSourceServiceComplete():void {
			var src:String = loadSourceService.lastResult as String;
			mainViewer.sourceType = "flex";
			mainViewer.sourceText = src;
		}
		]]>
	</mx:Script>
</mx:Application>

（７）SWFファイルを直接実行するように指定する

HTMLファイルからローカルファイルへアクセスことはできません。Flex Builder では、初期状態で実行すると、HTMLにFlexを表示します。

そこで、メニューから[実行 - デバッグ - その他]をクリックして、以下のようにして、起動するURLで、SWFファイルを直接起動するように設定します。これで、テスト用にローカルファイルを読めるようになります。

※Flash Playerの設定を変更すれば、ローカルのファイルも読めるようになりますが、こちらの設定の方が簡単です。

（８）実行する

Flex のソースコードが書かれたテキストファイル"Test.txt" を bin-debug フォルダにコピーして実行してみてください。以下のように、見事色分けされてソースコードが表示されます。

SourceCodeViewer コンポーネントの使い方

このコンポーネントは、TextArea コントロールを拡張したものです。sourceText プロパティにソースコードを指定すると、このソースを色分け表示して表示します。

そして、sourceType プロパティに、"flex" とか、"css" とか、色分けしたい言語を指定します。現在指定できるタイプは、"basic"、"css"、"flex"、"java"、"php"、"xml"、"javascript"、"actionscript"、"text"の９種類を指定できます。（実際には、JavaScript/ActionScriptは同じ規則に従って色分けされます。）

mainViewer.sourceType = "flex"; // ソースコードの種類を指定
mainViewer.sourceText = src;    // ソースコードを指定

既存のFlexアプリケーションをコンポーネントにする

冒頭でも紹介しましたが、今回のソースコード表示コンポーネントは、「唐辛子」というソースコードをHTMLに変換するためのツールから切り出したものです。

このツールは、コンポーネント化する予定もなかったので、ソースコードが散在していました。そこで、まずは、クラスファイルをまとめてパッケージに移動するところから始めました。

パッケージを正しい構造にした後、「さぁ、頑張ってコンポーネント化しよう！」と思ったところ、唐辛子のメインコードを、SourceCodeViewer.mxml に移し替えただけで、あっけなくコンポーネント化が完了していました。

ここが、Flexのすごいところで、普通に動くようなものを作ることで（他との依存関係がなければですが）コンポーネントとして成立してしまうのです。コンポーネント化するからと言って、特別なコードを記述する必要がないのが素晴らしいところです。

以下は、sourceText プロパティを定義している部分ですが、取得用の関数 get sourceText と、設定用の関数 set sourceText の２つの関数を定義しています。

/** ソースファイルを設定する */
public function get sourceText():String {
    return this._sourceText;
}
public function set sourceText(value:String):void
{
    // ここでソースコードをHTML化して、
    // TextArea の htmlText に設定する処理
}

コンポーネントにプロパティを追加するのは、前回の光るボタンを作ろうで詳しく紹介していますが、MXMLのコードの中に、普通の setter/getter のプロパティを作ることで、コンポーネントのプロパティを追加できるのです。

まとめ

今回は、ソースコード閲覧用コンポーネントの使い方を解説しました。また、開発経緯や、開発の様子を紹介しました。Flexの拡張性の高さのおかげで、コンポーネント制作はとても手軽であることが分かっていただけたのではと思います。次回は、もう少し技術的に深いところを紹介してみたいと思います。

次回以降に学ぶこと

• パッケージについて
• SWCファイルの作り方
• ASDocの使い方

実現してみたいこと・・・ソースコード閲覧用コンポーネントを使ったブログパーツの作成