21st Embarcadero Developer Camp

プレゼンテーション資料

第

21回 エンバカデロ・デベロッパーキャンプ

2012年3月9日～10日

時間 セッション概要 14:00～14:30 【G1】オープニングセッション 「2012年 - エンバカデロの製品戦略」 エンバカデロ・テクノロジーズ 日本法人代表 藤井 等 14:30～15:30 【T2】テクニカルセッション 「実践！Delphiデバッグテクニック」 株式会社シリアルゲームズ 取締役・シニアエンジニア 細川 淳 15:30～15:40 休憩 15:40～16:40 【T3】テクニカルセッション 「Delphi/C++Builder + FastReportで作る実用レポート出力」 株式会社ドリームハイブ 代表取締役 山本 悟 16:40～16:50 休憩 16:50～17:50 【T4】テクニカルセッション 「FireMonkeyファーストインプレッション」 有限会社エイブル 富永 英明 17:50～18:00 休憩 18:00～20:00 【W5】 ワークショップ 「FireMonkeyアプリケーション構築実習」 司会：エンバカデロ・テクノロジーズ エヴァンジェリスト 高橋智宏 20:00～20:30 休憩・移動

プログラム

3月9日

時間 セッション概要 9:00～9:50 【W6】ワークショップ 「挑戦！Delphiクイズで実力チェック」 エンバカデロ・テクノロジーズ エヴァンジェリスト 高橋智宏 9:50～10:00 休憩 10:00～10:50 【T7】テクニカルセッション 「RadPHPでスマホアプリを作ろう！」 エンバカデロ・テクノロジーズ エヴァンジェリスト 高橋智宏 10:50～11:00 休憩 11:00～11:50 【T8】テクニカルセッション 「Delphi言語再入門」 株式会社シリアルゲームズ 取締役・シニアエンジニア 細川 淳 東洋テクニカルシステム株式会社 システム開発部 福士 光 11:50～12:00 休憩 12:00～12:50 【T9】テクニカルセッション 「Delphi/C++BuilderでiOS/Macアプリを作ろう！」 エンバカデロ・テクノロジーズ エヴァンジェリスト 高橋智宏 3月10日 ネットワークの使用について ・ セッション会場では、無線LANをご利用いただけますが、オンライン配信パフォーマンスに影響を与える恐れがあ るため、 会場無線LANを用いたUstream、GotoWebinar、YouTube等のビデオ視聴、その他のダウンロードなどはお控えください。

17Th Developer Camp

「実践！Delphiデバッグテクニック」

株式会社シリアルゲームズ 取締役 細川 淳

【T2】テクニカルセッション

17Th

Developer Camp

IDE統合デバッガ

Delphi の IDE 統合デバッガ

•

IDE 統合デバッガについて

「表示」

→「デバッグ」で表示さ

17Th

Developer Camp

ブレークポイント一覧

ブレークポイント一覧

ブレークポイント一覧では、一覧以外にも、プロパティや有効無効、データブレークポイ ント、アドレスで設定、などなど豊富な機能が利用できます。

ブレークポイント一覧ープロパティ（条件）

•

ブレーク条件とパスカウント

–

プロパティを開くと「ブレーク条件」と「パスカウント」という

項目があります。

–

ブレーク条件

• if 文の条件式と同じように条件を書けます

– たとえば「A <> 0」などのように条件を書けます

–

パスカウント

• そのブレークポイントを何回通った時に停止するかを指定

できます。

– たとえばパスカウントに 3 を指定すると３回目にブレークポイ ントを通った時に停止します。

ブレークポイント一覧ー複数の条件

•

ブレークポイントで特筆すべきはもう１つ

–

同じ行に違うプロパティを持つ複数のブレークポイントを

ブレークポイント一覧ー複数の条件

•

複数の条件を持たせるには「既存のブレークポイントを

残す」を利用します。

–

これによって、違う条件を持った複数のブレークポイントを

設定できます

• 注意したいのは、これは「ブレークポイント一覧」ウィンドウ

からプロパティを表示した時にしか現れないチェックです

ブレークポイント一覧ーブレークポイントの種類

•

ブレークポイント一覧では次の３つのブレークポイントを

設定できます

名前 概要 設定可能な状態 ソースブレークポイント ソースコード上の任意の行に設定できるブレークポイントです 通常時・実行時 アドレスブレークポイント _{アドレスに対して設定できるブレークポイントです} 実行時 データブレークポイント 変数などのデータが変更される時にブレークするブレークポイントです 実行時 • アドレスブレークポイント アドレスブレークポイントはユーザーにプログラムを納品した後に威力を発揮します。 例外発生ウィンドウにはアドレスが出ています。 ユーザーから冷害発生時のアドレスを聞いて、そこで停止するようにすれば、例外の 原因を追うことができます。 • データブレークポイント データブレークポイントはデータ（変数）の変更時に停止します。

ブレークポイント一覧ーその他のブレークポイント

•

モジュールロードブレークポイント

–

ブレークポイント一覧からは設定できず「実行」

→「ブレー

クポイントの追加」

→「モジュールロードブレークポイント」

から設定できます。

–

DLL など他のモジュールを使っている場合に、モジュー

ルがロードされると停止できます。

17Th

Developer Camp

ブレークポイントの

デモンストレーション

17Th

Developer Camp

呼び出し履歴と

ローカル変数

呼び出し履歴

•

呼び出し履歴はいわゆる「スタックトレース」です。

•

ブレークポイントで止まるまでに呼び出されたルートを記

録しています

呼び出し履歴ーローカル変数

•

ローカル変数ウィンドウは呼び出し履歴と密接に関連し

ています。

•

呼び出し履歴で呼び出された単位ごとにローカル変数

17Th

Developer Camp

呼び出し履歴の

17Th

Developer Camp

スレッドの状態と

モジュール

スレッドの状態

