すがブロ

sugamasaoのhatenablogだよ

Flexのプロジェクトをインテグレーションしたい

プラットフォームは Hudson 一点でおk

なので、あとはどのようにインテグレーションの設定をしていくか、という話になります。

今回のインテグレーション対象
  • Hudson で SVN をポーリングするよ
  • ant タスクでビルドするよ
  • ant タスクでASDOCを出力するよ
  • ant タスクで静的コードチェック(PMD)するよ

本当はユニットテストまで入りたかったけど、まだ UnitTest 自体手を出してないw
今後、以下のリソースを参考に導入するつもり。

Hudson の環境設定

Java5 さえあれば Hudson は起動することが可能です*1

まずは

Java5 の導入は適当にやるとして、以下から hudson.war をDLしましょう。

そうしたら、

java -jar hudson.war

で起動できます。デフォルトではポート 8080 で動くので、 localhost:8080 でアクセスしてみましょう。

ant の環境を用意する

自力で導入しても良いし、Hudson にも ant が付属してきていたと思うので、それを使えるようにしておきます。

PMD Plugin を入れる

Hudson 自身の設定画面から plugin のインストールが行えます。
画面からでも良いですし、下記のページからでも良いので、PMD Plugin を導入します*2

これで最小設定は完了。ポーリングの仕方であるとか、ユーザ管理の方法であるとかは画面を見ながらでもわかると思うので頑張ってください。二桁ブクマが行ったら詳しく解説エントリを書くかもしれません*3

Flex用インテグレーション環境を作る

ASDOC

FlexSDK に同梱されているので準備は不要です。
ちなみに、FlexSDK は下記の「Adobe Flex SDK」をDLすると良いです。

FlexPMD

以下から取得します。今回は ant から実行するので ant 版で。コマンドラインから実行したい人は command line 版をDLしましょう。というか、両方落としておくと良いと思うw

あと、コマンドラインで実行したい人はPATHを通しておくと楽でしょう。

では ant タスクを書いて行きましょう

以下のような構成になっているとします。build ディレクトリに build 関係の設定ファイルを追加しておきます。
ちなみに、ここの flex-config.xml は player のバージョンとか、デバッグ用変数の定義とかを行います*4

