Delphi Debut Tokyo #1 - FireMonkey HD の基本

Copyright © 2013 SERIALGAMES inc.All Rights Reserved.
PAGE1
Happy Creation, Play the Development!
FireMonkeyHD
マルチプラットフォームアプリの作り方
2014/10/18
株式会社シリアルゲームズ細川淳

PAGE2
アジェンダ
•２WayTools
–言語とデザインの融合
•ちゃんとした言語なのです
–ドラッグ＆ドロップ
•親子関係
•コンポーネントとは
•スタイル機構
–マルチプラットフォームとはこういうこと！
•FireUI
•解像度フリー
–縦横比率からもフリー

PAGE3
２WayTools

Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 4
２WayTools
• Delphi ではIDE と言語が完全に連携します。
例えば
ボタンがクリックされた時
OnClick
というイベントが発生します。
オブジェクトインスペクタのOnClick イベントを
ダブルクリックすると…

２WayTools
自動的に、イベントハンドラが生成されます。
で、ここだけ見ると、IDE がないと開発が成り立たないように見えますが…

２WayTools
上にスクロールすると、本当はこんな風にクラスが定義されて、そのメソッドだけ抜粋
されていただけなのです！

PAGE7
２WayTools
•IDE は連携して動作するだけ
•プログラマは全体を把握できます。
でも、IDE でイベントと結びついたメソッドの情報は
どこにあるの？
目に見えなくない？
把握できなく無い！？

２WayTools
その情報はここに！！
結びついた情報は、リソースとして保存されています。
※$R はリソースを読み込んで実行ファイルとリンクするためのコンパイラ指令です。

PAGE9
２WayTools
リソース…
やっぱり目に見えなくない？
把握できてなく無い！？

PAGE10
•fmx ファイルは中身を見れるし、編集もできるのです。
•というか、そもそもfmx ファイルって何。

• fmx ファイルとはフォームの情報を示すファイル
– フォームとは、コレ
F12 キーを押すか、エディタの下部にあるタブを押すと
フォーム⇔コード
が切り替わります。

PAGE12
イベントの情報は
–フォームに載っているコントロールの情報
•例えば、ボタンが押されたら○○を呼ぶ
という情報なのでfmx ファイルに保存されます。

• fmx ファイルの中身を見るには…
コンテキストメニューの
コレをクリック

• fmx ファイルをテキストとして見れます！
ほら！！
ここにイベントの情報が！！

PAGE15
•というわけで、Delphi ではプログラムの全体構造をプログラマが把握できるのです。
–他のGUI 構築ツールとの大きな差です。
•フォームデザイナとコードエディタが「連携」するこの機能を
•2Way-Toolsといいます。

PAGE16
Delphi が生成するファイル
•Delphi ではプロジェクトを作ると
–Project1.dpr
•プロジェクトソース
–Unit1.pas
–Unit1.fmx
•フォームとコード
•が自動生成されます。
ペア

• dpr は普段プログラマが触る必要はありません。
• ですが、当然プログラマが把握できるソースになっています。
dpr の表示

PAGE18
この章の締め
Delphi ってIDE ありきで話すことが多くて、IDE 無いと成り立たない不完全なおもちゃみたいな物と思われがちですが、ちゃんとした言語なんです。
–これ判ってない人以外と多い。
ということで、コレを踏まえて次の章です。

PAGE19
ドラッグ＆ドロップ UI 構築について

• では実際にGUI を組んでみよう！
• コレ、マジ超簡単なんで！！
右下のツールパレットから
コンポーネントを選ぶ！
僕の環境はカスタマイズ（Classic Undocked）
しているので画面上部から選びますが…

• ドラッグ＆ドロップ
• ダブルクリック
• 置きたいフォームをクリック
のどれかをすると、GUI 部品が置けます！
置けた！

PAGE22
•ここでGUI 部品について
–コントロール
•ユーザーとコミュニケーションを取る物
•TControl クラスから派生
–コンポーネント
•なんか色々ひっくるめて！
–コントロール、非ビジュアルコンポーネントなど
•TComponent クラスから派生

PAGE23
•TControl
–ボタンやラベルといったユーザーが触ったり、内容を読んだりする物
•名前空間：FMX.Controls.TControl
–FireMonkey では、TStyledControl から派生した物を主に使います
•スタイルが適用できるコントロール
–スタイルについては後で

PAGE24
•TComponent
–Delphi のGUI を構築する最も基本的なクラス
•名前空間：System.Classes.TComponent
–このクラスはVCL でも使われている
•名前空間がSystem から始まる物はVCL / FireMonkey 両方から使われる
•VCL = Visual Component Library
–Windows 専用のGUI ライブラリ
»もう使わなくていいかな…高解像度にも対応してないし

• GUI 構築に戻って…
– ボタンにエフェクトを追加してみます
– TBlurEffect をドロップ！
ドロップしたのに！
何も起きない！

• ここで構造ペイン
• 構造ペインは（フォームデザイン時は）GUI
の親子関係を示します。
こいつ
Form1 の子供として
BlurEffect1 とButton1 がある
と言うことを示しています。

• で、実はエフェクトを掛けるコンポーネント
は「親に働く」のです。
• つまり、さっきの状態だと「フォーム」にか
けちゃってる！
• ので、変更します。
こんな風に、各コンポーネント
をドラッグ＆ドロップして親子
関係を変更できます
D&D

WOW!
ブラーかかったよ！！！

PAGE29
超簡単ですね！！
ですが、ここで思い出して欲しいのです。
この画面がフォームデザイナだと言うことに
つまり、まだ完成したアプリでは無い…
なのに、エフェクトがかかったりする…

