21st Embarcadero Developer Camp

Transcription

1 プレゼンテーション資料 Day 1 第 21 回エンバカデロ デベロッパーキャンプ 2012 年 3 月 9 日 ~10 日クロスウェーブ船橋

2

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

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

5 17 Th Developer Camp T2 テクニカルセッション 実践!Delphi デバッグテクニック 株式会社シリアルゲームズ 取締役細川淳 1

6 17 Th Developer Camp 1 IDE 統合デバッガ 2

7 Delphi の IDE 統合デバッガ IDE 統合デバッガについて 表示 デバッグ で表示される項目ごとに見ていきます 3

8 17 Th Developer Camp 1 ブレークポイント一覧 4

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

10 ブレークポイント一覧ープロパティ ( 条件 ) ブレーク条件とパスカウント プロパティを開くと ブレーク条件 と パスカウント という項目があります ブレーク条件 if 文の条件式と同じように条件を書けます たとえば A <> 0 などのように条件を書けます パスカウント そのブレークポイントを何回通った時に停止するかを指定できます たとえばパスカウントに 3 を指定すると 3 回目にブレークポイントを通った時に停止します この 2 つの条件を上手く使うとデバッグが捗ります 6

11 ブレークポイント一覧ー複数の条件 ブレークポイントで特筆すべきはもう1つ 同じ行に違うプロパティを持つ複数のブレークポイントを持てます 7

12 ブレークポイント一覧ー複数の条件 複数の条件を持たせるには 既存のブレークポイントを残す を利用します これによって 違う条件を持った複数のブレークポイントを設定できます 注意したいのは これは ブレークポイント一覧 ウィンドウからプロパティを表示した時にしか現れないチェックです ブレークポイント一覧から開いたプロパティ ブレークポイントのコンテキストメニューから開いたプロパティ 8

13 ブレークポイント一覧ーブレークポイントの種類 ブレークポイント一覧では次の 3 つのブレークポイントを設定できます 名前概要設定可能な状態 ソースブレークポイントソースコード上の任意の行に設定できるブレークポイントです通常時 実行時 アドレスブレークポイントアドレスに対して設定できるブレークポイントです実行時 データブレークポイント変数などのデータが変更される時にブレークするブレークポイントです実行時 アドレスブレークポイントアドレスブレークポイントはユーザーにプログラムを納品した後に威力を発揮します 例外発生ウィンドウにはアドレスが出ています ユーザーから冷害発生時のアドレスを聞いて そこで停止するようにすれば 例外の原因を追うことができます データブレークポイントデータブレークポイントはデータ ( 変数 ) の変更時に停止します そのため どこでデータが変更されたのか? を追うときに役に立ちます 9

14 ブレークポイント一覧ーその他のブレークポイント モジュールロードブレークポイント ブレークポイント一覧からは設定できず 実行 ブレークポイントの追加 モジュールロードブレークポイント から設定できます DLL など他のモジュールを使っている場合に モジュールがロードされると停止できます 10

15 17 Th Developer Camp ブレークポイントの デモンストレーション 11

16 17 Th Developer Camp 2 呼び出し履歴と ローカル変数 12

17 呼び出し履歴 呼び出し履歴はいわゆる スタックトレース です ブレークポイントで止まるまでに呼び出されたルートを記録しています 呼び出し 13

18 呼び出し履歴ーローカル変数 ローカル変数ウィンドウは呼び出し履歴と密接に関連しています 呼び出し履歴で呼び出された単位ごとにローカル変数を表示できます 14

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

20 17 Th Developer Camp 呼び出し履歴の デモンストレーション 16

21 17 Th Developer Camp 3 スレッドの状態と モジュール 17

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

23 モジュール 現在のプロセスにロードされているモジュールの一覧を取得できます ここで モジュールロードブレークポイントを置くこともできます またエントリポイントの逆アセンブル表示も可能です 19

24 17 Th Developer Camp スレッドの状態と モジュールの デモンストレーション 20

25 17 Th Developer Camp 4 イベントログ 21

