DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう

© 2016 Embarcadero Technologies, Inc.
All rights reserved. Proprietary and confidential.
Delphi Boot Camp
Delphiでビジュアル開発に挑戦しよう
2016年9月12日（月）～15日（木）

© 2016 Embarcadero Technologies, Inc.
All rights reserved. Proprietary and confidential.
DELPHI BOOT CAMP
DELPHIでビジュアル開発に挑戦しよう
Day 2 :
DelphiでUI設計のポイントを学ぼう

3© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
Delphi Boot Camp
Day 4：「Delphiモバイルアプリ開発事始め」
2016年9月15日（木）16:00～17:00
対象：Delphi初心者、中級者
必要な開発環境：Delphi Professional ＋ Mobile Add-On Pack以上
Day 3：「Delphiプログラミングを学ぼう」
2016年9月14日（水）16:00～17:00
必要な開発環境：Delphi Starter以上
Day 2：「DelphiでUI設計のポイントを学ぼう」
2016年9月13日（火）16:00～17:00
Day 1：「Delphiで作るはじめてのアプリケーション」
2016年9月12日（月）16:00～17:00
対象：Delphi初心者

Day2:「DelphiでUI設計のポイントを学ぼう」アジェンダ
セミナー対象：初心者・中級者
時間： 16:00～約1時間 + 10分：特別講義
 Day2 学び方
• 基本的部分はデモを加えてわかりやすく
• 応用発展は自習できるように参照すべき内容を添えて
• ユーザーインターフェースの重要性
• FireMonkeyについて
• 主要なコンポーネント
• レイアウトを構成する要素
• レイアウトに便利なコンポーネント
• UIの見た目をよりよく
• 処理側から見たUI
• 特別講義：UI設計の事例

実施内容の再視聴
 実施内容のビデオは後日再視聴可能
• 申し込みメールアドレスに再視聴のリンク
 実施内容サマリー
• Community embarcadero (コミュニティエンバカデロ)にWebリンク、
サンプルコード情報等 : http://community.embarcadero.com/
 エンバカデロWebサイト
