rad...

© 2017 Embarcadero Technologies, Inc. All rights reserved. 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 #embtwebi_jp

2017 年 2 月 10 日（金） 17:00 ～ 19:00エンバカデロ・テクノロジーズ

RAD STUDIO で始めるマルチデバイスクロスプラットフォーム開発ワークショップ

2© 2017 Embarcadero Technologies, Inc. All rights reserved. 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 #embtwebi_jp

はじめに

RAD Studio は、 Windows 、 Mac 、 iOS 、 Android の 4 つのプラットフォーム向けのネイティブアプリケーションを効率的に構築できるビジュアル開発ツールです。

統合開発環境の RAD Studio を用いることで、 C++ または Delphi といった開発言語を使用し、複数デバイス向けの高性能アプリケーションを、一つのソースコードと、一つの基本 UI 設計ですばやく開発することができます。

このセミナーでは、マルチデバイス／モバイル開発のポイントを抑えながら、RAD Studio を用いてどのように実際の開発作業を行うのかを、演習を通して学びます。


本日のプログラム

クロスプラットフォーム開発を実現する開発環境 : 30 分休憩 : 10 分モバイル開発体験 : 80 分

Q & A : スタッフに随時　＆　セッション終了後も

所要時間 120 分


エンバカデロとDELPHI / C++BUILDER /RAD STUDIO


エンバカデロと Delphi / C++Builder について

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

2011 年 9 月RAD Studio XE2 Windows と Mac OS X のネイティブクロス開発を実現

2015 年 4 月RAD Studio XE8 FireUI によりマルチデバイス開発のさらなる進化。IoT もサポート

2013 年 9 月RAD Studio XE5 Windows, Mac OS X, iOS, Android のネイティブクロス開発をサポート

2015 年 9 月RAD Studio 10 Seattle Windows 10 対応の新バージョン

2016 年 4 月RAD Studio 10.1 Berlin発表

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

1995 年Delphi for Windows 発売

アプリケーション開発とデータベースの開発・運用を支援するツールを提供• ビジュアル開発ツール : Delphi / C++Builder / RAD Studio を提供• マルチデバイス対応、クロスプラットフォーム開発の展開を推進 201x 年

RAD Studio 10.2


マルチデバイス・クロスプラットフォーム開発とは

クロスプラットフォーム：複数の OS 対応をはかる• 複数の OS 向けの開発を実施（同時に実施できればなおよい）

• 複数の OS 向けの UI, コンポーネント、開発環境、開発言語に対応• 対応 OS: Windows, iOS, Android, Mac OS• 開発環境 : Visual C#, Xcode, Android Studio, Eclipse, RAD Studio• 使用開発言語 : C++, C#, Swift, Objective-C, Java, Delphi(Object Pascal)

マルチデバイス：多様なデバイス対応をはかる• 多様なデバイス向けの開発を実施（同時に実施できればなおよい）

• 多様なデバイス向けの UI に対応• タブレット、デスクトップ、 2-in-1, スマートフォン、ウォッチ…


マルチデバイス・クロスプラットフォーム開発を実現する DELPHI / C++ BUILDER / RAD

STUDIO


RAD Studio の特徴

統合開発環境 RAD Studio を使うメリット

覚えやすく、習得ノウハウを生かせる 2 言語対応 : Delphi (Object Pascal) と C++

単一のソースコードでクロスプラットフォーム開発

一つのマスタ UI 設計で、マルチデバイス開発が可能

クラウド、データベース、 IoT やビーコンとの接続が容易

中間サーバーの構築とマルチデバイス接続環境の構築

ビジュアル開発による統合開発環境で効率的


効率的な統合開発環境統合開発環境 (IDE = Integrated Development Environment)

• ビジュアル開発を実現する VCL, FireMonkey フレームワーク

• コンポーネントを使ったドラッグアンドドロップを中心に開発可能

コンポーネントで開発効率アップ

コードに集中


効率的な開発を支えるコンポーネントフレームワーク

Windows 向けクロスプラットフォーム

Windows API をカプセル化し、

Windows の機能を最大限活用

単一のコードでマルチデバイス開発が可能

コンポーネントで開発効率アップ


FireMonkey フレームワークを使ってできること単一コードでクロスプラットフォーム・マルチデバイスアプリを構築