• 現在動いているスレッドの状態を示しています。 – カレントスレッドを変更したり、実行させないように凍結したりといった操作ができます。 – また、ブレークポイントで特定のスレッドでのみブレークさせたい場合は、このウィンド ウで表示されているスレッドIDを指定できます。 • TThread のインスタンスなど同じコードが複数のスレッドから呼ばれるときに便利 です。

モジュール

• 現在のプロセスにロードされているモジュールの一覧を取得できます。 • ここで、モジュールロードブレークポイントを置くこともできます。

17Th

Developer Camp

スレッドの状態と

モジュールの

17Th

Developer Camp

イベントログ

イベントログ

•

イベントログは、気軽に使えるデバッグツールです

–

OutputDebugString を使っていわゆる「printfデバッグ」

ができます

–

ブレークポイントの停止時にスタックトレースを出力するこ

ができます

–

Windowsメッセージを出力できます

イベントログーOutputDebugString

•

OutputDebugString は Win32 API です。

–

呼び出したプロセスにアタッチされているデバッガがある

ときに、文字列をデバッガに渡します。

–

Delphi では当然、統合デバッガに文字列が渡ります。

• 統合デバッガは、受け取った文字列をイベントログに出力し

ます。

OutputDebugString を使って出力したログ

イベントログーメッセージ

•

イベントログには Application が受け取ったメッセージを

イベントログーメッセージ

17Th

Developer Camp

イベントログの

17Th

Developer Camp

言語で用意されるデバッ

グ機能

デバッグの容易さ

•

モダンな言語ではデバッグ作業も重視されています。

•

たとえば Java では、VM 上での動作となるため、ほぼ

全ての例外をキャッチできます。キャッチした例外オブジ

ェクトから詳細を知ることで、デバッグに生かすことがで

きます

– ネイティブ言語から考えると Null ポインタへのアクセスを例外としてキャッチ でき、かつ、その後、続けて実行できるなんて驚異です。

•

もちろん、Delphi 言語も例外なく、デバッグのための機

能が用意されています。

Assert の使用

• Assert は、System ネームスペースに用意されているグローバルな手続 きです。 – 実態はコンパイラマジックによって System._Assert へ変換される特 殊な手続きです。 • Assert を使うと、任意の条件で例外（EAssertionFailed）を発生させます

– Assert の第一引数が false の時 EAssersionFailed 発生

• 例えば Assert(Sender is TButton); とすると Sender が TButton では「無かったとき」例外を発生させます。

• $ASSERTIONS ON/OFF （もしくは $C +/-）指令を使ってコンパイラに直 接 Assert のコード生成を抑制させることができます。

Assert の使用

•

Assert の内部を見ると AssertionFailed 発生時に

AssertErrorProc という手続きを呼んでいます。

•

AssertErrorProc はグローバルな変数です。

•

AssertErrorProc の中身を自分のハンドラに変えると、

詳細な情報を得られます。

Assert の使用ーAssertErrorProc

procedure AssertErrorHandler(

const iMsg, iFilename: String; const iLineNo: Integer;

const iAddress: Pointer); var Err: String; begin Err := Format( '%s (%s line %d @ %x)',

[iMsg, iFilename, iLineNo, Integer(iAddress)]);

ShowMessage(Err); end;

procedure TForm1.FormCreate(Sender: TObject); begin

AssertErrorProc = AssertErrorHandler; Assert(false);

Assert の使用ートリック

•

AssertErrorProc を使うとエラーが発生したユニット、行

番号、アドレスなどが判ります。

•

これを利用して任意の例外で、ユニットや大まかな行番

Assert の使用ーAssertErrorProc

procedure AssertErrorHandler( const iMsg, iFilename: String; const iLineNo: Integer;

const iAddress: Pointer);

begin 省略 end;

procedure TForm1.FormCreate(Sender: TObject);

var SL: TStringList; begin AssertErrorProc = AssertErrorHandler; SL := nil; try SL.Add('TEST'); except

Assert(false); // except 内で Assert を呼び AssertErrorProc を実行させる

end;

17Th

Developer Camp

Assert の

TApplication.OnException

•

TApplication.OnException というイベントハンドラがあ

ります。

•

これは例外が発生したときに呼ばれ、例外処理を自前

の処理に置き換えることができます。

–

デフォルトでは例外ダイアログが表示されますが、それを

ログファイルに出力するように書き換える事もできます。

System.NoErrMsg

•

NoErrMsg について、ついでに紹介します。

•

このグローバル変数を True に設定すると、エラーダイ

アログが出ません。

•

何らかの理由でエラーダイアログを表示したくない場合

に TApplication.OnException とともに設定しておくと良

いかもしれません。

その他にも

• TVirtualMethodInterceptor を使うとメソッド呼び出しの後に処理を実行 できます。 • Exception.StackTrace プロパティには簡易な呼び出し履歴が入ってい ます – Exception.GetExceptionStackInfoProc や Exception.GetStackInfoStringProc を置き換えたり、 Exception.RaiseOuterException を利用するとサードパーティー製（ 自前）の例外処理を追加できます。 • class helper を使えば任意のクラスのデータを公開することもできます。

17Th

Developer Camp

付録：外部ツール

17Th

Developer Camp

EventViewer

(System Log)

EventViewer

•

サービスプログラムやサーバープログラムなど GUI を

持たないプログラムではログが重要です

•

自前のログシステムでログを吐くことも、もちろんできま

すが Windows の SystemLog を使うこともできます。

•

Windows の SystemLog はイベントビューアで見ること

ができます。

EventViewerー書き込む（ソース抜粋）

procedure TEventLog.Add ( const iLogType: TLogType;

const iCategory, iEventId: Integer; const iMsg: String;

const iDataLength: Integer; const iData: Pointer);

var

Ptr: Pointer;

begin

Ptr := PChar(iMsg);

FHandle := RegisterEventSource(nil, PChar(FName)); try