26 イベントログ イベントログは 気軽に使えるデバッグツールです OutputDebugString を使っていわゆる printf デバッグ ができます ブレークポイントの停止時にスタックトレースを出力するこができます Windows メッセージを出力できます 22

27 イベントログー OutputDebugString OutputDebugString は Win32 API です 呼び出したプロセスにアタッチされているデバッガがあるときに 文字列をデバッガに渡します Delphi では当然 統合デバッガに文字列が渡ります 統合デバッガは 受け取った文字列をイベントログに出力します OutputDebugString を使って出力したログ 23

28 イベントログーメッセージ イベントログには Application が受け取ったメッセージを出力する機能があります 24

29 イベントログーメッセージ 実際にメッセージを表示させると こんな感じになります 25

30 17 Th Developer Camp イベントログの デモンストレーション 26

31 17 Th Developer Camp 5 言語で用意されるデバッ グ機能 27

32 デバッグの容易さ モダンな言語ではデバッグ作業も重視されています たとえば Java では VM 上での動作となるため ほぼ全ての例外をキャッチできます キャッチした例外オブジェクトから詳細を知ることで デバッグに生かすことができます ネイティブ言語から考えると Null ポインタへのアクセスを例外としてキャッチでき かつ その後 続けて実行できるなんて驚異です もちろん Delphi 言語も例外なく デバッグのための機能が用意されています 28

33 Assert の使用 Assert は System ネームスペースに用意されているグローバルな手続きです 実態はコンパイラマジックによって System._Assert へ変換される特殊な手続きです Assert を使うと 任意の条件で例外 (EAssertionFailed) を発生させます Assert の第一引数が false の時 EAssersionFailed 発生 例えば Assert(Sender is TButton); とすると Sender が TButton では 無かったとき 例外を発生させます $ASSERTIONS ON/OFF ( もしくは $C +/-) 指令を使ってコンパイラに直接 Assert のコード生成を抑制させることができます 29

34 Assert の使用 Assert の内部を見ると AssertionFailed 発生時に AssertErrorProc という手続きを呼んでいます AssertErrorProc はグローバルな変数です AssertErrorProc の中身を自分のハンドラに変えると 詳細な情報を得られます 30

35 Assert の使用ー AssertErrorProc procedure AssertErrorHandler( const imsg, ifilename: String; const ilineno: Integer; const iaddress: Pointer); var Err: String; begin Err := Format( '%s (%s line %x)', [imsg, ifilename, ilineno, Integer(iAddress)]); ShowMessage(Err); end; procedure TForm1.FormCreate(Sender: TObject); begin AssertErrorProc = AssertErrorHandler; Assert(false); end; 31

36 Assert の使用ートリック AssertErrorProc を使うとエラーが発生したユニット 行番号 アドレスなどが判ります これを利用して任意の例外で ユニットや大まかな行番号を取得できます 32

37 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; end; 33

38 17 Th Developer Camp Assert の デモンストレーション 34

39 TApplication.OnException TApplication.OnException というイベントハンドラがあります これは例外が発生したときに呼ばれ 例外処理を自前の処理に置き換えることができます デフォルトでは例外ダイアログが表示されますが それをログファイルに出力するように書き換える事もできます 35

40 System.NoErrMsg NoErrMsg について ついでに紹介します このグローバル変数を True に設定すると エラーダイアログが出ません 何らかの理由でエラーダイアログを表示したくない場合に TApplication.OnException とともに設定しておくと良いかもしれません 36

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

42 17 Th Developer Camp 6 付録 : 外部ツール 38

43 17 Th Developer Camp 7 EventViewer (System Log) 39

44 EventViewer サービスプログラムやサーバープログラムなど GUI を持たないプログラムではログが重要です 自前のログシステムでログを吐くことも もちろんできますが Windows の SystemLog を使うこともできます Windows の SystemLog はイベントビューアで見ることができます 40

45 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, // // 書き込む文字列 ( ポインタのポインタ ) idata); // バイナリデータ finally DeregisterEventSource(FHandle); end; end; 41

46 EventViewer ー書き込んだ情報の閲覧 42

47 17 Th Developer Camp EventViewer の デモンストレーション 43

