ペパコミプラグインメディア(TOP) kViewer記事一覧 javascript×フォームブリッジ開発事例｜指定日付を入力制御する方法

プラグイン

メーカー

javascript×フォームブリッジ開発事例｜指定日付を入力制御する方法

kintoneで外部ユーザー向けのマイページシステム構築を検討する際、フォームブリッジやkViewerといったトヨクモ製品、あるいはソニックガーデンの「じぶんシリーズ」などが選択肢に挙がります。

特にフォームブリッジを利用すると、JavaScriptによる開発になるため目的に合わせてカスタマイズ可能です。

この記事では、フォームブリッジにおけるJavaScript開発の具体的な事例として、特定の日付を入力できないように制御する方法について解説します。

なお、ペパコミ株式会社では、「kintone」を活用した業務支援を行っています。業務効率化にお悩みの方は、ぜひ以下からお気軽にご相談ください。

ペパコミ株式会社へ無料で相談する

また、本記事の内容はプラグインの本来の目的や全ての使い方を網羅しているわけではない可能性があることを理解しておきましょう。実際にプラグインを導入する際は、提供元が公開している公式情報なども合わせて確認することをおすすめします。
あくまでこんなことが出来るんだ。というイメージをしてもらう目的で記事にしていることをご了承下さい。

目次
  1. kintoneプラグイン「フォームブリッジ」単体では難しい制御もJavaScriptで実現可能
  2. kintoneプラグイン「フォームブリッジ」で入力制御を行うためのJavaScript開発による仕組み
  3. kintoneプラグイン「フォームブリッジ×kViewer」の優位性
  4. kintoneプラグイン「フォームブリッジ」の今後のカスタマイズ可能性について
  5. まとめ

kintoneプラグイン「フォームブリッジ」単体では難しい制御もJavaScriptで実現可能

kintoneプラグイン「フォームブリッジ」単体では難しい制御もJavaScriptで実現可能

kintoneのフォームブリッジは、Webサイト上にkintoneのデータベースと連携したフォームを簡単に作成できるプラグインです。

フォーム作成において、日付フィールドを設置し、ユーザーに日付を選択・入力してもらえます。

しかし、フォームブリッジの標準機能だけでは、基本的に日付フィールドの入力に対して細かい制御はできません。例えば、「土日祝日をユーザーに選択させたくない」といった要件があった場合、標準機能だけでは対応が難しいケースがあります。

標準では、日付フィールドでカレンダーを開くと、土日祝日を含めて全ての日付が選択可能な状態です。

このようなフォームブリッジ単体では対応が難しい日付の入力制御も、JavaScriptをフォームブリッジに埋め込むと実現出来る場合があります。JavaScriptを活用することで、フォームブリッジの機能を拡張し、より柔軟な入力規則を設定することが可能になります。

kintoneプラグイン「フォームブリッジ」で入力制御を行うためのJavaScript開発による仕組み

フォームブリッジで指定日付の入力制御を行うJavaScript開発は、以下の仕組みで動作します。

まず、フォームブリッジにカスタマイズ用のJavaScriptファイルを埋め込みます。この埋め込んだJavaScriptコードがkintone上の別のアプリを参照します。どのアプリを参照するかは、kViewerという別のプラグインを使用して指定可能です。

参照先のアプリは、ユーザーに入力させたくない日付、例えば非稼働日を一覧で管理する用途で利用します。JavaScriptコードはkViewerを経由して非稼働日アプリのデータを抽出し、入力不可とすべき日付のリストを取得します。

その後、取得した非稼働日のリストに基づいて、JavaScriptがフォームブリッジの日付フィールドを制御を行う仕組みです。

この仕組みにより、kintoneアプリで管理する非稼働日データとフォームブリッジの日付入力を連動させることが可能です。なお、アプリのデータを変更すれば、フォームブリッジ側の入力制御もリアルタイムに反映されます。

デモで見る具体的な制御動作

実際に構築した仕組みのデモ画面で、具体的な動作を確認してみましょう。

デモでは、非稼働日を登録するアプリに、「4月29日」と「5月9日」という日付が登録されています。

フォームブリッジを開き、日付フィールドで日付を選択します。まず「4月29日」を選択してフォームを送信（回答）しようとすると、回答できません。

同様に「5月9日」を選択して送信しようとしても、非稼働日アプリに登録された日付のため回答できません。

次に、非稼働日アプリに登録されていない別の日付、例えば「4月28日」や「5月11日」を選択して送信してみます。これらの日付は非稼働日リストに含まれていないため、問題なく回答できます。

kintoneプラグイン「フォームブリッジ×kViewer」の優位性

kintoneを外部ユーザーに利用させるためのプラグインにはトヨクモ株式会社の「フォームブリッジ×kViewer」やソニックガーデンが提供する「じぶんシリーズ」があります。

かつてはじぶんシリーズでもJavaScript開発は可能でしたが、新しいバージョンではJavaScript開発が出来なくなりました。一方で、トヨクモ製品は現在でもJavaScriptによるカスタマイズが可能です。

特に、「ここの部分を細かく自動化したい」「この機能を特定の条件で拡張したい」といった、標準機能だけでは対応しきれないニッチで詳細な要望を叶える際に有効です。

kintoneプラグイン「フォームブリッジ」の今後のカスタマイズ可能性について

今回ご紹介したフォームブリッジでの指定日付入力制御の事例は、比較的簡易的なJavaScript開発です。

しかし、JavaScript開発の可能性はこれだけに留まりません。

例えば、ユーザーが日付フィールドを開いたカレンダー上で、選択不可な日付に視覚的な表示（例：バツ印）をつけるといったカスタマイズも、やろうと思えば実現出来る可能性があります。

今回の簡易的な方法では、日付を選択して回答ボタンを押した際にエラーが表示されるという挙動でしたが、カレンダーを見た瞬間に「この日は選べない」と分かるようにする開発も検討できます。

このように、JavaScriptを活用することで、フォームブリッジのユーザーインターフェースや挙動を、お客様の細かいニーズに合わせて柔軟にカスタマイズできるでしょう。

まとめ

まとめ

フォームブリッジ単体では難しい細かい入力制御も、JavaScriptを組み合わせると実現可能です。

特に、kintoneアプリで管理するデータと連動させてフォームの挙動を制御したい場合に、JavaScript開発は非常に有用です。

今回ご紹介した日付入力制御の事例が、フォームブリッジにおけるJavaScript開発の可能性を示す参考になれば幸いです。

なお、ペパコミ株式会社では、「kintone」を活用した業務支援を行っています。業務効率化にお悩みの方は、ぜひ以下からお気軽にご相談ください。

ペパコミ株式会社へ無料で相談する

記事一覧に戻る
関連記事

関連記事

kViewer じぶんフォーム じぶんページ じぶんレコード フォームブリッジ
kintoneの情報を外部ユーザーと共有・編集するための外部連携サービス選び方
kViewer フォームブリッジ
kintoneプラグイン「kViewer」と「フォームブリッジ」を活用した『マイ...
kViewer
kintoneの連携サービス「kViewer」とは？強みや価格、導入事例まで徹底...
機能から探す

機能から探す

kintone構築・内製化支援は
お気軽にお問い合わせください

赤いTシャツを着た女性が膝をつき、手に赤いメールアイコンを持っているイラスト
無料で相談する
トップへ戻るアイコン トップへ戻るアイコン
top