Delphi Community Edition Meet up !

Copyright © 2018 SERIALGAMES Inc. All Rights Reserved. PAGE 1
Happy Creation, Play the Development!
1ソースで作る！
マルチプラットフォームアプリケーション
2018/08/03 Delphi Community Edition Meet up
エンバカデロ・テクノロジーズ Delphi MVP
株式会社シリアルゲームズ取締役
細川淳

細川淳 (Twitter: @pik)
• 株式会社シリアルゲームズ
• エンバカデロ・テクノロジーズ Delphi MVP
• 最初に触ったマイコン： MZ-80K
• 最初に触った言語： SHARP BASIC
• 最初に触った統合開発環境：Turbo Pascal 5.0
https://edn.embarcadero.com/museum/antiquesoftware
～2001 Windows 版プログラマ
V3 Windows 版メインプログラマ
C++Builder 製

Delphi とは！
Delphi Community Edition がリリースされた！というのはそこそこ大きな
ニュースになったみたいで「窓の杜」や「CodeZine」「クラウドWatch」
などに掲載されたのはご存じの通りです。
このニュースを見た方々で昔 Delphi を触っていた方は「ほお」と思った事
と思います。
しかし、そもそも Delphi の黄金時代を知らない方々は「Delphi？？」って
なったのではないでしょうか？
ということで、まずは Delphi の紹介です。

Delphi 概要

Delphi とは
• マルチプラットフォームアプリケーション開発環境
– Windows / macOS / iOS / Android / Linux (Enterprise Edition 以上)
– IDE 自体は Windows でのみ動作(VMWare 上の Windows で OK)
• ネイティブ
– Intel, ARM のコンパイラ搭載で Android さえもネイティブコードになる
• 1バイナリ
– ランタイムやVMを必要としない
• GUI 構築が異常に簡単
– コントロールの Drag & Drop 構築の走り

Delphi とは
• １ソース
– なんといってもこれ！
– プロジェクトマネージャでターゲットを切り替えるだけ！！！
ここを切り替えるだけ！

Delphi で出来ること
• 3D もお手の物です
– なお Delphi が 3D もお手の物だとしても、僕自身はお手の物
ではないので、割愛します…
Delphi で 3D といえば
でおなじみの中山さんの
GitHub リポジトリより

Drag & Drop 形式の GUI 構築

ビジュアル開発
• コンポーネントによるビジュアル開発
コンポーネント（部品）を
D&Dで配置します

• 2way-tools
オブジェクトインスペクタで
・プロパティ（部品の属性）の変更
・イベントの生成
ができます
これらは全てコードとして生成されます。

置いたコンポーネントが
自動的にクラスの変数に！
イベントがメソッドとして
自動的に宣言される！

ライブラリ / API について

Delphi のライブラリ
ライブラリについて
• Runtime Library (RTL)
– 名前空間 : System
– VCL / FMX 共通で基礎となるライブラリ
• Visual Component Library (VCL)
– 名前空間 : Vcl
– Windows 専用のライブラリ
– Win32 をラッピングしたものです
– ソースコードが公開されています。
• FireMonkey (FMX)
– 名前空間 : FMX
– マルチプラットフォーム用のライブラリ
– XE2 で追加されました。
– ソースコードが公開されています。
• 一部 Object Pascal ではない記述があります (Android Activity 部)

RTL のマルチプラットフォームサポートルーチン（一部）
– ファイル関係
• TPath, TDirectory, TFile
– 通信
• Beacon
• Bluetooth
• THttpClient
– 非同期系
• スレッド
• ダイアログ
参考：マルチデバイスアプリケーションでの RTL の使用
http://docwiki.embarcadero.com/RADStudio/Tokyo/ja/%E3%83%9E%E3%83%AB%E3%83%81%E3
%83%87%E3%83%90%E3%82%A4%E3%82%B9_%E3%82%A2%E3%83%97%E3%83%AA%E3%
82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%81%AE_RTL_%E3
%81%AE%E4%BD%BF%E7%94%A8

OS API
– Win32API, macOS (Cocoa), iOS, Android
– そのままコール可能！

