こんにちは。
ライジングサン・システムコンサルティングの岩佐です。
この記事では、ドラッグ＆ドロップ操作が可能なカレンダーソリューションを、FileMakerのカスタムAppに実装する方法をご紹介します。
※こちらのブログ記事は、2017年9月1日。FileMakerのバージョンが15の時点で執筆された古い記事です。2020年6月10日に、バージョン19に対応した新しい記事を公開しています。
FileMakerの標準機能だけでも、カレンダー形式のレイアウトを作ることはそれほど難しくはありません。
しかし、例えばGoogleカレンダーのようにスケジュールをドラッグ＆ドロップで移動したり、スケジュールを入れたい場所をドラッグするだけで予定を入力したい日時をプリセットして登録ウインドウを表示するといった高い操作性を実現することは極めて困難です。
そこで今回は、無料で公開されているJavaScriptライブラリを活用して、Googleカレンダーのように高い操作性を兼ね備えたカレンダーソリューションを、FileMakerで実現する方法をご紹介します。
記事の最後には、無料のサンプルソリューションをダウンロードできるリンクを設けていますので、ぜひお手元で実際に動かして、その操作性の高さを確かめてみてください。
1.ドラッグ＆ドロップが可能な３つの機能
今回、公開させていただくソリューションには、ドラッグ＆ドロップ操作で可能な３つの機能が組み込まれています。
1-1.タイムラインをドラッグして新規スケジュールを追加（select）
こちらの動画のように、タイムライン上でスケジュール予約したい時間帯をマウスでドラッグすると、なぞった時間の開始・終了時間が自動的にセットされたスケジュール入力ウインドウが開きます。
1-2.スケジュールをドラッグ＆ドロップで移動（eventDrop）
登録されているスケジュールは、ドラッグ＆ドロップで、別の日にち、及び時間帯に移動することが可能です。
頻繁にスケジュール変更が発生するようなソリューションで、この操作感が実現できるのはうれしいですよね。
1-3.イベントの下端をドラッグして時間を変更（eventResize）
こちらは、スケジュールの下端をドラッグすることで、登録されている時間枠を変更できる機能です。
これも、時間変更が頻繁に発生する業務でのソリューションに実装できると嬉しい機能ですよね。
動画で見ていただいたとおり、これだけの操作性をFileMakerの純正機能のみで実装することはまず不可能です。
ですので、今回ご紹介するカレンダーソリューションは、FullCalendarというjQueryベースのJavaScriptライブラリを組み込み、そのライブラリとFileMakerを連携させることで、この操作性を実現しています。
【FullCalendar】はオープンソースで、こちらのサイトにソースコードとマニュアルの全てが公開されています。
また、ご覧の通りこちらのソリューションはiPadでも同じようにドラッグ＆ドロップでの操作が可能です。
スケジュールをドラッグする前に、そのスケジュールを長押しするという少し特徴的な操作が必要ですが…
これだけの操作性をiPadで実現できれば、様々な利用シーンがアタマに思い浮かぶのではないでしょうか？
2.表示モードは３種類
今回公開させて頂くソリューションには、多くのソリューションで求められるであろう３つの表示方法に対応しました。
2-1.カレンダー表示（month）
こちらは一般的な７日✕６週のカレンダー表示形式です。
このカレンダービューでも、上の動画と同じように、スケジュールを選択してドラッグ＆ドロップ操作でスケジュールの移動ができます。
2-2.ウィークリースケジュール表示（agendaWeek）
次に、週間スケジュール表示形式。
この表示形式も、スケジュールを管理する多くのソリューションで求められるタイプの表示形式です。
このように一覧性よくスケジュールが表示できると、日程調整・時間調整業務の生産性向上が見込めますね。
2-3.デイリースケジュール表示（month）
最後にデイリースケジュール表示形式です。
実は、FileMaker単体機能ではほぼ不可能な、このような重なったスケジュールも、美しく表示できます。
ですので、例えばスケジュールを表示している色と担当者（人）をひも付けて、関係者同士の空き時間を瞬時に見つける…なんてことも、簡単にできます。
3.動作原理のご説明
こちらのソリューションをデザインモードで開くと、ほぼ全面をWebビューアコントロールが占めています。
つまり、カレンダーの表記はFileMakerで実装しているのではなく、全てWebビューアの中に埋め込まれたFullCalendarの機能を使っているのです。
その御蔭で、カレンダーを描画する機能に関しては一切FileMakerで実装する必要はありません。
FileMakerで実装するのは、概ね次の３つです。
3-1.スケジュールデータの管理（新規作成・変更・削除）
FullCalendarは、データの表示とカレンダー上の操作のみを担当し、実データの作成・変更・削除はFileMaker側が担当することになります。
つまり、FullCalendarとFileMakerが適切に対話をすることで、意味のあるひとつのソリューションを構成しているのです。
FullCalendar（JavaScript）と、FileMakerの対話には、fmpプロトコルという仕組みを使います。
fmpプロトコルの詳しい動作原理については、それだけでブログ１記事を書く必要があるほど、便利かつ奥深い機能です。
Googleで「fmpプロトコル」や「FileMaker△URLスキーム」等のキーワードで検索すると、たくさんの優良記事が出てくると思いますので、是非そちらを参考いただけると助かります。
また、弊社が過去に投稿したブログ記事の動画でも詳しく説明しているものがあるので、そちらのリングをご紹介させていただきます。
3-2.FullCalendarに対して、FileMaker内に保存されているスケジュール情報を渡す。
FileMaker内に保存されているスケジュールデータは、JSON形式でFullCalendarに渡します。
御存知の通り、Ver16よりFileMakerにもJSONデータをハンドリングするための組み込み関数が実装されました。
お陰で、極めて少ないスクリプト、及び計算式の記述量でFullCalendarにスケジュール情報が渡せるようになりました。
こちらは実際にFullCalendarに渡すスケジュールデータをJSON形式で現したものです。
※Ver16より組み込まれたJSONFormatElements関数でフォーマッティングしたもです。
Ver16より前のバージョンのFileMakerでこの手の処理を実装するには、プラグインを使うか、WebビューアにJavaScriptを組み込んでそちら側で処理を実装するか、もしくはFileMaker側に力技で実装するしかありませんでした。
しかし、Ver16に実装されたJSON関連の組み込み関数のお陰で、このあたりの実装が随分楽になりました。
3-3.カレンダー上で発生したイベント情報を受取り、適切な処理を実行する。
FullCalendarには、標準で幾つかのイベントトリガが用意されています。
今回は、その中でも代表的な「select」「eventDrop」「eventResize」「eventClick」そして、「viewRendar」という５つのイベントが発生した時に、FileMakerのスクリプトを呼び出す形でサンプルソリューションを作ってみました。
次章から、これらのイベント関係をご説明します。
4.今回使用した５つのFullCalendar標準イベント
4-1.selectイベント
selectイベントは、タイムラインをドラッグ操作した時にFullCalendar上で発生するイベントです。
このイベントが発生すると、FileMaker側の【select】というスクリプトが呼び出されます。
この時に、以下の引数を渡します。
FileMakerは、受け取った引数を元に、スケジュール登録用のカードウインドウを表示し、スケジュールテーブルに新規レコードを作成。
初期値は引数で受け取った値をプリセットします。
4-2.eventDropイベント
eventDropイベントは、FullCalendar上で、登録済みのスケジュールをドラッグ＆ドロップした時に発生します。
このイベントが発生すると、FileMaker側の【eventDrop】スクリプトが呼び出されます。
この時に、以下の引数を渡します。
FileMakerは受け取った引数を元に、該当のスケジュールレコードを検索して、カードウインドウに表示します。
この時、スケジュールが移動された位置の日時情報を引数として受け取るので、その情報をFileMakerの該当フィールドにプリセットします。
そして、カードウインドウ上で保存ボタンを押せば、その移動が確定。
カードウインドウ右上の閉じるボタンを押せば、スケジュールの移動がキャンセルされ、元の位置に戻ります。
4-3.eventReizeイベント
eventReizeイベントは、FullCalendar上で、登録済みのスケジュールの下端をドラッグしてスケジュールの時間が変更された時に発生します。
このイベントが発生すると、FileMaker側の【eventResize】スクリプトが呼び出されます。子の時に、以下の引数を渡します。
FileMakerは受け取った引数を元に、該当スケジュールのレコードを検索し、カードウインドウに表示します。
この時、変更された時間を引数として受け取るので、その情報をFileMakerの該当フィールドにプリセットします。
そして、カードウインドウ上で保存ボタンを押せば、その移動が確定。
カードウインドウ右上の閉じるボタンを押せば、スケジュールの移動がキャンセルされ、元の位置に戻ります。
4-4.eventClickイベント
eventClickイベントは、FullCalendar上でスケジュールがクリックされた時に発生するイベントです。
このイベントが発生すると、FileMaker側の【eventClick】スクリプトが呼び出されます。
この時に、以下の引数を渡します。
FileMakerは受け取った引数を元に、該当スケジュールのレコードを検索し、カードウインドウに表示します。
4-5.viewRendarイベント
viewRendarイベントは、FullCalendar上で、ビューの表示切り替えや、月・週・日の移動が発生してカレンダーが再描画されるタイミングで発生します。
このイベントが発生すると、FileMaker側の【eventResize】スクリプトが呼び出されます。子の時に、以下の引数を渡します。
FileMakerは受け取った引数を元に、該当期間のスケジュールをJSONでFullCalendarに渡します。
※今回のサンプルでは、この機能は未実装です。
※今回のサンプルプログラムは、FileMakerに登録されている全てのスケジュールデータをFullCalendarに渡す仕組みになっています。
5.まとめ
今回ご紹介したソリューションは、FileMakerの純正機能だけでは実現が困難な、操作性の高いカレンダーソリューションを、Webビューアを使って実現しました。
FileMakerは、もともと開発生産性の極めて高い開発プラットフォームですが、そのトレードオフとして、今回のような高い操作性を実現する機能をFileMakerのみで開発することはできません。
しかし、Webビューアを使い、ネット上に無料で公開されているFullCalendarのようなオープンソースライブラリを使いこなせれば、FileMakerの開発生産性の高さを活かしつつ、より高度なソリューションが開発できるようになります。
まずは、今回ご紹介するソリューションをダウンロードして、実際に使ってみてください。
こちらのボタンからサンプルのカスタムAppをダウンロードしてください。
※Ver16以上のFileMakerPro/FileMakerProAdvancedが必要です。
※iPadで動かすためにはFileMakerGo16以上が必要です。
※OSのバージョンや特定の環境下においては正常に動かない可能性もあります。
また、ダウンロードしたソリューションの中身を解析して、自分のソリューションに組み込んでいただくこともできます。
ぜひこちらから完全アクセス権の情報をご請求ください。
