2013/10/27にFM-Tokyoで発表した際の資料です。

1. FileMaker Proのレイアウトを
Webブラウザで再現してみよう
2013/10/27
FM-Tokyo発表資料
鈴木健太郎（株式会社エミック）

2. Agenda
FileMaker 12で生まれ変わった
レイアウト
FileMaker ProのレイアウトをWeb
ブラウザで再現
FMPressとINTER-Mediator

3. FileMaker 12で
生まれ変わったレイアウト
∼キーワードはCSS3∼

4. スタイル情報はCSSに
レイアウトオブジェクト
テキスト、線、長方形、角丸長方形、楕円、
フィールド、ボタン、タブコントロール、
ポータル、Webビューア

5. スタイル情報はCSSに
FileMaker 12では、
レイアウトオブジェクトの
テキストの大きさ、
背景色やグラデーション、
罫線などのスタイル情報がCSSに変更された
テキスト

6. Cascading Style Sheets(CSS)
簡単に言うと、Webの世界で使用される標準
的なスタイル定義の仕様
HTML や XML の要素をどのように修飾（表示）するかを指
示する、W3Cによる仕様の一つ。文書の構造と体裁を分離
させるという理念を実現する為に提唱されたスタイルシー
トの、具体的な仕様の一つ（Wikipedia）

7. スタイル情報はCSSに
Webの世界と同様の記述方法に
内部的な変更なので、一般的なFileMakerの
利用では意識することはない

8. CSS
.rectangle {
background-color: rgb(243,
241, 230);
border: 5px solid #48628d;
}
rectangleクラスの
オブジェクト
テキスト

9. CSS3
角丸、グラデーション、変形、アニメーショ
ン等の表現が可能に
ベンダープレフィクスが必要な場合もあり、
複数のWebブラウザに対応するために定義を
複数記述しなければならない場合も
古い仕様のWebブラウザでは動作しない

10. レイアウトテーマ
FileMaker 12の新機能
CSS3で記述
独自プロパティも多数

11. FileMaker Proのレイアウトを
Webブラウザで再現

12. レイアウトをWebブラウザで
FileMaker Pro
Webブラウザ

13. Webブラウザで動作することのメリット
FileMaker Goのインストールが不要
デバイスを選ばない
OS X, Windows, iOS, Android...

14. レイアウトテーマ
/Applications/FileMaker Pro 12
Advanced/FileMaker Pro Advanced.app/
Contents/Resources/Themes（OS X /
FMPAの場合）
レイアウトテーマはCSS, XML, 画像（ない場
合もあり）で構成
今回は「クールグレイ」のCSSファイルのみ
使用（cool_gray.css）

15. レイアウトテーマ
レイアウトテーマのCSSからヘッダとフッタ
のCSSをコピー
同様にテキストフィールドとチェックボック
ス、オブジェクトフィールドのCSSをコピー

16. レイアウトオブジェクト
レイアウトオブジェクトのXMLを取得
DDR（データベースデザインレポート）
Clip Manager（有償）
FMClipboardBroker（フリーウェア）

17. レイアウトオブジェクト
XMLに含まれる情報
Bounds（座標）
フィールド名やオブジェクト名
スタイル情報（CSS）
などなど…

18. DEMO 1

19. HTML作成
Boundsから取得した座標（上からと左から）
をそれぞれ、top:とleft:で指定
同様に幅と高さをそれぞれ、
width:とheight:で指定
LocalCSSのselfにあるスタイルを適用

20. HTML作成
レイアウトに直接置いた画像
16進エンコードされたバイナリ文字列を
デコードし、base64でエンコード
IMGタグのSRC属性にセット

21. DEMO 2

22. データベースとの連携
FileMaker Server (Advanced)
カスタムWeb公開（XML Web公開）

23. データベースとの連携
INTER-Mediator
少ない開発作業でやりたいことを実現できる
Webアプリケーションフレームワーク
新居雅行氏による開発
http://inter-mediator.info/

24. データベースとの連携
定義ファイルの記述
クラス名にIM[table@field@target]を追加
すればDBのデータの表示や編集が可能
<input class=”IM[table@field]”
type=”text”>

25. データベースとの連携
バックエンドはFMSの他にMySQLや
PostgreSQLといったDBMSに対応
ビジネスのスケールで使い分けを行うことが
できる

26. DEMO 3

27. モバイル対応
デバイスの画面サイズに応じた
レイアウトを作成
ユーザーエージェントや解像度を判断し、
適切なレイアウトへ移動させると良い
ツールバーにも一工夫が必要

28. FMPress
データベース連動Webアプリケーションを
作成・運用できる専用サーバーサービス
DDRをアップロードするだけで、
デモのような
Webアプリに変換する機能を搭載
https://www.emic.co.jp/fmpress/

29. まとめ
FileMaker 12のレイアウトはWebブラウザで
レンダリングしやすいので活用してみよう
INTER-Mediatorは簡単にデータベースと連動
したWebサイトが制作できる