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

Posted by on in Programming

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

去る 2017年2月10日(金)17:00よりにエンバカデロ セミナールームにて「RAD Studioで始めるマルチデバイス・クロスプラットフォーム開発ワークショップ」を実施いたしました。

ワークショップの前半の記事は2017/2/13に弊社セールスコンサルタントの相蘇が記事を書いておりますが、本記事では後半部分のワークショップの内容をご説明いたします。

ねらいと実施内容

  • 今日のねらい
    • スマートフォンやタブレットのカメラで撮影するアプリを実際に作ることで、RAD Studio のクロスプラットフォーム向け開発方法を学ぶ
  • 実施内容
    • アプリの画面をデザインする
    • スマートフォンのカメラ機能を使う
    • 撮影した画像にエフェクトをかける

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

作業内容

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

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

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

    • ビルドターゲットは Win32bit/64bit, macOS, iOS64bit/32bit, Android から選択できる
    • ワークショップでは Android 端末を使うのでターゲットに合わせて Android にしておく (スタイルはターゲットOSごとに個別編集可能)
  • 画面デザインはコンポーネントの配置と調整で行える

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

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

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

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

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

撮影後の写真の表示 = TImage

  • Timage = 汎用の2次元画像表示用コンポーネント
  • Timageにデフォルト表示の画像を設定する
    • 構造ペイン(画面左上)より Image1 を展開し、MultiResBitmap の Empty を選ぶ
    • プロパティの Bitmap をダブルクリックして、ビットマップエディタを開く
    • ビットマップエディタで「読み込み」を選択して任意の画像を選択すると、その画像が Timage の初期表示画像となる

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

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

  • TActionList = アプリケーション内の様々なアクションを一元管理するコンポーネント

撮影した画像の表示

  • 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

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でターゲットを選んでビルドするだけ
 


About
Gold User, No rank,
Sales Consultant at Embarcadero Technologies, in Japan.

Comments

Check out more tips and tricks in this development video: