RAD Studioで始めるマルチデバイス・クロスプラットフォーム開発ワークショップ - ハンズオンセッション [JAPAN]

アプリの画面をデザインする

作業内容

• 「マルチデバイスアプリケーションの新規作成」を実行する
  • プログラミング経験の少ない方は Delphi を選ぶ（大文字、小文字をタイプミスしてもコンパイルが通るので、タイプミスしがちな初心者に優しい）
• 「空のアプリケーション」を選ぶ

ビルドターゲットとスタイルを設定する

• ビルドターゲットを Android にして、スタイルも Android にする

  • ビルドターゲットは Win32bit/64bit, macOS, iOS64bit/32bit, Android から選択できる
  • ワークショップでは Android 端末を使うのでターゲットに合わせて Android にしておく （スタイルはターゲットOSごとに個別編集可能）

• 画面デザインはコンポーネントの配置と調整で行える

  • 画面右下の「ツールパレット」からコンポーネント（様々な機能を持つ部品）を選んでデザインエディタに配置する
  • コンポーネントの設定は、画面左下の「オブジェクトインスペクタ」からプロパティの値を変更することで行える

アプリの名前表示を作る = TToolBar + TLabel

• TToolBar =フォームで使用するツールバー コンポーネント
  • http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.StdCtrls.TLabel
  • 背景色はTintColorで変更できる
• TLabel = テキスト表示用のコントロール
  • http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.StdCtrls.TLabel
  • 表示文字列は Text
  • 位置調整は Align
  • 文字色は TextSettings.FontColor
  • Trimming を None にすると、表示文字列が領域をはみ出す場合のトリミングが無効になる
    AutoSize を True にすると、テキストの量に合わせて表示領域の大きさを自動的に調整する
    WordWrapを False にすると、テキストの折り返しが行われない

カメラ撮影用のボタンを作る = TLabel + TButton

• TButton = 汎用のプッシュボタン
  • http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.StdCtrls.TButton
  • 位置調整は Align で調整する
• StyleLookup により、ボタンの外観を各種アイコンに変更できる
  • http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.Controls.TStyledControl.StyleLookup

撮影後のエフェクト用のコントロール = TToolBar + TTrackBar

• TTrackBar = トラック操作で値を直感的に操作可能なコントトール
  • http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.StdCtrls.TTrackBar
  • TToolBar の領域を TTrackBar できっちり使うために Align = Client に設定する
  • TTrackBar の Max = 1 に変更する（先の作業で用いるエフェクトの最大値が 1 のため）

撮影後の写真の表示 = TImage

• Timage = 汎用の２次元画像表示用コンポーネント
  • http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.Objects.TImage
  • 貼り付け先は Form
  • Align = Client と設定して、ToolBar が配置されていない箇所の残りの領域をすべてイメージの表示用にする
• Timageにデフォルト表示の画像を設定する
  • 構造ペイン（画面左上）より Image1 を展開し、MultiResBitmap の Empty を選ぶ
  • プロパティの Bitmap をダブルクリックして、ビットマップエディタを開く
  • ビットマップエディタで「読み込み」を選択して任意の画像を選択すると、その画像が Timage の初期表示画像となる

アプリ内の操作で写真撮影を行う

カメラでの撮影の実施 = TActionList, TButton

• TActionList = アプリケーション内の様々なアクションを一元管理するコンポーネント
  • http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.ActnList.TActionList
  • TActionList をダブルクリックして ActionList の編集ダイヤログを開く
  • 標準アクションの新規作成を行い、TTakePhotoFromCameraAction を指定する
  • Button1 の Action に TakePhotoFromCamera1 を割り当てる

撮影した画像の表示

• TakePhotoFromCameraAction のイベント OnDidFinishTaking に、撮影後の画像を Image1 に表示するためのコードを書く
  • 撮影完了後のイベントハンドラには、撮影した画像が渡される
  • これをImage1に割り当てることで、撮影した画像が表示できる

// Delphi向けのコード
procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
    Image1.Bitmap.Assign(Image); 
end;

// C++向けのコード
void __fastcall TForm1::TakePhotoFromCameraAction1DidFinishTaking(TBitmap *Image);
{
    Image1->Bitmap->Assign(Image);
}

撮影した写真にエフェクトをかける

撮影後の画像の加工 = TSepiaEffect

• TSepiaEffect = 画像にセピア効果を加える
  • http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.Filter.Effects.TSepiaEffect
  • Amount の値を 0 ～ 1 に設定するとセピア効果の強さが変わる
  • 初期状態でセピア効果をかけないためには 0 を設定しておく

TTrackBar の操作を SepiaEffect のAmountに反映さえる = LiveBinding

• LiveBinding = コンポーネントのプロパティ同士を紐付けによる連動
  • http://docwiki.embarcadero.com/RADStudio/Berlin/ja/RAD_Studio_%E3%81%A7%E3%81%AE_LiveBinding
  • SepiaEffect を右クリックして「ビジュアルにバインド」を選択すると、LiveBinding エディタが起動する
  • SepiaEffect 右下の “…” をクリックし、バインドの対象に Amount を加える
  • TTrackBar.Value と SepiaEffect.Amount をドラッグ＆ドロップで繋ぐとバインドされて、TrackBar の操作で Amount の値を変更できるようになる

縦横切替時に SepiaEffect を再描画させるためのコードを書く

画面の縦横切り替え時に伴う Image や SepiaEffect の再描画が稀に行われない場合があるので、確実に行わせるためにTForm のイベント FormResize に以下のコードを書いておく

// Delphi向けのコード
procedure TForm1.FormResize(Sender: TObject);
begin
    Application.ProcessMessages;
end;

// C++向けのコード
void __fastcall TForm1.FormResize(TObject *Sender);
{
    Application->ProcessMessages();
}

RAD Studioで始めるマルチデバイス・クロスプラットフォーム開発ワークショップ まとめ

• モバイルアプリ向けの画面デザイン作成方法
  • Delphi/C++BuilderでのWindows向け開発と同様にコンポーネントで画面が作成できる
• モバイルデバイス特有の機能の使い方
  • カメラ撮影機能はTActionListの標準アクションで利用できる
• 処理に応じたコードの書き方
  • 処理はコンポーネントのイベントハンドラに書くのが基本
• LiveBindingの使い方
  • コンポーネント同士のプロパティ値の参照や設定はLiveBindingでコード無しに行える
• 開発したアプリのデプロイ
  • IDEでターゲットを選んでビルドするだけ