Sencha & Delphi Ready Studiy

Copyright © 2016 SERIALGAMES inc.. All Rights Reserved.
Delphi - Ready Study
Sencha & Delphi Ready Study
2017/09/26
Delphi MVP 細川淳

Delphi の歴史（日本）
リリース日時製品名 Win16 Win32 Win64 .NET macOS iOS32 iOS64 Android Linux 無償版
1995/09 Delphi ○
1996/06 Delphi 2 ○
2001/07 Delphi 6 ○ Delphi 6 Personal
2003/11 Delphi 8 ○
2004/11 Delphi 2005 ○ ○
2005/11 Delphi 2006 (※1) Turbo Delphi Explorer
2007/11 Delphi 2007 ○ ○
2011/09 Delphi XE2 ○ ○ ○ ※2
2013/04 Delphi XE4 ○ ○ ○ ○
2013/09 Delphi XE5 ○ ○ ○ ○ ○
2015/04 Delphi XE8 ○ ○ ○ ○ ○ ○
2016/04 Delphi 10.1 Berlin ○ ○ ○ ○ ○ ○ Starter Edition
2017/03 Delphi 10.2 Tokyo ○ ○ ○ ○ ○ ○ ○ Starter Edition
※1 製品名は Borland Develper Studio 2006
※2 Free Pascal による実装で XE4 以降の方式とは異なる
iOS にはエミュレーターを含む
コンパイラバージョンは TurboDelphi 1 から通し番号（Tokyo : VER320）

• Delphi 10.2 Tokyo が対応している OS とコンパイラ
OS Architecture Compiler
Windows x86 32bit DCC32
Windows x64 64bit DCC64
macOS x86 32bit DCCOSX
Linux x64 64bit DCCLINUX64
iOS ARM(Apple A6以前) 32bit DCCIOSARM32
iOS ARM(Apple A7以降) 64bit DCCIOSARM64
iOS シミュレータ x86 32bit DCCIOS32
Android ARM 32bit DCCAARM

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

Delphi で出来ること

• Windows, macOS, iOS, Android のネイティブアプリケーション作成
– CPU が直接実行できるバイナリを吐き出します。
• Android でも Java コードではなく ARM のネイティブコードが出力されます
– Linux はコンソールアプリケーションが作成できます。
• FMXLinux というサードパーティーの製品を使うと GUI アプリケーションも作成出来ま
すが…
• FmxLinux Page: http://fmxlinux.com/
• Drag & Drop 形式の GUI 構築
– Delphi 1.0 から続く Delphi を Delphi たらしめる要素
– 現在では VCL, FMX という２つのライブラリがある
• Object Pascal 言語を使った開発
– Pascal が教育用に設計されただけあって綺麗な言語
• 現代的な言語要素もちゃんとあります。
• TIOBE では 9～12 位あたりをうろうろしてます。
– でも C++ を使った開発も出来ないことはない（C++Builder）

• 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 のコードを呼び出す例

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

Drag & Drop 形式の GUI 構築

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

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

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

Drag & Drop 形式の GUI 構築
- 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 も必要です。
• iOS の開発
– macOS 開発で必要なもの（Mac, Xcode）
– iOS Developer License
• Android の開発
– ハードウェアは Windows PC で OK です。
– Android SDK, Android NDK が必要です
• ただし、この２つは Delphi をインストールするとインストールされます。
– インストールしないことも可能です
• Linux の開発
– Ubuntu, Red Had および、それぞれの SDK が必要です

マルチプラットフォーム開発を試すには
• まずは 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

Delphi ６つのメリット

Delphi のメリット
• Delphi の特徴
– プラットフォーム・フリー
– 解像度フリー
– アスペクト比フリー
– コーディング・フリー
– 言語フリー
– 自然言語フリー（日本語などの方）

プラットフォームフリー

プラットフォームフリー
• プラットフォーム・フリー
– マルチプラットフォームでの開発の場合、Android / iOS で同じ UI になることも
多いです
• 異なる UI にするための仕組みが必要になります
戻る戻る
－－－－
－－－－
－－－－
－－－－
－－－－
－－－－
OSが違うのに
同じ見た目！

• Delphi の場合
– 各プラットフォームに即した見た目になります
• 異なる UI にするための仕組みが標準で備わっています
※ここでは、Android / iOS
ともに Black と呼ばれる
スタイルを使用

Android にはソフトウェアの戻るボタ
ンは必要ないので消すこともできます。
（ここでは説明のために表示）