48 17 Th Developer Camp 8 EurekaLog 44

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

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

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

52 17 Th Developer Camp EurekaLog の デモンストレーション 48

53 17 Th Developer Camp Delphi/C++Builder + FastReport で作る実用レポート出力 株式会社ドリームハイブ代表取締役 ITコンサルタント山本悟 1

54 ドリームハイブとは システム開発 IT コンサルティングの会社 dhive: ドリームハイブのコンテンツ配信サイト DH-APPLI: 軽い 便利 使いやすい なソフトたち 代表取締役山本悟 ブログ : facebook: 2

55 本日の流れ 1. まずはFastReportの特徴をチェック! 2. 実用的なレポートってナニ? 3. デモ 4. 注意!Editionによって使えない機能があります! 5. 他のレポート製品からの移行について 6. まとめ! 3

56 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) レポートの継承関係を作成することが可能 クロスタブタイプ ドリルダウンタイプのレポートの作成が可能 4

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

58 3. デモ : 本日作るデモアプリケーション 概要 次の機能を利用したデモアプリケーションの構築を行います 機能一覧 プレビュー レポートデザインの埋め込み 外部ファイルの参照 HTMLタグによる装飾 データベースコンポーネントとの接続 マスター 詳細レポート チャート スクリプトによる拡張 プレビュー画面のツールボタンのカスタマイズ エクスポート (PDF) 6

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

60 4. 注意!Edition によって使えない機能があります! RunTime end-user designer Embarcadero RAD Edition Enterprise Edition Vertical Bands Cross Tabs Dialog forms designer Interbase Express (IBX), IBOjects, ActiveX Data Objects (ADO), dbexpress support Excel Binary Components for webapplications Excel XML Script 8

61 5. 他のレポート製品からの移行について 移行可能な他社製のレポート製品は? QuickReport RaveReport ReportBuilder 移行可能なデータは帳票データのみ 埋め込みスクリプトなどは手動で移行する必要があります 帳票を生成するためのコード (Delphi や C++Builder の ) は手動で移行する必要があります その他 ライセンスが有効な QuickReport と それが動作する Delphi/C++Builder の環境があること Embarcadero Edition ではない FastReport のライセンス 9 9

62 他のレポート製品からの移行の流れ 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; conv.source := QuickRep1; // QuickReport コンポーネント conv.target := FReport; conv.convert; FReport.SaveToFile('converted_fromQR.fr3'); 10 10

63 他のレポート製品からの移行の流れ RAD Studio のバージョン 変換元 Delphi4~XE C++Builder6~XE 変換先 Delphi XE2 C++Builder XE2 プログラムコード元コード手動で変換 >> FastReport 用コード レポートデザイン元デザインプログラムで変換 >> fr3 データ 11

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

65 ありがとうございました 13

66 参考 : ネット上のリソース 株式会社エージーテック FastReports Inc. 他のレポートツールからのコンバート eport_vcl/convert/ 14

67 17 Th Developer Camp T4 テクニカルセッション FireMonkey ファーストインプレッション 有限会社エイブル 富永英明 1

68 17 Th Developer Camp 1 はじめに 2

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

70 イロイロとゴタクを並べようと思いましたが... 他にやりたい事があるので省略します <!> WARNING <!> GotoWebinar 経由で参加している方は この時間を利用してスクリーンショットを撮るツールをご用意下さい 後で資料配布されるとは思いますが... 4

71 17 Th Developer Camp 2 FireMonkey アプリケーション 5

72 FireMonkey HD アプリケーション TViewPort3D TForm 3D コントロール HD (2D) コントロール 3D コントロールを使うには TViewPort3D を貼る必要がある 6

73 FireMonkey 3D アプリケーション TLayer3D TForm3D HD (2D) コントロール 3D コントロール HD (2D) コントロールを使うには TLayer3D を貼る必要がある 7

74 HD (2D) コントロールと 3D コントロール HD (2D) コントロール Additional Colors Common Controls Dialogs Effects Grids Layouts Shapes Standard System ViewPorts 3D コントロール 3D Layers 3D Scene 3D Shapes 共通 / サードパーティ製コンポーネントを除く 8

