FileMaker × 生成AIでドラッグ操作できるガントチャートを1日で構築してみた
※工数に関するご注意：本記事の「1日」は、シンプルな環境でのプロトタイプ検証時の目安です。既存ファイルの構造や追加要件により導入工数は変動しますので、あらかじめご了承ください。
出典：Claris 公式サイト（参考資料を参照）
目次
はじめに：Web ビューワのガントチャートはなぜ難しい？
FileMaker でタスク管理をしていると、「一覧表ではなくガントチャートで見たい」「バーをドラッグして日付を変えたい」という要望をよくいただきます。
しかし、Webビューワで動くインタラクティブなガントチャートを自作するには、HTML / CSS / JavaScriptと FileMaker スクリプトの両方の知識が必要で、なかなか手が出ないのが実情ではないでしょうか。
今回は、生成AI（Claude Code）と補助ツールを組み合わせて、既存のタスク管理テーブルからドラッグ操作できるガントチャートを1日（実際には数時間）で構築した事例をご紹介します。
人がコードを書いた行数はゼロ。AIへの依頼は、この一文から始まりました。
「Task listの内容からwebビューワで表示するガントチャートを作成してください。」
（この後、対象テーブルやデザインなどの指示をしています。）
完成したガントチャート
FileMaker の Task List テーブル
使用した Claris FileMaker のバージョン
- Claris FileMaker Pro 26.0.1.51
- Claris FileMaker Server 22.0.2.204
FileMaker × 生成AIで開発する全体の流れ
今回のFileMaker × 生成AIによるガントチャート開発は、次の流れで進めました。
- FileMaker
「名前を付けてXMLとして保存」で構造をエクスポート - 変換ツール
FilemakerXMLCompressor：XMLをAIが読める形式に一括変換するツール
ai2FM：XMLのスクリプトについて、同様にAIが読める形式に一括変換 - Claude Code
解析と部品（スクリプト・HTML / CSS / JavaScript）の生成 - ai2FM
生成されたスクリプトを FileMaker に貼り付け - 動作確認と調整
つまずきもAIと一緒に解決
※今回使用したツールについての詳細は末尾に記載したURLを参照ください。
ai2FMはデモ用ライセンスを使用しています。
Claude CodeはOpus 4.8を使用しています。
STEP1：FileMaker の構造を XML で AI に読ませる
スタート地点は、対象ファイルで実行した「名前を付けてXMLとして保存」（分析ツールの詳細を含める）のスクリプトステップです。
「名前を付けてXMLとして保存」は、Ver.18から実装された、ファイルの構造などを解析するための情報をXML形式で出力するスクリプトステップです。
今回は、AIに FileMaker の構造を理解してもらうために、このスクリプトステップで必要な情報を利用します。
出力したXMLから「FilemakerXMLCompressor」と「ai2FM」のツールを使用して、次の2つを生成しました。
- AIが読みやすい軽量化Markdown（テーブル・フィールド・リレーション・レイアウト・スクリプトの構造情報）
- FileMaker に貼り戻せる.fmscriptファイル群（既存スクリプトのテキスト版）
Claude CodeはこのMarkdownを読み、Task Listテーブルのフィールド構成や、Webビューワを持つレイアウト、既存スクリプトの作りを把握しました。
既存アプリの設計思想に合わせた実装方針をAIが自分で立てられるのがポイントです。
STEP2：Claude Code がスクリプトと HTML/CSS/JS を生成する
冒頭の一文に加えて、デザインなどの内容を依頼し、Claude Codeが次の部品を一式生成しました。あわせて作業手順書の作成も依頼しました。
| 生成されたもの | 内容 |
|---|---|
| FileMaker スクリプト 3本 | ①タスクをJSON化 ②HTMLを組み立ててWebビューワに表示 ③Webビューワからの更新を受けてレコードを書き戻し |
| HTML / CSS / JavaScript（約900行） | ガントチャート本体。ドラッグ＆ドロップ、編集モーダル、新規タスク追加に対応 |
| 作業手順書 | コピペ素材の一覧と導入5ステップ、トラブルシューティング付き |
しくみはシンプルで、テーブルのフィールドにHTML / CSS / JavaScriptを分割して格納し、スクリプトが置換点（プレースホルダ）でひとつのHTMLに組み立ててWebビューワに渡します。
デザイン変更はCSSフィールド、動作変更はJavaScriptフィールドを編集するだけです。
生成されたもの
作業手順書の一部
VS Codeの画面
STEP3：ai2FM で生成スクリプトを FileMaker に取り込む
AIが生成したスクリプトはテキストファイル（.fmscript）です。
これを FileMaker に取り込むときに活躍するのがai2FM（VS Code拡張）です。
テキストと FileMaker クリップボード形式を相互変換してくれる、貼り付け作業がとても便利になる補助ツールです。今回はデモ用ライセンスで使用しています。
操作は2アクションだけです。
- VS Codeで.fmscriptを開いてCtrl+Alt+F（FileMaker 用の形式に変換してクリップボードへ）
- FileMaker のスクリプトワークスペースでCtrl+V（本物のスクリプトステップとして貼り付く）
Gantt_JS受信.fmscript
FileMaker 側で貼り付けたスクリプト
STEP4：Web ビューワのつまずきも AI と一緒に解決する
ただし、一度では動きませんでした。
それでも、症状を伝える（FileMaker の画面キャプチャーを作業しているVS Codeに貼る）だけで、AIがその場で原因を分析し、修正版の提供から手順書への反映までやってくれるため、手戻りは最小限でした。
| つまずき | 原因と解決 |
|---|---|
| Webビューワにエンコードされた文字列がそのまま表示される | URL文字列内の記号を変換ツールが誤解釈。HTMLテキストを直接渡す方式に変更して解決 |
| バーをドラッグするとWebビューワが真っ白になる | 更新スクリプトのレイアウト切り替えで表示が破棄されていた。画面外の作業ウインドウで更新する方式に改修して解決 |
| タスク名が見切れる | 行の高さと行間をCSSで調整（CSSフィールドの貼り替えだけで反映） |
このように、FileMaker 開発でつまずいた部分も、Claude Codeに状況を伝えながら修正していくことができました。
完成したガントチャート
完成したガントチャートでは、次のような操作ができるようになりました。
- マイルストーン別のグループ表示・凡例・今日ライン・進捗バー・期限超過の警告表示
- バーのドラッグで日付移動、両端のドラッグで期間変更 → レコードが即時更新
- バーやタスク名のクリックで編集モーダル、新規タスクの追加もWebビューワ内で完結
- 更新後はチャートがその場で再描画（スクロール位置も維持）
ドラッグ＆ドロップでタスクの日付を変更したり、マウスでバーを広げて期間を変更したりできます。
ドラッグ＆ドロップする様子
マウスで広げる様子
また、タスクをクリックすると詳細画面が開き、内容を更新できます。
まとめ：生成AIで既存カスタム App の機能追加が身近に
今回、FileMaker × 生成AI（Claude Code）を使って、既存のTask Listテーブルからドラッグ操作できるガントチャートを構築しました。
ポイントをまとめると、次の3点です。
- FM→AI（XMLから構造を読ませる）とAI→FM（.fmscriptで書き戻す）の往復がそろうと、既存カスタムAppの機能追加をAIに任せられるようになります
- 従来ならWeb技術者への外注や数日〜数週間の開発が必要だった対話型UIを、担当者1人＋AIで1日で実装できました
- つまずきの記録もAIが手順書として残すため、ノウハウが資産として蓄積されていきます
「Webビューワはハードルが高い」と感じていた方こそ、生成AIと FileMaker を組み合わせた開発を一度試してみてはいかがでしょうか。
FileMaker での生成AI活用や、既存のカスタム App への機能追加など、今回のような開発についても、ぜひ参考にしてみてください。
※工数に関するご注意： 本記事のタイトルに記載している「1日」は、シンプルな環境でのプロトタイプ検証時の目安です。既存ファイルの構造や追加要件により導入工数は変動しますので、あらかじめご了承ください。具体的な導入を検討されている方は下記までご相談ください。
🔗参考資料
🎥 Claris公式
Claris FileMaker｜名前を付けてXMLとして保存
FileMaker のファイル構造を XML 形式で出力する方法について、Claris 公式ヘルプを参照しています。
https://help.claris.com/ja/pro-help/content/save-a-copy-as-xml.html
Claris FileMaker｜AI
FileMaker の AI 関連機能を紹介する Claris 公式ページです。冒頭の画像はこのページから引用しています。
https://www.claris.com/ja/filemaker/ai/
🛠️ 使用ツール
ai2FM
AI が生成した FileMaker スクリプトを FileMaker へ取り込む際に使用したツールです。
https://ai2fm.com/
FilemakerXMLCompressor
FileMaker から出力した XML を、AI が読みやすい形式へ変換する際に使用したツールです。
https://github.com/jasonnmark/FilemakerXMLCompressor
💻 使用環境
- Claris FileMaker Pro 26.0.1.51
- Claris FileMaker Server 22.0.2.204
- Claude Code（Opus 4.8）
- ai2FM（デモ用ライセンス）
- FilemakerXMLCompressor
※本記事は、上記環境で実際に構築・検証した事例をもとにしています。バージョンや各ツールの仕様変更により、操作方法や動作が異なる場合があります。
🌐サポータス公式サイト（ソリューション紹介）
L SNS（ Twitter | Facebook）
L FileMaker 導入事例まとめ
