Creative Suite SDK + builderによるパネル生成

| コメント(1) | トラックバック(0)

本日お昼前、予定通りわたしの利用していたマスコレのシリアルの有効期限が切れました。ベンダープログラムの予告通りリリース後1ヶ月でクローズとなりました。自動的に体験版になりますので少々時期を見てあと1ヶ月程テストしようと思います。
それは置いておいて、先般予告したものをリリースいたします。Creative Suite SDKと言うのもリリース以降、情報が少なくて普及しているとは言いがたい状態です。当のAdobe自身ExtensionBuilderありきの姿勢ですから、それは無理の無い事でもあります。しかし、このSDKこのままEBのおまけにしておくには惜しいものです。
CreativeSuiteSDK自体はFlexに関連する各種ユーティリティの塊です。AIRアプリケーションを構築した経験がある方だとお判りでしょうが、コマンドラインを利用したコンパイルやパッケージ処理が必要になります。セットアップもそうですがこの部分というのは非常に煩わしく、各種オプションスイッチをだらだら入力すると言う事に慣れていない方にとってこのツールの利用を断念する理由になる事と思います。
今回作成したbuilderというユーティリティはこのコマンドライン部分を隠蔽し、コンパイル及びパッケージ処理を1ボタンで行う為の物です。

インストール手順

1.CS-SDKのセットアップ。

http://www.adobe.com/jp/devnet/creativesuite.html

適当なパスに解凍します。

./CreativeSuiteSDK/CS Flex SDK 3.4.0
./CreativeSuiteSDK/docs
./CreativeSuiteSDK/libs
./CreativeSuiteSDK/otherLibraries
./CreativeSuiteSDK/samples

展開したディレクトリはこんな感じですね。
肝心のライブラリ群は

./CreativeSuiteSDK/libs/CSXSLibrary-2.0-sdk-3.4-public.swc

及び
./CreativeSuiteSDK/libs/cslibs/1.5/3.4/release以下に

apedelta.swc
csaw_bridge.swc
csaw_illustrator.swc
csaw_incopy.swc
csaw_indesign.swc
csaw_photoshop.swc
csawlib.swc

が存在します。これらをコンパイル時に参照させるにはair-config.xmlの編集が必要となります。

./CreativeSuiteSDK/CS Flex SDK 3.4.0/frameworks/air-config.xml

参考までに

<?xml version="1.0"?>

<!--
    ADOBE SYSTEMS INCORPORATED
    Copyright 2005-2007 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.
-->

<flex-config>
    <!-- Specifies the minimum player version that will run the compiled SWF. -->
    <!-- 9.0.124 is the April 2008 security release -->

    <target-player>10</target-player>

   <compiler>
      <!-- Turn on generation of accessible SWFs. -->
      <accessible>false</accessible>

      <!-- Specifies the locales for internationalization. -->
      <locale>
          <locale-element>en_US</locale-element>
      </locale>
      
      <!-- List of path elements that form the roots of ActionScript class hierarchies. -->
      <!-- not set -->
      <!--
      <source-path>
         <path-element>string</path-element>
      </source-path>
      -->

      <!-- Allow the source-path to have path-elements which contain other path-elements -->
      <allow-source-path-overlap>false</allow-source-path-overlap>
     

      <!-- Run the AS3 compiler in a mode that detects legal but potentially incorrect -->
      <!-- code.                                                                       -->
      <show-actionscript-warnings>true</show-actionscript-warnings>

      <!-- Turn on generation of debuggable SWFs. False by default for mxmlc, -->
      <!-- but true by default for compc. -->
      <!--
      <debug>true</debug>
      -->

      <!-- List of SWC files or directories to compile against but to omit from -->
      <!-- linking.                                                             -->
      <external-library-path>
         <path-element>libs/air/airglobal.swc</path-element>
         <path-element>/Users/No41/CreativeSuiteSDK/libs/cslibs/1.5/3.5/release/apedelta.swc</path-element>
      </external-library-path>

      
      <!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
      <!-- the compiler during mxml translation and are helpful with understanding and   -->
      <!-- debugging Flex applications. -->
      <keep-generated-actionscript>false</keep-generated-actionscript>

      <!-- not set -->

      <include-libraries>
         <library>/Users/xxxx/CreativeSuiteSDK/libs/CSXSLibrary-2.0-sdk-3.4-public.swc</library>
         <library>/Users/xxxx/CreativeSuiteSDK/libs/cslibs/1.5/3.5/release/csawlib.swc</library>
         <library>/Users/xxxx/CreativeSuiteSDK/libs/cslibs/1.5/3.5/release/csaw_bridge.swc</library>
         <library>/Users/xxxx/CreativeSuiteSDK/libs/cslibs/1.5/3.5/release/csaw_illustrator.swc</library>
         <library>/Users/xxxx/CreativeSuiteSDK/libs/cslibs/1.5/3.5/release/csaw_indesign.swc</library>
         <library>/Users/xxxx/CreativeSuiteSDK/libs/cslibs/1.5/3.5/release/csaw_photoshop.swc</library>
         <library>/Users/xxxx/CreativeSuiteSDK/libs/cslibs/1.5/3.5/release/csawlib.swc</library>
      </include-libraries>
        ・
        ・
        ・

