Weitere ähnliche Inhalte
Ähnlich wie DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう (20)
DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう
- 1. © 2016 Embarcadero Technologies, Inc.
All rights reserved. Proprietary and confidential.
Delphi Boot Camp
Delphiでビジュアル開発に挑戦しよう
2016年9月12日(月)~15日(木)
- 2. © 2016 Embarcadero Technologies, Inc.
All rights reserved. Proprietary and confidential.
DELPHI BOOT CAMP
DELPHIでビジュアル開発に挑戦しよう
Day 2 :
DelphiでUI設計のポイントを学ぼう
- 3. 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初心者、中級者
必要な開発環境:Delphi Starter以上
Day 2:「DelphiでUI設計のポイントを学ぼう」
2016年9月13日(火)16:00~17:00
対象:Delphi初心者、中級者
必要な開発環境:Delphi Starter以上
Day 1:「Delphiで作るはじめてのアプリケーション」
2016年9月12日(月)16:00~17:00
対象:Delphi初心者
必要な開発環境:Delphi Starter以上
- 4. 4© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
Day2:「DelphiでUI設計のポイントを学ぼう」アジェンダ
セミナー対象:初心者・中級者
時間: 16:00~ 約1時間 + 10分:特別講義
Day2 学び方
• 基本的部分はデモを加えてわかりやすく
• 応用発展は自習できるように参照すべき内容を添えて
• ユーザーインターフェースの重要性
• FireMonkeyについて
• 主要なコンポーネント
• レイアウトを構成する要素
• レイアウトに便利なコンポーネント
• UIの見た目をよりよく
• 処理側から見たUI
• 特別講義:UI設計の事例
- 5. 5© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
実施内容の再視聴
実施内容のビデオは後日再視聴可能
• 申し込みメールアドレスに再視聴のリンク
実施内容サマリー
• Community embarcadero (コミュニティ エンバカデロ)にWebリンク、
サンプルコード情報等 : http://community.embarcadero.com/
エンバカデロWebサイト
• [リソース] – [イベント]のページに再視聴(オンデマンド)の情報記載予定
- 6. 6© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
無料版 Delphi 10.1 Berlin Starter Edition 入手方法
• シリアルキーを知らせるメール内にも再ダウンロードリンク有
• EDN* = Embarcadero Developers Network
エンバ
Web
製品 Delphi
Starter
Edition
100%Off
登録 Get
インストール時にシリアルキーを入力
登録時のメールアドレスでシリアルキーを受信
登録完了後、自動でインストーラーのダウンロード開始
EDN*に登録済の方はEDNアカウントでダウンロード可
無料ダウンロードは2016年8月22日~9月15日までの期間限定
- 7. 7© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
今どきのデバイス向けUI設計
OS多様化
• Mac OS X
• iOS
• Android
• Windows
デバイス形状
• インチ数
• アスペクト比
• 4Kデバイス
• High DPI
入力方法の変化
• タッチ操作
• ジェスチャー
• ディスプレイ
• キーボード
デバイスとOSの多様化
• パーソナルユースだけでなくビジネスユースにも
モバイルデバイス使用するケースが増加
• スマホ・タブレットの増加により利用される
OSの種類や、デバイス形状の多様化
- 8. 8© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
今どきのユーザー
■無線デバイス馴れ
• どこでも利用可能
• 小さなデバイスで
■スマホ、タブレット馴れ
• マウス・キーボードのいらないUI
• 画面上で入力
■単機能、簡単なUI
• ヘルプ案内(説明書なし)
• 優しくわかりやすいUI,UX
■BYOD
• 利用者に合わせた多デバイス、多OS対応
オペレーションとUXの変化
• モバイルデバイスと画面サイズの変化に伴い、使用シーン、アプリの画面設計も変化
• 入力方法の変化に伴い一画面における機能数を絞り、操作しやすいUIへ
• 使い慣れたデバイスをビジネスシーンに利用
- 9. 9© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
UIを形成する 2種類のコンポーネントフレームワーク
※Starter では Win32アプリのみビルドが可能です
Windowsのみ Windows以外も
Windows APIをカプセル化し、
Windowsの機能を最大限活用
単一のコードで
マルチデバイス開発が可能
- 10. 10© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
FireMonkey(FMX)の基礎
マルチデバイス開発
• Windows, iOS, Android, Mac OS X 対応
• マルチデバイス向け配置、レイアウトの汎用性
• →開発効率が高い
他のコンポーネントの子項目としてネスト可能
• ClipChildrenを参照
• →カスタマイズが行いやすい
アニメーション効果を伴って変更可能
• 多くの数値プロパティはアニメーション可
• Position, RotationCenter, Scale, Size(Height およびWidth), Opacity, RotationAngle…
• →見栄えのよいUI構築が可能
- 11. 11© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
標準的コンポーネントとサンプルコード
コンポーネントの主要パーツをサンプルコードで確認してみよう!
サンプルフォルダには…
• 各コンポーネント独自のサンプル
• データアクセスなど様々なサンプルを提供
• 各フォルダ内にReadme.htmlを(ほぼ)包有
SubVersionに最新のサンプル
• サンプルのバグ修正や改善
• ダウンロードして差し替えを推奨
ウエルカムページ
User Interfaceフォルダ
サンプルプロジェクトを開く
Multi-Device Samples フォルダ
Object Pascal フォルダ
ControsDesktopフォルダ
- 12. 12© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
主要なコンポーネント
[Standard], [Additional], [Dialogs]カテゴリから
参照してみましょう!
UIコントロール
• Edit, Button, CheckBox, ComboEditなど
コンテナ(パネル)
• Panel, GroupBoxなど
複合的なUIコントロール
• TreeView, ListViewなど
ダイアログ
• OpenDialog, SaveDialogなど
ツールパレットのコンポーネントに
マウスカーソルを合わせると
使用できるプラットフォームが
分かります。
- 13. 13© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
コンポーネントの基本プロパティ
表示
• Align, Anchors
• Visible
• Width, Height
入力
• CanFocus
• Enabled
• Text
フォント
• TextSettings
その他
• StyleLookup
http://docwiki.embarcadero.com/RADStudio/Berlin/ja/プロパティ
- 14. 14© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
コンポーネントの使い方・覚え方
配置済コンポーネント またはツールパレットのコンポーネントを選択
選択状態でF1キーをプッシュ
該当コンポーネントのヘルプ表示を参照
メソッド:使用できるメソッドとその使い方
プロパティ:各プロパティの意味と効果
オブジェクトインスペクタの「プロパティ」で
設定できるほかに、コード内でもプロパティを指定可能
( 例: Edit1.text := テキスト‘; )
イベント:イベントと説明
オブジェクトインスペクタ内の「イベント」から
指定して該当イベントにコードを記述可能
- 15. 15© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
ユーザーインターフェイスのレイアウトを構成する要素
パーツ レイアウト
• Anchors
• Alignments
• Padding
• Margin
レイアウトに使いやすいコンポーネントの一例
• Tab Control
• MultiView
• List View vs. List Box
• LayoutFrames
• ScollBox
http://embt.co/firemonkey-layout
Day 1で解説
- 16. 16© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
学習に使えるリンク
DockWiki : http://docwiki.embarcadero.com/
• 入門
• チュートリアル
• サンプルコード
- 17. 17© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
レイアウトに便利なコンポーネント
TTabControl
• タブで複数のコンテナを管理
• TabPositionプロパティによりタブの位置、表示を規定
• TTabChangeAction によりタブを切り替えたときの
アニメーションを規定
http://embt.co/tabctrl-tutorial
TMultiView
• 複数のモードをサポートしたスーパーパネル
• PlatformDefault, Drawer, NavigationPane, Panel,
Popover, Custom
• (モバイルデバイスで)画面サイズや向きによって、
モードを自動変更可能
http://embt.co/tmultiview-tutorial
- 18. 18© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
レイアウトに便利なコンポーネント(2)
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の情報を参照してみましょう!
- 19. 19© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
特定のルールに従ってコントロールを配置するコンテナ
http://embt.co/firemonkey-layoutmgr
レイアウト応用編 - レイアウトマネージャ -
TFlowLayout
• 順に整列
TGridLayout
• 一定の大きさにそろえて整列
TGridPanelLayout
• 区切られた範囲に整列
- 20. 20© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
レイアウト応用編 - レイアウト関連のその他の機能 -
TScaledLayout
• 親項目の大きさに連動してリサイズ
http://embt.co/scaledlayout
TScrollBox
• 親項目よりも子項目のサイズが大きい場合にスクロールバーを表示
• 以下も利用可能
• TVertScrollBox, THorzScrollBox, TFramedScrollBox, TFramedVertScrollBox
http://embt.co/scrollbox
- 21. 21© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
コンポーネントの使い方・覚え方(その2)
チュートリアルを試してみよう!
コツをつかんだ後はサンプルも参照してみよう!
• 該当コンポーネントのヘルプを参照
• ヘルプやDockWikiの「入門」を参照
http://docwiki.embarcadero.com/RADStudio/Berlin/ja/RAD_Studio_入門
- 22. 22© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
ユーザーインターフェイスをより見栄えよく
アニメーション
画像効果
スタイル
• よりUIを生き生きと
• よりUIをインタラクティブに
• より使用者の注意を引き付ける
- 23. 23© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
アニメーション効果
プロパティ値を変更するしくみ
• 自動または手動で開始
• 遅延、ループ、反転などが可能
• トリガーまたはTrue/Falseで開始・終了
• IsMouseOver, IsDragOver, IsFocused, IsVisible, IsPressed,
IsChecked, IsSelected, IsExpanded
• OnProcessおよびOnFinishイベントによりアニメーションに
伴う処理を記述可能
http://embt.co/firemonkey-animation
- 24. 24© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
画像効果
40以上のGPU画像効果を利用可能
• アニメーションと組み合わせることで、徐々に効果を加えることが可能
• 自動的に効果を有効/無効に切り替えるトリガーを用意
• 画像だけでなく、コントロールにも適用可能
20以上のトランジション効果も用意
• 単純なフェードから帯渦巻きまで
http://embt.co/firemonkey-effects
- 25. 25© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
演習:アプリに効果を加えてみる
エフェクト – Shadow, Glow
• エフェクトの関連付け
• トリガー
アニメーション :
• アニメーションの関連付け
• 数値の変更
• トリガー
• イベント
エフェクトにアニメーション効果を追加
- 26. 26© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
使いやすいUIを作るコツ – 処理編 -
時間のかかる処理をメインスレッドで行わない
• メインスレッドで行うと…
• キャンセル操作ができない
• 画面が固まってしまっているように見える
• 応答がないアプリケーションとして警告が出る
• 並列プログラミングの機能を使おう!
• TTask、TFuture
• タスクを複数CPUで並列に動作させることが可能
• タスクを自動的に調整するスレッドプールの仕組みを利用可能
http://embt.co/ppl-overview
- 27. 27© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
より学習をすすめたい方は
DockWiki : http://docwiki.embarcadero.com/
• 入門
• チュートリアル
• サンプルコード
- 28. 28© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
特別講義
毛利 春幸さん
RAD Studio 勉強会 大阪
元ハードウェア担当でロジック回路設計やFPGA(VHDL)などの
プログラムの経歴を有す。
初代Delphi(Windows3.1)から使い続けて20年、200万カードを
管理するカラオケ会員システムやアプリを担当している。
- 29. 29© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
事例. オリジナルオーダーシャツ
店舗スタッフ入力用端末(iPad)
• メンズ・レディース 生地種類3000~FireDAC(SQLite)
• 商品項目はローカルDB、在庫やフェア金額などはサーバーからの取得
• ボディースタイル / ネックサイズ / 衿型 / 着丈 / 裄丈 / クレリック /
カフス / 釦 / 刺繍
• シャツイメージシミュレーション機能
• オーダー用サーバー連動:
• サーバー, AWS S3 EC2 で受信後基幹システムと同期
• 各店舗ごとの注文履歴
• 店舗管理
- 30. 30© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
Day2:「DelphiでUI設計のポイントを学ぼう」アジェンダ
セミナー対象:初心者・中級者
時間: 16:00~ 約1時間 + 10分:特別講義
Day2 学び方
• 基本的部分はデモを加えてわかりやすく
• 応用発展は自習できるように参照すべき内容を添えて
• ユーザーインターフェースの重要性
• FireMonkeyについて
• 主要なコンポーネント
• レイアウトを構成する要素
• レイアウトに便利なコンポーネント
• UIの見た目をよりよく
• 処理側から見たUI
• 特別講義:UI設計の事例
- 31. 31© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
実施内容の再視聴
実施内容のビデオは後日再視聴可能
• 申し込みメールアドレスに再視聴のリンク
実施内容サマリー
• Community embarcadero (コミュニティ エンバカデロ)にWebリンク、
サンプルコード情報等 : http://community.embarcadero.com/
エンバカデロWebサイト
• [リソース] – [イベント]のページに再視聴(オンデマンド)の情報記載予定
- 32. 32© 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初心者、中級者
必要な開発環境:Delphi Starter以上
Day 2:「DelphiでUI設計のポイントを学ぼう」
2016年9月13日(火)16:00~17:00
対象:Delphi初心者、中級者
必要な開発環境:Delphi Starter以上
Day 1:「Delphiで作るはじめてのアプリケーション」
2016年9月12日(月)16:00~17:00
対象:Delphi初心者
必要な開発環境:Delphi Starter以上
- 33. © 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential. 33
THANKS!
www.embarcadero.com/jp
Hinweis der Redaktion
- デバイスが多様化
お店でも顧客情報入力してくださいとiPadが出てきたり
レストランや居酒屋で、タブレットで注文することがあるのを経験したことがあるかと。
- そういったスマートデバイス、タブレットの使用シチュエーションの増加に伴ってユーザーさん、顧客にも変化が起きています
どこでもつかえる、デバイスは小型化。
入力方法も変わってきている。
そしてデバイスに合わせて画面設計も変わってきています。
つまりこういうことを多く経験してくるうちに、ユーザーさんや顧客の、デバイス、ソフト、操作いわゆるゆーーざーエクスペリエンスに関する意識が変わってきているんですね。
そしてさらには、キーワードとしてBYODということ場が出てきていることからも分かる通り、自分の個人もちのデバイスを仕事に持ち込んで利用する、などのケースも増えてきています