はじめに

　ファイルメーカー社から日本語版のFileMaker Pro 8.5の発売時期が発表になりましたが、そこまで待ちきれないという事で英語版を使用して今回の目玉機能「Webビューア」を利用したサンプルを作ってみました。

グラフを描いてみる

　通常FileMaker Proのレイアウト上にグラフを描画するには、例えばxmCHARTに代表されるプラグインソフトを導入する必要があります。プラグインを使えば各種グラフを動的に作成出来ますので、計算式さえ作れればスクリプトも不要で手軽にグラフィカルに情報を表示出来ます。ただし、これはプラグインを導入しないといけませんので、費用とプラグイン導入作業の手間がかかってしまいます。そこで今回は無償で公開されているJavaScriptのライブラリ集を利用してグラフをHTMLで表現し、それをFileMaker Pro 8.5の新機能「Webビューア」を使って表示してみます。

概要

　今回利用したライブラリは「WebFX」というApache Licence ver2.0で公開されているものです。これは標準で「棒グラフ」「折線グラフ」を組み合わせてグラフを描く事が出来ます。使い方は簡単で、今回のサンプルを利用していただくと「あら、これだけ？」と思うのではないでしょうか。もちろんインクルードするJAVAScriptの内部では複雑な処理をしていますが、利用する人はそこまで把握しなくても大丈夫です。そんなJAVAScriptの仕組みですが、FileMaker Pro側でやる事は下記の通りです。

1. グラフ用データをJavascriptで利用出来るように整形
2. 書出し用フィールドに１で作ったデータをJavascriptの形で埋め込んだHTMLデータを作成
3. 書出し
4. 書き出したファイルをWebビューアで読み込み

使い方

　今回のサンプルファイルはこのページ右上のリンク「今回使用したファイル」からダウンロードして下さい。zip形式で圧縮してあります。ダウンロードファイルを展開するとchartSampleというフォルダが入っていますので、それを適当なディレクトリに置いて下さい。ディレクトリの中には.fp7のファイルとJavaScriptのライブラリがincludesディレクトリ中に入っています。ただ、本稿ではシンプルにするために全部のライブラリではなく、今回のサンプル表示に必要なファイルのみを含んでいます。全機能を使ってみたい方はWebFXのサイトからダウンロードしてみて下さい。
　適当なディレクトリにフォルダを保存したら中のデータベースファイルを開きます。そしてボタン『再描画』をクリックするとレイアウト左のWebビューアの領域にグラフが描画されます。さらに右上のポータル部分の数値を変更してから再度ボタン『再描画』をクリックすると今度はグラフが変化します。どうでしょう、変わりましたか？

どうやって描画しているか

　それではこのグラフを描くのにはどういった処理をしているのでしょうか。HTMLファイルを書き出してそれをWebビューアで表示しているのは上記の通りですが、今回のポイントはHTML中に差し込むJavaScript部分の生成方法です。ここではポータルの中の値をFMPro8.5で追加された関数List()で取得して、改行文字を , に置き換えています。これで簡単にグラフに渡すパラメータを生成出来る訳です。ver8まででしたらここは関連レコードに移動やポータル内を上から順番になめて行くといった処理を書く必要がありましたが、FMPro8.5だと関数一つ。コレって結構すごい事だと思います。実はWebビューアよりも使う機会が多そうですし。
　あとの処理は計算式でHTMLを作成して書出し→書き出したファイルへのパスをURLフィールドに転記→レコード確定という流れになります。

ちょっと手を加える

　本稿のサンプルは単純な折線グラフですが、これを棒グラフや積み上げグラフにするには、サンプルファイルのスクリプト「DrawGraph」の４行目で設定している変数「$JS」の定義を開き

c.setDefaultType(CHART_LINE);

を

c.setDefaultType(CHART_BAR);

に変更します。こうすると折線グラフが棒グラフに変わります。もっと手が込んでくると折線と棒グラフを組み合わせる事も可能ですのでWebFXのページを参考に工夫してみて下さいね。

・・・・…というところで今回は終了です。どうでしょう、Webビューアで普通のWebページを表示するだけではない使い方の参考になりましたでしょうか。次回以降は別の更に高機能なJavaScriptライブラリを利用したサンプルやMacでさらに便利にWebビューアを使う方法等を御紹介します。

［2006/09/08］
［株式会社ジェネコム　給前悟郎］

◆関連リンク

• 今回使用したファイル
• WebFX