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)
などなど…
HTML作成Boundsから取得した座標(上からと左から)をそれぞれ、top:とleft:で指定
同様に幅と高さをそれぞれ、width:とheight:で指定
LocalCSSのselfにあるスタイルを適用
HTML作成レイアウトに直接置いた画像
16進エンコードされたバイナリ文字列をデコードし、base64でエンコード
IMGタグのSRC属性にセット
データベースとの連携
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に対応
ビジネスのスケールで使い分けを行うことができる
モバイル対応デバイスの画面サイズに応じたレイアウトを作成
ユーザーエージェントや解像度を判断し、適切なレイアウトへ移動させると良い
ツールバーにも一工夫が必要
FMPress
データベース連動Webアプリケーションを作成・運用できる専用サーバーサービス
DDRをアップロードするだけで、デモのようなWebアプリに変換する機能を搭載
https://www.emic.co.jp/fmpress/
まとめ
FileMaker 12のレイアウトはWebブラウザでレンダリングしやすいので活用してみよう
INTER-Mediatorは簡単にデータベースと連動したWebサイトが制作できる