Posted at

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

More than 1 year has passed since last update.


はじめに


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


  • macOS 10.12

  • Visual Studio Code 1.18

  • ActionScript & MXML 0.8.0


このドキュメントの目的

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


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

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



インストール

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


Visual Sutdio 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の状態

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

設定用コンテクストメニュー

ここでセットアップ手順でインストールしたAIR SDKを選択する。

「No SDK」の表示が「AIR 26.0..」のように変化したら設定成功。


asconfigcのインストール

asconfigは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 appliactionを選択する。

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

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上のターミナルにドラッグ&ドロップすると、絶対パスが表示されてそのまま実行可能。

メンバー間でコマンドの共有もできるので、デザイナーさんと作業手順を共有するためにファイル化が有効。