ApacheRoyaleとは
歴史的にはFlexの後継にあたるもので〜等ありますが、そういうのは後にしてざっくり言うと
・MXML & AS3で開発し、HTMLの形で吐き出して動かすことができる
・UIや機能のコンポーネントが最初から良い感じに揃っている
・まだ正式リリースはされていない （ものの、既にver0.9で、基本的なところはほぼリリース版クオリティで動いているらしい）
・将来的にはネイティブアプリ等にも対応していく方針があり、アプリやHTML系はワンソースで作れるよ〜的な模様
的なものです。
目指しているところはFlutterと近いのかなと思いますが、
歴史的な経緯もあり、とにもかくにもMXML & AS3で開発するというのが大きい特徴で、今からこれを覚えようっていうのはメリット含め中々にハードルが高そう...。
ただ触ってる中で良いところも結構見えてきまして、その辺りは今後の記事にしたいと思いますが、ApacheRoyaleは今後に期待しているものの一つです。
さっそくHelloRoyale
Hello"World"じゃないのは公式のチュートリアルがHelloRoyaleとしていたので合わせただけで、やろうとしてるのはHelloWorldそのものです。
環境、使うもの
・Mac
・npm
・VsCode
やること
・npmでApacheRoyaleパッケージをインストール
・ソースファイル、設定ファイルの設置
・VsCodeで開発とビルドの設定
npmでApacheRoyaleパッケージをインストール
インストール
npm install @apache-royale/royale-js -g
バージョン確認
npm view @apache-royale/royale-js version
> 0.9.7
後はVsCodeで設定するので、インストールだけ済ませればOKです。
ソースファイル、設定ファイルの設置
プロジェクトディレクトリ作成
適当な場所で良いのでプロジェクト用のディレクトリを作成し、その中に入ります
mkdir HelloRoyale
cd HelloRoyale
ソースファイル用のディレクトリ作成
mkdir src
ファイル設置
下記のファイルをパス通りに設置します
./asconfig.json
./src/Main.mxml
./asconfig.json 記述
{
"compilerOptions": {
"source-map": true,
"theme": "${royalelib}/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css",
"targets": [
"JSRoyale"
]
},
"files": [
"src/Main.mxml"
]
}
名前の通りコンフィグ関連の設定です。
実はこのファイルは必須ではないんですが、デフォルトデザインを適用させるために設置します。
./src/Main.mxml 記述
<?xml version="1.0" encoding="UTF-8"?>
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:html="library://ns.apache.org/royale/html"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:c="components.*"
>
<j:initialView>
<j:View>
<j:beads>
<j:Paddings paddingTop="50" paddingLeft="50" paddingRight="50" paddingBottom="50"/>
</j:beads>
<j:Card>
<html:H3 text="HelloRoyale" />
</j:Card>
</j:View>
</j:initialView>
</j:Application>
名前の通りメインで起動する処理のソースファイルですね。
Helloのテキストだけを置いている感じですが、一旦意味は分からなくても良いと思うので、とにかく設置。
※先程作成した src/ ディレクトリ内に設置するので注意してください。
VsCodeで開発とビルドの設定
プロジェクトディレクトリを開く
VsCodeを起動し、先程作成したプロジェクトディレクトリの「HelloRoyale」を開く
こうなってればOK
拡張機能をインストール
VsCode、左アイコンメニューから「拡張機能」を選択し、下記をインストール
ActionScript & MXML
これを入れるとActionScriptやMXMLの入力補完等やサポートが効くようになります。
SDK適用
- VsCode内でパレット（shift + cmd + p）を開き、ActionScript: Select Workspace SDK を選択
- npmで正常にインストール出来ていれば、「Apache Royale 0.9.7」等のSDKがいるはずなのでそれを選択
- VsCode下部のSDK表示が更新されていればOK!
SDK表示が「Royale 0.9.7」となっている
ビルド
やっとこさ、これでビルド、つまりHTMLに出来る状況になりました。
shift + cmd + b のショートカットでビルドメニューを開くことができます。
画像での「ActionScript: compile debug - asconfig.json」を選択するとビルド開始！
The project 'Main' has been successfully compiled.
9.2604983 seconds
ターミナル表示で色々やってるログが流れますが、こんなのが流れたらビルド成功です。
プロジェクトディレクトリ以下に「bin」というディレクトリが作られており、「bin/js-debug/」の中にビルドで作られたHTML本体がいます。
後はこのHTML本体をブラウザでアクセスすればOKです。
割愛しますがVsCodeの拡張機能である「Live Server」を使って見るも良し、bin/index.htmlをブラウザに放り込むも良しです。
HTML画面
見事、HelloRoyaleと表示された画面が見えております( ﾟдﾟ )b
デフォルトのデザイン適用もしているので見た目も少し良いです。
終わり
HelloWorldだけなのにえらい長くなってしまいました...。
なんにせよ、後はもうコーディング&ビルドを繰り返していけばよく、一応の開発環境が整ったことになるんですが、現状、公式機能としてのHotReloadは無いようです。
つまり毎回ビルドしないとコーディング結果が分かりません。
自作で仕込む分にはできるでしょうが...。
この辺りは正式リリースぐらいになったら期待したいですね。
次回の記事はいくつか候補がありますが、ApacheRoyaleとしての長所が分かるものにしたいのでその方向で考えたいと思います。