• API 直接呼び出し
– API をラッピングせずに呼び出せます。
uses
Macapi.ObjectiveC,
Macapi.CocoaTypes,
Macapi.Foundation,
Macapi.AppKit,
FMX.Platform.Mac
procedure SetMinSize(const iForm: TForm; const iMinW, iMin: Integer);
var
Wnd: NSWindow; // OS X 用のクラスがそのまま使えてる
Size: NSSize; // こっちも
begin
Wnd := WindowHandleToPlatform(iForm.Handle).Wnd; // NSWindow を取り出す
Size.width := iMinW;
Size.height := iMinH;
Wnd.setContentMinSize(Size); // そのまま呼び出せる
end;
macOS のコードを呼び出す例

• API 直接呼び出し
– Jar リンケージ
• Jar ファイルを追加すると自動的に dex ファイルに組み込まれます。
• Java2OP を使えば Jar ファイルへのブリッジファイルが自動で生成されます。
uses
Androidapi.JNI.JavaTypes,
Androidapi.JNI.GraphicsContentViewText,
FMX.Helpers.Android;
procedure StartIntent;
var
Intent: JIntent;
begin
Intent := TJIntent.Create;
Intent
.setAction(TJIntent.JavaClass.ACTION_VIEW)
.setData(StrToJURI('URLとか'));
try
SharedActivity.startActivity(intent);
except
on E: Exception do
Log.e(E.Message);
end;
end;
Android のコードを呼び出す例

FireMonkey について

FireMonkey の仕組み
• 自分で描画！
– 使う API 群は各 OS のネイティブを使います
• Windows DirectX
• macOS OpenGL
• iOS OpenGL ES
• Android OpenGL ES
– 基本的にベクターグラフィクス
• Bitmap を中に埋め込むこともできます
– 自分で描画しているので何でもあり！
• 全てのコントロールがコンテナになれます！
– IDE は Windows で動いているにも関わらず他の見た目を表示で
きます！

FMX Control
FMX Control
FMX Control
FireMonkey World
Native Layer
各 OS に依存した構造上に自分で描画しています
FMX Control は「絵」！
OS から見ると実体はありません！

自分で描画しているので UI すら 3D にできます

見た目サンプル

Style を適用した見た目サンプル

マルチプラットフォーム
開発環境について

• Windows の開発
– Windows PC だけで OK ！
• macOS の開発
– macOS 実機が必要なので Mac が必要です。
– Xcode Command Line Tools も必要です。
• iOS の開発
– macOS 開発で必要なもの（Mac, Xcode）
– iOS Developer License
• Android の開発
– ハードウェアは Windows PC で OK です。
– Android SDK, Android NDK が必要です
• ただし、この２つは Delphi をインストールするとインストールされます。
– インストールしないことも可能です
• Linux の開発
– Ubuntu, Red Had および、それぞれの SDK が必要です
– Community Edition では使えません。Enterprise Edition 以上が必要です。

マルチプラットフォーム開発を試すには
• まずは Android で。
– Windows PC と Delphi, USB ケーブルだけあれば良い
– お金が掛からない
• Google Play に出すためには有料の開発者登録が必要です。
• Windows のアプリと Android のアプリを同時に作れます。
– FireUI, Style, TMultiView などの機能を使えば UI も１つのコードで作れます。
– つまり、デスクトップアプリケーションとモバイルアプリケーションを同時に作成可
能です。
USB Cable
ADB

• iOS の場合
Lightning Cable
Network
Windows PC
Mac
iPhone
PAClient
PAServer

デモ
Hello, World!
Windows, macOS, iOS, Android へのデプロイ
会場のネットワークの都合により
デモできず

単純な Hello, World! のため、ソースは割愛

デモ
Android で intent を使う

uMain.fmx
コントロールの配置

uMain.pas
// フォームのソースの implementation 以下
implementation
{$R *.fmx}
uses
uIntent; // こっちに処理の実態が書いてある
procedure TfrmMain.Button1Click(Sender: TObject);
begin
{$IFDEF ANDROID} // Android でしかコンパイルが走らないようにする
OpenIntent(ImageControl1.Bitmap);
{$ENDIF}
end;
end.

uIntent.pas
unit uIntent;
{$IFNDEF ANDROID}
{$WARNINGS OFF}
interface
implementation
end.
{$ENDIF}
interface
uses
System.SysUtils
, System.Messaging
, FMX.Graphics
;
procedure OpenIntent(const iBmp: TBitmap);
implementation

