delphi debut tokyo #1 - firemonkey hd の基本

Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 1

Happy Creation, Play the Development!

FireMonkey HD

マルチプラットフォームアプリの作り方

2014/10/18株式会社シリアルゲームズ細川淳


Happy Creation, Play the Development! アジェンダ

• ２WayTools

– 言語とデザインの融合

• ちゃんとした言語なのです

– ドラッグ＆ドロップ

• 親子関係

• コンポーネントとは

• スタイル機構

– マルチプラットフォームとはこういうこと！

• FireUI

• 解像度フリー

– 縦横比率からもフリー



２WayTools


Happy Creation, Play the Development! ２WayTools

• Delphi では IDE と言語が完全に連携します。例えば

ボタンがクリックされた時

OnClick

というイベントが発生します。オブジェクトインスペクタの OnClick イベントをダブルクリックすると…



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



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



• IDE は連携して動作するだけ

• プログラマは全体を把握できます。

でも、IDE でイベントと結びついたメソッドの情報はどこにあるの？

目に見えなくない？把握できなく無い！？



その情報はここに！！

結びついた情報は、リソースとして保存されています。

※$R はリソースを読み込んで実行ファイルとリンクするためのコンパイラ指令です。



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



• fmx ファイルは中身を見れるし、編集もできるのです。

• というか、そもそも fmx ファイルって何。



• fmx ファイルとはフォームの情報を示すファイル

– フォームとは、コレ

F12 キーを押すか、エディタの下部にあるタブを押すと

フォーム⇔コード

が切り替わります。



イベントの情報は

– フォームに載っているコントロールの情報

• 例えば、ボタンが押されたら○○を呼ぶ

という情報なので fmx ファイルに保存されます。



• fmx ファイルの中身を見るには…

コンテキストメニューのコレをクリック



• fmx ファイルをテキストとして見れます！

ほら！！ここにイベントの情報が！！



• というわけで、Delphi ではプログラムの全体構造をプログラマが把握できるのです。– 他の GUI 構築ツールとの大きな差です。

• フォームデザイナとコードエディタが「連携」するこの機能を

• 2Way-Tools といいます。


Happy Creation, Play the Development! Delphi が生成するファイル

• Delphi ではプロジェクトを作ると

– Project1.dpr

• プロジェクトソース

– Unit1.pas

– Unit1.fmx

• フォームとコード

• が自動生成されます。

ペア



• dpr は普段プログラマが触る必要はありません。

• ですが、当然プログラマが把握できるソースになっています。

dpr の表示



この章の締め

Delphi って IDE ありきで話すことが多くて、IDE 無いと成り立たない不完全なおもちゃみたいな物と思われがちですが、ちゃんとした言語なんです。– これ判ってない人以外と多い。

ということで、コレを踏まえて次の章です。



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



• では実際に GUI を組んでみよう！

• コレ、マジ超簡単なんで！！右下のツールパレットからコンポーネントを選ぶ！

僕の環境はカスタマイズ（Classic Undocked）しているので画面上部から選びますが…



• ドラッグ＆ドロップ

• ダブルクリック

• 置きたいフォームをクリック

のどれかをすると、GUI 部品が置けます！

置けた！



• ここで GUI 部品について

– コントロール

• ユーザーとコミュニケーションを取る物

• TControl クラスから派生

– コンポーネント

• なんか色々ひっくるめて！

– コントロール、非ビジュアルコンポーネントなど

• TComponent クラスから派生



• TControl

– ボタンやラベルといったユーザーが触ったり、内容を読んだりする物

• 名前空間：FMX.Controls.TControl

– FireMonkey では、TStyledControl から派生した物を主に使います

• スタイルが適用できるコントロール

– スタイルについては後で



• 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!

ブラーかかったよ！！！



超簡単ですね！！

ですが、ここで思い出して欲しいのです。

この画面がフォームデザイナだと言うことに

つまり、まだ完成したアプリでは無い…

なのに、エフェクトがかかったりする…



Delphi フォームデザイナのスゴいところ

フォームデザイン中

コンポーネントは

実際に動作しているッ！！



• だから、変更はリアルタイムに反映されます。

ココを変えたら、コッチも変わった！



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



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



• さっきのプログラム実際に動かしてみると…

え！なにこれ！かっこわる！！Windows 丸出しじゃん！！マルチプラットフォームなんて無理じゃん！