Windows アプリ : GUI アプリ、コンソール、サーバアプリ、 DLL 、サービス…

Mac OS X アプリ

iOS アプリ

Android アプリ


クロスプラットフォーム開発の実現単一言語でのロジック開発＆ビジュアル開発異なる解像度のデバイスもマルチデバイスデザイナがマスター UI で対応 OS 毎に異なる動作をフレームワークが吸収・抽象化各プラットフォーム向けのコンパイラが最適な実行ファイルにビルド

Delphi / C++ 言語

FireMonkey フレームワーク

FireUI マルチデバイスデザイナ


クロスプラットフォームの必要性とメリット

　　

モバイル・スマホを使うケースの増加　対応 OS の増加

デバイスの多様化　ディスプレイの多様化

ユーザー多様化操作方法の変化

OS 別の開発の必要性複数の開発環境コードの用意

工数削減！工数増大！


FireUI ~ マルチデバイスデザイナが統一 UI 設計をサポート ~ FireUI: マスター UI の設計と、特定のデバイス向けのカスタマイズが可能

• 異なるプラットフォームの異なる画面向けのカスタマイズを視覚的に実施

新機能「 FireUI マルチデバイスプレビュー」により、実デバイスでライブプレビューが可能に

各デバイス・各 OS 画面に適用


FireUI で多数のデバイス、画面サイズへの同時対応マスターデザインを設計・継承して各デバイスへ

• 異なるデバイスでも適切に表示できるよう配置プロパティを提供

• より詳細な設計を要する場合にデバイスごとに独自カスタマイズ

1 つのマスターデザインから

各デバイス・各種画面デザインへ適用


FireUI アプリライブプレビュー

編集中の UI をデバイスにリアルタイム表示• モバイル＆デスクトップ両対応

• リアルタイムに変更点を反映

• 同時に複数のデバイスで表示可能• ※UI 表示用アプリのソースコード添付


覚えやすく、習得ノウハウを使える 2 言語対応言語習得が容易・言語ノウハウを生かせる

• C, C++ スキルをもった開発者が即時に C++Builder を使える

• 教育向け言語 Pascal を基とした Object Pascal は見た目に美しく覚えやすい

順位プログラミング言語インデックス値昨年 (2016 Jan) 順位

1 Java 17.278% 1

2 C 9.349% 2

3 C++ 6.301% 3

4 C# 4.039% 4

5 Python 3.465% 5

6 Visual Basic .NET 2.960% 7

7 JavaScript 2.850% 8

8 Perl 2.750% 11

9 Assembly language 2.701% 9

10 PHP 2.564% 6

11 Delphi/Object Pascal 2.561% 12

12 Ruby 2.546% 10

13 Go 2.325% 54

14 Swift 1.932% 14

TIOBE Programming Community Index2017 Jan より引用。www.tiobe.comTPIBE PCI: 複数の検索エンジンの検索結果から、対象となるプログラミング言語がどれだけ話題になっているかインデックス化したもの。現在約 150の言語を計測。

http://www.tiobe.com/


オブジェクト指向言語 Delphi – Object Pascal

1995 年に Delphi として発売

教育向け言語 Pascal を母体としたオブジェクト指向言語

毎年 1 回以上のアップデートを継続

最先端のマルチデバイス開発環境

OSごとのコンパイラを搭載


よりかんたんに素早くプロジェクトを立ち上げ

既存のスキルを生かしてクロスプラットフォーム開発

• 一つの言語： Delphi もしくは C++ を使用可能

• VCL を使用した Windows ソフト開発 UI と同様の開発スタイル

多数のコンポーネントと、ビジュアル開発で高効率

• 視覚的操作で開発を容易に

• 教育向け言語 Pascal をベースとしたオブジェクト指向言語 Object Pascal• 美しく、理解しやすく、早期にスキル習得


クラウドサービス

AWS および Azure のサポート• ストレージ、テーブル、キューにアクセス可能

BaaS プロバイダ• Parse 、 Kinvey など

データアクセスのための REST / HTTP クライアントライブラリ• プラットフォームライブラリがベース（ネイティブ HTTPS サポートを含む）

NoSQL データベースコンポーネント• MongoDB をフルサポート


DBMS