uIntent.pas
uses // Android のヘッダー uses すると Android の API が呼べるようになる
Androidapi.JNI.GraphicsContentViewText
, Androidapi.JNI.Os
, Androidapi.JNI.App
, Androidapi.JNI.Net
, Androidapi.JNI.JavaTypes
, Androidapi.Helpers
, FMX.Helpers.Android
, FMX.Surfaces
, FMX.Types
, FMX.Forms
;
// Intent の戻り値からビットマップを取得する処理
procedure GetImage(const iBmp: TBitmap; const iMsg: TMessageResultNotification);
var
Intent: JIntent; // Android のクラス！
Uri: Jnet_Uri; // Android のクラス！
Stream: JInputStream; // Android のクラス！
ResultBmp: JBitmap; // Android のクラス！
Surface: TBitmapSurface;
begin

uIntent.pas
// エラーと nil チェック
if iBmp = nil then
Exit;
iBmp.Clear(0);
if iMsg.ResultCode <> TJActivity.JavaClass.RESULT_OK then
Exit;
Intent := iMsg.Value;
if Intent = nil then
Exit;
Uri := Intent.getData; // API が普通に呼べる
if Uri = nil then
Exit;
Stream := TAndroidHelper.Activity.getContentResolver.openInputStream(Uri); // API が普通に呼べる
if Stream = nil then
Exit;
ResultBmp := TJBitmapFactory.JavaClass.decodeStream(Stream); // API が普通に呼べる
if ResultBmp = nil then
Exit;

uIntent.pas
// Java 側の Bitmap からビットマップのデータを読み取って TBitmap に割り付ける
Surface := TBitmapSurface.Create;
try
if JBitmapToSurface(ResultBmp, Surface) then
iBmp.Assign(Surface);
finally
Surface.DisposeOf;
end;
end;

uIntent.pas
procedure OpenIntent(const iBmp: TBitmap); // 画像を選択する暗黙的 intent を飛ばす
var
MessageId: Integer;
Intent: JIntent;
begin
Intent := TJIntent.JavaClass.init;
Intent
.setAction(TJIntent.JavaClass.ACTION_GET_CONTENT)
.setType(TAndroidHelper.StringToJString('image/*'));
TAndroidHelper.Activity.startActivityForResult(Intent, 0);
MessageId :=
TMessageManager.DefaultManager.SubscribeToMessage( // TMessageResultNotification メッセージの要求
TMessageResultNotification,
procedure(const Sender: TObject; const M: TMessage) // メッセージの受け取りには匿名メソッドが指定できる
begin
GetImage(iBmp, TMessageResultNotification(M));
TMessageManager.DefaultManager.Unsubscribe( // TMessageResultNotification メッセージの解除
TMessageResultNotification,
MessageId);
end
);
end;

実行イメージ
chooser
暗黙的 intent
TMessageResultNotification の
戻り値に intent が入っている
その intent の data に Uri が
入っている
(普通の Android の戻り値取得と同じ)
Android が適切な画像選択アプリを開く

１ソース開発

1ソースを支える技術(一部)
– Style
– Layout
– Anchor
– TMultiView
– FireUI
– FireUI Preview
– マルチデバイスプレビュー
１ソースを支えるフレームワーク
– FireMonkey
– RTL

デモ
Align
Anchor
Layout
TMultiView

TMultiView と Layout / Align / Anchor
コントロールの配置

TMultiView と Layout / Align / Anchor
TMultiView
TLayout: align = Bottom
TLayout: align = Center
TBottom: align =Left TBottom: align = Right
TImageControl: align = client

TMultiView によるデスクトップとモバイルのワンソース化
Windows Android
TMultiView は端末の大きさによって自動的にスライドメニューになる

デモ
FireUI
Style

FireUI
FireUI とは
各プラットフォームや
解像度の異なる端末で
プロパティを変更できる
機能
様々な OS ・端末が
選択できる
例えば画面左上に「戻
る」ボタンを配置して
Android 端末では表示
しない（Visible =
false）といった事がで
きる

FireUI では設計時に見た目も変わる
macOS
iPhone 5.5 インチ

Style
Style とは見た目を変える機能
FireMonkey がコントロールを自分で描いている事で可能になった機能です
Default のスタイルは下記にインストールされています
C:¥Users¥Public¥Documents¥Embarcadero¥Studio¥19.0¥Styles
Delphi に最初から入っている Blend スタイル DelphiStyle.com で購入できる Ubuntu スタイル
DelphiStyle.com で購入できる Calypso スタイル※IDE のダークテーマ・ライトテーマは DelphiStyles.com が製作しました

