Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Flash Builder 4.5でAndroidアプリ開発
~概要から作成手順の基本まで最速解説!

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/05/09 14:00

ダウンロード サンプルソース (18.7 KB)

目次

型チェックが厳しいActionScript 3.0

 AIR for Androidアプリケーション開発では、スクリプト言語に「ActionScript 3.0」を使います。ActionScript 3.0は、JavaScriptの標準仕様であるECMAScriptの4th Edition(既にJavaScript標準からは外れました)を元に作られています。そのため、JavaやJavaScriptが分かる人ならば、少し学習するだけでActionScriptを使えるようになります。

 ActionScript 3.0では、型を明示できます。今回のサンプルの中でも、数値を計算するときに、「var v:Number」のように、Number型の変数を宣言しています。加えて、TextInputのtextプロパティは、String型であるため、String()関数を使って、Number型の値を文字列型に変換してから値を設定することが必要になっています。

var v:Number = 123.45;
text2.text = String(v);
// あるいは
text2.text = v.toString();

 型が厳密に指定できるため、コード補完機能がさくさく動作するのが利点です。

タブ実現の仕組み

 ウィザードで自動化されていたので、肝心のタブの仕組みがよく分からなかったかもしれません。そこで、メインファイルの「UnitConveter.mxml」を開いて、MXMLを覗いてみましょう。そこには、<s:TabbedViewNavigatorApplication>タグがあり、その子要素として複数の<s:ViewNavigator>タグがあります。

<s:TabbedViewNavigatorApplication
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">
	<s:ViewNavigator label="長さ" width="100%" height="100%"
firstView="views.View1"/>
	<s:ViewNavigator label="重さ" width="100%" height="100%"
firstView="views.View2"/>
	<s:ViewNavigator label="温度" width="100%" height="100%"
firstView="views.View3"/>
</s:TabbedViewNavigatorApplication>

 この<s:ViewNavigator>が、タブの1ページに相当します。例えば、“新たに「体積」のタブを追加する”といった場合には、タブ画面を「View4.mxml」に定義し、次のように<s:ViewNavigator>タグを追加することになります。

例:新しく「体積」タブを追加する場合
	<s:ViewNavigator label="体積" width="100%" height="100%"
firstView="views.View4"/>

 このように、タブコンポーネントでは、タブの1ページを1つのMXMLファイルとして作っていきます。そのため、画面の設計がとても分かりやすいのが特徴です。

 また、Flexフレームワークの素晴らしいところは、画面の一部を分かりやすい単位でファイルごとに分割できる点です。分割した単位はコンポーネントとなり、再利用が可能なため、複雑な画面構成のアプリケーションを作るときに役立ちます。

(補足)横画面に対応する方法

 今回のアプリケーション作成では、「マウス操作で軽快にアプリケーションを作れる」という部分に重きを置きました。そのため、端末を横向きにすると、画面の一部が切れてしまうという状態が発生してしまいます。

 ステージからはみ出した部分をスクロールできるようにするには、スクロールさせたい範囲を<s:Scroller>というタグで囲むことで自動的にスクロール可能になります。また、別の対処として設定ファイルの<autoOrients>項目を「false」にすることで縦画面固定にすることもできます。

 しかし、せっかくのAndroid端末向けアプリケーションですし、マウス操作で手軽に横画面へ対応できるのも、Flash Builder 4.5のよいところなので、簡単に手順を紹介しておきたいと思います(添付サンプルソース内「20110421nBTsb3-UnitConverter.fxp」ファイル)。

 実はFlex 4.5には「ステート(状態)」という素晴らしい機能があります。これを使うことで、手軽にレイアウトの切り替えが実現できます。単純に縦横に対応するだけでなく、それぞれの向きで見せる内容をカスタマイズしたい、といった場合にも可能です。

 長さのタブを表す「View1.mxml」を再びデザインモードで開いてみてください。右上に[ステート]というビューがあります。デフォルトでは、「<ステート1>」という表示が出ているだけです。

 ここで、まずは縦画面(portrait)横画面(landscape)という2つのステートを作成します。手順としては、新規で「landscape」というステートを作り、その後、もともとあった「ステート1」を「portrait」という名前に編集します。

横画面用に「landscape」を新規作成し、元々あった「ステート1」を「portrait」に変更し、縦画面と横画面の2つのステートを準備
横画面用に「landscape」を新規作成し、元々あった「ステート1」を「portrait」に変更し、縦画面と横画面の2つのステートを準備

 次に、[ステート]ビューで「landscape」をクリックし、横向き用のレイアウトになるように、配置済みのコンポーネントをマウスで移動させます。

「landscape」のコンポーネントをマウス操作で横向き画面用のレイアウトに移動
「landscape」のコンポーネントをマウス操作で横向き画面用のレイアウトに移動

 「長さ(View1)」「重さ(View2)」「温度(View3)」のすべてのタブで同様の操作を行います。以上の手順で、横画面への対応は完了です。Flex 4.5フレームワークは、縦横の画面方向の変更を感知して、自動的にステートを「portrait」「landscape」と切り替えてくれる機能があるので非常に便利です。

その他にもまだまだあるFlex 4.5のモバイル向け機能

 本稿の冒頭でも記述したように、AIR for Androidアプリケーションを開発するメリットは、フレームワークであるFlexを利用できる点にあります。今回のアプリケーション作成ではすべてを紹介できませんでしたが、Flex 4.5にはモバイル開発を強力にサポートする多くの特徴があります。

 その1つが「画面遷移」です。モバイルアプリケーションの場合、端末の画面が小さいため、どうしても多階層の画面構造を持つことになります。そういう場合、Flex 4.5にはモバイルアプリケーション用にViewNavigatorという画面遷移を管理する専用のクラスが用意されています。画面遷移を自動的に記憶してくれたり、メモリを圧迫しないように調整してくれたりと非常に便利なクラスです。

 その他にも、デフォルトでタッチ操作によるスクロールに対応しているListコンポーネントなど、まだまだたくさんの機能が存在します(参考記事:Flex 4.5 SDKとFlash Builder 4.5を使用したモバイルアプリケーション開発)。詳細な情報が知りたい方は、Adobe Developer Connectionに技術記事があるので、そちらを参照ください。

まとめ

 以上、単位変換ツールの作成を通して、Flash Builder 4.5を使ったAndroidアプリケーションの制作の過程を紹介しました。単位変換ツールの作成では、画面にコンポーネントをペタペタ貼り付け、単位の元となるデータと、変換のための計算式を入力するくらいでアプリケーションを完成させることができました。

 AIR for Androidアプリケーション開発における、さわりの部分を紹介したに過ぎませんが、本稿がAIR for Android開発をはじめる一歩となれば幸いです。

「FlexではじめるRIA開発」特集、絶賛公開中!


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • クジラ飛行机(クジラヒコウヅクエ)

    ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5