最新情報

日付:

サイト内検索

メモのタグをグラフで見る（FileMaker,Chart.js）

日付:

１．メモのタグをグラフで見る

※この機能はバージョン0.99からのものです。『最新情報』のページにダウンロードリンクがあります。


　FileMaker19では、JavaScript機能が強化され、Webビューアに埋め込んだJavaScriptとFileMakerスクリプトとの連携が簡単にできるようになりました。
　これを利用して、メモに付けたすべてのタグをChart.jsでグラフ化してみようと思います。
iOS,iPadOS,MacOSX,FileMakerGo19限定です。FileMakerGo18の場合は、Chart.jsのラベルをタップしても選択タグが取得できません。

（１）Chart.js編

『Chart.js』をタップ

グラフのラベルをタップ→『選択タグ』にラベル名が表示→検索

操作例（GIFアニメ）

ソースコード

　Webビューアの（JavaScriptの）ソースコードは、ソースタブで表示されるので、自由に修正してテストが可能です。

前提条件

  • iOS,iPadOS,MacOSX,FileMakerGo19限定です。FileMakerGo18の場合は、Chart.jsのラベルをタップしても選択タグが取得できません。
  • Windows版FileMakerでの動作確認はしていません。（IE11,ES5だとたぶん...）
  • FileMakerスクリプトからJavaScriptには、JSONで渡していますが、肝心のChartのラベル名,値は、それぞれCSV（カンマ区切り）の一次配列としました。（全部JSONにするべきと思ったが力及ばず）
  • 上記により、ラベル名（＝タグ名）にはカンマが使用できなくなるため、タグテーブルのタグフィールド属性に、禁則文字チェックの計算式を設定したり、タグを入力する画面で禁則文字チェック（イベントスクリプト）をするようにしました。

処理の特徴

  • タグテーブルからEXECSQL関数でタグ名と件数の値（改行区切りの配列）を取得したのち、タグ名のCSVと件数のCSVに分割するため、カスタム関数を作って処理しています。（カスタム関数『CSVから列指定で値取得』）
例

タグテーブル
↓
EXECSQL関数
↓
旅行,10
花,8
食べ物,5
↓
カスタム関数『CSVから列指定で値取得』
↓
旅行,花,食べ物
10,8,5

  • カードレイアウトでWebビューアを表示した際、JavaScript側のユーザ関数を呼んでも、何も表示されない現象が起きたので、Webビューアのロードが終わるのを待ってから（他に方法があるかもですが）呼ぶようにしました。（FileMakerスクリプト『タググラフChart.jsを表示』）

（２）標準グラフ編

　こちらも操作をGIFアニメで紹介しています。FileMaker標準のグラフです。

２．所感

　こうやって実際に比較してみると、見た目はChart.jsが良さそうですが、タグがどんどん増えていくと、グラフタイプによってはラベルをタップしづらくなりますね。となると horizontalbar が適切なのか。
　また、インターネットに接続できない場所がメインだと、オフラインでもChart.jsを表示させる工夫が必要となったり、結局は、見せるところは標準のグラフ（horizontalbar ）で、タップしてタグを選択させるところのユーザインタフェースはリスト（一覧）にして、というのでも十分な感じもします。（Hypermemo程度のものであれば。）

３．参考にした情報

（１）Chart.js公式

（２）再描画

（３）カラーパレットプラグイン 

（３）WebビューアとJavaScriptの通信

（４）クリックイベントハンドラ

（５）データ構造

皆さんありがとうございました！