kintoneとFormBridgeを使って手書き署名に対応したWEBフォームを実現｜観光業 一般社団法人町田市観光コンベンション協会さまのアプリ開発事例

最近は、さまざまな申し込みや登録がWEB上でできるようになっています。
WEBフォームから申込者本人が登録することで、企業側は入力作業を削減したり、入力ミスを防いだりできるのがメリットです。

一方で、書類によっては本人の手書き署名が必要なケースもあり、仕方なく紙での運用を続けている企業さまもあるのではないでしょうか。
そこで今回は、kintoneの連携サービス「FormBridge」をカスタマイズして、WEBフォーム上での手書き署名を実装した一般社団法人 町田市観光コンベンション協会さまの事例を紹介します。

本記事の内容については、こちらの動画でも実際の操作画面とともに解説していますので、あわせてご覧ください。

申込に必要な手書き署名をWEBフォーム上で実装したい！

一般社団法人 町田市観光コンベンション協会さまは、東京都町田市の観光を盛り上げるために設立された法人さまです。
地域情報の発信や、イベントの企画運営などを手掛けていらっしゃいます。

イベント開催時に必要になる出店者の情報管理について、以前は紙やエクセルで行っていましたが、kintone(キントーン)を導入して一元管理を実現されました。

当時のアプリ開発の様子については、こちらの記事で詳しく紹介しています。

▼kintoneとWEBフォームを連携してイベント参加申込の一元管理を実現｜観光業 一般社団法人町田市観光コンベンション協会さまのアプリ開発事例

このときkintone開発のカギとなったのが、連携ツール「FormBridge(フォームブリッジ)」です。
FormBridgeは、申し込みフォームやアンケートフォームをWEBで公開し、送信された内容を自動でkintoneに登録するためのツールで、申し込みやアンケートの他にも、問い合わせ、会員登録、予約管理などにも使えます。

FormBridgeの活用によって、出店者管理を大幅に効率化できた一般社団法人 町田市観光コンベンション協会さま。
しかし、システムを運用する中で、今度は「手書き署名」という新たな課題に直面しました。

出店者が行政機関に提出する書類の中には、本人の手書き署名が必要なものがあります。
氏名や連絡先などはFormBridgeのWEBフォームから入力してもらえば良いのですが、手書き署名は標準機能では対応ができません。

仕方がないので、この部分だけアナログな方法で乗り切っていました。
具体的には、出店者に各自で適当な紙とペンを用意して署名してもらい、その紙をスマホで写真撮影したうえで、画像をWEBフォームで添付ファイルとして送信してもらう、という方法です。

しかし、この方法では出店者が紙とペンを用意して写真を撮影するという手間がかかります。
また、添付される画像はサイズがバラバラなので、事務局側で申請書類にうまく収まるよう加工する作業も発生していました。

手書き署名をスマホ上で完結できるようにしたい、事務局側で画像を加工する手間もなくしたいと考えた一般社団法人 町田市観光コンベンション協会さま。
そこで今回は、FormBridgeをJavaScriptでカスタマイズすることにしました。

FormBridge上で手書き署名ができるようにJavaScriptでカスタマイズ

ここからは、FormBridge上で手書き署名を実装した際のポイントを解説します。
まずはテスト用フォームで動作を確認したうえで、AIも使いながら開発を進めていきました。

テスト用フォームで動作を確認

はじめに、JavaScriptでテスト用の署名フォームを作り動作を確認しましたが、テストの結果、FormBridge上に手書きの署名欄を設けても、FormBridgeの制限によってそのまま画像データとして自動保存できない仕様であることが判明しました。

そのため、署名は別のウィンドウで行い、できた画像を一度スマホにダウンロードしてもらったうえで、元の入力フォームに添付するという形で進めることにしました。

実際に構築したフォームがこちらです。
必要情報入力フォームのなかに、「署名を行う」というボタンがあります。

ボタンを押すと以下のような署名欄が表示され、スマホ上で署名を行うことができます。

AIも使いながら署名欄を設定

手書きの署名欄については「jSignature」というプラグインを使用しました。
署名領域に制限を設けることで、極端に大きな文字での署名を防止し、提出書類の署名欄に合うサイズで出力できるようにしています。

続いて、出店者の署名が完了したときに、画像を保存して入力フォームに添付する方法が表示されるよう設定しました。

パソコンの場合は「署名画像をダウンロード」をクリック→画像ファイルを指定フォルダに保存→参照フォルダを指定してアップロードという手順です。
また、スマホの場合は「署名画像のプレビューを表示」をタップ→画像をスマホに保存→参照フォルダを指定してアップロードという手順になっています。

これらの署名欄の表示やボタンの作成についてはAIも活用しながらソースコードを生成しており、開発工数を削減しながら実装することができています。

FormBridgeをカスタマイズするメリットとは

一般社団法人 町田市観光コンベンション協会さまは、FormBridgeをカスタマイズすることで、WEBフォーム上に手書き署名の機能を実装できました。
これにより、出店者はわざわざ紙とペンを用意したり、写真を撮影して添付したりする手間がなくなりました。

本当は、ボタンを押して署名をするだけでダイレクトに書類に反映されるのが理想です。
ただ、現状ではAPIに対応していないため、一旦画像を保存して添付するという対応になっています。

それでも、署名画像のサイズ(※容量ではなく縦横の大きさ)を提出書類に合わせて保存できることで、事務局で加工する手間がなくなり、受付業務も効率化できました。
また、ソースコードの生成にAIを使ったことで、開発工数を削減できたこともポイントです。

ただし、FormBridgeをJavaScriptでカスタマイズした場合、トヨクモのサポート対象外になるためその点は注意が必要です。

デメリットを挙げるとすれば、スマホの操作が苦手な方には操作方法がうまく伝わらず、個別対応が必要になることです。
これについては、どのようなシステムでも起こりうることですし、今回の事例では大多数の人の利便性が向上したと考えられます。

kintoneとFormBridgeをカスタマイズすれば、手書き署名にも対応できる！

一般社団法人 町田市観光コンベンション協会さまは、kintoneの連携ツールを導入してさらにカスタマイズすることで「WEBフォーム上に手書き署名の機能を実装したい」という希望を叶えることができました。
今後は、FormBridgeやkViewer(ケイビューワー)でより多くの業務を効率化するため、勉強会も実施して教育体制を強化していきたいとのことでした。

JavaScriptを使うとあらゆるカスタマイズが可能になりますが、開発にはプログラミングの知識や経験が必要になってきます。
「kintoneや連携ツールをカスタマイズしたい、でもやり方が分からない」という方は、プロに頼むのがおすすめです。

コムデックでは、お客さまのお悩みをお聞きしてその場でkintoneアプリを構築する対面開発を行っております。
知識と経験の豊富なスタッフが、最適なカスタマイズ方法をご提案しますので、お気軽にお問い合わせください。

「kintone対面開発」サービスページはこちら