FileMaker ProのレイアウトをWebブラウザで再現してみよう

2013/10/27FM-Tokyo発表資料

鈴木健太郎（株式会社エミック）

Agenda

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

FileMaker 12で生まれ変わったレイアウト

～キーワードはCSS3～

スタイル情報はCSSに

レイアウトオブジェクト

テキスト、線、長方形、角丸長方形、楕円、フィールド、ボタン、タブコントロール、ポータル、Webビューア

スタイル情報はCSSに

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

テキスト

Cascading Style Sheets(CSS)

簡単に言うと、Webの世界で使用される標準的なスタイル定義の仕様

HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ（Wikipedia）

スタイル情報はCSSにWebの世界と同様の記述方法に

内部的な変更なので、一般的なFileMakerの利用では意識することはない

CSS.rectangle {

}テキスト

background-color: rgb(243, 241, 230);border: 5px solid #48628d;

rectangleクラスのオブジェクト

CSS3

角丸、グラデーション、変形、アニメーション等の表現が可能に

ベンダープレフィクスが必要な場合もあり、複数のWebブラウザに対応するために定義を複数記述しなければならない場合も

古い仕様のWebブラウザでは動作しない

レイアウトテーマ

FileMaker 12の新機能

CSS3で記述

独自プロパティも多数

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

レイアウトをWebブラウザで

WebブラウザFileMaker Pro

Webブラウザで動作することのメリット

FileMaker Goのインストールが不要

デバイスを選ばない

OS X, Windows, iOS, Android...

レイアウトテーマ/Applications/FileMaker\ Pro\ 12\ Advanced/FileMaker\ Pro\ Advanced.app/Contents/Resources/Themes（OS X / FMPAの場合）

レイアウトテーマはCSS, XML, 画像（ない場合もあり）で構成今回は「クールグレイ」のCSSファイルのみ使用（cool_gray.css）

レイアウトテーマ

レイアウトテーマのCSSからヘッダとフッタのCSSをコピー

同様にテキストフィールドとチェックボックス、オブジェクトフィールドのCSSをコピー

レイアウトオブジェクトレイアウトオブジェクトのXMLを取得

DDR（データベースデザインレポート）

Clip Manager（有償）

FMClipboardBroker（フリーウェア）

レイアウトオブジェクトXMLに含まれる情報

Bounds（座標）

フィールド名やオブジェクト名

スタイル情報（CSS）

などなど…

DEMO 1

HTML作成Boundsから取得した座標（上からと左から）をそれぞれ、top:とleft:で指定

同様に幅と高さをそれぞれ、width:とheight:で指定

LocalCSSのselfにあるスタイルを適用

HTML作成レイアウトに直接置いた画像

16進エンコードされたバイナリ文字列をデコードし、base64でエンコード

IMGタグのSRC属性にセット

DEMO 2

データベースとの連携

FileMaker Server (Advanced)

カスタムWeb公開（XML Web公開）

データベースとの連携INTER-Mediator

少ない開発作業でやりたいことを実現できるWebアプリケーションフレームワーク

新居雅行氏による開発

http://inter-mediator.info/

データベースとの連携

定義ファイルの記述

クラス名にIM[table@field@target]を追加すればDBのデータの表示や編集が可能

<input class=”IM[table@field]” type=”text”>

データベースとの連携バックエンドはFMSの他にMySQLやPostgreSQLといったDBMSに対応

ビジネスのスケールで使い分けを行うことができる

DEMO 3

モバイル対応デバイスの画面サイズに応じたレイアウトを作成

ユーザーエージェントや解像度を判断し、適切なレイアウトへ移動させると良い

ツールバーにも一工夫が必要

FMPress

データベース連動Webアプリケーションを作成・運用できる専用サーバーサービス

DDRをアップロードするだけで、デモのようなWebアプリに変換する機能を搭載

https://www.emic.co.jp/fmpress/

まとめ

FileMaker 12のレイアウトはWebブラウザでレンダリングしやすいので活用してみよう

INTER-Mediatorは簡単にデータベースと連動したWebサイトが制作できる