mac + Visual Studio Code + ActionScript and MXML によるAIR開発環境の構築

2017/12/12
ActionScriptAIR

はじめに

このドキュメントで前提とする環境

macOS 10.12
Visual Studio Code 1.18
ActionScript & MXML 0.8.0

このドキュメントの目的

VS Code上でAndroid用Adobe AIRパッケージファイルをビルドし、実機にインストールしテストを行うまでの手順を、詰まった箇所とその対処法を合わせて記録する。

このドキュメントの対象者

昔FlashDevelopでAIR開発を行っていた技術者。

インストール

各種ツールのインストールおよび初期化の手順を解説する。

Visual Studio Codeのインストール

公式サイトからインストーラーをダウンロードして展開する。展開したappファイルをアプリケーションフォルダーにコピーする。

ActionScript and MXML機能拡張の追加

MarketPlaceからActionScript and MXMLをインストールする。 MarketPlaceとはVS Code内で機能拡張の検索とインストールが行える機能。

JDKをインストールする

Macの場合、JREではなくJDKをインストールする。公式サイトはこちら JDKのインストーラーがパスの設定などを行なってくれるので、手動での設定は不要。

AIR SDKをインストールする

Adobeの配布サイトからAIR SDKをダウンロードし、インストールする。インストール先のパスは後のプロジェクト作成時に使用するので記録しておく。

Adobe Animate CC同梱のAIR SDKはビルドに使用できないので注意。指定するとSDKとして認識はされるがビルドが失敗する。

Android SDK Toolsをダウンロード

Android実機への転送とデバッグ時のコマンドラインツールの使用のため、Android SDKをインストールする。公式サイトからパッケージをダウンロードする。

Node.jsをインストールする

公式サイトからパッケージをダウンロードしてインストールする。すでにインストールしている場合は不要。

プロジェクトの作成とビルド

ActionScript & MXML extension for Visual Studio Codeの詳細な操作手順はこちら

今回はAndroid端末用モバイルパッケージをPure ActionScript形式で作成する。

新規フォルダーを作成し、Visual Studio Code上でフォルダーを開く。

空のフォルダーを作成し、VS Codeで開く。以下のようにエントリーポイントとなるクラスファイルを作成する。

projectフォルダ
	├dist 
	│   └apkファイルが出力される。
	├libs
	│   └swcライブラリを導入する。
	└src
	　　└Main.as

この構成にするのはsrc以下を原則としてgit管理すれば、複数人での共同作業ができるため。 gitなどの利用を考慮しない場合は別のフォルダー構成でも問題ない。

以下の状態ではAIR SDKのパスが通っていないのでビルドが実行できない。

No SDKの表示をクリックするとメニューが表示される。

ここですでにインストールしたAIR SDKを選択する。「No SDK」の表示が「AIR 26.0..」のように変化したら設定成功。

asconfigcのインストール

asconfigcはAIRのビルドを簡略化するnpmライブラリ。ターミナルから以下のコマンドでインストールする。

npm install -g asconfigc

今回はglobalでインストールしているが、npm initコマンドでpackage.jsonを作成してローカルにインストールしても良い。

また、VS Code内にターミナルを開くこともできる。 control + shift + @ のショートカットでプロジェクトフォルダーのパスを指定したターミナルが開く。

command + shift + p で各種コマンド一覧の選択と検索パネルが出るので

>terminal

で絞り込みを行うとターミナルに関する各種操作が一覧される。

tasks.jsonの初期化と設定

.vscodeフォルダー以下に、tasks.jsonファイルを作成して初期化する。このファイルは各種ビルドコマンドの設定に利用する。

macの場合、ショートカットキーの command + shift + B でクイックビルドコマンドの一覧が表示される。

スクリーンショットの歯車部分をクリックすると.vscodeフォルダー以下にtasks.jsonが初期設定で生成される。

AIR Mobileプロジェクトフォルダーの整備

公式ドキュメントはこちら

asconfig.jsonの作成と設定

プロジェクトフォルダー直下にasconfig.jsonという名前で新規ファイルを作成する。内容は以下の通り

▼asconfig.json

{
	"config": "airmobile",
	"compilerOptions": {
		"output": "bin/Main.swf"
	},
	"application": "Main-app.xml",
	"files":
	[
		"src/Main.as"
	]
}

これは最低限Mobile Projectがビルドできる設定。続いてこのasconfig.jsonで必要となるファイルを作成していく。

Main.asの作成

プロジェクトフォルダー直下にsrcという名前でフォルダーを作る。その中にエントリーポイントとなるMain.asを作成する。

▼Main.as

package
{
	import flash.display.Sprite;
	import flash.text.TextField;

	public class Main extends Sprite
	{
		public function Main()
		{
			var tf:TextField = new TextField();
			tf.text = "Hello World";
			addChild(tf);
		}
	}
}

これはHello WorldにHello Worldを表示する最低限の内容。

Main-app.xmlの作成

▼Main-app.xml