FireDAC

Delphi/C++Builder

データベース接続

FireMonkey および VCL

非ビジュアルコンポーネント [Comp] ビジュアルコンポーネント / フォーム [GUIx]ローカルストレージ [DatS]

データアダプタ [DApt]デバッグ / パフォーマンスモニタ

[Moni]

ネイティブドライバ [Phys] ブリッジドライバ [Phys]Oracl

e DB2 MS SQL

InterBase

FirebirdPG SQL

MySQL

Sybase ASA

SQLite

MS Acces

sODBC dbEx

p

DBMS クライアントソフトウエア

Oracle DB2 MS

SQLInterBas

eFirebird

PG SQL

MySQL

Sybase ASA

SQLite

MS Acces

sSybase ASE

Informix …

ODBCODBCdbExpress

ドライバ

ODBCODBCODBCドライバ

FireDAC が DB へのアクセスをコンポーネントとして提供


IoT デバイスへの接続性

デスクトップおよびモバイルアプリを

IoT サポートに拡張• Bluetooth 、 Bluetooth LE 、 WiFi をサポート• すぐに使える IoT コンポーネント• 近接検知をサポートする BeaconFence• センサーデータの収集• ThingPoints による分散したデバイス情報のモニタ

リング


ThingConnect IoT コネクティビティフレームワーク

簡単に使える API コンポーネントで 50以上の IoT スマートデバイス、センサー、ウェアラブルをサポート


BeaconFence （固定ビーコンによる位置測位ソリューション）

ビーコンを用いた三辺測量による

位置測位機能を提供

ビーコンの配置を含むマップをビ

ジュアルに管理

BLE ビーコンの電波を受信する

TBeacon コンポーネントを搭載


Beacon の基本的な活用方法

アプリ

Beacon信号をトリガとして利用

電波の発信のみ

サーバーOr

クラウド

http(s)

Bluetooth

分析アプリ

Beacon ・位置ごとに提供する情報

より高度なデータ活用

Beacon は ID と近接情報を一方的に送信するのみなので…• 受信デバイス（スマホ等）で処理して初めて意味を持つ• ビーコン情報をもとにサーバーからデータを取得


RAD Studio で作成できるアプリケーション形態（１）

RDBMS

Windows クライアント

Windows デスクトップ OS X デスクトップ

OS X デスクトップ

デスクトップアプリケーション

デスクトップ DBアプリケーション

クライアントサーバーアプリケーション

Windows デスクトップ OS X デスクトップ


クライアントサーバーアプリケーション+ 中間サーバー

RAD Studio で作成できるアプリケーション形態（ 2 ）

InterBase



中間サーバー MySQL

DataSnapRAD

Server

RDBMS


モバイルクライアント


Delphi /C++Builder DataSnapDataSnap は Apache や IIS(ISAPI) などの Module として動作しスタンドアロンサーバーとしても利用可能なサーバロジック構築ツール

DataSnap スタンドアロンサーバー

//Delphifunction TServerMethods1.EchoString(Value: string): string;begin Result := Value;end;

Windows デスクトップ

C++Builder アプリケーション

Delphi


Delphi /C++Builder RAD ServerJSON REST API を構築できる BaaS(Backend as a Service)

InterBase



中間サーバー MySQL

RAD ServerREST

ユーザー管理

FireDAC連動

プッシュ通知


RDBMS


RAD Studuio で構成できるアプリケーションシステム

RDBMS

Windowsクライアント

典型的なC/Sシステム

レガシーシステム

独自のプロトコルで接続

中間サーバー

IoT デバイス


ビッグデータ

デスクトップクライアント

HTTP(S)

RESTJSON

HTTP(S)

RESTJSON

HTTP(S)

RESTJSON

クラウドサービス

RAD Server


RAD Studio の特徴









こんなに素敵！マルチデバイス開発


マルチデバイス対応の課題

総工数＝

プラットフォーム数

×単一プラットフォームでの

開発工数コストはソフトウェアを更新する度に発生

各プラットフォームごとに異なるスキル、ナレッジが必要

モバイルプラットフォームの対応• デバイスの増加：タブレット、スマートフォン• 対応 OS の増加： Windows, Mac OS X, iOS, Android• 開発環境の増加： XCODE, Android Studio, Visual Studio…• 開発言語の増加： Swift, Objective-c, Java, C#, C++… • 担当開発者の増加 : 人材の育成、雇用、人件費の増加


