こんにちは。
ライジングサン・システムコンサルティングの岩佐です。
この記事では、FileMakerソリューションにおける日付入力のユーザビリティについて記述します。
FileMakerプラットフォームに限らず、ビジネス向けのソリューションでは日付を入力する要求が多々発生します。
FileMakerプラットフォームには、日付入力を補助するツールとして、テキストボックスコントロールに、ドロップダウンカレンダーオプションを設定することができます。
このドロップダウンカレンダーオプションは、チェックボックスひとつで設定することができる非常に有りがたいものなのですが、実際のソリューション開発においては、もう少しユーザビリティを高めたい要求に出くわすことがあります。
まず最初に思いつくのは、FileMakerGoにおける日付入力の操作性です。
目次
1.iOS標準の日付入力コントロールの操作性を改善したい
FileMaker標準のドロップダウンカレンダーコントロールを設定したフィールドを、FileMakerGoで操作すると、下記のようなiOS標準の日付入力コントロールが表示されます。
このiOS標準の日付入力コントロールは、ことビジネス向けのカスタムアプリケーションという視点から評価すると、それ程使い勝手の良いものではありません。
何より曜日を瞬時に把握できないのは、ビジネスソリューションとして非常に不便を感じます。
しかし、例えばiOSソリューションにも、こちらのスクリーンショットのようなカレンダー形式の日付入力コントロールが簡単に組み込めるとしたらいかがでしょうか。
随分と日付入力の操作性が向上すると思いませんか？
2.日付入力のユーザビリティ向上を考える
日付入力に関する操作性の再考の余地は、何もiOSデバイス上だけのことではありません。
デスクトップアプリケーションや、WebDirectアプリケーションにも同様に操作性の向上が見込めます。
例えば、検索条件の日付を期間で設定したい場合、グローバル保存の日付型フィールドをFrom/Toでレイアウト上に配置し、それぞれに日付を入れるようなユーザインタフェースで実装するのが一般的だと思います。
このような一般的なUIでは、ユーザが日付フィールドに対して２回の操作をする必要があります。
具体的には…
・From日の日付入力コントロールをクリックする。
・ドロップダウンカレンダーから該当日を探してクリックする。
・TABキーをクリックしてTo日の日付入力コントロールに移動する。
・ドロップダウンカレンダーから該当日を探してクリックする。
・検索ボタンをクリックする。
このように意識してひとつひとつの動作を記述すると、相当数のアクションが発生していますよね。
2-1.期間設定の操作性向上を実現する
この操作をもう少し直感的で、よりミスが少ない操作性を実現することはできないでしょうか。
例えば、ある検索条件で、ある週の月曜日から金曜日までの売上実績を検索したいとします。
この時、一般的なUIであれば、ユーザーはまずFromの日付フィールドをクリックして月曜日の日付を入力し、その後、TabキーでFrom日のフィールドを抜けて、Toフィールドにフォーカスを移し、Toの日付フィールドに金曜日の日付を入力して、検索ボタンをクリックします。
この２つの日付を設定する操作性向上を目的に、先ほどのカレンダーコントロール上で、月曜日の日付をクリックした後に、シフトキーを押しながら金曜日の日付をクリックするだけで日付の範囲指定が完了するようなUIが実現できたらいかがでしょうか。
随分とユーザビリティが向上すると思いませんか？
こちらは、実際にカレンダーコントロール上で、まず最初に３月２８日をクリックし、その後４月１日をシフトキーを押しながらクリックした様子です。
３月２８日から４月１日の範囲を選択したことが直感的に確認できると思います。
何よりカレンダーという表示形式を用いることで「平日」をより直感的に把握できることが重要です。
このように、日付を複数選択したいという要求は、ビジネスソリューションでは頻繁に発生します。
この日付のFrom/Toはオーソドックスな例ですが、それ以外にもある曜日のみを選択したいであったり、任意を日付を複数選択したいようなことは多々発生するのではと思います。
2.汎用的なDatePickerコントロール
弊社では、様々なビジネスソリューションの高度な日付入力要求にお答えするために、どのようなソリューションにも汎用的に組み込むことができるような汎用的なDatePicker（日付選択）コントロールを開発しました。
先出のiPadに組み込まれたカレンダー形式の日付入力コントロールも、このコントロールから組み込んだものです。
この汎用的なDatePickerコントロールは、次のような特徴を持っています。
- カスタム関数・スクリプト・テーブルのコピー＆ペーストと、スクリプトパラメータの再設定のみで、他のソリューションに組み込み可能です。
- ３ヶ月分のカレンダーを表示できます。（※拡張・カスタマイズすれば、12ヶ月カレンダーの表示も可能です。）
- 矢印ボタンで、３ヶ月カレンダー全体のシフト移動が可能。
- カレンダーで選択した日を任意のフィールドにセットすることができます。
- シフトキーを押しながら、日付の範囲選択をすることができます。もちろん月またぎの範囲指定も可能。
- Macは⌘キー、WindowsはCtrlキーを押しながらクリックすることで、歯抜けの複数日付を選択することが可能。（トグル的な動き）
- 曜日ラベルをクリックすると、該当カレンダーの指定曜日を選択することが可能。
- 複数選択した日付はGフィールドに改行区切り値としてセットされるので、リレーションを使った検索やポータルフィルタが可能。
これだけの機能を、FileMakerの標準機能のみで実装しています。
現在は、jQueryやJavaScript等の知識があれば、比較的簡単にネットからフリーのライブラリを入手して、Webビューアを使って上記のような機能を実装することができます。
しかし、いざ自分のソリューションに組み込んで、よりユーザの要求に合うような操作性を実現しようとした場合、jQueryやJavaScriptを直接編集する必要性が出てきます。
例えば、祝祭日の表示や会社の休日、業界によっては六輝（六曜）の表示を求められたりなど、カレンダー形式の表示を実現するからこそ、求められる機能もあります。
それらの機能を、JavaScriptやjQueryで実装しようとすると、求められる技術レベルが一気に上がってしまいます。
その点、全てをFileMakerプラットフォームの標準機能のみで実現できれば、学習コストもかかりませんし、何より必要に応じて柔軟にカスタマイズすることが可能になります。
動画によるデモンストレーション
さて、それでは実際のソリューションに組み込む様子を見ていきましょう。
こちらの動画では、FileMakerVer14・スターターソリューションの経費精算アプリに、この汎用カレンダーコントロールを組み込む様子を解説しています。
スターターソリューション側には、外部データソースの設定無しに、コントロールを組み込んでいる様子をご確認いただます。※音声が収録されているので、再生時にはお気をつけ下さい。
いかがでしたでしょうか。
この汎用的なカレンダーコントロールは、こちらからダウンロードしていただくことができます。
※Dropboxのウインドウが別のタブで開きます。
ダウンロードいただいたファイルは「データ入力のみ」の権限で開くので、実際の操作性を確認いただくことが可能です。
また、ダウンロードしていただいたファイルには、管理者パスワードが設定されています。
管理者パスワードを解除いただければ、あなたのソリューションにも自由に組み込むことができますし、自由にカスタマイズしていただくこともできます。。
※フリーで公開するものなので、このコントロールを利用することで発生したあらゆる不具合や損害に関しては、その責任を負いかねます。
※あなたのソリューションに組み込むときには、FileMakerProAdvancedが必要になります。
※FileMakerのVer14のみで動作確認をしております。それ以前のバージョンでは動作確認をしておりません。
管理者パスワードは、以下のリクエストフォームからご請求ください。
– 完全アクセス権のアカウント情報請求フォーム –
