今どきのUXを実現するためのRAD Studio新機能活用テクニック
第32回 エンバカデロ・デベロッパーキャンプ

エンバカデロ テクノロジーズ
セールスコンサルタント 相蘇 和貴

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

はじめに ディスプレイの⾼解像度化、タッチスクリーン、タブレットやスマートフォンなど利⽤形態の多様化などに対し、従来のデスクトップアプリケーションのUXもモダナイズ（現代化）することが求められています。
 Delphi / C++Builderは、古いアプリケーションでもそのまま動いてしまうことが特⻑のひとつではありますが、これらのアプリケーションに対してもちょっとしたスパイスを振り掛けることで、モダンなUXを実現できます。
 このセッションでは、従来からのVCLアプリケーションとマルチデバイス向けのFireMonkeyの双方で、最近のバージョンで追加された新機能を活⽤して、UXをモダナイズするテクニックを紹介します。

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

2

エンバカデロ・テクノロジーズについて
アプリケーション開発とデータベースの開発、運⽤を支援するツールを提供。
ビジュアル開発ツール「RAD Studio（Delphi / C++Builder）」を進化させ、XEシリーズでマルチプラットフォーム向けの展開を推進

2016年4月
RAD Studio 10.1 Berlin
発表

IoT, Beacon強化

強⼒なエンタープライズ対応
クロスプラットフォーム強化

2015年9月
RAD Studio 10 Seattle
2015年4月
RAD Studio XE8
2013年9月
RAD Studio XE5
2008年6月

エンバカデロがボーランドの開発ツール部門と合併

2011年9月
RAD Studio XE2

Windows、Mac OS X、iOS、Androidのネイティブクロス開発をサポート

Windows 10対応の新バージョン

FireUIによりマルチデバイス開発のさらなる進化。
IoTもサポート

WindowsとMac OS Xのネイティブクロス開発を実現

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

3

アジェンダ 今どきのデバイス、ユーザー状況
 望まれる対応・課題
 RAD Studioを使った解決＆デモ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

4

今どきのUI, UX状況
www.embarcadero.com/jp
第32回 エンバカデロ・デベロッパーキャンプ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

5

今どきのデバイス
 デバイスとOSの多様化• パーソナルユースだけでなくビジネスユースにもモバイルデバイス使⽤するケースが増加• スマホ・タブレットの増加により利⽤されるOSの種類や、デバイス形状の多様化

OS多様化

デバイス形状⼊⼒方法の変化

••
•
•

•
•
•
•

•
•
•
•

Mac OS X
iOSAndroidWindows

インチ数
アスペクト比4KデバイスHigh DPI

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

タッチ操作
ジェスチャー
ディスプレイキーボード

6

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

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

7

今までのUI,UX
 デスクトップ型にあわせたUI設計• マウスやキーボードを前提とした設計で現在の利⽤シーンにそぐわないケースの増加• 操作説明書を必要のあるつするUX設計• OS更新とは管理者が⾏うもの…でのハズ

 ユーザー、顧客はノンストップ••••

Windows10への更新
継続的なアップデート
モバイル&タブレットデバイスへ
新デバイス⼊⼒方式、操作、UI設計

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

■デスクトップ重視■望まれる対応・課題• 小さなパーツ• マウスとキーボード• 操作が複雑• 単一OSのみ対応• ユーザーフレンドリー
ではない• 多OS対応• 多デバイス対応• UXの向上• Windows10 追従

8

UI,UXをモダナイズ︕複数OS同時対応︕
まだまだいけるVCL• 優しいUI• High DPI対応• タッチ対応• 複数の解像度対応

FireMonkeyを使⽤して• クロスプラットフォーム開発︕• 単一コードで複数OS対応• 複数の解像度、デバイスに対するUI設計
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

9

RAD STUDIO を使用したモダナイズ例
www.embarcadero.com/jp
第32回 エンバカデロ・デベロッパーキャンプ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

10

デモ – VCLでモダンなUIStyle適⽤でtouchライクな操作とモダンなUIHigh DPI対応もチェックボックス一つWindows10 VCLで、よりモダンに

解像度、アスペクト比の変化にも

Helpも加えましょう••••••••••••

Berlinで追加できるダウンロードStyle
http://cc.embarcadero.com/item/30492

オプションをONするだけで、High DPIでも⾒やすいUIに
Toggle Switch
Activity Indicator
Spilt View
Notification
Search Box

AlignAnchors
Panel , Relative PanelPopup Help

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

11

Windows

SilverCoral

CopperDark

Iceberg Classico

Emerald Light
Slate

Metropolis UI
GreenCopperTablet Light

DiamondAnakrits

Metropolis UI
BLue

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

12

High DPI対応

非対応

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

13

デモ - Fire Monkey で複数のOS、異なるデバイスに対応
 Styleでユーザーフレンドリー、タッチフレンドリーなUI
 Alignで画⾯上の場所決め
 Anchorsで固定個所の設定
 Marginで余白設定
 マルチデバイスプレビューで異なるデバイスでの⾒え方を確認

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

14

デモ- 優しいUI

 タッチ操作に易しいUI
 TSwitch TAniIndicator TDateEdit
 ListView
 Fire UIAPP Previewで実機確認

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

15

まとめ
www.embarcadero.com/jp
第32回 エンバカデロ・デベロッパーキャンプ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

16

RAD Studio 10.1 Berlin︕
モダナイズで使いやすくユーザーエクスペリエ
ンスUP!

デバイス多様化に対応

OS、ハード対応UP!

ユーザー多様化に対応

ユーザーカバー率UP!

RAD Studio なら多数のコンポーネン
ト・OS同時サポート

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

17

THANKS!
www.embarcadero.com/jp
第32回 エンバカデロ・デベロッパーキャンプ

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

18