RAD Studioで始めるマルチデバイス・クロスプラットフォーム開発ワークショップ - ハンズオンセッション [JAPAN]
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 =フォームで使用するツールバー コンポーネント
- 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 により、ボタンの外観を各種アイコンに変更できる
撮影後のエフェクト用のコントロール = TToolBar + TTrackBar
- TTrackBar = トラック操作で値を直感的に操作可能なコントトール
- http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.StdCtrls.TTrackBar
- TToolBar の領域を TTrackBar できっちり使うために Align = Client に設定する
- TTrackBar の Max = 1 に変更する(先の作業で用いるエフェクトの最大値が 1 のため)
撮影後の写真の表示 = TImage
- Timage = 汎用の2次元画像表示用コンポーネント
- 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でターゲットを選んでビルドするだけ


Sales Consultant at Embarcadero Technologies, in Japan.
Comments
-
Please login first in order for you to submit comments