こちらがわたしのところの状態です。本当はAIなら他のアプリケーションのswcファイルを外す方が良いのですが動作自体には支障はありません。全て記述した状態での弊害としてはswfファイルの容量の肥大が挙げられます。(おおよそ2〜300KB程度)
続いて実行ファイル群に実行権限を与えます。これは以下の様にbinフォルダ内の実行ファイルのパーミッションを変更して動作出来る様にするものです。

> cd CreativeSuiteSDK/CS¥ Flex¥ SDK¥ 3.4.0/bin
> chmod a+x ./*

2.CS 5.5 Extension Packaging and Signing Toolkit
zxpを生成するパッケージツールは別口でダウンロードします。

http://www.adobe.com/jp/devnet/creativesuite/cs-extension-builder.html

の「CS 5.5 Extension Packaging and Signing Toolkit」のリンクからダウンロードして下さい。5.5表記ですが5.0でも問題なく使えます。
解凍するとucf.jarとドキュメントが得られます。ややこしいのでCrerativeSuiteSDKの他のjarファイルと一緒においておきましょう。

./CreativeSuiteSDK/CS Flex SDK 3.4.0/lib/

へ移動。ドキュメントは読んで下さい。読まなくても問題ないですが...

これでコマンドラインでSDKを利用する環境が出来ました。
しかしながら、この状態ではテストするにもzxpをエクステンションマネージャー経由でのインストールが必要です。手っ取り早くテストする為にOSデバッグモードを設定しましょう。

Windows:
1. レジストリエディタ(regedit)を起動します。
2. 以下のキー値を探します。
CS5: HKEY_CURRENT_USER\Software\Adobe\CSXS2Preferences\...
CS5.5: HKEY_CURRENT_USER\Software\Adobe\CSXS.2.5\...
3. PlayerDebugModeのキー値を1に設定します。キー値が無い場合は追加して下さい。
4. レジストリエディタを閉じます。

Mac OS:
1. <ユーザー>/Library/Preferences/を開きます。
2. 以下のPLISTを開きます。
CS5: com.adobe.CSXS2Preferences.plist
CS5.5: com.adobe.CSXS.2.5.plist
3. PlayerDebugModeを1に設定。
5. PLISTを保存します。

再起動後プレーヤーデバッグモードが有効となります。

/Users/No41/Library/Application Support/Adobe/CS5ServiceManager/extensions/

以下にパッケージフォルダを投入後アプリケーションを起動するとエクステンションが認識されます。パッケージ構造に関しては後述します。また、IllustratorやPhotoshopは複数のインスタンスが起動出来ますのでそちらも利用するとデバッグが非常に楽になります。こちらをご覧下さい。

3.builderインストール
このページの下部からDMGファイルをダウンロードします。マウントするとインストーラーがありますので実行して下さい。起動した時点ではすべての入力項目が空白です。settingの部分は全ての項目を埋める必要があります。

4.設定
各種コマンドを認識させましょう。

builderSetting.png

builderWork.png

amxmlc
こちらはmxmlファイルをコンパイルしswfファイルを生成する為のコマンドです。

./CreativeSuiteSDK/CS Flex SDK 3.4.0/bin/amxmlc

が該当するファイルです。テキストボックスの横のボタンをクリックしファイルを選択して下さい。

Java
Javaへのパスは設定してありますが、全てのOSを見ていないので書き換えが必要な場合もあります。

ucf.jar
パッケージコマンドです。

./CreativeSuiteSDK/CS Flex SDK 3.4.0/lib/ucf.jar

を選択しましょう。

certificate file
PKCS12形式のファイルを選択します。生成はコマンドラインにてadtコマンドを使う必要があります。この操作は1回きりです。対応した証明書であるなら他の手段で生成したものでも大丈夫です。

adt -certificate -cn SelfSign -ou QE -o "Example, Co" -c US 2048-RSA SERTFILE.p12 PASSWORD

password
上のpkcs12ファイルに対するパスワードです。

timestamp server
こちらはタイムスタンプサーバーのURLを記述します。わたしは無料サービスのを利用しています。

以上を埋めた後applyボタンをクリックしましょう。設定がローカルに保存されます。


ワークスペースでの作業
target MXML

こちらはテキストエディタで編集したMXMLファイルを選択します。

package Name
生成するパッケージネームです。フルパスで記述して下さい。拡張子はもちろんzxpで。

package Path
パッケージする為のファイルを収集したフォルダを選択します。通常パッケージにはswfファイル及びmanifest.xml、アイコン(png)が含まれます。一例を下に示します。

./content/CSXS/manifest.xml
./content/icons/CC_active.png
./content/icons/CC_disable.png
./content/icons/CC_regular.png
./content/QRCode.swf

また、テストする場合はこのcontentをextensionフォルダにそのままコピーして利用します。その際、contentフォルダの名称は変更してかまいません。CSXS/manifest.xmlファイルがエクステンションの起動を設定します。swfやアイコンファイルはこのマニフェストからの相対パスが記述した内容と一致していれば問題ありません。以下にマニフェストのサンプルを示します。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<ExtensionManifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ExtensionBundleId="net.sytes.chuwa.makeqr" ExtensionBundleVersion="1.0" Version="2.0">
    <Author>
        <![CDATA[Ten]]>
    </Author>
    <ExtensionList>
        <Extension Id="net.sytes.chuwa.makeqr.extension1" Version="1.0"/>
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList>
            <Host Name="ILST" Version="[15.0,16.0]"/>
        </HostList>
        <LocaleList>
            <Locale Code="All"/>
        </LocaleList>
        <RequiredRuntimeList>
            <RequiredRuntime Name="CSXS" Version="2.0"/>
        </RequiredRuntimeList>
    </ExecutionEnvironment>
    <DispatchInfoList>
        <Extension Id="net.sytes.chuwa.makeqr.extension1">

            <DispatchInfo>
                <Resources>
                    <SwfPath>./QRCode.swf</SwfPath>
                </Resources>
                <Lifecycle>
                    <AutoVisible>true</AutoVisible>
                </Lifecycle>
                <UI>
                    <Type>Panel</Type>
                    <Menu>QRCode Maker</Menu>
                    <Geometry>
                        <Size>
                            <Height>280</Height>
                            <Width>330</Width>
                        </Size>
                    </Geometry>
                    <Icons>
                        <Icon Type="Normal">./icons/CC_regular.png</Icon>
                        <Icon Type="RollOver">./icons/CC_active.png</Icon>
                        <Icon Type="Disabled">./icons/CC_disable.png</Icon>
                    </Icons>
                </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>

全ての入力項目は前回の作業状態を記憶しています。ですからほとんどの場合いちいち打ち直すとか選択し直す必要はありません。ソースを編集しbuildボタン一発でswfもzxpも生成おkです。
また、近日Flex4.6に対応した新バージョンのSDKがリリースされる予定です。それに合わせてアップデートバージョンをリリースする可能性もありますが、このままでもCS6に対応したエクステンションは開発可能です。

ダウンロード

builder.dmg


トラックバック(0)

トラックバックURL: /394

コメント(1)

コメントする

このブログ記事について

このページは、tenが2012年6月 4日 12:33に書いたブログ記事です。

ひとつ前のブログ記事は「変更された部分...」です。

次のブログ記事は「Windows版builderリリース」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

OpenID対応しています OpenIDについて
Powered by Movable Type 5.12

    follow? twitter...     
    available on exchange