75 親子関係 FireMokey のコントロールは何でも親子関係にできる TEdit の子として TLabel を配置すると VCL の TLabeledEdit 同等のものが作れる TButton の子として TImage を配置すると VCL の TBitBtn 同等のものが作れる 親コントロールを移動すると 子コントロールも一緒に移動する 親コントロールの ClipChildren プロパティを True にすると 配置された子コントロールは親コントロールの外に配置できなくなる 親子関係は [ 構造 ] ペインで D&D する事によっても変更できる 9

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

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

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

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

80 LiveBinding (1) データベースとバインディングする事によって TDBGrid のようなものを作ったりできる... が それ以外のバインディングに関しては? 14

81 LiveBinding (2) サンプルフォルダ中の LiveBindings bindexpression fmx にある SynchControlsSampleProject が参考になる ( 双方向バインディング等のサンプルもある ) TBindList 変更通知 (Notify) procedure TForm1.Edit1Change(Sender: TObject); begin BindingsList1.Notify(Sender, ''); end; バインディングソース バインディングターゲット 15

82 パス ( その 1) TPathLabel [Standard] TPath [Shapes] TPath3D [3D Shapes] で 共通するパス M が MoveTo ( 絶対値 ) X, Y L が LineTo ( 絶対値 ) X, Y Z が描画終了 詳細は以下を参照の事 M 5,20 L 35,20 L 10,40 L 20,10 L 30,40 Z 画像は TPath3D のものです [ パスマークアップ構文 (MSDN)] 16

83 パス ( その 2) 簡単なパスはいいけど 複雑なパスはメンドイよ! では GUI でパスデータを作ってしまいましょう 1. InkScape ( php?lang=ja) でパスデータを作り SVG ( プレーン ) 形式で保存する 2. SVG をテキストエディタで開き パスデータ部分をコピーする 3. RAD Studio のパスデザイナにパスデータを貼り付ける 17

84 17 Th Developer Camp 3 FireMonkey HD (2D) コントロールの概要 18

85 要注意コンポーネント (1) VCL と同名のコンポーネントには面食らってしまうかも? TComboBox [Standard] キーボードからの文字入力を行う必要がある場合には TComboEdit を使う Items プロパティは public なので オブジェクトインスペクタから設定する事はできない 以前は Items プロパティそのものがなかったらしい TMemo [Standard] Update 3 以前だと Lines プロパティは public なので オブジェクトインスペクタから設定する事はできない TPanel [Standard] Caption プロパティはない TLabel を子コントロールとして貼りつければ VCL 版と同等の事ができるが レイアウトのためだけに使うのであれば TLayout の方が使い勝手がいい 19

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

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

88 要注意コンポーネント (4) TColorBox [Colos] 同名の VCL と同等なのは TColorComboBox の方 用途が全く違うので VCL の TColorBox なのか FMX の TColorBox なのか ハッキリ区別した方がいい TStringGrid [Grids] かなり作法が違う VCL 版の ColCount プロパティはなく 代わりに ColumnCount プロパティがあるが ReadOnly なプロパティであり これを用いてカラムを増減させる事はできない 22

89 TStringGrid (1) TStringGrid のカラムをコードで生成するにはどうすれば? 23

90 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'; StringGrid1.Cells[2, 0] := 'ccccc'; 24

91 TStringGrid (3) できました (^o^)/ カラムに右寄せとかを設定したいなぁ... 25

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

93 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; end; こんなコードで左 / 中央 / 右寄せできるのでは? 27

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

95 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; 29

96 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)); // 右寄せ... TGrid も同様の考え方で機能拡張できる 30

97 FireMonkey 固有のコンポーネント (1) FireMonkey HD アプリケーションのフォームにはとりあえず TScaledLayout を Align = alfit で貼ってみる フォームをリサイズするとコントロールサイズや グリッドの幅も追従する 31

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

99 FireMonkey 固有のコンポーネント (3) [Effects] にあるコントロールは画像コントロールに限らず 任意の FMX コントロールに対して適用する事が可能 以下は TButton にエフェクトを適用した例 各ボタンの子としてエフェクトコントロールが追加されている 33