|-- README.txt
|-- build
|   |-- build.xml
|   `-- flex-config.xml
`-- src
    `-- hogehoge.mxml

build.xml にビルド用のタスクを既述します。以下の例では、

  • build
  • document
  • pmd
  • clean
  • all

のタスクが登録されています。all をやると、clean をしてから build, document, pmd を実施してくれます。
実際の使い方は以下の通り

# build.xml が同じディレクトリにあり、build タスクを実行する場合(デフォルトタスクは省略できる)
%ant
# build.xml と違うディレクトリに居る場合
%ant -buildfile build/build.xml
# タスクを指定する場合
%ant clean

のような感じです。各タスクの名称やデフォルトの動作は build.xml の中で定義していきます。
そして、build.xml は以下のようになってます。

<?xml version="1.0" encoding="UTF-8"?>
<project name="flexAnt" default="build" basedir="./">
        <description>
                FlexAntを用いてAirのコンパイルを行います
        </description>

        <!-- 環境によって変更されるパスの設定 -->
        <property name="FLEX_HOME" value="/opt/flex/flex_sdk_3.4.0.9271"/>
        <property name="PMD_HOME" value="/opt/flex/flex-pmd-ant-task-1.0.RC4"/>

        <!-- プロジェクトのベースディレクトリ定義 -->
        <dirname property="XML_DIR" file="${ant.file}"/>
        <property name="APP_ROOT" value="${XML_DIR}/../"/>
        <property name="APP_SRC" value="${APP_ROOT}/src"/>

        <!-- 各コマンドのパス設定 -->
        <property name="ASDOC_EXE" value="${FLEX_HOME}/bin/asdoc"/>

        <!-- 出力先ディレクトリの設定  -->
        <property name="BIN_OUTPUT" value="${APP_ROOT}/bin"/>
        <property name="ASDOC_OUTPUT" value="${APP_ROOT}/asdoc"/>
        <property name="PMD_OUTPUT" value="${APP_ROOT}/pmd"/>

        <!-- アプリケーションの名前 -->
        <property name="APP_NAME" value="hogehoge"/>

        <!-- flex用Antタスクを読み込む -->
        <taskdef resource="flexTasks.tasks" classpath="${FLEX_HOME}/ant/lib/flexTasks.jar"/>

        <!-- FlexPMD タスクの定義 -->
        <taskdef name="flexPmd" classname="com.adobe.ac.pmd.ant.FlexPmdAntTask" >
                <classpath>
                        <pathelement location="${PMD_HOME}/as3-parser-1.0.RC4.jar"/>
                        <pathelement location="${PMD_HOME}/as3-parser-api-1.0.RC4.jar"/>
                        <pathelement location="${PMD_HOME}/as3-plugin-utils-1.0.RC4.jar"/>
                        <pathelement location="${PMD_HOME}/commons-lang-2.4.jar"/>
                        <pathelement location="${PMD_HOME}/flex-pmd-ant-task-1.0.RC4.jar"/>
                        <pathelement location="${PMD_HOME}/flex-pmd-core-1.0.RC4.jar"/>
                        <pathelement location="${PMD_HOME}/flex-pmd-files-1.0.RC4.jar"/>
                        <pathelement location="${PMD_HOME}/flex-pmd-command-line-1.0.RC4.jar"/>
                        <pathelement location="${PMD_HOME}/flex-pmd-ruleset-1.0.RC4.jar"/>
                        <pathelement location="${PMD_HOME}/flex-pmd-ruleset-api-1.0.RC4.jar"/>
                        <pathelement location="${PMD_HOME}/plexus-utils-1.0.2.jar"/>
                        <pathelement location="${PMD_HOME}/pmd-4.2.2.jar"/>
                </classpath>
        </taskdef>

        <!-- 全部入り動作  -->
        <target name="all" depends="clean,build,document,pmd" description="full build of project"/>

        <!-- mxmlcの実行 -->
        <target name="build">
                <mkdir dir="${BIN_OUTPUT}" />
                <mxmlc file="${APP_SRC}/${APP_NAME}.mxml" output="${BIN_OUTPUT}/${APP_NAME}.swf">
                        <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
                        <load-config filename="${APP_ROOT}/build/flex-config.xml"/>
                        <source-path path-element="${FLEX_HOME}/frameworks"/>
                </mxmlc>
        </target>

        <!-- cleanの実行 -->
        <target name="clean">
                <delete dir="${BIN_OUTPUT}" failOnError="false" includeEmptyDirs="true" />
                <delete dir="${ASDOC_OUTPUT}" failOnError="false" includeEmptyDirs="true" />
                <delete dir="${PMD_OUTPUT}" failOnError="false" includeEmptyDirs="true" />
        </target>

        <!-- asdocの実行 -->
        <target name="document">
                <mkdir dir="${ASDOC_OUTPUT}" />
                <exec executable="${ASDOC_EXE}" failOnError="false">
                        <arg line='-source-path ${APP_SRC} ${FLEX_HOME}/frameworks/'/>
                        <arg line='-doc-sources ${APP_SRC}'/>
                        <arg line='-window-title "${APP_NAME}"'/>
                        <arg line='-output ${ASDOC_OUTPUT}'/>
                </exec>
        </target>

        <!-- flex-pmd -->
        <target name="pmd">
                <mkdir dir="${PMD_OUTPUT}" />
                <flexPmd
                        sourceDirectory="${APP_SRC}"
                        outputDirectory="${PMD_OUTPUT}" />
        </target>

</project>

これを実行すると bin, asdoc, pmd ディレクトリができ、その中身成果物が生成されます。

あとは Hudson 上から実行するように ant 実行用の設定を書くだけです!

最後に

Hudson のプロジェクト設定から JavaDoc を保存する、にチェックを入れて ASDOC のパスを設定してあげると「ドキュメント」というリンクが Hudson 上にでき、いつでも最新の ASDOC を閲覧できます。
また、PMD plugin のところで PMD の出力ディレクトリ/pmd.xml と指定してあげるとコードチェックの結果を Hudson 上で閲覧でき、グラフによる指摘数の遷移も確認できるようになります。

今後の展望

Flashエンジニアしてる都合上、サーバサイドよりフロントエンド側に携わる事が多い訳で、Flash 以外にも CI を展開しようとすると、残りの対象は JS か HTML になるんですよね。

HTML に関しては

Twitterで、HTML-lintのローカル版があるよ、と教えてもらった。Web経由だと機密情報だったりする場合もあるので使えないため、ローカルであるというのはとってもありがたい。
ただ、HTML-lint はヘルプに HTML5 が無いので、今後の Web 標準に対応していってくれるのか不安が残る。今現在作成するサイトであれば有用かもしれないが・・・。というか、W3C がコマンドライン用の作ってくれてれば良いんだが。

JS に関しては

まったくファックでよくわからない。
かろうじて見つけたのは以下のツール。とりあえず、WSHのコマンドライン版があるようなのでローカルでの使用という要件にはマッチするけれど、どの程度のものなのかはよくわからん。

というわけで

今後は

  • FlexUnit でのユニットテストやっていきたいよ。
  • HTML のコードチェックしたいよ
  • JS のコードチェックしたいよ(HTMLよりは優先度低いけど)

という感じですかね。
一番上は自分で完結する範囲だけれど、その他は有効に使えればFlashチーム以外への啓蒙になるので、うまいことできる方法を探したいです。何か知っていたら教えて下しあ!><

*1:ちゃんと運用するなら内蔵されているサーブレットコンテナじゃなくて、ちゃんとした(tomcatとか?)を使う方が良いらしい

*2:静的コードチェックの結果を表示するため

*3:あさましい!

*4:DEBUGモードの場合でのみ、traceを発行するように切り替えたりするため