• FireUI によって多種多様な OS に対応
– Android の Fragment と同じ機構 (TMultiView) があるので
タブレットとフォンでさえ分ける必要ありません！
標準で Google Glass にも対応！
Add-on で Google Wear（Google Watch）
にも対応！
UI もドロップダウン１つで
非常に簡単に切り替えられる

– Android では Android SDK ではなく、Android NDK と呼ばれる技術で構築され
ます。
– そのため、Nexus では動くのに、Galaxy で動かない！といった OS 間の差異か
ら解放されます。
アプリ完成！ Galaxy で動かない！

解像度フリー

• 解像度フリー
– 標準の開発環境でも、その他の環境でも、多種多様な解像度の端末に合わせるの
が非常に苦労します。
iPhone の解像度
また増えたの！？

– 仮想解像度（320 x 480）で UI が作られる
• 自動的に実機に合わせてスケールアップされる
– UI はベクターで描かれる
• スケールアップしても UI がぼやけたりしない
– 多重解像度ビットマップ
• png などのラスタ形式では、複数の解像度の画像を保持できる
• 自動的に最適な解像度の画像が選ばれる

Android 4 inch
Android 5 inch
Android 7 inch
Android 10 inch

アスペクト比フリー

• アスペクト比フリー
– さまざまな開発環境でターゲットデバイスの
アスペクト比が違う場合、UI の設計を考え直す必要があります。

• Align
• Anchors
– という仕組みで UI の位置を相対的に指定可能です
– 相対指定なので比率が変わってもレイアウトが
崩れません！

• Align プロパティ
– 左寄せ、右寄せ、センタリング、といった配置を指定できます
• 指定可能な配置は全部で２０個あります。
• 間を埋める（Client）といった指定もできます。
Button Align = Left Button Align = Right Button Align = Center

• Anchor プロパティ
– Anchor（いかり）を下ろして位置を固定するイメージ
– いかりの位置に引っ張られます

Anchor を左上に設定大きくなっても左上を維持
Anchor を右下に設定大きくなっても右下を維持

Anchor を左上・右下に設定大きくなっても左上・右下を維持！

コーディング・フリー

• コーディング・フリー
– Delphi はコンポーネントが「異常」に充実しています（２００以上存在）。
これによってほとんどコードを書かずに様々な機能を実現可能です。
たとえば、カメラアプリであれば、コードはたったの１行です。
(TTakePhotoFromCameraAction を使用)

procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
Image1.Bitmap.Assign(Image);
end;

• Visual LiveBindings
– Delphi では Visual LiveBindings によってコーディング無しでプロパティ値を変
更できます。
PropertyBindSource から ListView の
Text プロパティを自動的に変更している様子

• エフェクト
– Delphi ではエフェクトをコンポーネント１つ付けるだけで実現できます（６０種
類以上）。
ボタンに TGlowEffect を
掛けた様子

• アニメーション
– アニメーションも非常に簡単に設定できます。

Animation コンポーネントには
様々なプロパティが存在します。
たとえば、Trigger プロパティは、
いつアニメーションをスタートするかを
決定できます。

言語フリー

• 言語フリー
– 標準開発環境以外の環境では SDK にアクセスするためには、プラグインや
DLL といった仕組みが必要です。
• SDK とは、OS が提供している機能
OSに直接アクセス
できる
標準の開発環境
ハード
OS
アプリ
途中に VM / FirmWare があって
OSに直接アクセスできない！
そもそも言語が違うからアクセス
できない！
標準ではない開発環境
ハード
OS
VM etc
アプリ

– OS の機能にも、ハードウェアにもアクセスできます
– 言語は Object Pascal のまま Java / Objective-C の機能を呼び出せます
（OCImport / JNIImport）
ハード
ARM ベース
Android iOS
アプリ
ハードウェアに直接アクセスできるため
GPS や加速度センサなどセンサー類や
Bluetooth などを簡単に使用可能です。
（簡単に利用できるようにするために
ラッパークラスが用意されています

自然言語フリー

アプリ
• 自然言語フリー
– Android / iOS に備わっている多言語対応機能によって標準環境で作られた場
合、自動的に最適な言語が選ばれます。
– 標準ではない環境の場合、この機能に対応していない事も多いです。
ここを押してね
Application
Push hare

– 言語マネージャによって翻訳済みテキストが自動的に選択されます。
左図を拡大

Sencha & Delphi Ready Studiy

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Sencha & Delphi Ready Studiy

Similar a Sencha & Delphi Ready Studiy (20)

Más de Jun Hosokawa

Más de Jun Hosokawa (11)

Sencha & Delphi Ready Studiy