フォームブリッジ（FormBridge）をJavaScriptカスタマイズしてみよう

トヨクモ社の「フォームブリッジ（FormBridge）」を使えば、kintone上で簡単にWebフォームを作成でき、フォームに入力されたデータは自動でkintoneアプリに保存されます。ユーザーの問い合わせフォームやアンケート、社内申請システムなどに活用できるWebフォーム作成ツールです。

本記事では、フォームブリッジで作るフォームをさらに便利にするためのJavaScriptカスタマイズについて解説します。フォームブリッジをお使いの方は、ぜひご覧ください。

フォームブリッジはkintoneのプラグイン（拡張機能）として、契約数3,000以上（2025年2月現在）の実績があり、大変人気なプラグインであることがわかります。
ここでは、フォームブリッジが選ばれる3つの特長について紹介します。

フォームブリッジの詳細は、下記記事でも解説していますので、併せてご参考にしてください。
▼「フォームブリッジ」の特長や使い方を解説

フォームブリッジの最大の特長は、直感的な操作でフォームを作成できることです。ドラッグ&ドロップで入力項目を配置し、項目の編集も簡単に行えます。豊富なテンプレートも用意されているため、フォーム作成の手間を大幅に削減できます。HTMLやCSS、JavaScriptなどの専門知識は不要のため、誰でも手軽にWebフォームを作成可能です。

氏名、住所、電話番号、メールアドレスといった基本的な項目はもちろん、日付、時刻、数値、チェックボックス、ラジオボタン、ファイルアップロードなど、多様な入力形式に対応しています。また、入力項目の必須設定や入力値の検証（確認用として再度入力するフィールド）も可能です。

フォームブリッジでは、ユーザーが回答しやすいフォームを作成するための様々な機能が提供されています。例えば、入力項目の表示順序を自由に設定したり、説明文を追加して入力内容を明確に伝えたり、条件分岐を設定して特定の条件を満たす場合のみ特定の項目を表示するといったことが可能です。スマホやタブレットにも対応しているため、デバイスを問わず快適な入力環境を提供できます。

さらに、フォームのデザインもカスタマイズ可能です。ロゴや画像を挿入したり、テーマカラーを設定したりすることで、企業のイメージに合わせたフォームを作成できます。フォームの見た目を整えることはユーザーの入力意欲を高め、離脱率の低減につながるでしょう。

フォームブリッジは安心して利用できるよう、サポート体制やセキュリティ対策も充実しています。フォームブリッジの料金プランに応じて、メールや電話でのサポートが提供されています。また、FAQやヘルプページも充実しており、疑問点をすぐに解決できるでしょう。

セキュリティ面では、SSL暗号化通信や不正アクセス防止対策など、強固なセキュリティ対策が施されているため、個人情報や機密情報を扱うフォームでも安心して利用できます。さらに、フォームへのアクセス制限や、入力データの保存期間の設定など、セキュリティに関する様々な設定が可能です。これらの機能を活用することで、より安全なWebフォーム運用を実現します。

kintoneは、カスタマイズすることで利便性を高められるツールであり、カスタマイズの柔軟性の高さが魅力のひとつだといえます。
kintoneでは、JavaScript/CSSファイルを使ってカスタマイズする方法があります。一般的に、JavaScriptではアプリに独自の機能・仕様を追加したり、CSSでkintone画面の見た目を使いやすいように変更したりすることが可能です。

プラグインは、JavaScript/CSSファイルがZipファイルにパッケージングされたものです。そのため、Zipファイルの中にあるJavaScript/CSSファイルを編集すれば、プラグインの機能・見た目も自由にカスタマイズできるのです。

kintoneのカスタマイズについて、関連記事をご用意しております。
▼kintoneのカスタマイズ｜初心者向けの方法は？

ここでは、フォームブリッジでJavaScriptカスタマイズを行う具体的な例を2つご紹介します。フォームではよくある機能で比較的容易なカスタマイズですので、ぜひ試してみてください。

フォームに郵便番号を入力すると、自動的に住所が入力される機能は、ユーザーの入力の手間を省き、入力ミスを防ぐ効果があります。この機能は、JavaScriptを使って実現できます。

まず、kintoneアプリでフィールドコードの設定について、以下の手順に沿って操作してみましょう。

1. 郵便番号と自動的に住所が入力されるフィールドを用意
   自動入力されるフィールドを1つにまとめる場合や、都道府県・市区町村などで別々のフィールドに分ける場合によって設定が異なるため、ご注意ください。
2. 郵便番号のフィールドコードを「postal_code」に変更
3. 住所のフィールドコードを「address」「full_address」などに変更
4. 自動入力される住所の値を都道府県・市区町村・地域で分けたい場合は、それぞれのフィールドコードを「prefecture」「city」「area」に設定

次は、フォームブリッジでWebフォームを作成します。

1. ホーム＞「フォームの作成」へと進み、［はじめから作成］をクリック
2. 画面左側「基本設定」の中にある「回答の流れ」から、［kintoneアプリに保存］をクリック
3. フォームブリッジのフィールドコードが先ほどアプリで設定した住所のフィールドコードと同じものになっているか確認
4. ［保存］ボタンをクリック

続いて、フォームブリッジ上でカスタマイズの設定を行います。

