© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

第 3回‟ ユーザーインターフェイス パーツの配置„

シーズン１：わずかなプログラミングで完成！ 最初の一歩から始めてゲームを作ろう！

2© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

Delphi / C++Builder Starter チュートリアルシリーズ

シーズン 1 ： 2016 年 10 月 24 日 ～ 12 月 26 日 全 10 回

時間 ：毎週 月曜 17 時 00 分 ~17 時 30 分

ねらい ：一から学んでゲーム制作までシーズン 1

第 1 回2016 年 10 月

24 日 無料で始めよう アプリ作成第 2 回 10 月 31 日 ユーザーインターフェイス パーツ基礎第 3 回 11 月 7 日 ユーザーインターフェイス パーツの配置第 4 回 11 月 14 日 UI アニメーションの設定第 5 回 11 月 21 日 イベントに合わせて動かしてみよう第 6 回 11 月 28 日 ミニゲームを作ってみよう

第 7 回 12 月 5 日 シューティングゲーム キャラクターを貼り付けよう そして動かそ

う第 8 回 12 月 12 日 シューティングゲーム 敵を動かしてみよう第 9 回 12 月 19 日 シューティングゲーム 敵を攻撃しよう そして完成第 10

回 12 月 26 日 あなたの近くのコミュニティ - 勉強会に参加してみようセミナー情報 ： http://forms.embarcadero.com/starter-tutorial-webinar

3© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

第 3 回 「ユーザーインターフェイス パーツの配置」 今日のねらい

• コンポーネント配置の要素を知る• コンポーネントの親子関係• 配置するためのプロパティ設定

実施内容• コンポーネントの配置とプロパティ設定の変更• コンポーネントの親子設定を実施

4© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

無料版 Delphi 10.1 Berlin Starter Edition 入手方法

• シリアルキーを知らせるメール内にも再ダウンロードリンク有• EDN* = Embarcadero Developers Network ( エンバカデロ デベロッパーズ ネット

ワーク )

エンバWeb 製品 Delphi Starter

バナー 登録 Get

無料で使える開発環境をダウンロード

EDN* に登録済の方は EDN アカウントでダウンロード可

登録完了後、自動でインストーラーのダウンロード開始

インストール時にシリアルキーを入力

登録時のメールアドレスにシリアルキーが配信される

5© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

コンポーネントの配置 ・レイアウト 基礎 コンポーネントを狙った位置に表示する 4 つのプロパティ要素

1. Anchors ( アンカー ) 2. Alignments ( アライメント )3. Padding ( パディング )4. Margin ( マージン )

コンポーネントの位置を示す座標プロパティ

1. Position （ポジション）

参考URL: http://embt.co/firemonkey-layout

6© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

1. Anchors （アンカー） 親項目のそれぞれの辺と結び付けて配置を設定するもの

デフォルト設定で Top と Left が ON に設定されている

親項目の枠サイズ変更に追従して位置が変化（結び付けされた一辺の移動に追従）

いずれのコントロールも 0 ～ 4 個のアンカーを設定可能

参考URL: http://embt.co/firemonkey-anchors

プロパティ 項目 意味・動作

Top 親フォーム・コントロールの上部と結び付け

Bottom 親フォーム・コントロールの下部と結び付け

Left 親フォーム・コントロールの左側と結び付け

Right 親フォーム・コントロールの右側と結び付け

7© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

2. Align （アラインメント） コントロールを親項目内の特定の位置に整列・配置

（デフォルトは None ）

参考URL: http://embt.co/firemonkey-alignlayout

意味・動作 プロパティ設定 名称

親項目一辺に寄せて、空きサイズいっぱいに表示 Top, Bottom, Left, Right

親項目内で最大化（ただし縦横比を維持） Fit, FitLeft, FitRight

親項目の一辺に寄せて最大化 MostBottom, MostTop, MostLeft, MostRight

一方向のみをリサイズ（幅または高さ） Vertical, VertCenter, Horizontal, HorzCenter

その他 Client, Center, Contents, Scale

8© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

3. Margins / 4. Padding （余白）

Margins▪ 項目間（および親項目）の余白

http://embt.co/firemonkey-margins

Padding ▪ 親から見た子項目に対する余白

http://embt.co/foremonkey-padding

パディング設定ありの親コンポーネント

マージン設定あり子コンポーネント

Align 設定がalClient の場合

マージン設定無子コンポーネント

Align 設定がalRight の場合

Margins.Top

Margins.Right

Margins.Bottom

Margins.Left

Padding.Top

Padding.Bottom

Padding.LeftPadding.Right

9© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

レイアウトの実践 コンポーネントのレイアウトを制御してみよう！

マルチデバイスアプリケーションの新規作成

複数のコンポーネントをドラッグ＆ドロップ

オブジェクトのプロパティで位置指定

コンポーネントの「親 - 子」関係を設定

10© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

コンポーネントの配置 コンポーネントを狙った位置に表示する 4 つの要素

参考URL: http://embt.co/firemonkey-layout

プロパティ 設定効果

Anchors ( アンカー ) 親の辺とコンポーネント自身の辺を結び付けを設定

Alignments ( アライメント ) コンポーネントの位置と、フィット方法を設定

Padding ( パディング ) コンポーネントの内側に配置される子への余白設定

Margin ( マージン ) コンポーネント自身の外側へ持つ余白の設定

11© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

参考資料

FireMonkey のレイアウト戦略• http://docwiki.embarcadero.com/RADStudio/Berlin/ja/FireMonkey_

のレイアウト戦略

FireMonkey コントロールの配置• http://docwiki.embarcadero.com/RADStudio/Berlin/ja/FireMonkey_

コントロールの配置

12© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

本日のセミナー内容は弊社ブログに掲載予定

[ コミュニティ ] ↓

[ 日本人ブログ ]

実施内容の再視聴 エンバカデロ Web サイト : http://forms.embarcadero.com/starter-tutorial-webinar [ リソース ] – [ イベント ] のページに再視聴 ( オンデマンド）の情報記載予定

実施内容サマリー

• Community embarcadero ( コミュニティ エンバカデロ ) に Web リンク、サンプルコード情報等

http://community.embarcadero.com/

「エンバカデロ」で検索

13© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

第 3 回 「ユーザーインターフェイス パーツの配置」まとめ 今日のねらい

• コンポーネント配置の要素を知る• 配置するためのプロパティ設定• コンポーネントの親子関係

実施内容• コンポーネントの配置とプロパティ設定の変更• コンポーネントの親子設定を実施

14© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.

次回は11 月 14 日（月） 17:00

より

“UI アニメーションの設定„