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

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

Adobe Flex 2/3でのコンポーネントの作り方を紹介しています。今回は、前回作ったソースコードビューワーのコンポーネントを、SWCファイルとして配布する方法を紹介します。

ここで学ぶポイント

• 既存アプリケーションをコンポーネント化すること
• SWC形式での配布

対象とする読者

• コンポーネントの作り方を知りたい人
• 作ったコンポーネントを配布してみたい人
• 既存アプリケーションをコンポーネント化してみたい人

前回の復習

前回、ソースコードのHTML化を支援するFlexアプリケーションの唐辛子から、ソースコードのカラーリングの部分だけを取り出して、コンポーネント化してみました。このコンポーネントは、下記の Flex-Component.org で配布をしています。

• Flex-Component.org - SourceCodeViewer
• http://flex-component.org/page/%E3%82%A8%E3%83%87%E3%82%A3..

このコンポーネントの使い方は、前回紹介しました。Flexは、部品をコンポーネント化するのが簡単なので、非常にコンポーネントとして再利用できる形にしてリリースすることができました。

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

今回は、SWCファイルの作り方、そして、コンポーネントを配布する際のポイントを紹介してみようと思います。

SourceCodeViewer を SWC化する方法

Flex Builder を使っている場合、コンポーネントを SWC形式に変換するのは非常に簡単です。ここでは、その手順を示したいと思います。

手順（１）Flex Builder で新規プロジェクトを作成

Flex Builder を起動します。そして、メニューから[ファイル - 新規 -Flex ライブラリプロジェクト]をクリックします。

手順（２）プロジェクト名を入力

プロジェクト名に「SourceCodeViewer」と入力します。そして、[終了]ボタンをクリックします。

手順（３）SoureCodeViewer のソースをコピーする

プロジェクトのフォルダに、SourceCodeViewer のソースをコピーします。Flex Builder の Flex ナビゲータで、プロジェクトのフォルダを選択して、コピー＆ペーストします。

手順（４）プロジェクトのプロパティを設定

メニューから[プロジェクト - プロパティ]をクリックします。そして、ライブラリのビルドパスを指定します。ここでは、com 以下すべてのソースを埋め込みますので、com 以下をチェックします。

以上、これで、[OK]ボタンをクリックすると、自動的にビルドが行われ、SWCファイルが生成されます。

SWCファイルの作成は簡単！

以上、ＳＷＣファイルの作成方法を紹介してみました。ここでは、改めてソースコードをコピーしましたが、既存のプロジェクトのソースを指定して、ＳＷＣファイルを作成することもできます。この方法で、既存のアプリケーションから、部分的にコンポーネント化することもできるでしょう。

こうして作ったSWCファイルは、簡単な使い方を書いて、配布すれば完璧です。

ASDoc の作成

さて、「簡単な使い方を書いて配布すれば完璧」なのですが、Flex / ActionScript3.0 には、ASDoc という標準のドキュメント化ツールが用意されています。

通常、ドキュメントの作成には大変な労力が必要となりますが、 ASDocを使うことで、比較的手軽にドキュメントを作ることができます。クラスやメソッドの説明をコメントで書いておくと、それをもとに自動的にクラスを説明するドキュメントを生成するのです。

基本的な使い方が、マニュアルに記されています。

• ASDoc について (Adobe Flex 3 のWebマニュアルより)
• http://livedocs.adobe.com/flex/3_jp/html/help.html?content..

ここでは、Flex Builder から簡単に使う方法を紹介します。

先ほど、作った SoureCodeViewer について ASDoc を作ってみます。

手順（１）外部ツールの設定

メニューから[実行 - 外部ツール - 外部ツール] をクリックします。

手順（２）外部ツールダイアログを設定

画面左上のアイコン[新規の起動構成]をクリックして、新規構成を作成します。

手順（３）項目を設定

名前を[ASDoc]とします。ロケーションを「${eclipse_home}sdks/3.0.0/bin/asdoc.exe」にします。そして、作業ディレクトリを「${workspace_loc:/SourceCodeViewer}」に、引数を次のように記述します。

-doc-sources "${workspace_loc:/SourceCodeViewer}/com"
-output "${workspace_loc:/SourceCodeViewer}/doc"

以上の設定で、SourceCodeViwer の com フォルダの内容の ASDoc を doc フォルダに作成することができるようになります。

ASDoc の書き方

さて、ASDoc の書き方ですが、クラス名やメソッド名の直前に 「/**」からはじまり「*/」で終わるコメントを記述するだけです。通常のコメントは「/*」ですが、ASDoc として抽出したい部分には「/**」から始まるコメントを書くのです。

例えば、以下は、TestString クラスを定義した例ですが、クラスやメソッドの直前に「/** .. */」のコメントを記述することで　ASDoc がコメント部分を取り出してくれます。

package com.kujirahand.test
{
    /**
     *  文字列操作を簡単に行う静的メソッドを集めたクラス
     */
    public class TestString
    {
        /**
        * 文字列 str の a を b に置換する
        * @param str 置換対象文字列
        * @param a   検索文字列
        * @param b   置換文字列
        * @return    置換結果を返す
        */
        public static function replace(str:String,
                                a:String, b:String):String {
            var str_ary:Array = str.split(a);
            return str_ary.join(b);
        }
    }
}

他にも、@see で参照ページを指定したり、@author で作者を指定することもできます。詳しくは、Adobe の ASDocの解説を参照してください。

まとめ

以上、今回は、SWCファイルの作り方と、ドキュメントの自動生成 ASDoc の使い方を紹介しました。Flex のコンポーネントの作成が簡単なこと、そして、配布に便利な SWC 形式が用意されていること、ASDoc が用意されていることから、ある程度、Javaでの開発経験がある方なら、それほどストレスを感じることなく、Flex でコンポーネントの作成から配布が行えることが分かったと思います。

筆者は、Flex Component の情報サイト http://flex-component.org にて、コンポーネントの紹介を運営していますので、コンポーネントを公開した際に、載せて欲しいものがあれば教えてください。