こんにちは。
ライジングサン・システムコンサルティングの岩佐です。
この記事では、下記に掲示するスクリーンショットのようなカレンダーチャートを、FileMakerのカスタムAppに実装する方法を解説したいと思います。
カレンダーチャート
目次
カレンダーチャートの見かた
このカレンダーチャートは、横軸に年ごとの月を、縦軸に曜日を取り、ひとつひとつのセルがある特定の日を表しています。
例えば下のスクリーンショットは、2016年1月部分を切り取ったもので、月の始まりに当たるセルが、一番左側の列のF行から始まっています。
そして、2016年1月の最終日である31日（日）は、左から６列目のS行に配置されています。つまり、１年間365日分のセルが、７行の曜日別に並べられているチャートということです。
一般的なカレンダーは、曜日を横軸に取りますが、こちらのカレンダーは曜日を縦軸にとっているところがユニークな点です。
次にそれぞれのセルの色についてです。
ご覧のとおり、セルの日付毎に色の濃淡があることが確認できると思います。この色の濃淡は、各日付別の数字の大きさを表しています。
つまり色が濃い日ほど、その日に設定された数値が大きく、色が淡いほど、その日に設定されている数値が小さいことを表しています。
例えば2016年1月1日には「26,284,495」が、2016年1月31日には「181,613」という数値が設定されています。
1月1日と比較して1月31日の数値が小さいので、1月31日のセルに表示されている色はより白に近い淡い色になっています。
このようなチャートを用いることで、１年という時間軸の中で、曜日別の数値変動を直感的に把握することができます。
カレンダーチャートの利用シーン
上記で解説した通り、日別の数値の大きさを色の濃淡であらわすチャートなので、例えば日別の売上、予約件数、計画・実績作業量等といった数値情報を、大まかに捉えるには非常に優れた表現方法です。
また、上記のスクリーンショットのように、年度を縦に並べての対比も容易にできるので、「昨年同週比」や「昨年同月比」で実績を確認したいカスタムAppには非常にお勧めのチャートです。
3.実装方法
このカレンダーチャートは、FileMakerがもつ標準のグラフ機能ではなく、Google Chart ToolsというGoogleが提供しているWebサービスを用いて実現しています。
Google Chart Tools：https://developers.google.com/chart/
こちらのリンクから、[Rich Gallery]というリンクボタンをクリックすると、Google Chart Toolsに用意されている約20のグラフ・チャートを一覧で見ることができます。
そしてこのGoogle Chart Toolsには、FileMakerが標準で提供するグラフには無い２つの特徴があります。
ひとつは、FileMakerがサポートしていない形式のグラフやチャートを使えることです。
例えば折れ線グラフと棒グラフがセットになったComboChart（複合グラフ）は、多くのビジネスレポートでよく求められるグラフのひとつです。
この複合グラフは、単位の異なる２つの情報を同時にグラフ化できるので、例えば棒グラフ側には売上金額と目標金額を、折れ線グラフには目標金額の達成率を同時に表示するようなチャートを描くことができます。。
このようなグラフをFileMakerの標準機能のみで実装するのは非常に困難ですが、Google Chart Toolsを使うことで、比較的容易に実装することができます。
もうひとつのGoogle Chart Toolsの魅力が、グラフ・チャートにスクリプトを組み込むことが可能なことです。
例えば今回ご紹介するカレンダーチャートのセルをクリックすると、その中身の数字の内訳を、より詳細に表示するレイアウトを起動するようなスクリプトを組み込むことが可能です。
こちらのスクリーンショットでは、2016年1月16日のセルをクリックした時に、FileMakerのレイアウト上に、選択した日と数量・金額を表示しています。
このようなインタラクティブ（対話的）な操作が可能になることで、まずグラフやチャートで大まかな傾向・トレンドを把握し、その後に気になる箇所をより詳細に調査するという機能を実装することができます。
例えば、カレンダーチャートだと、ある日の濃淡が非常に濃い日、逆に非常に淡い日をクリックしてみて、その日の詳細な売上情報や予約情報等を、FileMakerのリストレイアウト等で表示するといった機能を実装することができます。
4.カレンダーチャートの実装方法
それでは具体的な実装方法を解説していきます。
この記事の一番最後には、サンプルファイルのダウンロード方法も記載しておりますので、ぜひサンプルファイルをダウンロードいただき、実際に中身を確認しながら以降の解説をご覧いただけると、より理解が深まると思います。
4-1.チャートはWebビューアで実装する。
サンプルソリューションを、レイアウトモードに切り替えると、カレンダーチャートを表示していた部分がWebビューアになっていることが確認できると思います。
Google Chart ToolsはWebサービスなので、実装にはWebビューアを使います。
Webビューアに表示するHTMLソースは、【$$htmlSource_CalendarCharts】というグローバルフィールドに格納されていることが確認できると思います。
Webビューアの設定はたったのこれだけです。
4-2.表示する元データの準備
次にカレンダーに表示する元データについて解説します。
今回は、サンプルデータとして【SalesSummary】という名前のテーブルを用意し、その中に2013年1月1日から、2016年1月31日までの売上データをテストデータとしてセットしました。
salesDateフィールドは日付型の売上日を、Quantityフィールドは売上数、Amountフィールドは売上金額をセットしています。
また、テーブルとしてはもうひとつ、【__Control】というテーブルを持っています。こちらには、カレンダーチャートを記述するためのHTMLソースが格納されています。
__Controlテーブルに格納されているHTMLソースは、サンプルソリューションのスライドパネルコントロールの２つ目のパネルから確認することができます。
4-3.動作のメカニズム
このカレンダーチャートを記述するために必要なFileMakerのスクリプト記述量は極めて少量で、かつ簡単です。
先に掲示したHTMLソースを、FileMakerのスクリプトから適切に編集してWebビューアにセットするだけで、カレンダーチャートを描画することができます。
HTMLソースを確認すると、幾つか赤文字で、HTMLファイルに記述できないような文字列が表示されています。
例えば【 @_DATA_ITEMS_@】や【@_TITLE_@】、【@_CELL_SIZE_@】などです。
動作原理としては、次のとおりです。
・あらかじめControlテーブルのHTMLソースフィールドにひな形となるHTMLソースをテキストフィールドのデータとして格納しておく。
・ひな形のHTMLソースに「可変文字列」を仕込んでおく。（@_DATA_ITEMS_@等）
・上記の可変文字列をSubstitute関数で編集することで、動的にHTMLソースを生成する。
・生成したHTMLソースコードを、Webビューアにセットする。
詳細な動作の解説については、こちらのYouTubeにアップロードしたビデオチュートリアルをご確認ください。
※音声が出ます。お気をつけ下さい。
※2016年2月24日 07:18 加筆：
現在サンプルソリューションのカレンダーチャートが表示できない原因不明のトラブルが発生しています。
原因の特定が解決するまで、サンプルソシューリョンの配布は一次見合わせたいと思います…
楽しみにされていた方、大変申し訳ございません…
※2016年2月24日 08:15 加筆：
１時間ほどの調査ですが、著者のブラウザからGoogleChartToolsのオフィシャルサイト上でもチャートが表示されないことが解りました。
GoogleChartToolsのオフィシャルサイト：
https://developers.google.com/chart/interactive/docs/gallery/calendar
その他、いくつかのチャートも同様に、つい先日までは表示できていたものが、現在表示できない状況です。
表示できないチャートに共通しているのは、ページの先頭に次の注意書きのあるものです。
今後、大幅なアップデートが予定されているという注意書きなので、現在何らかのアップデートが実施されている可能性もあります…