• ここで、スタイルの登場です。

• TStyleBook コンポーネントをフォームに置いてみるよ！

これ

おもむろにダブルクリック！



• 謎の画面開いた…



はい！これがスタイルエディタです！！

って言われても、なんだか判らない！

とりあえず、スタイルを見せつけます。

読み込みボタンを押してDark.style を読むよ！



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



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



なんも変わってなくね！！

まだ、あわてるような時間じゃ無い



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

すると…



なんか黒くなった！！実行してみると…

キター！

先ほどとは違う黒く引き締まったボディに…！



こんな感じでスタイルがあるのですが…

スタイルにはモバイル OS 用のスタイルが用意されているのです…！

iOS だったり

Android だったり



スタイルは自由に何個でも置けます。

これの意味するところは…

FireUI !



• FireUI とは

– マルチプラットフォームアプリケーションをデザインする上で必須の機能。

フォームデザイナの右上に注目！ココをドロップすると

こんな物が！



デザイナがAndroid に！！



• FireUI とはフォームを継承する仕組み

マスタフォーム

継承フォーム

継承フォーム

ボタン

ボタン

ぼたんやコンポーネントは全てのフォームに現れるがプロパティ（位置とか色とか全部）は別個に設定出来る！



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



プロパティを別個に設定できるという事は…

プラットフォームに合わせてスタイルを変更できる！



• FireUI を使うと、Desktop, Tablet と Phone などをいっぺんにデザインできてしまいます。

• しかも、プロパティを変更できるので

– Desktop には、このボタンが欲しい

– Phone には、煩雑だからいらない

と言うこともできます。

• Visible プロパティの変更



さらにこれらをデザインしやすくする

TMultiView

というコンポーネントがあります。

コレを使うと Android の Fragments と同じ事ができてしまいます。

が、さすがに…これ以上聞くのは大変だと思うので、とりあえず割愛



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



• FireMonkey の描画について

– FireMonkey は全て自分でコントロールを描画しています。

OS 方法

Windows DirectX

OS X OpenGL

iOS OpenGL ES

Android OpenGL ES




– この結果、画面解像度（画素密度）に応じて描画密度を変更しています。

– しかも、自動で！！

作ったアプリ

1024 x 768

作ったアプリ

1920 x 1080

今までは、こんな風に解像度が変わってもアプリの大きさは、そのまま来たるべき超高解像度時代では小さくて使いづらくなっちゃう！！




作ったアプリ

1024 x 768

FireMonkey では解像度が変わっても画面比率が変わらない！

作ったアプリ

2560 x 1440

スゴくない！？



• 解像度からの解放

– Android のように多くの解像度があったり

– 最近では iOS も色々な解像度あるし

– Windows でも IGZO 液晶のノートがあったり

– OS X だって Retina ディスプレイの物と、そうじゃないないのがあったり…

FireMonkey を使うと！

こういった悩みから解放される！！



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

そうでもない！！



• FireMonkey のレイアウト戦略

– FireMonkey では

•Align

•Anchors

– というプロパティでコントロールの位置を相対的に指定できる！



• Align プロパティ

– 左寄せ、右寄せ、センタリング、といった配置を指定できる

• 指定可能な配置はメチャクチャあります



• Anchor プロパティ

– Anchor（いかり）を下ろして位置を固定する

– いかりの位置に引っ張られる



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

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



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



これらのプロパティを上手に使うと比率が変わってもデザインが崩壊しません！

さらに、FireMonkey には

TScaledLayout

TGridLayout

TFlowLayout

などの多彩なレイアウトコンポーネントもあります。

これらを使うと自分でAnchor/Align を設定しなくても自動的に再配置されます。

とはいえ、これも長くなるので初級編では割愛…



素材についても FireMonkey ならではのアプローチがあります。

TMultiResBitmap 多重解像度ビットマップ

TPath SVG などのベクター画像

という２つのコンポーネントがあります。

これらを上手く使う事えば様々な解像度に対応できます。



というわけで、ざっと

DelphiFireMonkey HD

を紹介しました。メチャクチャ簡単にアプリが作れるってことが、判って頂けたでしょうか？

そして、FireMonkey は、3D も操れるのです！それは、FireMonkey 3D といいます！

それはまた別の機会に…※勉強会では、このあと FireMonkey 3D の話がありました

delphi debut tokyo #1 - firemonkey hd の基本

Software