FileMakerの画面を、WebixとJavaScriptで使いやすくする【2022年講演資料】

Claris Engage Japan 2022で、JavaScriptベースのUIライブラリ「Webix」をFileMakerと組み合わせる方法を紹介しました。画面の操作性を高めながら、別の言語を書く作業を増やしすぎない。その両立を目指した開発の工夫を、講演資料とともに振り返ります。

業務で使いやすい画面を、少ないコードで組み込む

業務アプリケーションでは、データを一覧にして比較したり、条件で絞り込んだり、表の形で編集したりする操作が繰り返されます。

講演では、こうした業務向けの画面部品がそろうWebixを取り上げました。採用理由として紹介したのは、業務システムに適した部品、少ないコードで実装できること、ドキュメントやサンプルの充実という3点です。

JavaScriptを書く時間が増えすぎないようにする

高度な画面を組み込めても、そのためのコードを書く時間が大きく増えてしまえば、ローコード開発の利点が薄れます。

そこで、Webixを利用するためのHTML・CSS・JavaScriptを自動生成する社内ツール「WebixController」を用意しました。講演では、このツールを使い、GUIでの設定とFileMakerのスクリプトを組み合わせて画面を実装するデモを紹介しています。

画面ごとに同じようなコードを繰り返し書く作業を減らし、共通の仕組みを使って開発できるようにする取り組みです。

FileMakerと画面の間で、データをやり取りする

画面が表示できるだけでは、業務アプリケーションとして使えません。FileMakerで管理するデータと、Webixの画面が扱うデータを受け渡す必要があります。

講演では、FileMaker Data APIのJSON形式のデータを利用する構成も取り上げました。画面部品の選択、コード生成、データ連携を合わせて設計することが、実際の業務へ組み込むためのポイントです。

スライドでは設計の考え方を、動画では画面の動きや実装のデモをご確認いただけます。資料中の社内ツールについては、当時の紹介内容であり、現在の一般提供を案内するものではありません。

講演名：JavaScript ベースのローコードライブラリ Webix を用いて優れたユーザインタフェースを構築する方法

講演動画を見る（YouTube）

FileMakerの標準機能に何を組み合わせれば、現場で使いやすい画面になるか。実現したい操作や、いま使いにくいと感じることを、はじめのご相談でお聞かせください。