ReportEvent( FHandle,

Ord(iLogType), // Event Type 0, // Category 0, // Event Id nil, // User Sid

1, // 書き込む文字列の数 iDataLength, // 書き込むバイナリデータのバイト数 @Ptr, // 書き込む文字列（ポインタのポインタ） iData); // バイナリデータ finally DeregisterEventSource(FHandle); end;

17Th

Developer Camp

EventViewer の

17Th

Developer Camp

EurekaLog

EurekaLog

• EurekaLog はパワフルなデバッグ用ツールです • 全ての例外、無限ループ、メモリの未解放などを検出できます • しかも！検出した例外はスタックトレース、スクリーンショット、逆アセンブル 結果などの情報付きで実行先から送信可能です。 • 入手先： http://eurekalog.com/ – シングルデベロッパーライセンスで 99ドル

EurekaLog

• エラーが発生するとエラーダイアログが表示されますがEurekaLog を組 み込んだ実行ファイルでは EurekaLog のエラーダイアログが表示され ます ちなみにちゃんと設定すれば、このダイ アログに出る文言はローカライズできま す email クライアントで添付として送ったり、 EurekaLog が搭載する SMTP サーバ を介して送ったり、BugZilla 形式のウェ ブにポストしたりと色々な形式でバグリ ポートを送信できます

EurekaLog

• EurekaLog が送ってきたレポートは、専用のビューアでこんな感じに表 示されます

17Th

Developer Camp

EurekaLog の

17Th Developer Camp

Delphi/C++Builder

+ FastReportで作る

実用レポート出力

株式会社ドリームハイブ

代表取締役 ITコンサルタント

山本 悟

ドリームハイブとは

•

システム開発、ITコンサルティングの会社

–

http://www.dreamhive.co.jp/

–

http://twitter.com/dreamhive_jp

•

dHive：ドリームハイブのコンテンツ配信サイト

–

http://dhive.jp/

•

DH-APPLI：「軽い」「便利」「使いやすい」なソフトたち

–

http://dhive.jp/dhappli/

•

代表取締役 山本 悟

–

ブログ：http://dhive.jp/blog/yama/

–

facebook：http://www.facebook.com/kryu2

本日の流れ

1.

まずはFastReportの特徴をチェック！

2.

実用的なレポートってナニ？

3.

デモ

4.

注意！Editionによって使えない機能があります！

5.

他のレポート製品からの移行について

6.

まとめ！

1.まずはFastReportの特徴をチェック！

• Delphi 4〜XE2,C++ Builder 6〜XE2をサポート

– ※日本語版は Delphi 2009 / C++Builder 2009 以降のサポート

– ※ただし、他のレポートツールからのコンバート用にDelphi 4～XE2、C++Builder 4～XE2 に対応している

英語版が提供されます

• UNICODEをサポート • 競合製品に比べて安め

• Delphiの実行用バイナリにライブラリごと埋め込むことが可能

• デザインしたレポートは、埋め込むことも、外部ファイルとして参照することも可能 • バンドによるレポート構成なので、Quick ReportやRave Reportから移行しやすい • 縦型バンドもあります

• テキスト、画像、線・図形はもちろん、チャート、バーコード、クロステーブル、OLEオブジェクト、リッチテキ

スト、などが使用可能

• ランタイムデザイナを搭載、しかもロイヤリティフリー

• レポート内にデータセット(ADO, BDE, DBX, IBX, FIB)を組み込み事が可能 • Script(FastScript)に対応(PascalScript, C++Script, BasicScript, JScript)

• プリンタ以外にも出力先が指定可能(PDF, RTF, XLS, XML, HTML, JPG, BMP, GIF, TIFF, TXT, CSV,

ODF)

2. 実用的なレポートツールってナニ？

• (日本では多くの場合) 「紙で存在している帳票の再現性が高いこと」 • この結果を得るツールは次の要件を満たす必要がある – 自由にオブジェクトの配置ができること – フォントが指定できること(日本語フォントは複雑！！) – データの繰り返しができること – 表が作れること – プレビューが正確であること – 条件によって表現(色・フォントなど)が変えられること • 業種/場合によって・・ – バーコード印刷 – Excel/PDF出力 – ドット マトリックスプリンター用の出力

3. デモ：本日作るデモアプリケーション

•

概要

– 次の機能を利用したデモアプリケーションの構築を行います

•

機能一覧

– プレビュー – レポートデザインの埋め込み、外部ファイルの参照 – HTMLタグによる装飾 – データベース コンポーネントとの接続 – マスター・詳細レポート – チャート – スクリプトによる拡張 – プレビュー画面のツールボタンのカスタマイズ

デモ：レポートデザイナーの画面構成

• 画面構成の紹介 – RAD Studioライクのデザイナ – コンポーネントパレット – レポート オブジェクト ツリー – オブジェクト インスペクタ – データ ツリー – ワークスペース • コンポーネントパレットの紹介 – バンドオブジェクト – ・・・ – ドローオブジェクト

4. 注意！Editionによって使えない機能があります！

Embarcadero RAD Edition Enterprise Edition

RunTime end-user

designer × ○

Vertical Bands × ○

Cross Tabs × ○

Dialog forms designer × ○

Interbase Express (IBX), IBOjects, ActiveX Data Objects (ADO), dbExpress support

× ○

Excel Binary × ○

Excel XML × ○

5. 他のレポート製品からの移行について

•

移行可能な他社製のレポート製品は？

–

QuickReport

–

RaveReport

–

ReportBuilder

•

移行可能なデータは帳票データのみ

–

埋め込みスクリプトなどは手動で移行する必要があります

–

帳票を生成するためのコード(DelphiやC++Builderの)は手動で

移行する必要があります

•

その他

–

ライセンスが有効なQuickReportと、

それが動作するDelphi/C++Builderの環境があること

–

Embarcadero EditionではないFastReportのライセンス

他のレポート製品からの移行の流れ

1. FastReport(日本語版)を、既存の開発環境(Delphi4～XE、C++Builder6～XE)上にインストール する 2. QuickReportを使用している既存プロジェクトを既存の開発環境で開く 3. FastReportに付属するコンバート用ユニット「ConverterQR2FR.pas」を既存プロジェクトに追加 する

製品版：C:¥Program Files (x86)¥FastReports¥FastReport 4¥Source

4. QuickReportの帳票データをFastReportの帳票データ(.fr3)に変換するコードを実行する。

5. Delphi XE2、C++Builder XE2で、新規にVCLフォームアプリケーションを作成するか、もしくは既 存プロジェクトを開き、XE2に付属するFastReportコンポーネントをフォーム上に配置する 6. FastReportの帳票デザイナを開き、変換済みの帳票ファイル(.fr3)を読み込む 7. QuickReport用のコードは、手動でFastReport用のコードに置き換える必要がある 3. 帳票データを変換するコード(Delphi) FReport := TfrxReport.Create(self); conv := TConverterQr2Fr.Create;

他のレポート製品からの移行の流れ

変換元 変換先

RAD Studioの

バージョン

Delphi4～XE、

C++Builder6～XE C++Builder XE2 Delphi XE2、

プログラムコード 元コード 手動で変換＞＞ FastReport用コード

6. まとめ！

• UNICODE対応なので多言語環境でもOK！ • 旧バージョンのDelphiもサポートしているので、既存プロジェクト、旧OSと の互換性を持たせたい場合でも安心！ – ※日本語環境で制限有り(提供される英語版で解決可能) • ライブラリはコンパクトであり、実行用バイナリに埋め込むことができる！ • 配布アプリケーションへレポートデザイナーを含めることができる、しかも ロイヤリティフリー！ • DBXにも対応し、今後のRAD Studio製品によるDBアプリケーションの開 発でも安心！ これらの特徴を持つレポーティング ツールは・・・

FastReportだけ！

参考：ネット上のリソース

•

株式会社エージーテック

–

http://www.agtech.co.jp/

•

FastReports Inc.

–

http://www.fast-report.com/

•

他のレポートツールからのコンバート

–

http://www.agtech.co.jp/support/faq/fastreport/fastr

eport_vcl/convert/

17Th Developer Camp

「 FireMonkey

ファーストインプレッション」

有限会社 エイブル 富永 英明

【T4】テクニカルセッション

17Th

Developer Camp

はじめに

FireMonkey の存在意義

FireMonkey で使用する軽量 GUI コントロールのベースには、クロスプラッ トフォーム用の抽象表現があり、それが Windows、Mac OS X、iOS 用に実 装されています。 軽量コントロールとはすべてのピクセルを FireMonkey で描画するという意 味で、ネイティブの（重量）コントロールは使われません。 このアプローチでは、ホスト プラットフォームに対する忠実度よりもプラットフ ォームをまたがった忠実度を優先するため、重量クロスプラットフォーム フレ ームワークにつきものの "最小公倍数" の問題を回避し、FireMonkey で独 自のコントロールやアプリケーション設計規則を作成することができます。 DocWiki 「FireMonkey アプリケーションの設計」 より

イロイロとゴタクを並べようと思いましたが...

• 他にやりたい事があるので省略します。

<!> WARNING <!>

GotoWebinar 経由で参加している方は、

この時間を利用してスクリーンショットを撮る

ツールをご用意下さい。

17Th

Developer Camp

FireMonkey

アプリケーション

FireMonkey HD アプリケーション

TForm HD (2D) コントロール 3D コントロール TViewPort3D

FireMonkey 3D アプリケーション

3D コントロール TForm3D TLayer3D HD (2D) コントロール

HD (2D) コントロールと 3D コントロール

HD (2D) コントロール 3D コントロール

Additional 3D Layers Colors 3D Scene Common Controls 3D Shapes Dialogs Effects Grids Layouts Shapes Standard System

親子関係

FireMokey のコントロールは何でも親子関係にできる。 • 親コントロールを移動すると、子コントロールも一緒に移動する。 • 親コントロールの ClipChildren プロパティを True にすると、 配置された子コントロールは親コントロールの外に配置できなくなる。 TEdit の子として TLabel を配置すると、 VCL の TLabeledEdit 同等のものが 作れる。 TButton の子として TImage を配置する と、_{VCL の TBitBtn 同等のものが} 作れる。

HitTest プロパティ

HitTest プロパティはマウス押下を処理するかどうかを指定する。 HitTest プロパティが False だと、 マウス押下イベントは透過的に親コントロールに伝えられる。 先程の例だと、TImage をマウスで 押下しても、ButtonClick 処理は 発生しない。 HitTest のイメージ。 赤の短い矢印が HitTest = True、 緑の長い矢印が _{HitTest = False。}

スケール

• VCL で ChangeScale() を使った場合、任意の倍数を指定しても、 コントロールのサイズがフォントに依存する (またはその逆) 事が あるため、思ったようなスケール変更ができない事があった。 • FireMonkey のコントロールはそもそも独自描画されているため、 スケールを変更してもコントロールサイズ / フォントサイズが破綻しない。 • HD (2D) コントロールの場合、Scale プロパティには X / Y があり、 縦 / 横それぞれの縮尺を変更できる。 • 3D コントロールの場合、加えて Z (奥行き) の縮尺を変更できる。 • マウスオーバー時にコントロールのスケールをアニメーション (後述) する事で、視覚効果を狙うことができる。

回転

• ハードウェアによる画面の回転では、一瞬画面が消える上に、 1～2 秒 (ハードウェア依存) 程度のタイムラグが発生する。 • FireMonkey の回転はコントロール単位で行え、 入力系のコントロールは回転した状態で入力可能。 • RotationAngle プロパティで時計回りに回転する。 • HD (2D) コントロールの場合、 回転軸を RotationCenter プロパティで指定する事ができる。 指定する値は比率で、X=0 / Y=0 の場合にはコントロールの左上、 X=0.5 / Y=0.5 の場合にはコントロールの中央、 X=1 / Y=1 の場合にはコントロールの右下が回転軸となる。

アニメーション

フィルムアイコンがないプロパティでも、型さえ合っていれば アニメーションが使える。 1. [Animations] にあるコントロールを子コントロールとして貼りつける。 2. PropertyName プロパティでアニメーションさせたいプロパティを設定。 [FireMonkey のアニメーション効果 (DocWiki)] http://docwiki.embarcadero.com/RADStudio/ja/FireMonkey_のアニメーション効果 フィルムアイコンのあるプロパティには、オブジェクトインスペクタから、 各種アニメーションを設定できる。

LiveBinding (1)

• データベースとバインディングする事によって TDBGrid のようなものを

LiveBinding (2)

TBindList

バインディングソース バインディングターゲット

procedure TForm1.Edit1Change(Sender: TObject);

begin BindingsList1.Notify(Sender, ''); end; 変更通知 (Notify) サンプルフォルダ中の LiveBindings¥bindexpression¥fmx にある _{SynchControlsSampleProject が参考になる。} (双方向バインディング等のサンプルもある)

パス (その1)

• TPathLabel [Standard] • TPath [Shapes] • TPath3D [3D Shapes] で、共通するパス。 • M が MoveTo (絶対値) X, Y • L が LineTo (絶対値) X, Y • Z が描画終了 詳細は以下を参照の事。 [パス マークアップ構文 (MSDN)] http://msdn.microsoft.com/ja-jp/library/ms752293.aspx M 5,20 L 35,20 L 10,40 L 20,10 L 30,40 Z

パス (その2)

• 「簡単なパスはいいけど、複雑なパスはメンドイよ！」 では、GUI でパスデータを作ってしまいましょう。 1. InkScape (http://inkscape.org/index. php?lang=ja) でパスデータ 2. SVG をテキストエディタ で開き、パスデータ部分をコ ピーする。 3. RAD Studio のパスデザ イナにパスデータを貼り付 ける。

17Th

Developer Camp

FireMonkey HD (2D)

コントロールの概要

要注意コンポーネント (1)

• VCL と同名のコンポーネントには面食らってしまうかも？ • TComboBox [Standard] キーボードからの文字入力を行う必要がある場合には TComboEdit を 使う。Items プロパティは public なので、オブジェクトインスペクタから設定 する事はできない。以前は Items プロパティそのものがなかったらしい。 • TMemo [Standard]

Update 3 以前だと、Lines プロパティは public なので、

オブジェクトインスペクタから設定する事はできない。

• TPanel [Standard]

Caption プロパティはない。TLabel を子コントロールとして貼りつければ VCL 版と同等の事ができるが、レイアウトのためだけに使うのであれば、 TLayout の方が使い勝手がいい。

要注意コンポーネント (2)

• TImage [Shapes] VCL の TImage と同等。画像はアスペクト比を保ったまま、 自動的に拡大/縮小される。画像はコントロールの中央に配置される。 • TImageControl [Standard] TImage と同等だが、背景は透過しない。フォーカスを持つ。 • TImageViewer [Additional] 背景は透過しない。自動的に拡大/縮小しないが、 BestFit() メソッドを呼ぶと、画像サイズをアスペクト比を保ったままコント ロールサイズに合わせる事が可能。コントロールサイズよりも画像の方 が大きい場合、マウス / タッチ操作によるパニングが可能。また、マウス ホイールで拡大/縮小も可能。 • TPaintBox [Shapes]

21

要注意コンポーネント (3)

• TToolBar [Standard] フォーム上部に張り付く TPanel のようなもの。ボタンを作る機能はない。 TSpeedButton 等を子コントロールとして配置する事で VCL 版と同等の 機能を実現可能。 • TStatusBar [Standard] フォーム下部に張り付く TPanel のようなもの。 パネルを作る機能はない。SimpleText プロパティもない。 TLabel 等を子コントロールとして配置する事で VCL 版と同等の機能を 実現可能。 • TSpeedButton [Standard] Gryph プロパティを持たないので画像付きボタンにはできない。 TImage を子コントロールとして配置する事で VCL 版と同等の機能を実 現可能。

要注意コンポーネント (4)

• TColorBox [Colos] 同名の VCL と同等なのは TColorComboBox の方。 用途が全く違うので、VCL の TColorBox なのか FMX の TColorBox な のか、ハッキリ区別した方がいい。 • TStringGrid [Grids] かなり作法が違う。VCL 版の ColCount プロパティはなく、 代わりに ColumnCount プロパティがあるが、ReadOnly なプロパティであ り、これを用いてカラムを増減させる事はできない。

TStringGrid (1)

TStringGrid (2)

以下のようなコードを記述する。 // カラムを 3 つ作成 StringGrid1.AddObject(TStringColumn.Create(StringGrid1)); StringGrid1.AddObject(TStringColumn.Create(StringGrid1)); StringGrid1.AddObject(TStringColumn.Create(StringGrid1)); // カラムヘッダを設定 StringGrid1.Columns[0].Header := 'フィールド1'; StringGrid1.Columns[1].Header := 'フィールド2'; StringGrid1.Columns[2].Header := 'フィールド3'; // データは 50 行 StringGrid1.RowCount := 50; // データ (1 行目) StringGrid1.Cells[0, 0] := 'aaaaa'; StringGrid1.Cells[1, 0] := 'bbbbb';

TStringGrid (3)

TStringGrid (4)

TStringGrid のカラムは TColumn から派生した TStringColumn で 構成されている。これがカラムコントロール。

TStringGrid (5)

こんなコードで左/中央/右寄せできるのでは？ セルコントロールは VCL の TStringGrid で言うインプレースエディタ。 TStringGrid のカラムコントロールであ る TStringColumn が生成するセルコン トロールは TTextCell。

TTextCell = class(TEdit) なので....

procedure TForm1.Button1Click(Sender: TObject);

begin

TEdit(StringGrid1.Columns[0].CellControlByRow(0)).TextAlign := TTextAlign.taLeading; TEdit(StringGrid1.Columns[1].CellControlByRow(0)).TextAlign := TTextAlign.taCenter; TEdit(StringGrid1.Columns[2].CellControlByRow(0)).TextAlign := TTextAlign.taTrailing;

TStringGrid (6)

予想通りできました。 ...が、実はこの方法には問題がある。 セルコントロールは表示されている範囲のものしか生成されない。 つまり、見えていないセルの TextAlign は設定できない。 Assigned() を使ってセルコントロールの存在確認をする方法もあるが、 たかだか左/中央/右寄せのためにそんなにコード書かなくては

TStringGrid (7)

別途カラムコントロールを作ってやれば解決する。ソースはこれだけ。 { TStringColumn_Center }

TStringColumn_Center = class(FMX.Grid.TStringColumn) protected

function CreateCellControl: TStyledControl; override; end;

{ TStringColumn_Right }

TStringColumn_Right = class(FMX.Grid.TStringColumn) protected

function CreateCellControl: TStyledControl; override; end;

...

{ TStringColumn_Center }

function TStringColumn_Center.CreateCellControl: TStyledControl;

begin result := inherited; TEdit(result).TextAlign := TTextAlign.taCenter; end; { TStringColumn_Right }

function TStringColumn_Right.CreateCellControl: TStyledControl;

begin

result := inherited;

TEdit(result).TextAlign := TTextAlign.taTrailing;

end;

TStringGrid (8)

procedure TForm1.FormCreate(Sender: TObject);

begin

// カラムを 3 つ作成

StringGrid1.AddObject(TStringColumn.Create(StringGrid1)); // 左寄せ StringGrid1.AddObject(TStringColumn_Center.Create(StringGrid1)); // センタリング StringGrid1.AddObject(TStringColumn_Right.Create(StringGrid1)); // 右寄せ

...

FireMonkey 固有のコンポーネント (1)

• FireMonkey HD アプリケーションのフォームにはとりあえず

TScaledLayout を Align = alFit で貼ってみる。

フォームをリサイズすると コントロールサイズや、

FireMonkey 固有のコンポーネント (2)

• TSelection を使うと簡単にフォームデザイナが作れる。 • 子コントロールの HitTest プロパティを False に設定。 • 子コントロールの Align プロパティを alClient に設定。 ...たったこれだけ。 • TSelection の HideSelection プロパティを True に設定すると セレクションポイントが非表示になる。 • TSelection の Proportional プロパティを True に設定すると アスペクト比を保った拡大/縮小が

FireMonkey 固有のコンポーネント (3)

• [Effects] にあるコントロールは画像コントロールに限らず、 任意の FMX コントロールに対して適用する事が可能。 以下は TButton にエフェクトを適用した例。

17Th

Developer Camp

FireMonkey 3D

コントロールの概要

• TGrid3D 位置関係を示すスケールとして使う。 色は LineColor で指定。 マス目のサイズは Frequency で指定。 Marks に指定したサイズの倍数の時に グリッドの線は細線になる。 • TStrokeCube ワイヤーフレームの立方体。 色は Material.Diffuse で指定。

[3D Shapes] - その1

• TCube 立方体 (直方体にもできる)。 テクスチャは 6 面に貼られる。 • TRoundCube 角が丸い立方体。テクスチャは前面と 背面をメインに貼られる。 • TPlane 板。テクスチャは前面に貼られる。 • TDisk 円盤。Updete 4 で追加された。

[3D Shapes] - その2

• TSphere 球体。テクスチャは球面に貼られる。 • TCylinder 円柱。三角柱や、六角柱も作れる。 • TCone 円錐。三角錐や、四角錐も作れる。 SubdivisionHeight は高さの 分割数を指定する (分割数 = 2)。 縦横比 1 : 2 のテクスチャが 使えます。

？

[3D Shapes] - その3

• TEllipse3D 円を押し出した形状 (円柱) の 3D オブジェクト。 • TRectangle3D 長方形を押し出した形状 (四角柱) の 3D オブジェクト。 • TPath3D パスで描かれた図形を押し出した形状の 3D オブジェクトを作り出す事ができる。 • TText3D 文字列を押し出した形状の 3D オブジェクト。

[3D Shapes] - その4 (TMaterial)

反射色なので、ライトが必要。Update 3 以前では Specular は効果がない。 • Emissive (自己) 発光色を指定する。 • Modulation – tmModulate シェイプの色とテクスチャの色を ミックスする。 – tmReplace 鏡面反射の強さは Shinness で指定する。

[3D Shapes] - その5 (半透明の表現)

半透明のシェイプを作るには、Diffuse にアルファカラーを設定する。 以下は 2 重の Sphere で、外側の Sphere を半透明にしてみた所。 • Ambient: #FF404040 • Diffuse: #00404040 • 作成順：外側→内側 • Ambient: #FF404040 • Diffuse: #00404040 作成順： 内側→外側 • 半透明のオブ ジェクトは 後で描画する ようにしなくて はならない。 • 複数の半透明 オブジェクトが あるのなら、 遠くのものから 描画しなくては ならない。

[3D Scene] - その1 (ライト)

• TLight は外部光。3D Shape の反射光のプロパティに影響を及ぼす。 点光源。無指向性なので放 射状に照らす。ライトからの 距離で光の強さが変化。 光を当てる方向はライトの スポット光源。指向性がある ため、円錐状に照らす。 ライトからの距離で光の強 さが変化。

LightType = ltPoint LightType = ltSpot

並行光源。どこに配置して も光の強さは変化しない。

光を当てる方向はライトの

向きで変わる。

[3D Scene] - その2 (カメラ)

• TCamera は視点を切り替えるのに使う。

• TForm3D または TViewPort3D の Camera プロパティに TCamera を 設定し、UsingDesignCamera を False にする事でカメラの視点に変更 できる。 • 実行時にコードでカメラを切り替えた場合には、 Repaint しなくてはならない。 • 3D シェイプの内側にカメラを設置する事も可能。 但し、 3D シェイプの TwoSide プロパティを True に設定しないと 内側にテクスチャは貼られない。 また、貼られたテクスチャは鏡像になる。

[3D Scene] - その3 (ダミーオブジェクト)

• TDummy は、見えないダミーのオブジェクト。 複数のオブジェクトを TDummy の子とし て配置すれば、 TDummy を移動 / 回転 するだけで、すべてのオブジェクトが カメラを子としてオフセット配置し、 TDummy を回転させれば、 オブジェクトを周回するカメラになる。 カメラを単純に座標計算で移動しても、

[3D Scene] - その4 (代理オブジェクト)

• TProxyObject はその名の通り代理オブジェクト。 左の TCone が実体で、右の 3 つは代理オブジェクト。 TCone にはテクスチャが貼ってあるが、 これを 4 つの TCone で表現しようとすると 4 倍のテクスチャが必要になる。 テクスチャを貼った TCube を一つ用意し、 それを参照する TProxyObject を迷路状に 敷き詰めれば、3D ダンジョンの出来上がり。 ファン○シースター (初代) みたいなのが作れる。 # スー○ーマ○オのブロックでもいいけれど。 • 困った事に、TProxyObject が実体を指す事がある (参照ではなくて)。 • 誰もが真っ先に思いつくであろう TModel3D の代理オブジェクトは XE2 Update 4 の時点では不可能 (QC#103139)。

TModel3D [3D Shapes] - その1

• TModel3D には、各種モデルデータが読み込める。

• TMeshCollection には以下の形式のモデルデータが読み込める。

– *.ase (Ascii Scene Export)

– *.dae (COLLADA) – *.obj (Wavefront) • LoadFromFile() でモデルデータを読み込む場合には モデル形式に応じて以下を uses する必要がある。 – FMX.ASE.Importer – FMX.DAE.Importer – FMX.OBJ.Importer

TModel3D [3D Shapes] - その2

Delphi って事で Google 3D ギャラリーの神殿データを取り込んでみました。 [Θησαυρός των Αθηναίων, Δελφοί - Athenian Treasury, Delphi]

http://sketchup.google.com/3dwarehouse/details?mid=63e5f1f194d769c3623 ac7e0d52d2192&prevstart=0

TModel3D [3D Shapes] - その3

• Google SketchUp に正常に取り込めたモデルデータは TModel3D にもほぼ確実に取り込める。 1. Google SketchUp にモデルデータを読み込ませる。 2. 表示を右側面あるいは左側面に切り替えて前に 90°倒す。 3. [ファイル | エクスポート | 3D モデル...] で *.dae でエクスポート。 4. TModel3D. MeshCollection に読み込む。

TModel3D [3D Shapes] - その4

• TModel3D は TMesh の集合体で、ボーン情報等は持っていない。

• つまり、読み込んだモデルそのものを簡単に形状変更する機能はない。

• TModel3D のモデルそのものをアニメーションする事はできない。

「ん？でもアナタ確かネギ振らせてましたよね？」

[FireMonkey [3D Shapes] Demo]

http://www.youtube.com/watch?v=UHmYKVz_oME 振ってましたね、ネギ。しかも回転しながら。

TModel3D [3D Shapes] - その5

「複数のモデルを交互に表示 / 非表示しているの？」

場合によってはそれもアリかもしれませんが、 パタパタアニメになってしまいます。

TModel3D [3D Shapes] - その6

「じゃ、胴体と腕パーツに分けてあるんでしょ？」 ほぼ正解です。 確かに胴体 (TModel3D1) と腕パーツ (TModel3D2) を分け、TDummy で グループ化してあります。 これで TDummy を回転/移動させれば、 胴体と腕は連動して回転/移動できます。 ですが、これだけではネギは振れません。 原点が足元にあるからです。 3D コントロールには、2D コントロールに あった RotationCenter プロパティが存在し ないので、任意の 3D 座標での回転はでき ません。回転は原点で行われます。

TModel3D [3D Shapes] - その7

腕パーツのここに原点があれば ネギを振れます。 原点を変更する方法は 2 つあります。 1. モデルデータの時点で原点を変更し、TDummy の子として配置した時に 位置を調整する。 2. モデルデータでは原点を変更せず、 TDummy の子として さらに TDummy を配置し、そこに腕パーツを配置し、位置を調整する。 要はどうにかして関節部分に原点を持ってくればいいのです。

に動画をアップしてあります。

FireMonkey [3D Shapes] Demo FireMonkey で PMD モデルを読み込んでみる FireMonkey で作る地球儀 ～ 多分、4 分以内に ～ FireMonkey TLayer3D デモ ※ _{Update 3 で} 作られたものです。

17Th

Developer Camp

Tips 的なもの

TLabel の色を変えるには？ (1)

TLabel の色を変えるには？ (2)

1. TLabel を右クリックして、ポップアップメニューから [カスタムスタイルの編集] を選択。 2. スタイルデザイナの右ペインのツリーで "text: TText" を選択。 3. オブジェクトインスペクタで、Fill.Color を変更。 4. スタイルデザイナの右ペインの [適用して閉じる] ボタンを押下。 スタイルを変更すると、TStyleBook が自動的に 生成されます。 2 つ目以降の TLabel は、StyleLookup プロパティに、 最初の TLabel と同じ物を指定すれば OK です。

TComboBox / TListBox のフォントサイズを変えるには？

• TComboBox / TListBox には Font プロパティがないが、

[項目エディタ] で作れる TListBoxItem は Font プロパティを持っている。

• TComboBox も TListBox もアイテムは TListBoxItem なので、

TListBoxItem のカスタムスタイルを作ればいい。

• 現状、TComboBox からでは TListBoxItem のカスタムスタイルは作れない。

TListBox で TListBoxItem のカスタムスタイルを作り、 TComboBox で利用する。

• カスタムスタイルは TListBoxItem 毎に設定してやらなくてはならない*1。 だったらカスタムスタイルを作らずに、最初からコードでフォントサイズを 指定すればいいような気がする (いっそ、Scale プロパティで...^^;A)。 for i:=1 to 50 do ListBox1.Items.Add(Format('%.3d', [i])); for i:=1 to 50 do ListBox1.ItemByIndex(i-1).Font.Size := 18; Items.Add() ではなく、 AddObject() で TListBoxItem を追加してもいい。

雑多な情報 1

• フォームデザイナは埋め込みウィンドウである必要がある。

• dbGo (Windows のみ) / IBX / DBX4 は使える。BDE は使えない • WebSnap / IntraWeb は使えるが、Windows 専用。

• Indy / TeeChart は使える。レポートツールは使えない。

• 入力系コントロールのパフォーマンスが悪い時は、DisabledFocusEffect プロパティ

を True にするか FMX.Types.GlobalDisableFocusEffect を True に設定する。

• データモジュールにコンポーネントを置けない場合には、

ClassGroup プロパティを見直す (FMX.Types.TControl 等に変更)。

雑多な情報 2

• TListView のフォントサイズを変える方法は TComboBox / TListBox の時同様。 TTreeViewItem が Font プロパティを持っている。 • フォームデザイナでコピー＆ペーストできない場合には、フォームデザイナまたは [構造] ペインで右クリックしてコピーしたものを貼りつけてみる。 • 最終手段はフォームを [エディタで表示] にして編集。ペーストはできる事が多い ので、テキストエディタにフォームのソースを貼りつけておくといい。 • TViewPort3D に貼りつけた 3D コントロールが常に中央に来て困る場合には、 ワーク用の TViewPort3D を貼りつけておき、そちらで作業したものをコピペで戻 すと楽。FireMonkey 3D アプリケーションの場合は作業用のフォームを別途作っ ておくと楽になる。 • アニメーションさせるとコントロールがチラつく場合には、

17Th

Developer Camp

ファーストインプレッション

ファーストインプレッション (ネガティブ編)

• フォームデザイナには結構イライラさせられる。 • 音声再生コントロールがあり、 LiveBinding のノーティファイアがプロパティにあれば、 ノーコーディングで Flash みたいな事ができるのだけれども...。 • TVideo / TVideo3D ...というか、動画再生コントロールも要るよね。 • 仮想キーボードはタッチ系のマシンには必須かも。 • IM (Input Method) の挙動が所々おかしい。 • ヘルプが貧弱。「サンプルデモで確認してくださいね」 と 書いてある割には、意味不明なデモになっているものが多い。

ファーストインプレッション (ポジティブ編)

• 理屈的には、FireMonkey というフレームワークから逸脱しなければ、 殆ど何も考えずにマルチプラットホームが可能 (iOS を除く)。 • 0 (できない) と 1 (できる) の間には大きな隔たりがある。 BDS2006 で .NET Compact の開発をするような強引さでもない。 • 3D が簡単に使えるようになった。「自前でやれ」 と言われたら正直涙目。 モデルの生成に Google SketchUp とかが使えるので分業可能。 • スケール変更と回転は本当に便利。 スレート PC プログラミングで苦労していた殆どの部分はこれで解決する。 • すべてのコントロールの OnChange にノーティファイアをくっつけるようにし

まとめ

• 現時点では確かに 「足りない」 と感じるものも少なくはない。 ...ただ、いきなりフルセットを出されても使いこなせないであろう事は 想像に難くないため、まずは "できること" から始めた方がいいように思う。 • VCL (Windows) アプリケーションとの "流儀の違い" を知るのが肝要。 自分で認識している "常識" は、"Windows アプリの常識" かもしれない。 • VCL アプリケーションが得意とする分野と、FMX アプリケーションが得意と する分野は若干異なる。 • 加えて、なんでもかんでも単一バイナリで済ませようとしなければ、できる事 の幅は格段に広くなる。

FireMonkey 関連情報 &資料1

• [FireMonkey アプリケーション プラットフォーム (DocWiki)]

http://docwiki.embarcadero.com/RADStudio/ja/FireMonkey_アプリケーション_プラットフォーム

• [Embarcadero Discussion Forums ≫ C++Builder ≫ FireMonkey]

https://forums.embarcadero.com/forum.jspa?forumID=379

• [Embarcadero Discussion Forums ≫ Delphi ≫ FireMonkey]

https://forums.embarcadero.com/forum.jspa?forumID=380

• [Embarcadero Technologies Channel (YouTube)]

http://www.youtube.com/user/EmbarcaderoTechNet#g/u

• [Embarcadero Japan Channel (YouTube)]

FireMonkey 関連情報&資料2

• [FireMonkey (Stack Overflow)]

http://stackoverflow.com/questions/tagged/firemonkey • [Delphi (FireMonkey) によるテクニック＆アルゴリズム] http://ht-deko.minim.ne.jp/techalgof.html • [Delphi / C++ Builder 関連サイト内検索] http://ht-deko.minim.ne.jp/searchresult2.html • [3Dグラフィックス・マニアックス (マイナビニュース)] http://news.mynavi.jp/column/graphics/index.html

• [Delphi Source Code (CodeCentral)]

http://cc.embarcadero.com/ProdCat.aspx?prodid=1&catid=1 ※ iOS 用のサンプルコードがあります。

FireMonkey 関連情報&資料3

• [Google SketchUp] http://sketchup.google.com/intl/ja/ • [Paint.NET] http://www.getpaint.net/ • [InkScape] http://inkscape.org/index.php?lang=ja • [初音ミク ネギ ミニ] http://sketchup.google.com/3dwarehouse/details?mid=eea6a316ae7a45266d8 66ceb355191d • [初音ミク ネンドロイド普通(-"-)]