PAGE30
Delphi フォームデザイナのスゴいところ
フォームデザイン中
コンポーネントは
実際に動作しているッ！！

• だから、変更はリアルタイムに反映されます。
ココを変えたら、コッチも変わった！

PAGE32
驚くのは、まだまだこれからやで…！

PAGE33
スタイル機構マルチプラットフォームってこういうこと

PAGE34
•さっきのプログラム実際に動かしてみると…
え！なにこれ！かっこわる！！
Windows 丸出しじゃん！！
マルチプラットフォームなんて
無理じゃん！

• ここで、スタイルの登場です。
• TStyleBook コンポーネントをフォームに
置いてみるよ！
これ
おもむろに
ダブルクリック！

PAGE36
•謎の画面開いた…

はい！これがスタイルエディタです！！
って言われても、なんだか判らない！
とりあえず、スタイルを見せつけます。
読み込みボタンを押して
Dark.style を読むよ！

PAGE38
•なんか構造ペインがスゴいことに！

• とりあえず「適用して閉じる」

なんも変わってなくね！！
まだ、あわてるような時間じゃ無い

Form のStyleBook プロパティ
にStyleBook を設定する！
すると…

なんか黒くなった！！
実行してみると…
キター！
先ほどとは違う
黒く引き締まったボディに…！

こんな感じでスタイルがあるのですが…
スタイルにはモバイルOS 用のスタイルが用意
されているのです…！
iOS だったり
Android だったり

PAGE44
スタイルは自由に何個でも置けます。
これの意味するところは…
FireUI !

• FireUI とは
– マルチプラットフォームアプリケーションをデザ
インする上で必須の機能。
フォームデザイナの右
上に注目！
ココをドロップすると
こんな物が！

デザイナが
Android に！！

PAGE47
•FireUI とはフォームを継承する仕組み
マスタフォーム
継承フォーム
継承フォーム
ボタン
ボタン
ぼたんや
コンポーネントは全てのフォームに現れるが
プロパティ（位置とか色とか全部）は
別個に設定出来る！

大きさや
文字が変わって
いる！

プロパティを別個に設定できるという事は…
プラットフォームに合わせてスタイルを変更できる！

PAGE50
•FireUI を使うと、Desktop, Tablet とPhone などをいっぺんにデザインできてしまいます。
•しかも、プロパティを変更できるので
–Desktop には、このボタンが欲しい
–Phone には、煩雑だからいらない
と言うこともできます。
•Visible プロパティの変更

PAGE51
さらにこれらをデザインしやすくする
TMultiView
というコンポーネントがあります。
コレを使うとAndroid のFragmentsと同じ事ができてしまいます。
が、さすがに…これ以上聞くのは大変だと思うので、とりあえず割愛

PAGE52
自由な解像度 Android解像度地獄からの脱出

PAGE53
•FireMonkey の描画について
–FireMonkey は全て自分でコントロールを描画しています。
OS
方法
Windows
DirectX
OS X
OpenGL
iOS
OpenGLES
Android
OpenGL ES

PAGE54
–この結果、画面解像度（画素密度）に応じて描画密度を変更しています。
–しかも、自動で！！
作ったアプリ
1024 x 768
作ったアプリ
1920 x 1080
今までは、こんな風に解像度が変わっても
アプリの大きさは、そのまま
来たるべき超高解像度時代では
小さくて使いづらくなっちゃう！！

PAGE55
作ったアプリ
1024 x 768
FireMonkey では
解像度が変わっても
画面比率が変わらない！
作ったアプリ
2560 x 1440
スゴくない！？

PAGE56
•解像度からの解放
–Android のように多くの解像度があったり
–最近ではiOS も色々な解像度あるし
–Windows でもIGZO 液晶のノートがあったり
–OS X だってRetina ディスプレイの物と、そうじゃないないのがあったり…
FireMonkey を使うと！
こういった悩みから解放される！！

そうはいっても比率が変わったらダメだよ
ねー？
そうでもない！！

PAGE58
•FireMonkey のレイアウト戦略
–FireMonkey では
•Align
•Anchors
–というプロパティでコントロールの位置を相対的に指定できる！

• Align プロパティ
– 左寄せ、右寄せ、センタリング、といった配置を
指定できる
• 指定可能な配置はメチャクチャあります

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

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

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

PAGE63
これらのプロパティを上手に使うと比率が変わってもデザインが崩壊しません！
さらに、FireMonkey には
TScaledLayout
TGridLayout
TFlowLayout
などの多彩なレイアウトコンポーネントもあります。
これらを使うと自分でAnchor/Align を設定しなくても自動的に再配置されます。
とはいえ、これも長くなるので初級編では割愛…

PAGE64
素材についてもFireMonkey ならではのアプローチがあります。
TMultiResBitmap多重解像度ビットマップ
TPathSVG などのベクター画像
という２つのコンポーネントがあります。
これらを上手く使う事えば様々な解像度に対応できます。

PAGE65
というわけで、ざっと
Delphi
FireMonkeyHD
を紹介しました。
メチャクチャ簡単にアプリが作れるってことが、判って頂けたでしょうか？
そして、FireMonkeyは、3D も操れるのです！
それは、FireMonkey3D といいます！
それはまた別の機会に…
※勉強会では、このあとFireMonkey3D の話がありました

Delphi Debut Tokyo #1 - FireMonkey HD の基本

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Delphi Debut Tokyo #1 - FireMonkey HD の基本

Similar a Delphi Debut Tokyo #1 - FireMonkey HD の基本 (20)

Delphi Debut Tokyo #1 - FireMonkey HD の基本