FireUIを使ってiPad／AndroidタブレットアプリとiPhone／AndroidフォンアプリのUIを並行開発してみる

RAD Studio XE7の新機能FireUIマルチデバイスデザイナを使う

水平器の機能を実装する

　さて、それでは実際にRAD Studioを使って「水平器（傾き表示アプリ）」を作成してみましょう。

アプリの画面を設計する

　RAD Studioには100を超えるコンポーネントというソフトウェア部品があり、ツールパレットというところに分類の上、格納されています。コンポーネントには、UIコントロールのほかに、センサーなどの機能をカプセル化したもの、タイマーのように一定間隔で処理をする機能などを使いやすくしたものがあります。

　「ツールパレット」から「レイアウト（TLayout）」、「プロット・グリッド（TPlotGrid）」（方眼紙の実現）、「円（TCircle）」、「ラベル（TLabel）」、「モーションセンサー（TMotionSensor）」、「タイマー（TTimer）」のコントロールを探し出して「デザイン」にドラッグ＆ドロップします。すると、RAD Studio上では以下のようになります。

図10 RAD Studio上にコンポーネントを配置した状態

　ここで、「タイマー」イベントに、「傾き」の情報を「ラベル」にセットするためのコードを記述します。

傾きを表示するコードを記述する

　画面の設計が終わったら、次に実際のコードを記述しましょう。「タイマー（TTimer）」から定期的に発生するイベント・コードを記述していきます。ここではObject Pascal（Delphi）言語を用いてコードを記述しています。これ以外にC++言語を選択して同様の記述を行うこともできます。なお、このようにタイマーやモーションセンサーをプラットフォーム非依存のままコーディングできることも、FireMonkeyだからこそ実現できていることなのです。

コード1 「傾き」の情報を「ラベル」にセットするタイマーイベントのコード

procedure TForm1.FormCreate(Sender: TObject);
begin
  MotionSensor1.Active := True;
  Timer1.Enabled := True;
end;

procedure TForm1.Timer1Timer(Sender: TObject);
var
  x, y: Double;
begin
  x := MotionSensor1.Sensor.AccelerationX*100.0;
  y := MotionSensor1.Sensor.AccelerationY*100.0;
  Label1.Text := Format('X傾斜:%3.2f', [x]);
  Label2.Text := Format('Y傾斜:%3.2f', [y]);
  Circle1.Position.X := ((PlotGrid1.Width-Circle1.Width)/2.0)+(y*10.0);
  Circle1.Position.Y := ((PlotGrid1.Height-Circle1.Height)/2.0)+(x*10.0);
end;

アプリを実行する

　さて、それではいよいよこのコードをビルドしてAndroidタブレットおよびiPadにデプロイしてみましょう。RAD Studioなら、ビルド・デプロイまでを、IDEを中心とした一連の操作で実現することができます。複雑なモバイルアプリの開発・テスト環境で、これは便利ですね。

　実機上での動作は以下のような感じになります。

図11 Androidタブレット（Nexus 7）上で動作している傾き表示アプリ

メモ

　Androidの実機にアプリを転送する場合には、あらかじめUSBデバッグの有効化などの事前準備作業が必要です。

図12 iPad上で動作している傾き表示アプリ

メモ

　iPadおよびiPhoneの実機にアプリを転送する場合は、あらかじめApple iOS Developer Programへの参加やプロビジョニングプロファイルの作成、そしてプラットフォームアシスタントサーバー（PAServer）のセットアップなどの事前準備作業が必要です。