http://FMPro.jp  FileMaker Pro 関連総合ポータルサイト
<コラム>開発者

Web ビューワーを使ってグラフを表示する(3)

昨年、FileMaker Pro 8.5 が発表され、Web ビューワーが利用出来るようになったことで、FileMaker の表現力が大幅に増しました。
また、今年発表された FileMaker Pro 9 ではこの Web ビューワの機能も強化されています。その一つに 8.5 では Mac OS でしか利用できなかった data スキームの利用が Windows でも利用出来るようになったことがあげられます。

昨年、当コラムでJavascript を利用する方法Flash を利用する方法を紹介しましたが、今回は data スキームを利用することで、スクリプトもプラグインも外部ファイルも利用することなく、値の変更が即座にグラフに反映される方法を紹介します。

サンプルファイルのキャプチャ
図 1 サンプルファイルのキャプチャ

data スキームについて

data スキームは URL の中にデータを埋め込む為のもので、<img src="data:image/gif;base64,BASE64 データ ">とすれば、画像ファイルをおくことなく html の中で画像を表示することが出来ますし、data:text/html, とすれば、html をそのまま表示することができます。
以下のソースを、ブラウザの URL を入力するためのロケーションバーにペーストして試してみてください。

残念ながら、Windows の Internet Explorer は data スキームに対応していないので利用できません。Windows の場合は Firefox など、data スキームに対応したブラウザで試して下さい。

画像の例 リンクを別ウインドウで開く(Windows の Internet Explorer は非対応)
data:image/gif;base64,R0lGODlhIAAYAMQAAP////8pKf8AAO/v99be99bW78bG57W957W13qWt1pyl1pSc1oyc3oSMznuEznN7xmtrvWNzzlpjvVJatRAYnAgYnAAIlAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABcALAAAAAAgABgAAAXLICCOZGmeaKqubOu+qCXPdG3fM1BZe8//viBwWAHkTA/ZTjlb/mjGigQlaVqZzJ3RMt1aKCIHzUmuFXldoOjhwz6v2zQPDHhMB6KBbFHIH5ZaaCgQXSIEFgomBk5bECYDVV0QMg0iCRUUESITPVFdEqBVMnIWlV4WIg05oyJtO2k7pk+pq1IiYzKOXrI/a0pxt2WkXQYUFQmbqBeerVi2UTIMJmIiFxe5oGVc2TQSCCIIE6gAAQIBgFdZV2UAFwLvMC3lAfH19vf4ACEAOw==
html の例 リンクを別ウインドウで開く(Windows の Internet Explorer は非対応)
data:text/html,<html><title>TEST</title><body><h1 style="color:#00c;">Hello, world!</h1></body></html>
ロケーションバーに直接 data スキームで html を指定した例
図 2 ロケーションバーに直接 data スキームで html を指定した例

data スキームについての RFC
http://www.ietf.org/rfc/rfc2397.txt
http://www.akanko.net/marimo/data/rfc/rfc2397-jp.txt(日本語訳)

グラフを描いてみる

今回は data スキームを利用することで、スクリプトもプラグインも外部ファイルも利用することなく、値の変更が即座にグラフに反映されるような方法です。

グラフを描画するような javascript を利用する html を FileMaker の計算式で生成し、その html ソースをそのまま Web ビューワーで描画させるだけです。
data スキームは Mac 0S の場合は 8.5 から、Windows の場合は 9 から利用できるため、図 3 の Web ビューワーの設定では、Mac OS かアプリケーションバージョンが 9 以上の時は、data スキームを設定し、それ以外( Windows の 8.5 )の場合は、data スキームの代替となる about: で利用出来ない旨を表示するようにしています。
サンプルファイル※ を実行して、いろいろな値を変更してリアルタイムにグラフが変わる様子をみてください。

※zip アーカイブを展開して出来るファイルは「 Graph_GlibJs.fp7 」一つです。
Web ビューワーの設定
図 3 Web ビューワーの設定

なお、このここで使用しているサンプルファイルはmedical macintoshの山本康仁先生が、昨年の 8 月にオーランドで行われた FileMaker Developer Conference 2006 の帰りの飛行機の中で作りあげたファイルの計算式部分をカスタム関数化したものです。

Tips

Mac 版の場合 Web ビューワーの設定で、Web アドレスを指定するとき、下記のように charset を宣言することで、日本語も表示することができます。Mac 版の FileMaker Pro 9 では、この charset 宣言をしていなくても機能しているようですが、8.5 では必須です。

data:text/html;charset=utf-8,<html>...</html>

Mac 版の 8.5 で data:text/html,<html>...</html>というように charset を宣言しない場合は、日本語部分だけを GetAsCSS 関数でエンコードする必要があります。
また、Windows 版の場合は、charset を宣言するしないにかかわらず日本語部分だけを GetAsCSS 関数でエンコードする必要があります。

補足

各プラットフォーム、バージョンでの日本語表示の可否
8.5 for Mac9 for Mac10 for Mac11 for Mac12 for Mac8.5 for Win9 for Win10 for Win11 for Win12 for Win
※1×-×××
※2-×××
※3-×××
※4-
  1. data:text/html, だけで、body の中に日本語をいれる
    data:text/html,<html><title>TEST</title><body><h1 style="color:#00c;">テスト</h1></body></html>
  2. パラメータに charset=utf-8 を指定して、body の中に日本語をいれる
    data:text/html;charset=utf-8,<html><title>TEST</title><body><h1 style="color:#00c;">テスト</h1></body></html>
  3. パラメータに charset=utf-8 を指定し、さらに meta タグで言語を指定する
    data:text/html;charset=utf-8,<html lang="ja"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>TEST</title><body><h1 style="color:#00c;">テスト</h1></body></html>
  4. 日本語部分を GetAsCSS 関数を使い数値文字参照にする
    data:text/html,<html><title>TEST</title><body><h1 style="color:#00c;">&#12486;&#12473;&#12488;</h1></body></html>
[2007年9月12日](補足修正:2012年4月5日)
[社本修司 / 株式会社ジェネコム]


Copyright © 2004-2012 FMPro.jp All Rights Reserved.