100 17 Th Developer Camp 4 FireMonkey 3D コントロールの概要 34

101 [3D Shapes] - その 1 TCube 立方体 ( 直方体にもできる ) テクスチャは 6 面に貼られる TRoundCube 角が丸い立方体 テクスチャは前面と背面をメインに貼られる TPlane 板 テクスチャは前面に貼られる TGrid3D 位置関係を示すスケールとして使う 色は LineColor で指定 マス目のサイズは Frequency で指定 Marks に指定したサイズの倍数の時にグリッドの線は細線になる TStrokeCube ワイヤーフレームの立方体 色は Material.Diffuse で指定 TDisk 円盤 Updete 4 で追加された TGrid3D 以外にはテクスチャを貼る事ができる 但し TStrokeCube のテクスチャは無視される 35

102 [3D Shapes] - その 2 TSphere 球体 テクスチャは球面に貼られる TCylinder 円柱 三角柱や 六角柱も作れる TCone 円錐 三角錐や 四角錐も作れる 縦横比 1 : 2 のテクスチャが使えます? SubdivisionHeight は高さの分割数を指定する ( 分割数 = 2) SubdivisionAxes は軸の分割数を指定する ( 分割数 = 3) SubdivisionCap はキャップ ( 底面 ) の分割数を指定する ( 分割数 = 3) 36

103 [3D Shapes] - その 3 TEllipse3D 円を押し出した形状 ( 円柱 ) の 3D オブジェクト TRectangle3D 長方形を押し出した形状 ( 四角柱 ) の 3D オブジェクト TPath3D パスで描かれた図形を押し出した形状の 3D オブジェクトを作り出す事ができる TText3D 文字列を押し出した形状の 3D オブジェクト 前面 / 背面 / 側面 ( シャフト ) にテクスチャを貼る事ができる 37

104 [3D Shapes] - その 4 (TMaterial) 反射色なので ライトが必要 Update 3 以前では Specular は効果がない 鏡面反射の強さは Shinness で指定する Emissive ( 自己 ) 発光色を指定する Modulation tmmodulate シェイプの色とテクスチャの色をミックスする tmreplace テクスチャの色のみが使われる Texture テクスチャを指定する 38

105 [3D Shapes] - その 5 ( 半透明の表現 ) 半透明のシェイプを作るには Diffuse にアルファカラーを設定する 以下は 2 重の Sphere で 外側の Sphere を半透明にしてみた所 半透明のオブジェクトは後で描画するようにしなくてはならない Ambient: #FF Diffuse: # 作成順 : 外側 内側 Ambient: #FF Diffuse: # 作成順 : 内側 外側 複数の半透明オブジェクトがあるのなら 遠くのものから描画しなくてはならない Update 4 からは Opacity でも半透明の指定が可能 39

106 [3D Scene] - その 1 ( ライト ) TLight は外部光 3D Shape の反射光のプロパティに影響を及ぼす LightType = ltdirectional LightType = ltpoint LightType = ltspot 並行光源 どこに配置しても光の強さは変化しない 光を当てる方向はライトの向きで変わる Update 4 からは反射色の指定が可能 点光源 無指向性なので放射状に照らす ライトからの距離で光の強さが変化 光を当てる方向はライトの位置で変わる スポット光源 指向性があるため 円錐状に照らす ライトからの距離で光の強さが変化 光を当てる方向はライトの向きと位置で変わる 40

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

108 [3D Scene] - その 3 ( ダミーオブジェクト ) TDummy は 見えないダミーのオブジェクト 複数のオブジェクトを TDummy の子として配置すれば TDummy を移動 / 回転するだけで すべてのオブジェクトが " 配置された状態で " 移動 / 回転する カメラを子としてオフセット配置し TDummy を回転させれば オブジェクトを周回するカメラになる カメラを単純に座標計算で移動しても オブジェクトを捉えない事に注意 落書きダメ ゼッタイ 42

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

110 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 検証した結果 Google SketchUp からの DAE エクスポートデータだと比較的問題なく取り込める事を確認した 44

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

