おかげさまで本コラムは連載を開始して100回目、2周年を迎えることができた。読者とスタッフの皆様に、あらためて感謝の気持ちをお伝えしたい。
FileMakerの帳票をWebアプリに活かすには
FileMakerでアプリケーションを組むメリットのひとつに、レイアウトが組みやすい点があげられる。直感的に線や丸・長方形やフィールドを配置できるので、簡単に帳票をデザインすることが可能だ。この辺りの操作性はFileMaker Pro 5といった旧バージョンから変わっておらず、いまでも「FileMaker = 帳票が組みやすい」というイメージを持つユーザ/デベロッパは少なくないだろう。
この帳票をWebアプリケーションで利用したい場合、FileMaker Pro/タスク/cronでバッチ処理を併用することでPDFをダウンロードさせることが可能だ。具体的な手順は次のとおり。
- タスク/cronでFileMaker ProでFileMakerファイルを開く
- FileMakerファイルのスタートアップスクリプトで、帳票にしたいレイアウトをPDFで出力。特定のパスに保存する 3 Webアプリケーションで出力したPDFへアクセス
コラム第7回目「FileMakerといえば帳票! さくっとデザインしてWebからPDFダウンロード」で紹介した内容だが、この実装方法の場合、即時性に若干難がある。
FileMakerのレイアウトに配置されている情報のほとんどは、XML形式で取りだすことが可能だ。FileMaker Pro Advancedで出力できるデータベースデザインレポート(Database Design Report)で指定したレイアウトをXMLとして出力できる。これをPHPで解析し、HTMLで表示すればFileMakerでデザインした帳票レイアウトをある程度Web上で実現することが可能になる。具体的な手順は次のとおり。
- FileMaker Proで帳票レイアウトを作成する
- FileMaker Pro Advancedで1で作成したレイアウトのデータベースデザインレポートを作成。XML形式で出力する
- PHPのsimpleXMLで、データベースデザインレポートのXMLを読みこむ
- ループ処理で各オブジェクトをposition: absolute;で表示するようにHTMLを出力
配置されているレイアウトオブジェクトを片っ端からCSSの"position: absolute;"で配置するという内容だ。やや乱暴な実装だが、FileMakerで配置したままのデザインをWeb上で簡単に実現できる。注意点として
- ポータルを利用したデザイン
- 値一覧を使ったチェックボックス/ラジオボタン
- 斜め線, 楕円オブジェクト
が使用されている場合は、実装の手間がかかるのであらかじめ留意されたい。
データベースデザインレポートより、レイアウト情報を抽出する
データベースデザインレポートの仕様は、完全ではないもののfmpa11_ddr_xml_grammar.pdfにてある程度まとめられている。このPDFをもちいて、レイアウト情報に関わるXMLを紹介しよう。
Layout->Object['type']
fmpa11_ddr_xml_grammar.pdf P.20より。オブジェクトのタイプを示す。代表的なタイプは次のとおり。
- Line: 線オブジェクト
- Rect: 長方形オブジェクト
- Oval: 楕円オブジェクト
- Text: テキストオブジェクト
- Field: フィールドオブジェクト
Layout->Object->Bounds['top'] Layout->Object->Bounds['left'] Layout->Object->Bounds['bottom'] Layout->Object->Bounds['right']
オブジェクトの座標位置を示す。単位はpx。
- top: 上辺
- left: 右辺
- bottom: 左辺
- right: 下辺
この座標をもちいることで、オブジェクトの高さや幅を求めることが可能だ。
- height(高さ): bottom(下辺) - top(上辺)
- width(幅): right(右辺) - left(左辺)
Layout->Object->DrawStyle['lineColor'] Layout->Object->DrawStyle['lineWidth'] Layout->Object->DrawStyle['linePat']
オブジェクトのペン(枠線)の状態を示す。
- lineColor: ペン色(RGB表記)
- lineWidth: ペン幅
- linePat: ペンパターン
Layout->Object->DrawStyle['fillColor'] Layout->Object->DrawStyle['fillPat']
オブジェクトの塗りつぶし(背景)の状態を示す。
- fillColor: 塗りつぶし色(RGB表記)
- fillPat: 塗りつぶしパターン
次回、カラーコードやパターンの読み方、オブジェクトタイプ別のプロパティ詳細と対応するCSSプロパティについて紹介していこう。