日本語版のFileMaker Pro 8.5がいよいよ発売になり、Webビューアをお試しになった方も多いと思います。このWebビューア、インターネット上のデータを表示する以外にも、さまざまな使い道があるのです。ということで、先日はJavaScriptを使った方法をご紹介しましたが、今回はFlashを使った方法に挑戦します。

グラフを描いてみる

今回は無償で公開されているSWF(Small Web Format)のテンプレートを使うことにします。SWFファイルとは、Flashドキュメント（FLA）からWeb用にパブリッシュされ、ムービーの表示に必要な情報のみが保存されたファイルのことです。
SWFファイルのグラフをHTMLで表示し、それをFileMaker Pro 8.5のWebビューアを使って表示してみます。

概要

今回利用したのは「XML/SWF Charts」というテンプレートです。Flashドキュメントは動的な外部XMLデータを受け取ってさまざまな表現をすることが可能です。このテンプレートでは、棒グラフ、積み上げグラフ、円グラフなど、さまざまなグラフを作成することができます。 シングルライセンスが$45というものですが、無料の機能限定版がありますので、今回は無料版を使うことにします。 FileMaker Pro側で準備することは以下の通りです。FileMaker Pro側で準備することは以下の通りです。

1. グラフ用データをXML形式で書き出す
   
2. グラフ描画用のHTMLファイルを用意する
   
3. HTMLファイルをWebビューアで読み込む
   

グラフ用データをXML形式で書き出す方法ですが、ここでは、計算フィールドでXML形式のデータをつくり、書き出してみました。

使い方

　今回のサンプルファイルはこのページ右上のリンクからダウンロードして下さい。zip形式で圧縮してあります。ダウンロードファイルを展開するとflashchartというフォルダが入っていますので、それを適当なディレクトリに置いて下さい。
　次にXML/SWF Chartsをダウンロードしてください。flashchartフォルダの中にcharts.swfとcharts_libraryフォルダを入れてください。
　適当なディレクトリにフォルダを保存したら中のデータベースファイル(FlashChart.fp7)を開きます。
chartタブで表示したいグラフの種類を選択して、[refresh]ボタンをクリックしてみてください。
（Pie=円グラフと 3D Pieを選択した場合は、どのデータで描画するか選択できますので、categoryを選択してください。）
　また、dataタブをクリックして、ポータル内のデータを変更したり、追加してみて[refresh]ボタンをクリックしてみてください。グラフが更新されていくのがわかります。
※注意：データのラベルは変更できますが、SWFファイルが日本語に対応していないため、日本語を表示することができません。

どのように描画しているのか

ここではポータルの中の値をFileMaker Pro8.5で追加された関数List()で取得し、さらに、カスタム関数を使ってXMLタグを追加しています。SWFのテンプレートに必要なデータの形式にデータを変換するには、XSLTを使って整形することもできますが、ここではあえてList()を使ってみることにしました。 custom functionタブに計算式が書かれています。 実行結果はdata sourceタブやフィールド定義を見て確認してみましょう。

　さて、せっかく計算フィールドでXMLデータらしきものをつくったのですが、このフィールドをそのままタブ区切りテキストなどでエクスポートすると、改行記号が垂直タブのため、chart.swfファイルがただしくデータを認識することができません。
　 そこでごくごく簡単なXSLTファイルを使って、XML形式でエクスポートしているのですね。単にひとつのレコードにあるひとつのフィールドを書き出しなさいというだけが記述されているexport.xsltファイルはデータベースファイルと同じフォルダ内にエクスポートされます。興味がある人はのぞいてみてください。

　ちなみに、このXML/SWF Chartsでは、円グラフとその他のグラフを描画するのに必要なデータの形が異なります（円グラフは１種類のデータしか描けませんが棒グラフは数種類のデータを並べて描画できます）。
　 ここではふたつのデータフィールドを用意してスクリプトでエクスポートするときにどちらのデータを使うか選択させています。もちろんCase関数を使って、データフィールドの中で条件分岐をさせればデータフィールドは１つで終わらせることもできますね。

というところで今回は終了です。

　前回から、FileMakerのレイアウト上にグラフを描く方法をふたつご紹介したわけですが、いかがでしたか？
　 Flash、というとちょっと敷居が高いのでは、と思いがちですが、Flashがまったくわからなくてもこんな便利なツールが配布されていることがわかったりすると、ばっちりグラフが描けてしまうのはうれしいことですね。

［2006/09/19］
［株式会社ジェネコム　村上ゆりか］

◆関連リンク

• 今回使用したファイル
• XML/SWF Charts