ストレスフリーな入力フォームの鍵はInputManJS！社会保険労務士向けクラウドシステムのフロントエンド、帳票開発を支えた3つのJavaScriptライブラリ

株式会社セルズは、社会保険労務士（以下、社労士）向けの人事労務関連ソフトウェアを開発・販売する企業である。グループ会社では社労士事務所を営んでいる。労働関連法や労務管理に関する専門知識と豊富な経験を持つ社労士の視点からシステムを開発し、社労士事務所を通して全国の中小企業に健全な企業発展のためのサービスを提供している。同社が提供している社労士向け労務管理・給与計算一体型クラウドシステム「FORROU（フォロー）」の開発に、メシウスのJavaScriptライブラリ「ActiveReportsJS（アクティブレポートJS）」「InputManJS（インプットマンJS）」「SpreadJS（スプレッドJS）」を導入した経緯や利点などについて、中井さま、安松さま、谷口さまにお話を伺った。

社会保険労務士事務所の設立から始まった社労士向けソフトウェアの開発。労務管理を“簡単・シンプル”に。

―はじめに、御社の事業内容について教えてください。

中井さま
弊社は、1984年に創業した社労士事務所が原点となっている会社です。社労士向けのソフトウェアの開発、販売を通じて、顧問先やその企業で働く方々に喜んでもらうことを目指しています。
グループ会社の社労士事務所に弊社のシステムを実際に利用してもらい、社労士業務に必要な機能の提案や改善要望をいただきながら、開発を行っています。

―社労士の業務を熟知している現場の方々からご意見をいただきながら開発を行っているのですね。そんな社労士の業務を支えているクラウドシステム「FORROU」はどんなシステムなのでしょうか。また、FORROU開発のきっかけについても教えてください。

中井さま
FORROUは、届出業務や給与計算、顧客管理など、社労士業務に必要なあらゆる機能を備えたシステムです。弊社のメインソフトウェアである労務統合管理システム「台帳」と給与計算システム「Cells給与」を行き来することなく、すべての労務管理をこのシステムで簡単かつシンプルに行うことができます。
クラウド化が進む社会のトレンドとニーズに応え、完全新規のクラウドシステムとして開発をスタートしました。

―FORROUの開発では、フロントエンドにReactとTypeScript、バックエンドに .NET、Azureを採用されていると伺っております。それぞれの採用理由についてお聞かせください。

中井さま
バックエンドについてはASP.NET Core（C#）を採用しており、開発を始めた当初は .NET Coreでしたが、今は .NETに移行しました。Windows FormsやASP.NET Web Formsの勢いが少し落ち着いてきて、これからはオープン化、という流れが採用の背景にあったと思います。また、社内にC#の経験があるメンバーがいたので、今回のプロダクトもC#で作ったほうが社内のほかのチームとのやり取りがしやすいのではないか？という点もあって、C#を採用した経緯があります。
フロントエンドに関しては、マテリアルデザインが一気に流行りだして、多くのアプリで使われているのをよく目にしました。私たちもモダンなアプリを作りたいと考え、Reactを採用したうえで、静的型付けができて、安全性と保守性の高いTypeScriptを使っています。

安松さま
Microsoftのテクノロジーに親和性が高いメンバーが集まっていたので、自然とMicrosoftの技術を選ぶかたちになりましたね。Visual Studioでの開発作業はもちろん、Azure Pipelinesを使ったCI/CD環境の構築など、全部Microsoftの仕組み中で完結できています。

FORROUの開発を支えた3つのJavaScriptライブラリの導入背景とは？

―FORROUの開発に弊社のJavaScriptライブラリ「ActiveReportsJS」「InputManJS」「SpreadJS」を採用した理由を教えてください。

安松さま
開発当時は少人数でやっていまして、先ほど申し上げたとおり元々バックエンド（C#）が強いメンバーが多かった一方で、フロントエンドの知識が豊富なメンバーがいませんでした。フロント側の実装を少しでも簡単に行いたいと思い、ライブラリの導入を検討することになりました。

谷口さま
今回の開発にあたり、最初は入力フォームから進めようという話になりました。
FORROUには会社情報や住所、社会保険の情報、従業員の個人情報など、労務管理に係わる入力フォームが膨大にあります。ユーザーに快適な入力操作を提供するにはやっぱり入力制限をしっかりしたいよね、という前提があって、JavaScript系の入力コントロールを探していく中で、InputManJSが候補に挙がりました。InputManJSは日本語入力に優れ、入力検証機能も充実しているほか、コンボやカレンダー機能も備えており、直感的な日付の選択やドロップダウンリストによる入力にも対応できます。この柔軟性が決め手となり、InputManJSを採用することにしました。

