SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

EDN CodeZine出張所(AD)

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)のセットアップなどの事前準備作業が必要です。

次のページ
FireUIを利用してスマホアプリ向けに画面を調整する

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
EDN CodeZine出張所連載記事一覧

もっと読む

この記事の著者

EDN編集部(イーディーエヌ編集部)

エンバカデロ・デベロッパーネットワーク(EDN)は、ソフトウェア開発者とデータベース技術者のための技術情報サイトです。Delphi、C++Builderをはじめとする開発ツールやER/Studioなどのデータベースツールに関連する技術記事、ビデオなどを提供しています。EDN編集部は、EDN記事と連携...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8330 2014/12/04 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング