FireMonkey - Embarcadero Community

17Th
Developer Camp
【A1】HTML5チュートリアルセッション
「HTML5によるモバイル／タブ
レットアプリケーション開発」
エンバカデロ・テクノロジーズ
エヴァンジェリスト高橋智宏
1
モバイル開発の需要
• モバイル/タブレット開発の需
要が増えている
• 例えば…
出典：(株) ＭＭ総研 [ 東京・港 ]
– 既存のWebシステムをタブ
レット端末向けにしたい
– 新規でモバイル/タブレット用
の業務アプリ開発の依頼が
増えている
– さまざまなデバイスに対応し
なければいけない
など
モバイル開発にも対応可能なHTML5に期待が集まっている。
2
HTML5なら…
従来のモバイル開発
HTML5を採用した場合
• PC向けのWebアプリを
そのまま利用
操作性に難
• ネイティブ開発の場合
デバイスごとに別の開
発環境で開発
工数の増大
再利用が困難
• CSS3/JavaScriptが使える
• デスクトップに匹敵する
アプリが作れる
• モバイル向けに最適化
• UIを統一できる
• ネイティブ化にも対応
3
HTML5入門
•
•
•
•
HTML5 = HTML5 + CSS3 + JavaScript
<!DOCTYPE html>
<meta charset="UTF-8">
フィールドの型&検証
–
–
–
–
<input type="text" required>
<input type="text" pattern="...">
<input type="email">
<input type="date">
• Canvas(2D), Audio, Video, WebGL(3D), AppCache
• ブラウザのサポートレベルを判定してくれるWebサイト
– http://html5test.com/index.html
4
HTML5によるモバイル開発
• たいてい必要なもの
– エディタ
– Google Chrome
• WebKitベース
– http://www.webkit.org/
– シミュレータ/エミュレータ
– 各種実機
– 各種ライブラリ・フレームワーク
• jQuery/jQuery Mobile
• ThemeRoller for jQuery Mobile
• PhoneGap(オプショナル)
– Webサーバー
• PHPエンジン(オプショナル)
5
ひとつの解決策： HTML5 Builder
• オールインワン
–
–
–
–
–
HTML5、CSS3、JavaScriptの開発をサポート
サーバーサイドのPHP開発も可能
Webサーバー、Webブラウザを統合
モバイル向け開発フレームワークも統合済
エディタ、デバッガ、プロファイラも統合
• ビジュアル
– モバイル向けのビジュアルデザイナでドラッグ
＆ドロップ開発
– コンポーネントによりカプセル化
HTML5 Builder
• プロパティ & イベントハンドラ
6
17Th
Developer Camp
HTML5 Builder
7
HTML+CSS+JavaScript+エディタ+プレビュー etc.
•
[新規作成] | [HTML5 Builderプロジェクト] | [クライアントモバイルアプリケーション]
8
実際に作ってみよう(その1)
9
実際に作ってみよう(その2)
10
ビジネスアプリケーションへの適用例
• http://jquerymobile.com/resources/
11
ビジネスアプリケーションへの適用例
• http://www.jqmgallery.com/
12
17Th
Developer Camp
Q&A
13
17Th
Developer Camp
【A2】Delphi / C++Builder テクニカルセッション
“FireMonkey が得意とする
ビジネスアプリ” の考察
ビジネスアプリ
有限会社エイブル
富永英明
1
17Th
Developer Camp
1
はじめに
はじめ
2
今回は？
•
前回 (21th 【T4】) は右も左もわからない状態からの
FireMonkey ファーストインプレッションでした。
ファストインプレッションでした
•
それなりに FireMonkey アプリケーションの作り方が解ってきたので、
"向き / 不向き" もなんとなく判ってきました。
•
...でも、まだまだ
でも、まだまだ FireMonkey 初心者です。
•
技術論というより、方向性の話です。
•
漠然と「～に向いてますよ」と言うのでは説得力がないので、
FM(2) の機能を検証しながら向き / 不向きを考えてみたいと思います。
•
3D 成分は少なめですのでご安心を。
3
ビジネスアプリと FireMonkey
•
ここで言うビジネスアプリとは業務に特化したアプリケーション。
•
装飾とかはできればやるけど、予算的にも納期的にも
あまり凝った事はできない
あ
り凝
事
((アイコン作るのでさえ面倒なのに)。
倒
)。
•
3D と...誰がモデルデータを作るの？
•
FireMonkey にはアニメーションがあるけれど、
3D 使うのでなければ積極的に使おうという気にはならないかも？
•
LiveBinding は「スゴい！」と思う反面、
挙動が一見しただけではわからないのでついついコードで書いちゃう。
※意見には個人差があります。
4
ビジネスアプリを FireMonkey で作るための条件
•
VCL アプリの時と同等とまでは言わないが、開発速度が落ちない事。
•
見栄えを気にする顧客も居るけれど、
あり
あまりにも負担が大きすぎるのはちょっと...。
負
す
。
•
「Mac OS X でも動くように」と言われた場合には選択の余地がない。
•
...がマルチプラットフォームなのであれば、Web アプリ以上の操作性や
独自性がなければ、ネイティブアプリケーションであるという存在意義が
独自性がなければ、ネイティブアプリケションであるという存在意義が
薄れてしまう。
•
要は VCL アプリでは実現できない事や、
プ
FireMonkey アプリだと比較的楽に実現できる事があるのなら、
FireMonkey
y を使ってビジネスアプリを作ってみたい！
※意見には個人差があります。
5
17Th
Developer Camp
2
FireMonkey
y のおさら
のおさらい
6
FireMonkey って？
•
XE2 以降で追加された、VCL とはまた別のフレームワーク。
•
マルチプラットフォーム (Windows / Mac OS X) である。
(XE2 では iOS アプリケーションも作成可能)
•
PA Server を使って実機によるリモートデバッグが可能。
•
HD (2D) アプリケーションと 3D アプリケーションが作れる。
•
レイヤーを入れ子にできるので、HD / 3D のどちらか片方しか
作れないという訳ではない。
•
基本的に VCL とは併用できない。RTL は FireMonkey からも利用可能。
•
XE3 の FireMonkey
Fi M k は FM2 と呼ばれている。
と呼ばれている
7
FireMonkey アプリケーションの動作環境
•
Windows は XP
以降で動作する。
•
DirectX 9.0 相当を
必要とする。
必要とする
•
Direct2D は
Vista 以降
•
OS X は 10.6
10 6
以降で動作する。
•
Intel Mac なら、
なら
少なくとも 10.6 は
必ず動作する。
8
前回のあらすじ
•
VCL アプリケーションと違って何でも親子関係になるよ。
(やっても意味のない親子関係があるにはあるよ)
•
常に [構
[構造ビュー]] を
を出しておかないとワケワカメになるよ。
。
•
カスタムスタイルでコントロールの外観等を変更できるよ。
•
コントロールそのものを回転したり拡大 / 縮小できるよ。
9
FM2 で追加されたものと削除されたもの (1)
•
[3D Layers]
TSolidLayer3D /
TSplitter3D
•
[3D Shapes]
TSelectionPoint3D (削除)
•
[Additional]
TMediaPlayer /
TMediaPlayerControl
•
[dbE
]
[dbExpress]
TSQLMonitor
•
[Effects]
TSwipeTransitionEffect
10
FM2 で追加されたものと削除されたもの (2)
•
[Gestures]
TGesutureManager
•
[[Layouts]
y
]
TFlowLayout /
•
[LiveBinding]
TBindSourceDB /
TFlowLayoutBreak /
TBindSourceDBX /
THorzScrollBox
TPrototypeBindSource
※ TBindSourceDB は XE2 だと TBindScopeDB です。
•
•
[LiveBinding Misc]
TDataGeneratorAdapter /
[Materials]
TColorMaterialSource /
TLightMaterialSource
TAdapterBindScope
TTextureMaterialSource /
11
FM2 で追加されたものと削除されたもの (3)
•
[Metropolis UI]
TLiveTile
•
[Sensors]
TLocationSensor /
TMotionSensor
•
[Standard]
TPopup (XE2：コンポーネントとしては存在しない)
•
FMX Pl tf
Pl tf
FMX.Platform.Platform
変数 (削除)
•
TabOrder プロパティ (削除)
(
)
•
スクリーンキーボード呼び出し
•
Anchors プロパティ
12
17Th
Developer Camp
3
FireMonkey が得意とする
ものと苦手とするもの
13
○ 外観 (カスタムスタイル)
•
FireMonkey はスタイルを変更する事でコントロールの外観を変更可能。
？
「...VCL にも "VCL スタイル" あるじゃん?」
14
○ アニメーション
•
FireMonkey はアニメーションを使ってコントロールに動きを付けられる。
？
「何で動きを付ける必要があるの？」
15
○ センサー＆ロケーション (FM2)
•
FireMonkey では簡単に
センサー＆
ロケーションを扱える。
？
「...VCL からも使えるって言ってなかった?」
16
△ キーボード入力の多いフォーム
•
FireMonkey は入力コントロールの多いフォームがちょっと苦手。
...
「バリバリキーボード入力するのなら VCL のほうがいいかも」
17
× BDE とか ActiveX
•
FireMonkey では BDE や ActiveX は使えない。
...
dbGo ((ADO)) は
Windows プラットフォーム
専用だが利用可能。
「マルチプラットフォームだしね...」
18
○ DBX4 とか IBX とか DataSnap とか
•
•
DBX4 / IBX / DataSnap はマルチプラットフォーム＆64bit で利用可能。
DB 操作方法は VCL と全く同じなので、ビジネスロジックでは苦労しない。
と全く同じなのでビジネスロジクでは苦労しない
！
「詳しくは DH山本さんの【A5】セッションで！ (丸投)」
19
○ 3D
•
S
FireMonkey は 3D アプリケーションも作れる。
！
「全部自前でやれって言われたら涙目」
20
○ マルチプラットフォーム
•
S
FireMonkey は OS X アプリケーション開発に対応している。
(画像はハメコミ合成ではありません)
！
「ウリの
「ウリの一つだしね」
だしね
※ {$RTTI EXPLICIT } 指令は使わないほうが無難。
21
○ 高解像度アプリケーション対応
•
•
FireMonkey はスケール変更 / 回転が実用的。
スケリング対応にするにはフ
スケーリング対応にするには、フォームに
ムに TScaledLayout
TS l dL
t を貼り、
を貼り
その上にコントロールを置くだけでいい (Alignment は alFit 系で)。
「Windows 8 でフォームが崩れて困ったな、そういや」
S
！
22
17Th
Developer Camp
4
FireMonkey に向いている
ビジネスアプリは？
23
ここまでの前提条件を踏まえて。
...では何が FireMonkey に
向いているのか？
24
FireMonkey に向いているビジネスアプリ (1)
•
•
Mac OS X 上で動作するアプリケーション
Wi d
Windows
版と Mac
M 版で "ほぼ同等の操作性のアプリ" が必要な場合。
が必要な場合
•
理由
 選択の余地がない
 Windows と Mac で別の開発ツールを使うのは効率が悪い。