中井さま
一方で、SpreadJSを採用した理由は、Excelライクな操作性と画面を実現したかったからです。
弊社が提供している「台帳」や「Cells給与」はExcelベースの製品なので、これらのソフトウェアをご利用いただているユーザーの皆さんはExcelの操作に慣れています。普段の業務でもExcelを利用されている方が多いと思うので、抵抗感なく操作できるソフトにしたかったのです。
実は、最初に御社のWijmoも候補に挙がっていたのですが、Wijmoは複数のデータをチャートで表示させたり、ダッシュボードを作ったり、そういった点が優れている印象でした。私たちが求めているのはExcelに近い操作性と機能でしたので、SpreadJSのほうが適当に思えました。

―Wijmoをご検討いただきありがとうございます。弊社のActiveReports for .NETもご利用いただいたことがあると伺っていますが、今回ActiveReportsJSをご採用いただいた背景には、ActiveReports for .NETのご利用実績も影響しているのでしょうか？

中井さま
そうですね、「台帳」にActiveReports for .NETを使わせてもらった実績も選定理由の1つになっていると思います。

谷口さま
社労士の業務では大量の帳票が必要なため、システムにも相応の帳票機能が求められます。作業を効率化するためには適切な帳票ツールを導入する必要がありまして、その中で選ばれたのがActiveReportsJSです。

―FORROUには、いまお話しいただいた3つの製品をご利用いただいていますが、3製品を一緒に導入したことのメリットはありましたか？

谷口さま
段階的に3つの製品を導入したのですが、最初にInputManJSを導入した際、日本語によるサポートのやり取りが非常にスムーズで、信頼性が高いなと感じました。そういった背景もあって、SpreadJSやActiveReportsJSも続けて採用させていただきました。
異なる会社のライブラリを使用すると、サポート先がそれぞれ異なり対応が大変ですが、今回のように1つの会社の製品で統一することでサポートが一元化され、非常に便利だなと感じています。

安松さま
オープンソースを使うと何でも自分たちで解決しなきゃいけないのですよね。ドキュメントやサポートも英語なので、対応の手間や、バグフィックスされていくのかという不安もあります。その点、メシウスさんは日本語で問い合わせができるので、そのあたりの安心感はすごくありました。

入力制御や馴染みのある操作感にこだわり“かゆいところに手が届く”システムを実現

―InputManJSとSpreadJSをFORROUのどのような機能の開発でご利用いただいているのでしょうか。

中井さま
InputManJSは、ほぼすべての入力フォームで活用しております。例えば、事務所や事業所の従業員情報、社会保険情報などの入力に使用しています。これらの情報はFORROU内だけでなく、マイナポータルを通じて行政へ電子申請するデータにも利用されます。行政提出用の仕様では、文字種別や英数字漢字の文字制限がありますので、InputManJSは入力制御とバリデーションにおいてその効果を発揮しています。

中井さま
SpreadJSは、大量のデータをExcelのように表示する際に使用しています。行政提出用のデータと同様に、InputManJSと同じバリデーション機能を活用することができる点が良いなと思っています。弊社の主力製品がExcelベースなので、ブラウザ上でExcelに近い操作感を実現できるSpreadJSは魅力的です。
スプレッドシート上で、キーボードからすべての値を操作できる機能も特に便利ですね。例えば給与計算の場合、各従業員に対して何か値を入れる際に、1つずつマウスでカチカチ操作するのはすごく手間ですし時間がかかりますが、キーボードのテンキーを使えば簡単に値を入力できます。こういった操作感や、私たちが目指す「かゆいところに手が届く」システムを実現するには、SpreadJSのような機能が不可欠です。

安松さま
FORROUを、Excelに慣れ親しんだユーザーでも抵抗なく使えるシステムにするためには、快適な入力フォームもそうですが、Excelライクな操作感も外せなかったところがあります。

―今回は入力フォームから開発し始めたとのことですが、入力フォームの開発において、特にこだわったポイントはありますか？

中井さま
FORROU の入力要件として、漢字や数字、電話番号、大文字／小文字など細かい仕様が複数分かれているので、入力フォームの開発にあたっては、ユーザーが快適に入力操作でき、効率を上げられるように考慮しました。
具体的には、InputManJSのバリデーションやマスク、ドロップダウンなどのコンポーネントを拡張してFORROU向けに共通化したコンポーネントを作成しました。これにより、新たな機能を追加する際にもチューニングされたコンポーネントを即座に適用できるようにしています。