デモ
マルチデバイスプレビュー
FireUI Live Preview
アプリケーションテザリング
会場のネットワークの都合により
デモできず

マルチデバイスプレビューとは各プラットフォームでの見た目を一括して表示できる機能

• FireUI LivePreview (AppPreview)
– デザイン画面を実機でみる機能
– http://docwiki.embarcadero.com/RADStudio/Tokyo/ja/FireUI_%E3%83%A9%E3%8
2%A4%E3%83%96_%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%
83%BC
– 同じ WiFi ネットワーク内で相互に相手を見れる必要あり
– IDE のオプションで「FireUI ライブプレビューをブロードキャストする」にチェックが必要
任意の名前
パスワードは無しでＯＫ

マルチデバイスプレビューではフォントやアイコンといった端末に固有の見
た目等は再現できません
FireUI Live Preview では実機で表示されるのでフォントなども実際に使用
される物で表示されます
IDEでは
「リアルタイムにプレビューできるぞ！！」
と表示されているが
フォントの違う実機では
「リアルタイムにプレビューでき」
までしか表示されていない
このことから Label.Width をもう少し広げないといけない事が
デザイン時に判る

FireUI LivePreview の入手方法
Windows / macOS 用はデフォルトでは下記のフォルダ
C:¥Program Files (x86)¥Embarcadero¥Studio¥19.0¥LivePreview
iOS 用
https://itunes.apple.com/us/app/fireui-app-preview-10.1-berlin/id1090861997
Android 用
https://play.google.com/store/apps/details?id=com.embarcadero.LivePreview101
FireUI LivePreview のソース
C:¥Program Files (x86)¥Embarcadero¥Studio¥19.0¥source¥Tools¥FireUIAppPreview
AppTethering やマルチプラットフォームアプリケーションのサンプルとしても優秀

Rapid Application Development

開発を加速させる技術
– Animation / Effect
– GetIt ライブラリマネージャ
– Visual Live Bindings
– データエクスプローラ
– REST コンポーネント / REST デバッガ
Delphi はコンポーネントが「異常」に充実しています（２００以上存在）。
これによってほとんどコードを書かずに様々な機能を実現可能です。
たとえば、カメラアプリであれば、コードはたったの１行です。
(TTakePhotoFromCameraAction を使用)

procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
Image1.Bitmap.Assign(Image); // たったこれだけ！
end;
画像は英語版から拝借

デモ
Animation / Effect

Animation / Effect は親コントロールに効く
ノーコーディングで GlowEffect（画像周囲の黄
色部分）を掛け、0.2 秒間で0～360度回転する
FloatAnimation が設定されている

デモ
GetIt ライブラリマネージャ

GetIt はライブラリマネージャ
他の開発環境で言う NuGet や
CocoaPods のような物です
様々なコンポーネントやライブラリ、
サンプルを取得できます
自作のコンポーネントやライブラリも
申請すれば登録されます
「ScriptGate」で検索すると筆者が
作ったコンポーネントがダウンロード
され使用できます

デモ
データエクスプローラ
RESTコンポーネント
RESTデバッカ
Visual Live Bindings
会場ではここで米澤さんによる
ライブデモがありました

注意

注意
Delphi を使うと簡単にマルチプラットフォームアプリケーションが作れますが、各
OSの作法に則るのが基本です。
例えば、iOS / Android ではメインスレッドを止めてはなりません。
また、ファイル操作も限られています。
特に Android では、アプリケーションは機能に特化した形にして、他のこと（例え
ば「画像を開く」とか「メールを出す」など）は、それに特化したアプリに処理を
委譲します（暗黙的 intent を使う）
これには TTakePhotoFromLibraryAction などを使う事でワンソースにできます
出来ればスタイルも各OSに即したスタイルにすると良いでしょう。
作法を知るため一度は Android Studio / Xcode でアプリケーションを作ってみる
ことをオススメします。

Delphi Community Edition Meet up !

More Related Content

What's hot (20)

Similar to Delphi Community Edition Meet up ! (20)

More from Jun Hosokawa (10)

Delphi Community Edition Meet up !