25
FireMonkey に向いているビジネスアプリ (2)
•
•
スレート PC (タブレット PC) で動作するアプリケーション
タチパネルで操作するアプリケシン
タッチパネルで操作するアプリケーション
•
理由
 センサーが使える
 FireMonkey では、回転 / 拡大縮小の処理が簡単
 キーボード入力が殆どない
26
FireMonkey に向いているビジネスアプリ (3)
•
•
S
視覚的に訴えるアプリケーション (3D 含む)
動きのあるアプリケシン
動きのあるアプリケーション
右の画像は 2 つの物体の
の物体の
サイズを比較するだけの
アプリケーションです。
機能はシンプルですが、
単に数値が並んでいるより、
サイズを具体的にイメージできます
サイズを具体的にイメージできます。
•
理由
 VCL で同等のことを行うのは不可能ではないが大変
 DirectX や OpenGL の知識がなくともそれなりの事ができる。
27
FireMonkey に向いているビジネスアプリ (4-1)
•
...実は普通のビジネスアプリケーション。
4：3
4
3
(1024x768)
5：4
(1280 1024)
(1280x1024)
実 DPI が同一で
が同
インチサイズが異なる場合
•
理由
 Windows 8 では画面の DPI が調整される = 96DPI ではない
 今後、高解像度対応のアプリケーションが必要になってくる。
28
FireMonkey に向いているビジネスアプリ (4-2)
•
リサイズ可能でフォームサイズと情報量が比例するのならばいいのだが？
インチサイズが同一で
イ
イズが
実 DPI が異なる場合
•
理由
 スケール固定でないと画面のレイアウトが崩れる (VCL アプリ)。
 スケール固定だと相対的にフォームサイズが小さくなってしまう。
