シフト表の自動作成を支援するソリューションの新サービスを投入
「Web TECH FORUM 2022 Winter」では前半と後半に分けて2つのセッションが実施された。最初の講演には、鉄道情報システムの宮澤優氏と松本依里紗氏が登壇。「Excelライクな操作性を実現！ SpreadJSで実現した『勤務シフト作成お助けマン』について」と題し同社において実施されたSpreadJSを活用した開発の事例を紹介した。
鉄道情報システムは、国鉄の分割民営化に伴い、JR各社の情報システムの運営を担う会社として1986年12月に設立された。みどりの窓口で利用されている座席予約・販売システム「マルス」をはじめとする、JRのビジネスを支える基幹システムの開発・運営を通じて培ってきた高度なノウハウをベースに、システムインテグレーション、ネットワークソリューション、データセンターの各領域にわたるサービスを展開。顧客の経営課題の解決にIT活用の側面から貢献している。
同社では、さまざまな業種の企業に向けた製品やサービスも豊富にラインナップしており、中でも計画系ソリューションとして提供する「勤務シフト作成お助けマン」シリーズはとりわけ高い人気を誇っている。
「勤務シフト作成お助けマンとは、端的に言えばシフト表を自動作成するクラウドサービスです。スタッフの希望や各種勤務条件を反映させながら、法令遵守はもちろん、働きやすさや公平性を考慮したシフト表を素早く作成できることがその特徴となっています」と宮澤氏は説明する。
かねてより鉄道情報システムでは、フルタイム勤務を主とする企業向けに早番・遅番・夜勤などの記号をスタッフに割り当てる「勤務シフト作成お助けマンDay」、およびパート・アルバイト従業員を対象にスタッフの働く勤務時間を最適に割り当てることができる「勤務シフト作成お助けマンTime」を提供してきており、広範な業種業態の企業の現場で数多く採用されてきたという実績を持つ。
これに対し同社では、シリーズの3つめのサービスとなる「勤務シフト作成お助けマンCrew」を2022年1月11日に新たにリリースした。こちらは鉄道・バス事業者向けにシフト表の作成を支援するサービスで、乗務員特有の勤務条件などを踏まえて勤務表が作成できるようになっている。
「今回、新たにリリースした勤務シフト作成お助けマンCrewの開発にあたって、当社はグレープシティの提供するUIライブラリ『SpreadJS』を採用。サービスを構成するすべての画面の実装にこの製品を適用し、多大な成果を享受しています」と宮澤氏は紹介する。
Excel相当の高度なUIと機能性と開発工数の大幅削減を両立可能
勤務シフト作成お助けマンCrewの開発にあたって鉄道情報システムがこだわったのは、すべてのユーザーにとって使い勝手のよいUIを実現することだった。「具体的には、ユーザーにとってなじみのある操作性を実現し、使ったことがなくても直感的に使いこなせるようなUIを目指しました。ユーザーにとってなじみ深いといえば、やはりなんと言ってもMicrosoft Officeであり、中でもシフト表、勤務表の作成において多用されているExcelに近い機能性を実現したいと考えました」と松本氏は語る。
同社では、そうしたExcelライクな使い勝手を実現する外部ベンダー製のUIライブラリを採用するという方針を固め、製品の比較検討に着手した。当初、15製品程度を検討の俎上に載せたという。詳細な検討の結果、同社では、Excelとほぼ同等の高度な機能性を備えながら、実装工数の大幅な削減を期待できる点を評価し、SpreadJSの導入を決めた。
これについて松本氏は「具体的には、コンボボックスやチェックボックスといったコントロール類が装備されていることをはじめ、ソートやフィルタ機能、ユーザーによるセル入力に対するロック機能も用意されていること、さらにはリアルタイムチェックを行うためのバリデータが搭載されていたり、フォントやスタイルの設定も可能であったりなど、SpreadJSのUI、機能性は、当社があらかじめ掲げていた要件を満たして余りあるものでした」と説明する。
鉄道情報システムが、勤務シフト作成お助けマンCrewの開発に用いた開発技術については次の通りだ。まず、フロントエンドにはAngular、TypeScriptを利用。特にAngularについては、同社の他のプロジェクトでも利用しており、開発チームの学習コストを抑えられるというメリットがあったという。
また、UIライブラリとしてSpreadJSのほか、Angular用コンポーネント集であるAngular Materialを採用し、Googleが提唱するデザインガイドライン「Material Design」に沿ったサービスの外観や挙動の適用も行っている。一方、バックエンド側については、Java 11、Spring Framework、Keycloakをそれぞれ採用した環境となっている。
SpreadJSの活用により、勤務シフト作成お助けマンCrewでは、まさに期待通りのExcelライクなUIを実現することができた。画面入力の方法はすべてExcelと同様で、必要なセルをダブルクリックして編集を行い、もちろんセル間でのデータのコピー＆ペーストも行える。そのほか画面には、コンボボックスやデートピッカーなども装備されており、ユーザーの入力作業の効率性を高めている。また、セルのデータ変更をシステムのみが行えるようにし、ユーザーによる入力をロックする仕組みなども組み込んだ。
「コンボボックスやチェックボックスといったUI機能、そのほか関数なども多用していますが、SpreadJSでは逆シリアル化という機能により、サーバー側においてスタイル情報をJSONファイルで作成し、それをクライアント側に送って、JSONファイルの内容に沿った表示が行われるような仕組みとなっています。こうしたかたちで、UIや関数にかかわる複雑な処理はサーバー側で行われるため、クライアント側の負荷を軽減できる点も大きなメリットだといえます」と松本氏は強調する。
さらに、勤務シフト作成お助けマンCrewのメイン画面である勤務表作成画面では、異なる複数のスプレッドシートを縦に配置して一括表示しているが、それらのスプレッドシートは動きが連動するようになっている。仮に、あるシート上において、スクロールバーで行や列の表示の移動を行うと、他のシートもそれに追従して動くようになっている。また、拡大縮小も同様で、あるシートでのサイズ変更ハンドルの操作を行えば、すべてのシートの表示が拡大縮小される。
「スタッフに夜勤の割り付けを行う場合には、勤務が2日にまたがるため、ある日付で夜勤の設定を行うと、翌日の勤務にはハイフン（-）が自動設定され表示されます。逆に夜勤が解除されると翌日のハイフンも自動削除されるようにするといった工夫も行っています」と松本氏は紹介する。そのほか、単に文字情報で表現するだけでなく、セルの背景色を変えたり、枠線を付加したりするなど、より詳細な表現をスタイル設定によって行うという対応も実施している。