112 TModel3D [3D Shapes] - その 3 Google SketchUp に正常に取り込めたモデルデータは TModel3D にもほぼ確実に取り込める 1. Google SketchUp にモデルデータを読み込ませる 2. 表示を右側面あるいは左側面に切り替えて前に 90 倒す 3. [ ファイル エクスポート 3D モデル...] で *.dae でエクスポート 4. TModel3D. MeshCollection に読み込む DAE をインポートした場合には テクスチャ画像のフォーマットに注意 46

113 TModel3D [3D Shapes] - その 4 TModel3D は TMesh の集合体で ボーン情報等は持っていない つまり 読み込んだモデルそのものを簡単に形状変更する機能はない TModel3D のモデルそのものをアニメーションする事はできない ん? でもアナタ確かネギ振らせてましたよね? [FireMonkey [3D Shapes] Demo] 振ってましたね ネギ しかも回転しながら 47

114 TModel3D [3D Shapes] - その 5 複数のモデルを交互に表示 / 非表示しているの? 場合によってはそれもアリかもしれませんが パタパタアニメになってしまいます 動画のネギはスムーズに上下しているように見えます 48

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

116 TModel3D [3D Shapes] - その 7 腕パーツのここに原点があればネギを振れます 原点を変更する方法は 2 つあります 1. モデルデータの時点で原点を変更し TDummy の子として配置した時に位置を調整する 2. モデルデータでは原点を変更せず TDummy の子としてさらに TDummy を配置し そこに腕パーツを配置し 位置を調整する 要はどうにかして関節部分に原点を持ってくればいいのです 動画のものは前者を採用していますが あらゆる箇所を動かすのであれば ネストした TDummy に分割したパーツを配置する必要があります 50

117 に動画をアップしてあります Update 3 で作られたものです FireMonkey で作る地球儀 ~ 多分 4 分以内に ~ FireMonkey で PMD モデルを読み込んでみる FireMonkey TLayer3D デモ FireMonkey [3D Shapes] Demo タイトル名で検索してみて下さい 51

118 17 Th Developer Camp 5 Tips 的なもの 52

119 TLabel の色を変えるには? (1) カスタムスタイルを設定する 53

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

121 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 スタイルデザイナから設定する方法を見つけられなかった スタイルファイルを直接いじればできるのかもしれないが 未確認 55

122 雑多な情報 1 フォームデザイナは埋め込みウィンドウである必要がある dbgo (Windows のみ ) / IBX / DBX4 は使える BDE は使えない WebSnap / IntraWeb は使えるが Windows 専用 Indy / TeeChart は使える レポートツールは使えない 入力系コントロールのパフォーマンスが悪い時は DisabledFocusEffect プロパティを True にするか FMX.Types.GlobalDisableFocusEffect を True に設定する データモジュールにコンポーネントを置けない場合には ClassGroup プロパティを見直す (FMX.Types.TControl 等に変更 ) クリップボード / ペーストボードは Platform 変数の GetClipboard / SetClipboard を使う 但しテキスト専用 56

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

124 17 Th Developer Camp 6 ファーストインプレッション 58

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

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

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

128 FireMonkey 関連情報 & 資料 1 [FireMonkey アプリケーションプラットフォーム (DocWiki)] アプリケーション _ プラットフォーム [Embarcadero Discussion Forums C++Builder FireMonkey] [Embarcadero Discussion Forums Delphi FireMonkey] [Embarcadero Technologies Channel (YouTube)] [Embarcadero Japan Channel (YouTube)] 64

129 FireMonkey 関連情報 & 資料 2 [FireMonkey (Stack Overflow)] [Delphi (FireMonkey) によるテクニック & アルゴリズム ] [Delphi / C++ Builder 関連サイト内検索 ] [3D グラフィックス マニアックス ( マイナビニュース )] [Delphi Source Code (CodeCentral)] ios 用のサンプルコードがあります 65

130 FireMonkey 関連情報 & 資料 3 [Google SketchUp] [Paint.NET] [InkScape] [ 初音ミクネギミニ ] 66ceb355191d [ 初音ミクネンドロイド普通 (-"-)] ed3275af47a7 66