• [リソース] – [イベント]のページに再視聴(オンデマンド）の情報記載予定

無料版 Delphi 10.1 Berlin Starter Edition 入手方法
• シリアルキーを知らせるメール内にも再ダウンロードリンク有
• EDN* = Embarcadero Developers Network
エンバ
Web
製品 Delphi
Starter
Edition
100%Off
登録 Get
インストール時にシリアルキーを入力
登録時のメールアドレスでシリアルキーを受信
登録完了後、自動でインストーラーのダウンロード開始
EDN*に登録済の方はEDNアカウントでダウンロード可
 無料ダウンロードは2016年8月22日～9月15日までの期間限定

今どきのデバイス向けUI設計
OS多様化
• Mac OS X
• iOS
• Android
• Windows
デバイス形状
• インチ数
• アスペクト比
• 4Kデバイス
• High DPI
入力方法の変化
• タッチ操作
• ジェスチャー
• ディスプレイ
• キーボード
 デバイスとOSの多様化
• パーソナルユースだけでなくビジネスユースにも
モバイルデバイス使用するケースが増加
• スマホ・タブレットの増加により利用される
OSの種類や、デバイス形状の多様化

今どきのユーザー
■無線デバイス馴れ
• どこでも利用可能
• 小さなデバイスで
■スマホ、タブレット馴れ
• マウス・キーボードのいらないUI
• 画面上で入力
■単機能、簡単なUI
• ヘルプ案内（説明書なし）
• 優しくわかりやすいUI,UX
■BYOD
• 利用者に合わせた多デバイス、多OS対応
 オペレーションとUXの変化
• モバイルデバイスと画面サイズの変化に伴い、使用シーン、アプリの画面設計も変化
• 入力方法の変化に伴い一画面における機能数を絞り、操作しやすいUIへ
• 使い慣れたデバイスをビジネスシーンに利用

UIを形成する 2種類のコンポーネントフレームワーク
※Starter では Win32アプリのみビルドが可能です
Windowsのみ Windows以外も
Windows APIをカプセル化し、
Windowsの機能を最大限活用
単一のコードで
マルチデバイス開発が可能

FireMonkey（FMX）の基礎
 マルチデバイス開発
• Windows, iOS, Android, Mac OS X 対応
• マルチデバイス向け配置、レイアウトの汎用性
• →開発効率が高い
 他のコンポーネントの子項目としてネスト可能
• ClipChildrenを参照
• →カスタマイズが行いやすい
 アニメーション効果を伴って変更可能
• 多くの数値プロパティはアニメーション可
• Position, RotationCenter, Scale, Size(Height およびWidth), Opacity, RotationAngle…
• →見栄えのよいUI構築が可能

標準的コンポーネントとサンプルコード
 コンポーネントの主要パーツをサンプルコードで確認してみよう！
 サンプルフォルダには…
• 各コンポーネント独自のサンプル
• データアクセスなど様々なサンプルを提供
• 各フォルダ内にReadme.htmlを(ほぼ)包有
 SubVersionに最新のサンプル
• サンプルのバグ修正や改善
• ダウンロードして差し替えを推奨
ウエルカムページ
User Interfaceフォルダ
サンプルプロジェクトを開く
Multi-Device Samples フォルダ
Object Pascal フォルダ
ControsDesktopフォルダ

主要なコンポーネント
 [Standard], [Additional], [Dialogs]カテゴリから
参照してみましょう！
 UIコントロール
• Edit, Button, CheckBox, ComboEditなど
 コンテナ（パネル）
• Panel, GroupBoxなど
 複合的なUIコントロール
• TreeView, ListViewなど
 ダイアログ
• OpenDialog, SaveDialogなど
ツールパレットのコンポーネントに
マウスカーソルを合わせると
使用できるプラットフォームが
分かります。

コンポーネントの基本プロパティ
 表示
• Align, Anchors
• Visible
• Width, Height
 入力
• CanFocus
• Enabled
• Text
 フォント
• TextSettings
 その他
• StyleLookup
http://docwiki.embarcadero.com/RADStudio/Berlin/ja/プロパティ

コンポーネントの使い方・覚え方
 配置済コンポーネントまたはツールパレットのコンポーネントを選択
 選択状態でF1キーをプッシュ
 該当コンポーネントのヘルプ表示を参照
メソッド：使用できるメソッドとその使い方
プロパティ：各プロパティの意味と効果
オブジェクトインスペクタの「プロパティ」で
設定できるほかに、コード内でもプロパティを指定可能
( 例： Edit1.text := テキスト‘; )
イベント：イベントと説明
オブジェクトインスペクタ内の「イベント」から
指定して該当イベントにコードを記述可能

ユーザーインターフェイスのレイアウトを構成する要素
 パーツレイアウト
• Anchors
• Alignments
• Padding
• Margin
 レイアウトに使いやすいコンポーネントの一例
• Tab Control
• MultiView
• List View vs. List Box
• LayoutFrames
• ScollBox
http://embt.co/firemonkey-layout
Day 1で解説

学習に使えるリンク
 DockWiki ： http://docwiki.embarcadero.com/
• 入門
• チュートリアル
• サンプルコード

レイアウトに便利なコンポーネント
 TTabControl
• タブで複数のコンテナを管理
• TabPositionプロパティによりタブの位置、表示を規定
• TTabChangeAction によりタブを切り替えたときの
アニメーションを規定
http://embt.co/tabctrl-tutorial
 TMultiView
• 複数のモードをサポートしたスーパーパネル
• PlatformDefault, Drawer, NavigationPane, Panel,
Popover, Custom
• （モバイルデバイスで）画面サイズや向きによって、
モードを自動変更可能
http://embt.co/tmultiview-tutorial

レイアウトに便利なコンポーネント（２）
 TListBox
• 数が決まっているスクロールなしの表示に
• 設定やログイン画面などの一覧表示
http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.ListBox.TListBox
 TListView
• 多数・未定のアイテムのスクロールが必要な表示に
• データベースから複数のデータをバインドし一覧表示
http://docwiki.embarcadero.com/Libraries/Berlin/ja/FMX.ListView.TListView
 TListBoxとTListViewの違い
※DockWikiでListBoxとListViewの情報を参照してみましょう！

 特定のルールに従ってコントロールを配置するコンテナ
http://embt.co/firemonkey-layoutmgr
レイアウト応用編 - レイアウトマネージャ -
 TFlowLayout
• 順に整列
 TGridLayout
• 一定の大きさにそろえて整列
 TGridPanelLayout
• 区切られた範囲に整列

レイアウト応用編 - レイアウト関連のその他の機能 -
 TScaledLayout
• 親項目の大きさに連動してリサイズ
http://embt.co/scaledlayout
 TScrollBox
• 親項目よりも子項目のサイズが大きい場合にスクロールバーを表示
• 以下も利用可能
• TVertScrollBox, THorzScrollBox, TFramedScrollBox, TFramedVertScrollBox
http://embt.co/scrollbox

コンポーネントの使い方・覚え方（その２）
 チュートリアルを試してみよう！
 コツをつかんだ後はサンプルも参照してみよう！
• 該当コンポーネントのヘルプを参照
• ヘルプやDockWikiの「入門」を参照
http://docwiki.embarcadero.com/RADStudio/Berlin/ja/RAD_Studio_入門

ユーザーインターフェイスをより見栄えよく
 アニメーション
 画像効果
 スタイル
• よりUIを生き生きと
• よりUIをインタラクティブに
• より使用者の注意を引き付ける

アニメーション効果
 プロパティ値を変更するしくみ
• 自動または手動で開始
• 遅延、ループ、反転などが可能
• トリガーまたはTrue/Falseで開始・終了
• IsMouseOver, IsDragOver, IsFocused, IsVisible, IsPressed,
IsChecked, IsSelected, IsExpanded
• OnProcessおよびOnFinishイベントによりアニメーションに
伴う処理を記述可能
http://embt.co/firemonkey-animation

画像効果
 40以上のGPU画像効果を利用可能
• アニメーションと組み合わせることで、徐々に効果を加えることが可能
• 自動的に効果を有効／無効に切り替えるトリガーを用意
• 画像だけでなく、コントロールにも適用可能
 20以上のトランジション効果も用意
• 単純なフェードから帯渦巻きまで
http://embt.co/firemonkey-effects

演習：アプリに効果を加えてみる
 エフェクト – Shadow, Glow
• エフェクトの関連付け
• トリガー
 アニメーション :
• アニメーションの関連付け
• 数値の変更
• トリガー
• イベント
 エフェクトにアニメーション効果を追加

使いやすいUIを作るコツ – 処理編 -
 時間のかかる処理をメインスレッドで行わない
• メインスレッドで行うと…
• キャンセル操作ができない
• 画面が固まってしまっているように見える
• 応答がないアプリケーションとして警告が出る
• 並列プログラミングの機能を使おう！
• TTask、TFuture
• タスクを複数CPUで並列に動作させることが可能
• タスクを自動的に調整するスレッドプールの仕組みを利用可能
http://embt.co/ppl-overview

より学習をすすめたい方は
 DockWiki ： http://docwiki.embarcadero.com/
• 入門
• チュートリアル
• サンプルコード

特別講義
毛利春幸さん
RAD Studio 勉強会大阪
元ハードウェア担当でロジック回路設計やFPGA(VHDL)などの
プログラムの経歴を有す。
初代Delphi(Windows3.1)から使い続けて20年、200万カードを
管理するカラオケ会員システムやアプリを担当している。

事例. オリジナルオーダーシャツ
 店舗スタッフ入力用端末(iPad)
• メンズ・レディース生地種類3000～FireDAC(SQLite)
• 商品項目はローカルDB、在庫やフェア金額などはサーバーからの取得
• ボディースタイル / ネックサイズ / 衿型 / 着丈 / 裄丈 / クレリック /
カフス / 釦 / 刺繍
• シャツイメージシミュレーション機能
• オーダー用サーバー連動：
• サーバー, AWS S3 EC2 で受信後基幹システムと同期
• 各店舗ごとの注文履歴
• 店舗管理

Day2:「DelphiでUI設計のポイントを学ぼう」アジェンダ
セミナー対象：初心者・中級者
時間： 16:00～約1時間 + 10分：特別講義
 Day2 学び方
• 基本的部分はデモを加えてわかりやすく
• 応用発展は自習できるように参照すべき内容を添えて
• ユーザーインターフェースの重要性
• FireMonkeyについて
• 主要なコンポーネント
• レイアウトを構成する要素
• レイアウトに便利なコンポーネント
• UIの見た目をよりよく
• 処理側から見たUI
• 特別講義：UI設計の事例

実施内容の再視聴
 実施内容のビデオは後日再視聴可能
• 申し込みメールアドレスに再視聴のリンク
 実施内容サマリー
• Community embarcadero (コミュニティエンバカデロ)にWebリンク、
サンプルコード情報等 : http://community.embarcadero.com/
 エンバカデロWebサイト
• [リソース] – [イベント]のページに再視聴(オンデマンド）の情報記載予定

Delphi Boot Camp
Day 4：「Delphiモバイルアプリ開発事始め」
2016年9月15日（木）16:00～17:00
必要な開発環境：Delphi Professional ＋ Mobile Add-On Pack以上
Day 3：「Delphiプログラミングを学ぼう」
2016年9月14日（水）16:00～17:00
Day 2：「DelphiでUI設計のポイントを学ぼう」
2016年9月13日（火）16:00～17:00
Day 1：「Delphiで作るはじめてのアプリケーション」
2016年9月12日（月）16:00～17:00
対象：Delphi初心者

DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう

More Related Content

What's hot

Viewers also liked

Similar to DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう

DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう

Editor's Notes