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

2,899 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,899
On SlideShare
0
From Embeds
0
Number of Embeds
185
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. FileMaker Proのレイアウトを Webブラウザで再現してみよう 2013/10/27 FM-Tokyo発表資料 鈴木健太郎(株式会社エミック)
  2. 2. Agenda FileMaker 12で生まれ変わった レイアウト FileMaker ProのレイアウトをWeb ブラウザで再現 FMPressとINTER-Mediator
  3. 3. FileMaker 12で 生まれ変わったレイアウト ∼キーワードはCSS3∼
  4. 4. スタイル情報はCSSに レイアウトオブジェクト テキスト、線、長方形、角丸長方形、楕円、 フィールド、ボタン、タブコントロール、 ポータル、Webビューア
  5. 5. スタイル情報はCSSに FileMaker 12では、 レイアウトオブジェクトの テキストの大きさ、 背景色やグラデーション、 罫線などのスタイル情報がCSSに変更された テキスト
  6. 6. Cascading Style Sheets(CSS) 簡単に言うと、Webの世界で使用される標準 的なスタイル定義の仕様 HTML や XML の要素をどのように修飾(表示)するかを指 示する、W3Cによる仕様の一つ。文書の構造と体裁を分離 させるという理念を実現する為に提唱されたスタイルシー トの、具体的な仕様の一つ(Wikipedia)
  7. 7. スタイル情報はCSSに Webの世界と同様の記述方法に 内部的な変更なので、一般的なFileMakerの 利用では意識することはない
  8. 8. CSS .rectangle { background-color: rgb(243, 241, 230); border: 5px solid #48628d; } rectangleクラスの オブジェクト テキスト
  9. 9. CSS3 角丸、グラデーション、変形、アニメーショ ン等の表現が可能に ベンダープレフィクスが必要な場合もあり、 複数のWebブラウザに対応するために定義を 複数記述しなければならない場合も 古い仕様のWebブラウザでは動作しない
  10. 10. レイアウトテーマ FileMaker 12の新機能 CSS3で記述 独自プロパティも多数
  11. 11. FileMaker Proのレイアウトを Webブラウザで再現
  12. 12. レイアウトをWebブラウザで FileMaker Pro Webブラウザ
  13. 13. Webブラウザで動作することのメリット FileMaker Goのインストールが不要 デバイスを選ばない OS X, Windows, iOS, Android...
  14. 14. レイアウトテーマ /Applications/FileMaker Pro 12 Advanced/FileMaker Pro Advanced.app/ Contents/Resources/Themes(OS X / FMPAの場合) レイアウトテーマはCSS, XML, 画像(ない場 合もあり)で構成 今回は「クールグレイ」のCSSファイルのみ 使用(cool_gray.css)
  15. 15. レイアウトテーマ レイアウトテーマのCSSからヘッダとフッタ のCSSをコピー 同様にテキストフィールドとチェックボック ス、オブジェクトフィールドのCSSをコピー
  16. 16. レイアウトオブジェクト レイアウトオブジェクトのXMLを取得 DDR(データベースデザインレポート) Clip Manager(有償) FMClipboardBroker(フリーウェア)
  17. 17. レイアウトオブジェクト XMLに含まれる情報 Bounds(座標) フィールド名やオブジェクト名 スタイル情報(CSS) などなど…
  18. 18. DEMO 1
  19. 19. HTML作成 Boundsから取得した座標(上からと左から) をそれぞれ、top:とleft:で指定 同様に幅と高さをそれぞれ、 width:とheight:で指定 LocalCSSのselfにあるスタイルを適用
  20. 20. HTML作成 レイアウトに直接置いた画像 16進エンコードされたバイナリ文字列を デコードし、base64でエンコード IMGタグのSRC属性にセット
  21. 21. DEMO 2
  22. 22. データベースとの連携 FileMaker Server (Advanced) カスタムWeb公開(XML Web公開)
  23. 23. データベースとの連携 INTER-Mediator 少ない開発作業でやりたいことを実現できる Webアプリケーションフレームワーク 新居雅行氏による開発 http://inter-mediator.info/
  24. 24. データベースとの連携 定義ファイルの記述 クラス名にIM[table@field@target]を追加 すればDBのデータの表示や編集が可能 <input class=”IM[table@field]” type=”text”>
  25. 25. データベースとの連携 バックエンドはFMSの他にMySQLや PostgreSQLといったDBMSに対応 ビジネスのスケールで使い分けを行うことが できる
  26. 26. DEMO 3
  27. 27. モバイル対応 デバイスの画面サイズに応じた レイアウトを作成 ユーザーエージェントや解像度を判断し、 適切なレイアウトへ移動させると良い ツールバーにも一工夫が必要
  28. 28. FMPress データベース連動Webアプリケーションを 作成・運用できる専用サーバーサービス DDRをアップロードするだけで、 デモのような Webアプリに変換する機能を搭載 https://www.emic.co.jp/fmpress/
  29. 29. まとめ FileMaker 12のレイアウトはWebブラウザで レンダリングしやすいので活用してみよう INTER-Mediatorは簡単にデータベースと連動 したWebサイトが制作できる

×