直感的であるがゆえの課題

デバイスハードウェア

UX の経過時間

アクション応答

仮想マシン／インタプリタ／ JIT

仮想コード時間

応答時間

直感的なタッチ操作の応答が遅いとUX が著しく損なわれたと感じてしまう


直感的であるがゆえの課題

デバイスハードウェア

UX の経過時間

アクション応答

ネイティブ

アプリ

時間

応答時間

中間処理が介在しないので、ハードウェアの性能を 100% 活かしたレスポンスを発揮


導入効果 : ラピッドプロトタイピング RAD Studio の効率的なツール環境により、ラピッドプロトタイプングを

実現

42

ペーパープロトタイピングラピッドプロトタイピング実機で確認RAD Studio を用いることで、ビジュアル操作ですばやくプロトタイプを作成

はじめにイメージを可視化RAD Studio で各デバイスにすばやく転送


RAD Studio 10 Seattle製品ファミリー

Professional Enterprise Architect

Win/Mac 向け開発 iOS/Android 向け開発 *2 リモートデータベースアクセスオプション Enterprise Mobility Services オプション DB パフォーマンスチューニングデータモデリング

*1 単体製品の Delphi / C++Builder 10 には、個人またはスタートアップ企業向けの Starter も用意*2 単体製品の Delphi / C++Builder 10 Professional の場合、別売オプション

