なお、今回の記事の作成にあたっては、Richard Carlton Consulting Inc. で提供されている WebDirect の概要と最適化のプレゼンテーションビデオをベースに、当社の知見も交えて開発のヒントをまとめてみました。
※本記事は FileMaker Server 13 の WebDirect 機能（2014/01/24 時点）を中心に書かれたものです。
※2017年5月10日に FileMaker Server 16 が発売されました。
FileMaker 16 WebDirect に関する記事も併せてご覧ください。
WebDirect は 16 で実用段階に近づくか？ ― JMeter による WebDirect 14/15/16 比較
※2017年5月10日に FileMaker Server 16 が発売されました。
FileMaker 16 WebDirect に関する記事も併せてご覧ください。
WebDirect は 16 で実用段階に近づくか？ ― JMeter による WebDirect 14/15/16 比較
【WebDirect の特長】
- WebDirectを使用するにはFileMaker Server 13 と同時接続(ライセンス)が必須
- IWP の後継版？ 但し、WebDirectがサポートするブラウザ数は減っている
- Web プログラミングの知識がなくても、基礎的な FileMaker Pro 開発経験があれば OK
- FileMaker Pro クライアントと（ほぼ）同内容をブラウザ上に展開
- FileMaker Pro 13 の機能の多くを Web ブラウザ上で実行、特にIWPに比し、実行可能なスクリプトステップが増えている
【WebDirect vs IWP】
以下の 旧版FileMaker の IWP (Instant Web Publishing) との相違表をご覧いただくと、さらに機能の概要がつかめると思います。
参考記事：Comparing FileMaker WebDirect to Instant Web Publishing
【WebDirect導入時の問題】
WebDirect 導入にあたっては以下の問題に特に留意する必要があります。
1. WebDirect の同時接続可能数はデフォルトでは 1。WebDirectの利用者数に応じて同時接続（ライセンス）の買い増しが必要（後述）。
2. 不特定多数を対象とした中大規模なサイトには向かない。WebDirect互換ブラウザが限られている（後述）。
3. 現時点で WebDirect のモバイル機器（タブレット／スマホ）に対するサポートが限定的（公式には非サポート）
4. 最大同時接続数が50、また同時接続が増えるとサーバのスペックも増す
5. WebDirect ではまともな印刷/PDF出力ができない。
2. 不特定多数を対象とした中大規模なサイトには向かない。WebDirect互換ブラウザが限られている（後述）。
3. 現時点で WebDirect のモバイル機器（タブレット／スマホ）に対するサポートが限定的（公式には非サポート）
4. 最大同時接続数が50、また同時接続が増えるとサーバのスペックも増す
5. WebDirect ではまともな印刷/PDF出力ができない。
【WebDirect対応システム開発のヒント】
WebDirect のプロジェクトに着手するまえに、上述の WebDirect できること/できないことをまず認識し、プロジェクトを実施するかどうか決定します。
状況によっては、プロトタイプを作成し、実際に近い運用環境でテストを行うことも検討してください。
開発に際しては WebDirect の特性を意識した開発を行う必要があります。
以下の FileMaker 13 WebDirect Overview and Optimization Presentation では開発ステップを提示しています。
FileMaker 13 WebDirect Overview and Optimization Presentation
Richard Carlton Consulting Inc.
このサイト、さすがプロ、素晴らしい ＼(＾o＾)／
以下、上記の動画を参考に WebDirect 導入・開発のポイントをまとめてみました。
ステップ1： 必要なライセンス種類/同時接続数の分析
WebDirect を使用するユーザ候補を選定し、それらのユーザがWebDirectのサポートするブラウザを使用し、さらにWebDirectがサポートする機能のみで十分業務を行えるか検討し、最終的なWebDirectのユーザ数を決めます。
たとえば、請求書などの帳票を印刷はWebDirect では扱えないため、FileMaker Pro や iPad を使用する必要が出てきます。
WebDirect（及びGo） のを使う場合は、使用ユーザ数に応じた同時接続ライセンスを購入する必要があります。
2014年1月24日現在、FileMaker Server 13 本体（99,000円）に 5 接続ユーザライセンスを付ける場合、別途104,400 円分のライセンス料を支払う必要があります。
また最大ユーザ数≠同時接続数ではないことも少し考慮にいれましょう。
例えば、WebDirectを使用する営業担当が10 人いたとしても、それほど頻繁にアプリを使わない場合、同時接続ライセンスは 5 で済む可能性もあります。
ステップ2： ブラウザ互換性の検討
公式サイトによると、DirectWeb でサポートされている Web ブラウザはつぎのとおりです。
なお、「FMEasy在庫 IWP/WD R1.5」という当社の製品でテストしたとろでは、IE11やChrome の上位バージョンでも動作しました。
〇Windows
Internet Explorer 9.x
Internet Explorer 10.x
Google Chrome 27.x
〇Mac OS X
Safari 6.x
Safari 7.x
Google Chrome 27.x
WebDirect非互換のブラウザを使用している場合、互換ブラウザをインストールする必要があります。
また、当方で上記に挙げたブラウザで動作や実行速度の検証を行っていますが、ブラウザによって動作にバラつきがあるので、使用を予定する各ブラウザによるテストも重要です。
弊社での Web ブラウザ別パフォーマンス検証結果は、こちらの記事をご覧ください。
WebDirect の Web ブラウザ互換性
WebDirect で公開したデータベースを Web ブラウザで開く時、FileMaker Server はレイアウト上のオブジェクトをCSS、HTML5、Web互換の画像データとして生成・転送するため、レイアウトに配置するオブジェクトは少なければ少ないほどページ読み込み速度は速くなります。
したがって必要に応じて、WebDirect 用と FileMaker Pro 用のレイアウトに分け、プラットフォーム別に動作するようにシステム構築するのが良いのでしょうが、そうすると開発工数が増えてしまうので、悩ましいところではあります。
ちなみに、弊社で開発中の『FMEasy在庫 IWP/WD R1.5』はWebDirectに対応する予定ですが、FileMakerとWebDirectで原則、同じレイアウトを使用するようにし開発工数を減らしています。また、レイアウトはできるだけシンプルにし、できるだけ適用するテーマのママ、手を加えないようにしています。
ステップ3： インスペクタのスタイルを使用し表示速度をUp
Web ブラウザの画面表示速度は、CSS、HTML5、画像データの転送量に依存し、レイアウトの作成方法によりこれらの転送量も大きく増減します。
表示速度を向上させるには、WebDirect に最適化されたレイアウトを作成することが重要で、そのためにはレイアウトモードで利用する「インスペクタ」の「スタイル」を使用します。この「スタイル」にはレイアウトレベルのスタイルとテーマレベルのスタイルがあり、この2つを使用することによりアプリケーション内でCSSが共有されるため、表示速度が向上します。この「スタイル」の使用方法については、機会があれば改めてご紹介したいと思います。
前述のビデオのプレゼンターによると、スタイルを使用していない旧レイアウトで生成されるデータ量と、スタイルを使用したレイアウトで生成されるデータ量を比較したところ、 850KB から425KB に減ったとのことでした。
これは、ブラウザでのレイアウトの読み込み速度が 2 倍速くなる可能性があることを意味しています。
※WebDirect では書式コピーツールを使わない
右図のレイアウトの書式コピーツールを使うと、オブジェクトごとに個別のスタイルとして CSS および XML に書式が登録されてしまうため、余分なデータ転送が発生してしまいます。
代わりに、スタイルを使いましょう。
右図のレイアウトの書式コピーツールを使うと、オブジェクトごとに個別のスタイルとして CSS および XML に書式が登録されてしまうため、余分なデータ転送が発生してしまいます。
代わりに、スタイルを使いましょう。
【FileMaker Pro 12/FileMaker Pro 13/WebDirect のハイブリッド環境で FileMaker Pro データベースを公開するには】
FileMaker Pro 13 のファイル拡張子は .fmp12 のため、FileMaker Pro 12 と互換性があります。
このため、FileMaker Server 13 でデータベースを公開すれば、FileMaker Pro 13 および WebDirect のみならず、FileMaker Pro 12 クライアントからも同データベースを利用できることになります。
このような複数のアプリケーションバージョンに対応したシステム環境を「ハイブリッド環境」と呼びます。
ハイブリッド環境において、それぞれの FileMaker Pro クライアントの動作条件を満たすようにする場合は、最もスペックの低いユーザに合わせて開発する必要があります。
つまり、ハイブリッド環境では FileMaker Pro 12 でレイアウトが適正に表示されることを前提にしたうえで、FileMaker Pro 13 および WebDirect でもアクセスできるように調整していくことになります。
ハイブリッド環境向けに開発を行う場合は、以下のような点に留意する必要があります。
※本項の記述は上記ビデオを参考にしています。
FileMaker Pro 13でレイアウトを保存すると FileMaker Pro 12 での表示が若干異なったり、FileMaker Pro 12で行ったレイアウト設定（特にフィールド内のインデント設定）が消失してしまったりすることがあります。
しかしながら、常に FileMaker Pro 12 を使用してレイアウト開発を行っていると、FileMaker Pro 13 の資産を十分に活かせませんし、後続の FileMaker データベース製品のことを考えると仕様に無理が出てくる可能性が高くなるでしょう。
したがって、クライアント別のレイアウトの切り分けを十分に行ったうえで、レイアウトを含む開発はすべて FileMaker Pro 13 で行い、FileMaker Pro 12 で表示チェックのみを行うというのがより現実的といえるかもしれません。
FileMaker Pro 13 のファイル拡張子は .fmp12 のため、FileMaker Pro 12 と互換性があります。
このため、FileMaker Server 13 でデータベースを公開すれば、FileMaker Pro 13 および WebDirect のみならず、FileMaker Pro 12 クライアントからも同データベースを利用できることになります。
このような複数のアプリケーションバージョンに対応したシステム環境を「ハイブリッド環境」と呼びます。
ハイブリッド環境において、それぞれの FileMaker Pro クライアントの動作条件を満たすようにする場合は、最もスペックの低いユーザに合わせて開発する必要があります。
つまり、ハイブリッド環境では FileMaker Pro 12 でレイアウトが適正に表示されることを前提にしたうえで、FileMaker Pro 13 および WebDirect でもアクセスできるように調整していくことになります。
ハイブリッド環境向けに開発を行う場合は、以下のような点に留意する必要があります。
案1) FileMaker Pro 12/13/Webdirect で共用されるレイアウトを作成するなら、FileMaker Pro 13 のテーマ、およびカスタムスタイルの使用は避ける。
FileMaker Pro 13 で導入されているテーマおよびカスタムスタイルは、FileMaker Pro 12 では十分に表示できないものが含まれています。
このため、レイアウトの調整は基本的に FileMaker Pro 12 で行い、表示チェックを FileMaker Pro 13 で行うようにするのが無難といえます。
案2) WebDirect 専用レイアウトを作る
先にご紹介したとおり、WebDirect のパフォーマンスは Web ブラウザに依存します。
Web ブラウザの読み込み時間を考慮すると、レイアウトのデータサイズは小さければ小さいほど良いということになります。
しかし、FileMaker Pro 12 のレイアウトは、「インスペクタ」の「スタイル」で最適化されていないため、WebDirect クライアントで表示すると、Web ページの読み込みに時間がかかってしまいます。
Web ページ読み込み速度を優先するなら、FileMaker Pro 13 で WebDirect 専用のレイアウトを作成し、カスタムスタイル設定で軽量化させたものを使うようにすると、WebDirect クライアントもデータベースに快適にアクセスできるようになるでしょう。
FileMaker Pro 13 で導入されているテーマおよびカスタムスタイルは、FileMaker Pro 12 では十分に表示できないものが含まれています。
このため、レイアウトの調整は基本的に FileMaker Pro 12 で行い、表示チェックを FileMaker Pro 13 で行うようにするのが無難といえます。
案2) WebDirect 専用レイアウトを作る
先にご紹介したとおり、WebDirect のパフォーマンスは Web ブラウザに依存します。
Web ブラウザの読み込み時間を考慮すると、レイアウトのデータサイズは小さければ小さいほど良いということになります。
しかし、FileMaker Pro 12 のレイアウトは、「インスペクタ」の「スタイル」で最適化されていないため、WebDirect クライアントで表示すると、Web ページの読み込みに時間がかかってしまいます。
Web ページ読み込み速度を優先するなら、FileMaker Pro 13 で WebDirect 専用のレイアウトを作成し、カスタムスタイル設定で軽量化させたものを使うようにすると、WebDirect クライアントもデータベースに快適にアクセスできるようになるでしょう。
※本項の記述は上記ビデオを参考にしています。
FileMaker Pro 13でレイアウトを保存すると FileMaker Pro 12 での表示が若干異なったり、FileMaker Pro 12で行ったレイアウト設定（特にフィールド内のインデント設定）が消失してしまったりすることがあります。
しかしながら、常に FileMaker Pro 12 を使用してレイアウト開発を行っていると、FileMaker Pro 13 の資産を十分に活かせませんし、後続の FileMaker データベース製品のことを考えると仕様に無理が出てくる可能性が高くなるでしょう。
したがって、クライアント別のレイアウトの切り分けを十分に行ったうえで、レイアウトを含む開発はすべて FileMaker Pro 13 で行い、FileMaker Pro 12 で表示チェックのみを行うというのがより現実的といえるかもしれません。
【その他の開発ヒント】
WebDirect が FileMaker Server 13 に搭載されているといっても、従前のデータベースを配置して公開しただけでは十分なパフォーマンスを得られない可能性が高いため、WebDirect による同時接続ユーザ数、およびレイアウトデータの転送量を意識した設計と最適化が必要になります。
こちらも併せてご参照いただければ幸いです。
パフォーマンスの最適化（PDF 『FileMaker 14 WebDirect ガイド』より）
最後に、上記で書ききれなかった WebDirect の開発ヒントをいくつかご紹介します。
-
レイアウトに配置する画像やオブジェクトは必要最低限に
ボタン、アイコン等にグラフィックを使うと、Web ブラウザでのロードに時間がかかります。
-
WebDirect で使うテーマはシステム全体でできるだけ統一する
たとえば、顧客マスタで「クール」というテーマを使い、売上画面で「エレクトリック」というテーマを採用すると、Web ブラウザで画面切替するたびにキャッシュ読み込みが発生するため、表示速度が遅くなります。 -
FileMaker Pro のような新規ウィンドウを開くことはできない
新規ウィンドウを仮想ウィンドウとして開くことはできますが、複数ウィンドウ上または複数タブ上に異なるレコードまたは異なるレイアウトを表示することはできません。
-
タブはできるだけ使わない
レイアウトに配置できるタブは入力フィールドの整理に役立ちます。
しかし、WebDirect では初回ロード時に最上位のタブが読み込まれた後、ユーザがタブ切替を行うたびに ブラウザ→ WebDirect → FileMaker Server 13 → WebDirect へのリクエストが発生するため、これがパフォーマンス低下につながることになります。
-
ソートは FileMaker Server 13 側で実行されるので高速になる
WebDirect 自身にはデータベースエンジンが搭載されていないため、データベースエンジンが行うべき操作はすべて FileMaker Server 13 側で実行されることになります。
このため、FileMaker Pro 13 クライアントでレコードソートをしたときよりも、WebDirect でソートしたときの方が処理速度が速かったという結果も出ています。
上記のビデオによると、35万件のレコードをソート実験した結果、WebDirect で 35 秒、FileMaker Pro クライアントで 227 秒と、実に 400% 近くのソート速度の差が出ています。
以上、WebDirect を使ったデータベース開発の参考にしていただければ幸いです。
参考記事（英語）：
FileMaker 13's WebDirect: I want to like it. I really do.
What is FileMaker WebDirect?
Comparing FileMaker WebDirect to Instant Web Publishing
その他の WebDirect 関連記事を読む
亀澤