1. 基本設定＞「基本構成」の中にある［JavaScript/CSSでカスタマイズ］をクリック
2. ［JavaScriptを使用する］にチェックを入れ、その下にある［+直接URLで指定するJavaScriptファイルを追加］ボタンをクリック
3. 「https://form.kintoneapp.com/static/js/address.js」と入力し、保存

以上で設定は完了です。実際にフォームに入力して、郵便番号から住所が自動入力されるか確認しましょう。

郵便番号のフィールドに入力できるのは「半角数字」に限ります。全角数字では住所が入力されないため注意が必要です。郵便番号は「108-0022」のようにハイフンがある形でも、7桁の数字でも、半角数字であれば問題ありません。

また、2025年2月6日以降に作成されたフォーム、もしくは新バージョンに切り替えたフォームの場合、前述したJavaScriptは動作しないようです。今後の対応については、公式サイトをご確認ください。

参考：https://toyokumo-blog.kintoneapp.com/postal_code/

例えば、カタカナでの入力が必須な項目において、入力者がカタカナにわざわざ変換しなくても、自動的に入力された文字がカタカナに変換されれば、入力者の手間とミスが減るでしょう。

以下は、カタカナへ強制変換させるJavaScriptコードです。

(function() {
'use strict';

function hiraToKana(str) {
return str.replace(/[\u3041-\u3096]/g, function(match) {
var chr = match.charCodeAt(0) + 0x60;
return String.fromCharCode(chr);
});
}

fb.events.form.confirm = [
function(state) {
var kana = state.record.フィールドコード;
kana.value = hiraToKana(kana.value);
return state;
},
];
})();

参考：https://community.cybozu.dev/t/topic/3895

上記コードをJavaScriptファイルに記述し、フォームブリッジに適用させましょう。
kintoneのJavaScriptカスタマイズについては、下記記事をご参考にしてください。
▼kintoneでJavaScriptを活用し、さらなる業務改善へ！

JBアドバンスト・テクノロジー社の「ATTAZoo+」は、kintoneをより便利に使うために様々な機能が搭載されたプラグインです。その機能の一つ「入力補助機能」は、フィールドに対して許容文字種別（メールアドレス・全角カタカナ・半角英数字など）を設定することが可能です。入力された値が許容文字種別の指定に沿っていない場合、エラーが表示されるようになります。

ATTAZoo+は、JavaScriptカスタマイズを行わずに簡単に入力サポートの設定ができ、入力補助機能以外にもkintone運用に役立つたくさんの機能を備えています。kintoneの利活用に取り組んでいる方にはおすすめのプラグインです。

フォームブリッジでJavaScriptカスタマイズを行う際に、いくつか注意すべき点があります。正しく理解せずにJavaScriptを使用すると、予期せぬ不具合やセキュリティリスクにつながる可能性があります。以下の点に留意して、慎重にカスタマイズを行いましょう。

フォームブリッジだけでなく、kintoneには様々なプラグインが存在します。複数のプラグインを同時に利用する場合、JavaScriptの競合が発生し、フォームブリッジや他のプラグインが正常に動作しなくなる可能性があります。

特に、DOM（Document Object Model）操作を行うJavaScriptカスタマイズは、競合が発生しやすいので注意が必要です。導入前に、各プラグインの動作環境や互換性を確認し、テスト環境で十分な検証を行うようにしましょう。競合が発生した場合には、プラグインの開発元へ問い合わせるか、JavaScriptコードを修正して対応する必要があります。

kintoneは定期的にアップデートが行われます。アップデートによって、フォームブリッジやJavaScriptの仕様が変更される可能性があり、既存のカスタマイズが動かなくなる場合があります。

その場合、kintoneのアップデート情報を確認し、必要に応じてJavaScriptコードを修正しなくてはなりません。また、アップデート前にテスト環境で動作確認を行うことが重要です。 

JavaScriptのコードを正しく理解せずにカスタマイズを行うと、フォームの誤作動や予期せぬ動作を引き起こす可能性があります。JavaScriptの基本的な構文やフォームブリッジのAPIを理解した上で、カスタマイズを行うようにしましょう。
kintoneカスタマイズの公式ドキュメントなどを参考に、正しい知識を身につけることが重要です。また、デバッグツールを活用してコードの動作を確認しながら、慎重にカスタマイズを進めるようにしてください。

高度なシステムになるほどJavaScriptコードも難解なものとなります。自身で対応できないレベルであれば、kintoneオフィシャルパートナーに相談するのもひとつの手です。テクバンもkintoneに熟知したエキスパートがそろっていますので、ぜひお気軽にお問い合わせください。

関連記事をご用意しております。
▼kintoneのパートナー企業を活用してみよう！

kintoneのWebフォーム作成ツールとして多くの組織で導入されているフォームブリッジは、JavaScriptカスタマイズを行うことで、さらに便利な機能を追加したWebフォームを作り上げることが可能です。
ぜひ、本記事で紹介した内容を試してみてください。

フォームブリッジ以外にも便利なプラグインはたくさんありますが、自社に最適なプラグインの選定をテクバンではサポートしております。JavaScriptカスタマイズだけでなく、プラグインについてもお困りごとがあれば、ぜひ一度ご連絡ください。

※本記事の内容は2025年4月時点のものです。kintoneの仕様や利用環境は変更する場合があります。