おかげさまで本コラムは連載を開始して100回目、2周年を迎えることができた。読者とスタッフの皆様に、あらためて感謝の気持ちをお伝えしたい。

FileMakerの帳票をWebアプリに活かすには

FileMakerでアプリケーションを組むメリットのひとつに、レイアウトが組みやすい点があげられる。直感的に線や丸・長方形やフィールドを配置できるので、簡単に帳票をデザインすることが可能だ。この辺りの操作性はFileMaker Pro 5といった旧バージョンから変わっておらず、いまでも「FileMaker = 帳票が組みやすい」というイメージを持つユーザ/デベロッパは少なくないだろう。

この帳票をWebアプリケーションで利用したい場合、FileMaker Pro/タスク/cronでバッチ処理を併用することでPDFをダウンロードさせることが可能だ。具体的な手順は次のとおり。

  1. タスク/cronでFileMaker ProでFileMakerファイルを開く
  2. FileMakerファイルのスタートアップスクリプトで、帳票にしたいレイアウトをPDFで出力。特定のパスに保存する 3 Webアプリケーションで出力したPDFへアクセス

コラム第7回目「FileMakerといえば帳票! さくっとデザインしてWebからPDFダウンロード」で紹介した内容だが、この実装方法の場合、即時性に若干難がある。

FileMakerのレイアウトに配置されている情報のほとんどは、XML形式で取りだすことが可能だ。FileMaker Pro Advancedで出力できるデータベースデザインレポート(Database Design Report)で指定したレイアウトをXMLとして出力できる。これをPHPで解析し、HTMLで表示すればFileMakerでデザインした帳票レイアウトをある程度Web上で実現することが可能になる。具体的な手順は次のとおり。

  1. FileMaker Proで帳票レイアウトを作成する
  2. FileMaker Pro Advancedで1で作成したレイアウトのデータベースデザインレポートを作成。XML形式で出力する
  3. PHPのsimpleXMLで、データベースデザインレポートのXMLを読みこむ
  4. ループ処理で各オブジェクトをposition: absolute;で表示するようにHTMLを出力

FileMaker Pro Advancedのデータベースデザインレポートを使って、FileMakerのレイアウト情報をXML形式でエクスポート

FileMakerで構築したレイアウト情報がXMLとして定義されているので、これをPHPで読み込み、レンダリングする

配置されているレイアウトオブジェクトを片っ端から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(左辺)

オブジェクトの座標位置は、インスペクタの「位置」で確認できる

データベースデザインレポートのXMLで出力される値はpx単位となっている

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プロパティについて紹介していこう。