FileMakerのグラフを、データを掘り下げる画面にする【2016年講演資料】

FileMaker カンファレンス 2016で、JavaScriptのグラフ描画機能をFileMakerと組み合わせ、操作できる分析画面を作る方法を紹介しました。グラフを表示するだけでなく、気になる項目を選んで、さらに詳しい情報へ進めるようにする。そのための画面とデータの設計をお話しした講演です。

グラフを「眺める画面」から「調べる画面」へ

講演では、集計結果から詳細へ進むドリルダウン、棒グラフと折れ線を組み合わせたコンビネーションチャート、複数の指標を比較するレーダーチャートを取り上げました。

数字の一覧だけでは気づきにくい傾向を捉え、気になる項目を選んで、次の情報を確かめる。こうした操作を組み込むことで、業務のデータを調べるためのBIダッシュボードへとつなげる考え方です。

JavaScriptのグラフとFileMakerの処理をつなぐ

資料では、Google Chart ToolsとD3.jsを紹介し、FileMakerのWebビューアへ組み込む方法を説明しています。

グラフ上の項目がクリックされたことをJavaScript側で受け取り、選択された値をFileMakerのスクリプトへ渡す。講演当時は、fmpプロトコルを使って、WebビューアからFileMakerの処理を呼び出す実装を紹介しました。

表示のための技術と、業務データを扱うFileMakerの処理を結び付けることで、利用者の操作に反応する画面を作っています。

集計の重さは、データの持ち方から考える

グラフを描くたびに大量の取引データを集計すると、画面の表示が重くなる原因になります。

講演では、集計済みのデータを保持するサマリー用ファイルを用意し、サーバー側のスクリプトやFileMaker Serverのスケジュール実行を組み合わせる方法を紹介しました。

画面を表示する処理と、集計データを準備する処理を分けて考える。グラフの見た目だけでなく、実際の業務で使える応答性を支えるための設計です。

デモで示した操作は、スライドと解説を合わせて

保存資料には、グラフの画面例、クリック時の処理を記述したコード、FileMakerとの連携方法が残っています。一方、「デモ」と記された箇所の実際の操作は、PDFでは再生されません。

記事とスライドでは、当時どのような仕組みで操作とデータをつないだかをご覧いただけます。実装方法やライブラリの利用条件は、2016年時点の発表内容です。

JavaScriptを使った画面開発については、後年のWebixを使った講演記事でも紹介しています。

講演名：高度なデータ分析を実現するインタラクティブなグラフの実装法

業務データを、日々の判断に使える画面へ。FileMakerでの可視化や画面の改善について、はじめのご相談でお聞かせください。