<?xml version="1.0" encoding="utf-8" ?> 
<!-- AIRのビルドに使用するバージョンをxmlnsで指定する 使用SDKと同じバージョンを指定すること-->
<application xmlns="http://ns.adobe.com/air/application/26.0"> 
    <!-- IDはアプリケーションの固有識別ができるように指定する。他のアプリと重複してはいけない-->
	<id>com.example.Main</id> 
	<versionNumber>0.0.0</versionNumber> 
	<filename>Main</filename> 
	<name>Main</name> 
	<initialWindow>
		<content>[Path to content will be replaced by asconfigc]</content> 
		<visible>true</visible>
	</initialWindow>
</application>

エミュレーター環境の設定と実行

command + shift + dもしくは画面左端のアイコンからデバッガーが実行される。

歯車アイコンをクリックすると.vscodeフォルダー以下にlaunch.jsonが初期状態で生成される。

▼launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "swf",
            "request": "launch",
            "name": "Launch SWF"
        },
        {
            "type": "swf",
            "request": "attach",
            "name": "Attach SWF"
        }
    ]
}

launch.jsonの構成テンプレートが複数用意されているので、これを利用して開発端末と同じ環境でのデバッグが可能。

より詳細な構成のオプションについては、公式ドキュメントを参照。

デバッグビルドを行い、binフォルダー内にswfが存在する状態でLaunch SWFを行うとデバッガーが起動する。

デバッガーの起動時に

ERROR: Debug adapter process has terminated unexpectedly.

が発生した場合、Main-app.xmlの

<application xmlns="http://ns.adobe.com/air/application/27.0">

のバージョン表記がコンパイラと異なっていないかを確認する。

デバッグ実行前の自動ビルド

デバッグ実行前にビルドを自動実行させるためには

▼task.json

"identifier": "build-debug",

▼launch.json

"preLaunchTask": "build-debug"

をそれぞれの設定ファイルに追記する。

自己署名とパッケージング

apkファイルをビルドするにあたって、自己署名を行う。

自己署名ファイルの生成

BashにADTへのパスを通す。

パスの通し方の基本はこの記事を参照以下のパスを追加する。

export PATH=$PATH:~/AIR_SDK/bin
export PATH=$PATH:~/SDKs/android/tools

~/はユーザーフォルダー直下を指し示す。

ターミナルからはvimなどで呼び出す場合が多いが、エディターを問わず編集が可能。 .bash_profileファイルがFinderから直接見える場合は、テキストエディットで編集しても良い。編集後はターミナルを再起動すると、編集内容が反映される。

パスが正常に通った場合

$ adt
$ adb

のそれぞれのコマンドが実行可能になる。

ADTコマンドで暗号化鍵ファイルを生成する。

ターミナルで、以下の書式に従ったコマンドを実行し、暗号鍵ファイルを生成する。コマンドの書式

adt -certificate -validityPeriod 25 -cn %プロジェクト名% 2048-RSA "%鍵ファイル名%" %パスワード%

たとえば

adt -certificate -validityPeriod 25 -cn project 2048-RSA cret.p12 passwordForAIRMobile

とすると、プロジェクト直下にcret.p12というファイルが生成される。

asconfigへの設定の追加

asconfig.jsonに以下の記述を追加する。

▼asconfig.json

"airOptions": {
	"android": {
		"output": "dist/Main.apk",
		"signingOptions": {
			"storetype": "pkcs12",
			"keystore": "cret.p12"
		}
	}
}

これで生成したp12鍵ファイルを使ってパッケージングが行われる。

パッケージング

command + shift + Bでビルドコマンド一覧が表示されるのでPackage debug, Android applicationを選択する。

ビルドコマンド一覧の中から、Adobe AIR: Package debug, Android applicationを選択する

distフォルダー以下にMain.apkが生成されれば成功。

実機の接続とapkインストールおよびデバッグ

apkのインストール

ターミナルから以下のコマンドを実行すると、apkファイルがインストールされる。

$ adb -d install -r "dist/Main.apk"

実機でのアプリの実行は以下のコマンドで行う。

$ adb shell am start -n air.com.example.Main/.AppEntry

air.以下はMain-app.xmlのidフィールドの内容を設定する。

▼Main-app.xml

<id>com.example.Main</id>

デバッガーとの接続

デバッグビルドしたアプリをVS Codeのデバッガーに接続するためにはlaunch.jsonで設定した"Attach SWF"構成を利用する。デバッガー用パネルを開き、"Attach SWF"を実行して待機状態にする。

構成の実行

この状態でMacに接続されたAndroid端末のアプリを起動すると、デバッガーと接続される。

接続成功例

二度目以降に楽をするために

毎回この手順を手動で行うのは作業のムダが多すぎる。二度目以降のプロジェクト立ち上げ時に楽をするために、使い回しのしやすい単純化されたプロジェクトフォルダーを作っておく。

テンプレートファイルを作成する

一度作成した最低限の機能のプロジェクトフォルダーを、テンプレートとして使い回す。テンプレートファイルのみをgitで管理するのも有効。

コマンドをshファイル化する

どうしてもターミナルからコマンドを叩く必要があるので、各種コマンドを.shファイルや.commandファイルに記録しておく。 .shファイルはVS Code上のターミナルにドラッグ&ドロップすると、絶対パスが表示されてそのまま実行可能。メンバー間でコマンドの共有もできるので、デザイナーさんと作業手順を共有するためにファイル化が有効。