29
17Th
Developer Camp
5
役に立つかもしれない＆
ヒントになるかもしれない
Tips
30
タブ順序をどうにかしたい
•
FM2には TabOrder が存在しない。タブ順序はコントロール作成順となる。
•
並べ替えたい順にフォームデザイナでコントロールを選択し、
Ctrl+X で切り取って Ctrl+V で貼り付けるとタブオーダーが変わる。
(VCL フォームアプリケーションでも同じ)
•
複数選択時に FMX のフォ
のフォームデザイナが言う事を聞かない場合には、
ムデザイナが言う事を聞かない場合には、
一つづつ並べ替えたい順にコントロールを切り取り、テキストエディタに
順に貼り付ける。そして全選択してフォームデザイナに貼り付ける。
•
一旦、[構造] ビューでコントロールを複数選択するとうまくいくかも。
それでもダメならメインメニューの [編集] からコピーとか。
•
並び替えるのをやめて (あきらめて)、フォーカスを持つコントロールを
リスト (或いは動的配列) に突っ込んで管理する。
に突っ込んで管理する
※現在、スマートな解決方法を模索中です。
31
IM(E) モードをどうにかしたい (暫定)
•
•
•
•
S
コントロールの ImeMode プロパティは動作しない。
O E t / OnExit
OnEnter
O E it で無理矢理 IM(E) を変更する。
を変更する
Windows なら、VCL の SetImeMode() を呼び出す。
OS X は...IM
は IM の制御方法がよくわからなかったので、
の制御方法がよくわからなかったので
"ことえり" のショートカットのキーコードを送信したが、それなりに動いた。
const
kVK ANSI J = $26;
kVK_ANSI_J
$26
var
Src: CGEventSourceRef;
EventUp, EventDown: CGEventRef;
begin
// Ctrl + Shift + J のキーイベントを生成 ((ことえりのひらがなモードショートカット))
Src := CGEventSourceCreate(kCGEventSourceStateCombinedSessionState);
EventDown := CGEventCreateKeyboardEvent(Src, kVK_ANSI_J, Integer(True));
CGEventSetFlags(EventDown, kCGEventFlagMaskControl or kCGEventFlagMaskShift);
EventUp := CGEventCreateKeyboardEvent(Src, kVK_ANSI_J, Integer(False));
CGEventSetFlags(EventUp, kCGEventFlagMaskControl or kCGEventFlagMaskShift);
CGEventPost(kCGSessionEventTap EventDown);
CGEventPost(kCGSessionEventTap,
CGEventPost(kCGSessionEventTap, EventUp );
CFRelease(EventUp );
CFRelease(EventDown);
CFRelease(Src);
end;
※現在、スマートな解決方法を模索中です。
32
レポートツールはどうするの？
•
•
FastReports の FMX 版が発売されている。
C/S とか三層データベースアプリなら...
とか三層デタベスアプリなら
VCL で印刷サーバを作り、
Indy 等で帳票の種類や
パラメータを通信して
印刷する。
• プリンタ設定が一回で済む
• OS によって印刷結果が
異なるのを回避できる。
印刷専用
アプリ
33
Microsoft Office との連携はどうするの？
•
•
*.docx / *.xlsx / *.pptx は ZIP で固められた XML ファイル。
System.Zip.TZipFile と Xml.XMLDoc.TXMLDocument を使えば、
を使えば
自在に加工する事ができる (VCL でもできるという事なのですが...)。
•
[TXMLDocument の使い方 (DocWiki)]
http://docwiki.embarcadero.com/RADStudio/ja/TXMLDocument_%E3%81%AE%E4%BD%BF%E3%
81%84%E6%96%B9
•
[Office (2007) Open XML ファイル形式の概要]
http://msdn.microsoft.com/ja-jp/library/aa338205%28office.12%29.aspx
•
[Office Open XML File Formats]
http://www.ecma-international.org/publications/standards/Ecma-376.htm
34
埋め込みブラウザは？
•
•
•
•
S
Delphi Chromium Embedded Framework (DCEF) が使える。
最新版の DCEF3 (http://code.google.com/p/dcef3/)
(htt // d
l
/ /d f3/) は、
は
現在 VCL 専用。
DCEF1 ((http://code.google.com/p/delphichromiumembedded/)
p
g g
p
p
) は、
、
そのままでは XE3 に対応しない。
XE3 で DCEF1 を使うには、以下の URL にあるパッチが必要となる。
https://groups google com/forum/?fromgroups=#!topic/delphichromiu
https://groups.google.com/forum/?fromgroups=#!topic/delphichromiu
membedded/rLt4wgRDy0c
ロケーションコンポーネントと
組合わ
組み合わせた例です
例す
※但し、64bit / OS X 用はまだ存在しない。
35
センサー＆ロケーション (FM2)
•
•
•
PC にセンサーが付いているのなら使わないテはない。
Wi Fi が使えれば、仮想
Wi-Fi
が使えれば仮想 GPS センサーを利用可能
センサを利用可能 (Windows
(Wi d
7)
7)。
(Geosense for Windows: http://geosenseforwindows.com/)
、仮 GPS センサーなしでも Wi-Fi データ等から
等
Windows 8 ならば、仮想
三角測量を行う...らしい。
※センサーコンポーネントは、あと 7 個増やせます。
36
ドライバによる画面回転とソフトウェアによる回転
•
•
•
S
ドライバが持つ画面回転機能は全般的に遅い。
画面の書き換え過程が見えてしまう (描画をロックしたとしても)。
(描画をロクしたとしても)
ドキュメントの類は縦画面で読んだほうが視認性がいい事がある。
横最大
フィット
フィット
37
とりあえずスタイルを変更してみる。
•
•
•
用意されているスタイルへ変更するだけでも随分と印象が変わる。
手間が掛からないのでやて損はない
手間が掛からないのでやって損はない。
利用できるスタイルは $(BDS)¥Redist¥styles¥Fmx にある。
スタイルについての詳細は
第23回デベロッパーキャンプ
【B2】見た目で楽しい
Delphiプログラミング
プグラミグ
セッション資料を参考に
してください。
してください
38
タイリングな背景
•
•
•
S
TImage を alClient で貼り、WrapMode プロパティを iwTile にしただけ。
Fi
FirewMonkey
M k には簡単機能が用意されているものが少なくない。
には簡単機能が用意されているものが少なくない
...探すのが大変ですが (^^;A
39
動く (企業) ロゴ
•
•
S
画像をレイヤー状に配置してアニメーションさせれば動くロゴが作れる。
メインフ
メインフォームやスプラッシュウィンドウに配置するとインパクトあるかも。
ムやスプラシウンドウに配置するとインパクトあるかも
40
TPopup でアラート (FM2)
•
•
•
S
TPopup を使ったアラート (ダイアログ)
複数のフ
複数のフォームではなく単一のフォームで画面遷移する場合に。
ムではなく単のフ
ムで画面遷移する場合に
OS 標準のダイアログではできない事 / 不都合な事がある。
41
FireMonkey が機能不足で VCL の機能が必要な場合 (1)
•
最初にお断りしますが非推奨です。
•
VCL アプリケーションを作り、そこへ TPanel を貼って、
TPanel に FMX フォームを割り当てる。
•
[VCLフォーム内にFireMonkeyフォーム - ただし互換性が無いので…]
http://blogs.embarcadero.com/teamj/2011/09/12/2387/
p
g
j
•
[Delphi XE2 - heating up the hype: playing the matchmaker for VCL and FMX]
http://delphisorcery.blogspot.jp/2011/09/delphi-xe2-heating-up-hypep
p
y
g p jp
p
g p yp
playing.html
•
DSharp Windows FMXAdapter pas は FM2に対応していない。
DSharp.Windows.FMXAdapter.pas
に対応していない
•
MonkeyMixer の作者はブログを閉じてしまった (現在 DL 不可)。
42
FireMonkey が機能不足で VCL の機能が必要な場合 (2)
FireMonkey 用の
フォームはここで作る
VCL 用の
フォームはここで作る
プロジェクトのみ。
フォームはここに追加
(作成はしない))
(作成はしな
※FMX プロジェクト上では VCL フォームは新規作成できない。逆も然り。
43
FireMonkey が機能不足で VCL の機能が必要な場合 (3)
S
コード例：
procedure TfrmContainer.FormCreate(Sender: TObject);
// フォーム作成時
フォム作成時
begin
FMX フォーム用パネル
(コンテナ)
// FMX フォームを生成
frmuMain := TfrmMain.Create(nil);
end;
procedure TfrmContainer.FormDestroy(Sender: TObject);
// フォーム破棄時
begin
// FMX フォームを破棄
frmuMain.Free;
end;
procedure TfrmContainer.Button1Click(Sender: TObject);
// ボタン押下時
begin
// FMX フォームをパネルに埋め込む
フォムをパネルに埋め込む
pnlContainer.Form := frmuMain;
end;
マルチプラットフォームに
しなければならない可能性が
僅かでも残るのであれば
この手法を採るべきではない。
44
VCL でタッチ対応アプリケーションを作った時の苦労話(1)
•
•
•
•
•
•
•
•
•
•
•
フルHD デスクトップのタッチアプリケーションと
画面回転可能なスレトPCで動作する同じ機能のアプリケション
画面回転可能なスレートPCで動作する同じ機能のアプリケーション。
工場向け (図面閲覧や工程管理用)
タッチディスプレイは 21.5 インチ。B4
。
サイズの用紙が実寸で収まる。
用紙実
。
スレート PC は 11.6 インチ。図面を閲覧したりするので、拡大/縮小機能が
あったとしてもそれなりの大きさを必要とする。
キボド / マウスレス。
キーボード
マウスレス
バーコードリーダとタッチディスプレイですべての操作を行う。
(キーボード操作
PC に不慣れな (キ
ボド操作 / マウス操作がおぼつかない) 方でも
使い方は1 日で覚えてしまう。
スワイプ等の一見して解らない操作方法は極力排除。
UI は何らかのボタンという形で画面上に見えている。
将来的には障碍者の方の雇用に結びつくようなアプリにしたいとの事。
月に１～2度他社の視察を受けている模様
月に１～2度、他社の視察を受けている模様。
45
VCL でタッチ対応アプリケーションを作った時の苦労話(2)
•
•
•
•
•
•
•
•
•
•
開発スタートは XE2 発売の半年程前。
Fi M k の情報は事前に判っていたが間に合わなかった。
FireMonkey
の情報は事前に判ていたが間に合わなかた
ボタンをすべて自前で描いた (通常 / 押下 / 無効を 1 セットで)。
スレート
スレ
ト PC の回転機能はドライバによる回転なので、
の回転機能はドライバによる回転なので
どうやってもチラつく＆遅い (未解決)
デスクトップでは収まるものがスレート PC では収まらなかったりするが、
同じ機能のアプリケシンを 2 つ別に作る余裕はなかった。
同じ機能のアプリケーションを
つ別に作る余裕はなかた
解像度が異なるので、違いを意識させる事のない
操作性にするのが難しかった ((実 DPI の考慮)。
)
スレート PC のセンサー (3軸加速度センサー) を検出するのが
厄介だったので諦めた (回転の検出は解像度変更の検出で代替)。
UI に関しても、工数の関係で簡素化してしまったものがある。
に関しても工数の関係で簡素化してしまたものがある
一部 Direct2D を使っている。
OS のダイアログは
のダイアログは一切使えない
切使えない (タッチ操作できたものではないので)。
46
VCL でタッチ対応アプリケーションを作った時の苦労話(3)
•
•
•
•
•
•
•
スレート PC は Atom プロセッサなので非力。
予算が潤沢にあるのなら Core
C
系のスレト PC を採用するのもアリだが、
系のスレート
を採用するのもアリだが
工場のように台数を必要とするトコロではそうもいかない。
FireMoneky
y アプリがストレスのない速度で動作するのは確認済。
度動す
確認済。
(流石は Delphi...以下略)
現在の FireMonkey に足りないと思うのはインプレースな
タッチ (仮想) キーボード。
キーボード
OS が持つスクリーンキーボードはオーバーラップするの
で使い勝手が悪い＆OS 毎に操作性が異なる。
"スレート PC プログラミング (ONKYO TW317A5)" は
http://ht-deko.minim.ne.jp/tw317/#05
(FireMonkey を知った後では) ある意味バッドノウハウのオンパレ
ある意味バッドノウハウのオンパレード。
ド。
FireMonkey があれば、もっと簡単に作れたのに...。
47
17Th
Developer Camp
6
まとめ
48
FireMonkey をビジネスアプリで活用するために
•
「VCL アプリケーションを捨てろ！」なんて事は言っていないし言わない。
•
しかしながら VCL アプリケーションでは工数とメンテに
時間が掛かるものが確かに存在する。
•
"FireMonkey をビジネスアプリで活用する" には、
FireMonkey で何がやれるか、何がやれないかを見極める必要がある。
•
マルチプラットフォームなら、RIA (Rich Internet Applications) よりも
操作性の面で優れている必要がある。RIA と同等またはそれ以下ならば
デスクトップアプリケーションである必然性がない。
•
安価なもので構わないので、スレート PC を仕入れて触ってみる。
センサー、マルチタッチ、縦横回転など、従来のアプリケーションとは
異なた考え方のアプリケシンを提案できるかもしれない
異なった考え方のアプリケーションを提案できるかもしれない。
49
システムのスケーラビリティ (業務アプリの展開方法)
•
•
•
•
最初は Windows のみの C/S でスタート
マルチプラトフ
マルチプラットフォームとして
ムとして Mac
M を追加
外部からのアクセスを可能にするため、DataSnap で三層化 (Ent)
DataSnap モバイルコネクタを利用して iPhone や Android 対応 (Ent)
予算や納期に合わせて
無理のないシステム拡張を
行うことが可能になる。
う
RAD Studio も、
その規模に合わせて
アップグレードすればいい。
Step1
Step2
Step3
Step4
50
具体的に何が向いているのか？
•
受付業務全般
(フロントでお客さんが操作するようなもの)
•
工場系のワーカーさんへの作業指示＆フィードバック
場系
業指
(ペーパレスが実現できる / 手が汚れていても肘などで操作可)
•
医療系の高精細な画像を扱うアプリケーション
医療系の高精細な画像を扱うアプリケ
シン
(高解像度ディスプレイを使ってもフォームが破綻しない)
•
フィールドワーク / 営業さん用
(GPS とローカル DB があれば、通信できないような場所でも OK)
•
エライヒトまたは視察 (おもてなし) 用のハッタリアプリケーション
((見た目で納得しちゃう方が少なからずいらっしゃいます...))
51
17Th
Developer Camp
資料
52
関連情報 &資料1
•
•
[FireMonkey アプリケーションプラットフォーム (DocWiki)]
http://docwiki embarcadero com/RADStudio/ja/FireMonkey アプリケーションプラットフォーム
http://docwiki.embarcadero.com/RADStudio/ja/FireMonkey_アプリケーション_プラットフォーム
[デベロッパーキャンプアーカイブ (Embarcadero)] - 過去のデブキャン資料です
http://www.embarcadero.com/jp/developer-camp-japan/archive
p
jp
p
pj p
•
[Devices (ロケーション/センサー API) (MSDN)]
http://msdn.microsoft.com/en-us/library/ee663267%28VS.85%29.aspx
•
[デバイスの概念とアーキテクチャ (Windows)]
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh750300.aspx
•
[高 DPI 対応の Win32 アプリケーションを記述する] - 悩んでしまうかもしれません
(Windows デベロッパーセンター)
http://msdn.microsoft.com/ja-jp/windows/dd630126.aspx
p
j jp
p
53
関連情報 &資料2
•
[Microsoft Serface with Windows 8 Pro (Microsoft)]
http://www.microsoft.com/Surface/en-US/surface-with-windows-8-pro/home
p
p
•
[Lenovo Thinkpad Tablet 2]
http://shopap.lenovo.com/jp/products/tablets/thinkpad2/
•
[Mac OS X 10.6 Snow Leopard (Apple Store)] - ¥1,700 で再販中...orz
http://store.apple.com/jp/product/MC573J/A/mac-os-x-10.6-snow-leopard
•
[FireMonkey (Stack Overflow)]
http://stackoverflow.com/questions/tagged/firemonkey
•
[Delphi (FireMonkey) によるテクニック＆アルゴリズム]
http://ht-deko.minim.ne.jp/techalgof.html
•
[FMX S
[FMX.SensorsEx]
E ] - FM2 のセンサーコンポーネントを
のセンサコンポネントを 7 個増やせます
http://ht-deko.minim.ne.jp/software/fmx_sensorsex.zip
•
[DTween (全力わは
(全力わはー)]
)] - VCL でもアニメ
でもアニメーションできます
ションできます
http://d.hatena.ne.jp/tales/archive?word=*[DTween]
54
第24回エンバカデロ・デベロッパーキャンプ
John “JT" Thomas
製品担当ディレクター
john.thomas@embarcadero.com
Twitter： @FireMonkeyPM
新井正広
Manager, Doc & Localization
masahiro.arai@embarcadero.com
Twitter： @arai_masahiro
開発者に関する世界的統計
全世界で1,600 万人のソフトウエア開発者
（Evans Data 社調べ）
•
年間 520 億行ものコード
•
コード 1 行当たり平均 28 米ドル
•
ソースコードの開発にかかる費用は、
全世界で年間 1.5 兆ドル
エンバカデロの顧客
300 万人の Delphi/C++開発者がコーディング
•
年間 97 億行のコード
•
•
年間 480 億行のコードを節約
必要なコードは 80% 削減
•
1 コード行当たり実質 5.60 ドル（１
行あたり28米ドルではなく）
•
年間2,200億ドルの開発費用を節約
しかし、それは氷山の一角にすぎない。
1999 年のエンタープライズ環境
Windows
2005 年のエンタープライズ環境
Windows
Web
2012 年のエンタープライズ環境
Windows
10 億台
Mac
6,500 万台
モバイル
10 億台
Web
20 億人
開発者にとって前例のない規模の
マルチプラットフォーム開発機会
$$$$$
+
$$$$$
+
$$$$$
+
$$$$$
単一ソースコードのネイティブ
クロスプラットフォーム環境で、
デスクトップからモバイルまでを
サポート
$
DataSnap と HTML5 Builder を
使用する Web クライアントを追加
する場合
$
$
ネイティブプラットフォームと Web を
ターゲットにしたプロジェクトの例
vs
50,000 行のコード
140 万ドルのプロジェクト費用
184 人月の工数
LOC 当たり実質 28.31 ドル
2,000 行のコード
11.3 万ドルのプロジェクト費用
15 人月の工数
LOC 当たり実質 2.26 ドル
現在のソリューション
RAD Studio XE3
The Developer Force Multiplier
Windows 8
Mac OS X
Mountain Lion
Delphi
FM2
Metropolis UI
HTML5
Mobile
Visual LiveBinding
本日の発表
64-bit C++Builder for Windows

VCL および FireMonkey

Dinkumware STL for C++11/C99

Boost 1.5

高度に最適化されたコード生成
将来のためのアーキテクチャ
マルチデバイス
RAD（Rapid Application Development）
PME & RTTI
コード生成
エンジン
INTEL
ARM
IRエンジン
言語
エンジン
標準
C99, C++98, C++11
互換性
ライブラリ
Borland C++
C++Builder, CLANG
STL, Boost, Loki, ACE
製品出荷予定

12月１０日よりダウンロード開始

XE3 のアップデートとしても提供
 新版を再インストール

XE3 とバイナリ互換
モバイル開発の現在
HTML5 Builder
現代の Web 技術を使ったRADビジュアル開発
Web、iOS、Android、BlackBerry、 Windows Phone をターゲットに
• HTML5、CSS3、JavaScript でのフロ
ントエンドの開発
• PHP でのサーバー側の開発
• モバイルデバイス UI スタイル設定
• CSS3 によるスタイル設定および
アニメーション
• 豊富なビジュアルコンポーネント
• ビデオ、オーディオ、GPS、カメラ、
加速度センサなど
• Web および AppStore への配置
HTML5 かネイティブか?
ネイティブの利点
HTML5 の利点
複雑な UI
単純な UI
低レイテンシ UX
高レイテンシ環境でも OK
高度な処理要件
ブラウザによる配置
データをデバイスで生成
Web データをクラウドで生成
UI データ入力
フォームデータ入力
プレゼンテーション / アプリケー
ション / データ層
プレゼンテーション層
将来のモバイルソリューション
免責事項：以下の情報はエンバカデロにおける現時点での製品の一般的な方向性を
記述したもので、ライセンスに関する決定を行う際に判断のよりどころにはしないでくださ
い。機能の今後の開発、リリース、価格設定、スケジュールは、予告なしにいつでも変更
される可能性があります。このロードマップは、お客様が翌年のモバイルプロジェクトを立
案する際に、ソフトウェア保証サブスクリプションの役に立つことを目的としています。
開発中の機能
• ネイティブ ARM ツールチェーンを統合
• Delphi および C++
• コンパイラ、リンカ、デバッガ
• ネイティブ iOS および Android プラットフォーム
のサポート（RTL、FireMonkey、ネイティブ API）
• FireMonkey モバイルフレームワーク
• モバイルフォームデザイナ
開発中の機能
• モバイルセンササポート（GPS、カメラ、加速度、ジ
ャイロ）
• ネイティブ UX とネイティブ UI スタイル
• カスタム UX とデザイナー仕様のスタイル
• 組み込みデータベースとエンタープライズデータベ
ースのサポート
• DataSnap ミドルウェアのサポート
開発中の機能
• XE3 Windows/Mac 版 FM2 との互換性
• HD および 3D
• Retina/高解像度の自動処理
• 設計、開発、シミュレーション、デバッグ、配置の統
合
• アドホック配布および AppStore 経由の配布
ロードマップ
2013 年
iOS - 2013 年上半期（予定）
Android - 2013 年中期（予定）
* リリース時期は、エンジニアリングの現在のスケジュールと進捗に基づいて見積もったものです。実際のリ
リース時期はロードマップと異なる場合があります。
Mobile Demo
免責事項：この情報はエンバカデロにおける現時点での製品の一般的な方向性を記
述したもので、ライセンスに関する決定を行う際に判断のよりどころにはしないでください。
機能の今後の開発、リリース、価格設定、スケジュールは当社の裁量に委ねられており、
予告なしにいつでも変更される可能性があります。
Powering Today’s Applications and Data
17Th
Developer Camp
【A4】テクニカルセッション
「RAD Studio XE3 による
Windows 8 開発」
Embarcadero Technologies,
Technologies Inc
Inc.
Manager, Documentation and Localization
新井正広
1
17Th
Developer Camp
1
Windows 8
2
Windows 8
• 10⽉26⽇発売
http://windows.microsoft.com/ja-JP/windows-8/new-look
3
Windows 8
• 今後発売される「Windows 8対応PC」の多くは、タッチ対応
http://windows.microsoft.com/ja-JP/windows-8/new-pcs
http://windows.microsoft.com/ja
JP/windows 8/new pcs
4
デスクトップアプリと、Windows ストアアプリ
• デスクトップと、ストアアプリは異なるランタイムの上で動作
デスクトップアプリ
Windows ストアアプリ
Win32 API
Windows Runtime
Windows 8
Windows RT
Intel x86 / x64
ARM
5
Windows ストアアプリ
• Windows ストアアプリ
– 従来の Win32 アプリは動作しない
– Windows ストアからダウンロード、購⼊
ストアからダウンロド購⼊
• Microsoft の審査後に公開
• 不適切なAPI、法律、約款への違反が無いかチェック
不適切なAPI 法律約款への違反が無いかチェック
– 社内向けアプリはストアを経由せずに配布可能
• Windows 8 Enterprise + ドメイン参加が必須
6
Windows ストアアプリ
• 共通の⼿順を使⽤したアプリ間の連携をサポート
– 検索
– 共有
• ライブタイル
– アプリケーションのステータスをリアルタイムで表⽰
アプリケシンのステタスをリアルタイムで表⽰
• アプリケーションの販売・トライアル
アプリケションの販売トライアル
– 容易な配布、更新
7
デスクトップアプリ
• Windows RT / ARM 環境では動作しない
• Windows 8 / Intel 環境でのみ動作
• Windows 7 に対応できているのであれば、特に問題は無い
– データベースドライバなどの対応は、ベンダーによって異なる
デタ
スドライバなど対応は、ンダ
よて異なる
• VCL, FireMonkey, Win32 API を利⽤して開発
8
17Th
Developer Camp
2
タブレット、タッチに対応
9
タッチ向けアプリケーションを構築する。そのまえに
• たくさんの要素をひとつの画⾯に配置しない
– 細かいUIはそもそも選択できない
– 凹凸のあるキーボードですら、19mmピッチが⼀般的
– 重要な選択肢ほど⼤きく表⽰
• 間違って選択することを避ける
– 重要ではない選択肢は⼩さめでも可
• レビュー⽤の「★★★☆☆」
– 可能な限り、そもそも UI 要素を省く
10
タッチ向けアプリケーションを構築する。そのまえに
• ユースケース・シナリオを単純にする
– 機能を増やすほど UI は複雑化する
• ヘルプ・ドキュメントを⾒なくてもよい
ヘルプドキュメントを⾒なくてもよい UI を設計する
– フローが単純であること
– 結果を予測できること
– 元に戻れること
• Windows 8 ストアアプリ向けデザインガイドは「よい指針」
– 数多くのユースケースが詳細に検討されている
数多くのユスケスが詳細に検討されている
11
⼩さな要素は選択できない
12
⼩さな要素は選択できない
• 「タッチモード」で画⾯を少し⼤きくしてみた例
13
画⾯の⼤きさの違い
14
ソフトウエアキーボードの使⽤
15
タブレット、タッチへの対応
• 既存の UI をそのままタッチ向けに移⾏するのは、⾮現実的
– TMainMenu
– TPopupMenu
– TTreeView
• 異なるデバイスへの対応が必要
– ディスプレイ（画⾯の⼤きさ）
– ⼊⼒デバイス（キーボード、マウス、タッチ、ペン）
⼊⼒デバイス（キボドマウスタチペン）
• 複雑な階層メニューを作成することは、ほぼ不可能
複雑な階層メニュを作成することは、ほぼ不可能
• ⼊⼒系のコンポーネントは、⼤きさ、配置を再考する
16
17Th
Developer Camp
3
RAD Studio
St di XE3 を
利⽤したタブレット・タッチ
利⽤したタブレット
タッチ
への対応
17
デスクトップアプリと、Windows ストアアプリ
Metropolis
p
UI
Embarcadero Prism
デスクトップアプリ
Windows ストアアプリ
Win32 API
Windows Runtime
Windows 8
Windows RT
Intel x86 / x64
ARM
18
Metropolis UI
• デスクトップアプリとして動作
– Windows 8 スタイルのアプリ
• 利⽤環境は Windows 8 に限らない
• Windows 7, Vista, XP でも動作
– キーボード、マウス、タッチを操作をサポート可能
– 既存の VCL, FireMonkey, Win32資産を活かしつつ、
タブレット、タッチデバイス向けのアプリを作成
• サポートするフレームワーク
– FireMonkey
– VCL
19
Metropolis UI
• ⾃動⽣成されるテンプレート
– 空⽩のプロジェクト、または
– グリッド形式のインデックス／詳細ページ
– Esc キー、または画⾯下からのスワイプで表⽰される AppBar
• Windows 8 「スタイル」のコンポーネント
20
Metropolis UI
• Windows 8 スタイルのコンポーネント
– TEdit
• 標準的な操作に対するグリフ表⽰とアクションを追加
– TListBox
• イメージとタイトルをボックスに表⽰
–
–
–
–
TComboBox
アイコンライブラリ
ツールチップ
フライアウト
21
異なる画⾯サイズ、向きへの対応
• 画⾯をスクロールして、残りのコンテンツを表⽰する
– Windows 8 ストアアプリのスタイル
– 最初からすべてを表⽰することを期待しない
22
異なる画⾯サイズ、向きへの対応（FireMonkey）
• FormFactor プロパティを使⽤する
– 事前に、複数の画⾯サイズ、向きのフォームを定義
Application.CreateForm(TLargeForm, LargeForm);
A li ti
Application.CreateForm(TSmallForm,
C
t F
(TS llF
SmallForm);
S llF
)
Application.RegisterFormFamily('DetailView',
[TLargeForm,
[
g
, TSmallForm]);
]);
– 実⾏時に、デバイスにあわせてフォームを選択
procedure TGridViewForm.ItemClick(Sender: TObject);
var
Form: TCommonCustomForm;
begin
Form := Application.GetDeviceForm('DetailView');
if Assigned(Form) then
Form Show;
Form.Show;
end;
23
ジェスチャを利⽤する
• 対話型ジェスチャ
– ズーム、回転など
• InteractiveGesture を選択
• OnGesture イベントを実装
• ジェスチャを⾏っている間、イベントが発⽣し続ける
• 標準ジェスチャ
– 上、下、矩形など
• TGestureManager, TActionList コンポーネントを利⽤
• 個別のジェスチャが「認識されたとき」に、アクションを実⾏
24
Metropolis UI
• VCL と FireMonkey のどちらを選ぶべきか
– VCL
• 過去のコードとの互換性は⾼い
– 特にデータベースアクセス
• TTouckKeyboard が提供されている（Win XP にも対応）
– FireMonkey
Fi M k
• 異なる画⾯サイズへの対応は容易
– Zoom
Z
(S
(Scale)
l )
– FormFactor
25
Metropolis UI
• ライブタイルのサポート（Windows 8 のみ）
– アプリケーションからの最新情報をタイルに表⽰可能
– ビルド済みの Windows Runtimeで動くアプリ
– TLiveTile コンポーネントを通じて、タイル上のアプリと連携
26
ライブタイルの配布
• 配布可能な環境
– Windows 8 Enterprise
– ドメインへの参加
• 配布すべきモジュール
– 作成したデスクトップアプリケーション
– プロジェクトフォルダにある .appx ファイル
– <BDS>¥bin¥livetile 以下にあるバイナリ⼀式
• Embarcadero.Metropolis.LaunchAgentHost.exe を実⾏
• サービスを登録（InstallTileSvc.bat）
• .appx
pp ファイルは適切な署名が必要
27
17Th
Developer Camp
3
Embarcadero
E
b
d
Prismを
Pi を
使⽤した
Windows ストアアプリ
28
Windows Store アプリの基本
• XAML & コードビハインド(.pas)で構成
– アプリケーション
• Windows.UI.Xaml.Application クラスを拡張
– ページ
• Windows.UI.Xaml.Control.Page クラスを拡張
– イベントハンドラをパーシャルクラスを使⽤して実装
29
Windows Store アプリの基本
• サンドボックスモデルを使⽤している
– アプリケーションが使⽤する機能を宣⾔、ユーザーが承認
•
•
•
•
ドキュメントへのアクセス
位置情報
ネットワークアクセス
Web
b カメラ
30
Windows 8 で提供されているサービスを利⽤する
• どのコントラクトを使⽤するかを宣⾔
• コントラクトに対するイベントを記述
31
17Th
Developer Camp
3
Windows ストアアプリの
配布
32
アプリケーションの配布
• 基本的に、Windows Store で配布する
• 社内アプリの場合には
– Windows 8 Enterprise
p
+ ドメイン参加が必須
– 事前に署名する（配布先で、そのまま署名が確認できる）
– ドメイン管理者が必須アプリとして配布するシナリオ
• PowerShell Script を使⽤する
33
17Th
Developer Camp
Q&A
34
17Th
Developer Camp
【A5】 Delphiテクニカルセッション
「Delphi＋Visual LiveBindingによる
データベースアプリケーション開発」
デ
タベスアプリケション開発」
株式会社ドリームハイブ
株式会社ドリ
ムハイブ
代表取締役 ITコンサルタント
山本悟
1
自己紹介
• 名前：山本悟 (やまもとさとる)
– 代表取締役 & ITコンサルタント
• 会社：株式会社ドリームハイブ
会社株式会社リ
–
–
–
–
会社URL
フリーソフトなどを配信
山本のブログ
facebook
：http://www.dreamhive.co.jp/
：http://dhive.jp/
：http://dhive jp/blog/yama/
：http://dhive.jp/blog/yama/
：http://www.facebook.com/kryu2
• 山本はこんな人：
– 17歳からIT業界へ
– Delphi は1.0からの親友
は1 0からの親友
– ドリームハイブの経営、ITコンサルティング、
システム開発、スピーカーなどが主な仕事
2
2
本日の流れ
•
•
•
•
•
•
•
VCLとFMとVisual LiveBinding
接続の基本のデモ
双方向の接続のデモ
フィールドを利用した接続のデモ
DataSourceと接続のデモ
他の形式のデータと接続のデモ
まとめ
 このセッションは、テクニカル・セッションです
 RAD StudioでLiveBindingを用いたアプリケーションの構築方法について、
g
築
私の主観と経験に基づいてお話しいたします
 あなたにとって最適解では無いかもしれませんが、参考になると思います
3
3
VCLとFireMonkey
• RAD Studio XE2からフレームワークに
VCLとFireMonkey(XE3では FM2)が追加されました
4
LiveBindingとは
•
VCL/FMのどちらにもLiveBindingがありますが、FMはクロスプラットフォームです
•
LiveBindingの概要
– バインディング式と呼ばれる、
単方向にも双方向にもできる関係式に基づいている
– LiveBinding
Li Bi di は伝播する
– コントロールオブジェクトとソースオブジェクト
•
バインディングの作り方
– LiveBindingデザイナかLiveBindingウィザード
• クイックバインディングのみ作成できる
– LiveBindingコンポーネントの利用
g
• バインディング式などを指定できる
– 注意
• 1つのコントロールを2つのコンポーネントプロパティにリンクすることはできない
• コントロールと両方のコンポーネントプロパティを1つのフィールドにリンクすることは可
能
•
と言う事で、本日はLiveBindingについて話します
5
LiveBindingのための設定
• オプション設定
右クリックメニューにLiveBindingウィザードを表示
6
接続の基本
• LiveBindingはコンポーネントのプロパティを
動的に結びつける
– EditとLabelを結びつけるなどの基本のデモ01
7
双方向の接続
• 双方向に繋げることも
– EditとEditを接続するデモ02
• キーワード
– BindingsList1.Notify()
– Direction := dirBidirectional
8
フィールドを利用した接続1
• PrototypeBindSourceとは
– PrototypeBindSourceとは、アプリケーションのテストのた
めに様々なフォーマットのサンプルデータを提供する機
能をも
能をもつコンポーネントです。
ンポネントです
9
フィールドを利用した接続2
– PrototypeBindSourceを使い、フィールドを経由して様々
な
なコンポーネントをリンクするデモ03
ポネトを
クするデ 03
10
フィールドを利用した接続3
– Generatorを使ったサンプルデータを利用するデモ04
11
フィールドを利用した接続4
– PrototypeBindSourceのデータを
コードで書き換えるデモ05
ド書き換えるデ 05
12
DataSourceと接続1
• LiveBindingはDataSourceにも繋がります
– DataSourceとGridを接続するデモ06
• 注意
– LinkGridToDataSourceのColumnsを弄るときは
AutoActivateをFalseに
13
DataSourceと接続2
• DataSnapを利用すればネットワーク経由の接続もOK
– DataSnap経由でGridを表示するデモ07
DataSnapクライアント
DataSnapサーバー
biolife.cds
14
他の形式のデータと接続1
• アダプタ使えば自作クラスとやりとりもできます
– 自作クラスを
TAdapterBindSource経由でリンクさせるデモ08
自作クラス：EmployeeAdaptee.pas
p y
p
p
15
EmployeeAdaptee.pas
unit EmployeeAdaptee;
interface
type
TEmployee = class(TObject)
private
FFirstName: String;
FLastName: String;
i
FAge: Byte;
public
constructor Create(const AFirstName, ALastName: String; const AAge: Byte); overload;
property FirstName: String read FFirstName write FFirstName;
property LastName: String read FLastName write FLastName;
property Age: Byte read FAge write FAge;
end;
implementation
constructor TEmployee.Create(const AFirstName, ALastName: String; const AAge: Byte);
begin
inherited Create;
FFirstName := AFirstName;
FLastName := ALastName;
FAge := AAge;
end;
end.
16
まとめ
• VCL＋DBコンポーネントから
FireMonkey + Visual LiveBinding に移行することで
 Windows / Mac のクロス環境で実行可能
 高品質なグラフィック / UIを利用可能
 表現力豊かなコンポーネントを使用可能
 コンポーネントの選択肢が広がる
（DBコンポーネントだけに限定されない）
 タブレットなどでも利用しやすいスタイルを選択可能
 将来的にモバイルなど追加のプラットフォームでも
利用可能(iOS / Androidが予定されている)
A d idが予定され
る)
 RDBMSだけでなく任意のデータ / オブジェクトを扱える
17
17Th
Developer Camp
Q&A
18
終わりに
ご静聴いただきありがとうございました
メルマガもご登録ください(※期間限定)
↓↓↓
http://www.dreamhive.co.jp/24thDC/
パスワード：24thDC
19

Download Report