安松さま
電子申請の仕様で使える文字は限られていて、例えば「髙（はしごだか）」のような漢字や「-（ハイフン）」に似た文字は使えなかったりします。-（ハイフン）っぽい文字ってたくさん種類があるんですよね、見た目だけではどれが本物の-（ハイフン）なのか全く分かりません。このような入力要件は恐らくどの業界でも苦労されているかと思います。
InputManJSの検証コントロールを使うことで、すごく楽に素早く実装することができています。

―不正なデータが入らないように細部までこだわっているのですね。続いて、ActiveReportsJSはどのような帳票の開発でご利用されているか教えてください。

中井さま
馴染み深いものですと、年末調整の源泉徴収票や扶養控除書類などですね。現状、80種類ほどの帳票があります。

安松さま
公的機関に申請手続きする際、電子申請もできるのですが、データと一緒にPDF帳票も送付しないといけない場合もあるんです。帳票を印刷するだけだったらCSSで作ることもできるのですが、帳票の数もすごく多いし、CSSに長けた人ばかりじゃなかったので、出力機能を量産するというのはなかなか厳しいなというところがあって…。「台帳」の開発でActiveReports for .NETを使っていたので使い方がある程度分かっていたのと、膨大な数の帳票を作るにはライブラリを使ったほうが定義を簡単に作って出力できるので、ActiveReportsJSを活用させていただいています。

開発工数削減と高品質の両立を実現。ユーザーからは「新機能にワクワク！」の声も。

―今回3製品を導入いただいていますが、製品の使い勝手はいかがでしたか？

中井さま
開発当時はフロントに対してそんなに知見が無かったので、大変になるだろうなと予想していたのですが、想定していたよりは難しくありませんでした。最初にInputManJSを使ってバリデーションを中心にシステムを構築していったのですが、慣れるにつれてどんどん理解が進みました。
困ったときはサポートにメールをすればすぐ返事をいただけていましたし、全体的には満足しています。

谷口さま
使い始めるにあたってはヘルプやデモを見ながらやっていました。何か不具合があった時は御社のオンラインデモで再現して検証したりしていましたね。

―JavaScriptライブラリの導入による効果についてお聞かせください。

中井さま
開発工数の削減だけでなく、ユーザーの要求を満たす品質を担保できた点が非常に大きいと感じています。特にSpreadJSとInputManJSは、求める仕様に対して作業工数を大幅に削減しながらも、機能性を確保できるライブラリであると感じました。結果として、弊社が求める水準で、ユーザーに満足していただけるシステムを作ることができました。

安松さま
工数削減の面で言うと、ActiveReportsJSのない状態は考えられないですね。PDFを直接生成する機能なんかは、自前で実装するのはなかなか考えられません。
繰り返しになってしまいますが、開発当初はフロントの知識があまり無かったので、立ち上がりの試行錯誤の時間を何か月も短く済ませられたのは、最初に導入したInputManJSがあったからではないかな、というのはあります。

―“かゆいところに手が届く”をミッションにお客様に寄り添った機能を実装されているかと思いますが、お客様からの反応はいかがですか？

中井さま
「ワクワクしながら新しい機能を確認している」など、ストレスの少ないデザインや画面設計について前向きな感想をいただいています。FORROUはクラウドシステムなので、リモートワークなどの多様な働き方に対応できる点もご評価いただいています。

今後の展望とメシウスへの要望

―FORROUの今後の機能追加やバージョンアップの予定があれば教えてください。

安松さま
社労士の業務には、労働保険料の申告納付手続きを行う「年度更新」という季節業務がありますが、FORROUはこれまで年度更新に係わる機能に対応していませんでした。年度更新には多くの機能が求められるうえ、今年は定額減税などの法令にも対応していかないといけません。そのため、2〜3か月に1回程度の頻度で機能を追加している状況です。まだ発展途上の部分も多くありますが、ユーザーからの要望や改善などに応えながら、今後も機能を充実させ、より使いやすいサービスを提供していきたいと考えています。

―最後になりますが、弊社製品に対する要望やご意見などはありますか？

中井さま
入力フォームの話になりますが、FORROUでは複数の入力項目を組み合わせたチェック結果を表示させたいという要件があります。InputManJSのGcValidatorは単体項目の入力検証は簡単にできますが、複数項目に対して検証処理を行うには自作の関数を用意する必要があるんですよね。この方法だとチェック内容を引数でやり取りしたりとコードが煩雑になってしまうので、検証処理自体はアプリ側で行い、その結果だけを表示させる機能がInputManJSにあると良いなと感じています。

―より高度な入力フォームを実現できるよう、InputManJSの機能強化を今後検討して参ります。本日はありがとうございました。

取材協力：2024年5月