スイート製品：RAD Studio 10 Seattle(Delphi & C++Builder

単体製品：Delphi 10 Seattle*1

単体製品：C++Builder 10 Seattle*1


モバイル開発の具体的な手順


RAD Studio 10 の開発画面

45

構造ビュー配置したコンポーネントの配置関係をツリー構造で示します。

オブジェクトインスペクタ配置したコンポーネントの配置外観や動作を変更します。

フォームデザイナ（設計画面）ここにコンポーネントをドラッグします。

ツールパレットここからコンポーネントを選びます。

プロジェクトマネージャプロジェクトで使用するファイルやターゲットを管理します。

モバイル開発の具体的な手順


コンポーネントを使う

46

① ドラッグ & ドロップ ② プロパティの設定

③ イベントハンドラの追加


ビルドおよびデプロイ

ビルド• Windows: EXE ファイルの生成

• Mac : アプリケーションパッケージの生成

• Android: apk ファイルの生成

• iOS: ipa ファイルの生成

デプロイ• Android, iOS, Mac OS X へ配備

• リモート Windows への配備も可能

• 特に Windows タブレット向けに便利47

ここをクリック


やや高度な UI の作成ボタンの外観の変更

• StyleLookup プロパティによってボタンの表示を変更（ OSごとに最適化）

高度なコンポーネントの使用• ToolBar 、 ListView 、 ImageControl など

画面の遷移• 複数のフォームを作成して切り替え

スタイルによるアプリ全体の外観の制御• StyleBook によって、コントロールの外観全体を統一した見た目に変更できる

• スキンの変更と同じ

• OSごとの外観、あるいは OS を越えて統一した外観に設定可能

48© Copyright 2015 Embarcadero Technologies, Inc. All Rights Reserved


デバイスの利用

センサーコンポーネント• Location Sensor (GPS)• Motion Sensor (Accelerometer)• Orientation Sensor (Gyroscope)

メディアライブラリ• カメラアプリ

• カメラロールへのアクセス

49


データベースアクセス

モバイルアプリにおける DB アクセス• ローカルストレージ

• InterBase または SQLite を利用可能

• コンポーネントによる容易なアクセス

• リモートアクセス• InterBase であればモバイルアプリからリモート DB に直接アクセスすることも可能

• 一般的には中間サーバーを経由してアクセス（ EMS 、 DataSnap を利用）



開発環境の準備開発環境（ RAD Studio 10 Seattle ）

• Windows 環境へインストール

iOS 向け開発を行う場合• Mac マシン (OS X Mavericks [10.9]/Yosemite[10.10]/El Capitan[10.11])

• Xcode 6.x/7.x− iOS 8.x/9.x SDK & iOS シミュレータ

• Command Line Tools ( 実機向けコード署名 )※1 Mac マシンはテスト用に共有することも可

※2 Mac マシンに仮想環境（ Windows ）を構築し RAD Studio をインストールすることも可能

実機• iPhone 4以降 / iPad 2以降 (iOS は 7.0以降 )• Android デバイス (OS バージョンは Ice Cream Sandwich以降 )

51


アプリ実行 & デバッグの仕組み


Mac OS X実行 & デバッグ用ブリッジ（ PAServer ） iOSシミュレータ

iOS 実機iOS 7以降

リモート

PAServer = リモートデバッガプロセス

IDE と iOS プロセスを仲介する役目

Android 実機Ice Cream Sandwich （ 4.0.3 、 4.0.4 ）、Jelly Bean （ 4.1.x 、 4.2.x 、 4.3.x ）、KitKat(4.4.x) 、 Lollipop(5.x) が動作する

NEON サポートの ARMv7 デバイス

Androidエミュレータ(ARM/GPU サポー

ト )

IDE

USB 接続

Windows 用実行 & デバッグ用ブリッジ（ PAServer ）

Win32 アプリ

Win64 アプリ

Win64 アプリ

Win32 アプリ

OS Xアプリ


Android 実機による開発の準備実機用の専用の USB ドライバをダウンロード

し、 Windows にインストールする

例えば、 Google Nexus7(2013) の場合：

1. Android SDK Manager から [Google USB Driver] をダ

ウンロード

2. [ デバイスマネージャ ] からソフトウェアの手動検索でド

ライバのパスを指定

デバイスマネージャで正常に認識されるとようやく開発環境か

ら利用できる

Android の実機で [USB デバッグ ] のオプションを有効にして

おくことも、お忘れなく !53© Copyright 2015 Embarcadero Technologies, Inc. All Rights

Reserved


iOS 実機へアプリの配布 Apple ID

• ツール、SDK 、リソースを入手し、実機への転送が可能

Apple Developer Program へ加入

• App Store で iPhone 、 iPad 、Macにアプリを配布するために

必要なプログラム

Apple Developer Enterprise Program• 従業員のみを対象として独自のアプリを設計および配布するために必要

なプログラム

実機へ転送するための「証明書」を取得し、 iPad などの実機を

Xcode のOrganizer 　 /Devices に認識させる

54


開発のポイント

GUI とロジックの分離• ビジネスロジックは、全てのプラットホーム間で共有

• FireUI を使い、共通の UI を設計し、各デバイス向けに最適化することが可能

モバイル向けに提供する機能の絞り込み• モバイルアプリは基本的に「単機能型」

• 限られた画面サイズ

• 利用するシーンを想定• PC 向け：デスクワークですべての機能をひとつの環境から

• モバイル向け：現場で必要な機能を即利用

55


マルチデバイスアプリケーション実行のしくみ

Mac マシン (OS X) 用実行 & デバッグ用ブリッジ

（ PAServer ）

OS Xアプリ

リモート

PAServer = リモートデバッガプロセスIDE と OS X プロセスを仲介する役目

Delphi 10.1

Berlin

PAServer( プラットフォームアシスタントサーバー )• Windows / Mac にインストールして動作• Win64, OS X, iOS, Android アプリケーションの配置• 実行、デバッグをサポート


マルチデバイスでアプリケーションを実行する


どんな機能があるかを調べるには… 記載のリンクはエンバカデロの DockWiki へのリンク

DockWiki ： http://docwiki.embarcadero.com/• 入門

• チュートリアル

• サンプルコード

• コンポーネントの使い方

http://docwiki.embarcadero.com/

http://docwiki.embarcadero.com/


質疑応答


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

[ コミュニティ ] ↓

[ 日本人ブログ ]

実施内容のサマリーと再確認

実施内容サマリー

• Community embarcadero ( コミュニティエンバカデロ ) に Web リンク、

サンプルコード情報等を記載予定

• URL - http://community.embarcadero.com/• 「エンバカデロ」で検索 → エンバカデロ Web の [ コミュニティ ] → [ 日本人ブログ ] を選択

「エンバカデロ」で検索

http://community.embarcadero.com/




モバイル

THANKS!www.embarcadero.com/jp

rad...

Engineering