シフト表の自動作成を支援するソリューションの新サービスを投入
「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日にまたがるため、ある日付で夜勤の設定を行うと、翌日の勤務にはハイフン（-）が自動設定され表示されます。逆に夜勤が解除されると翌日のハイフンも自動削除されるようにするといった工夫も行っています」と松本氏は紹介する。そのほか、単に文字情報で表現するだけでなく、セルの背景色を変えたり、枠線を付加したりするなど、より詳細な表現をスタイル設定によって行うという対応も実施している。
外部ライブラリ製品の積極的活用が工数削減、品質担保に貢献する
以上が勤務シフト作成お助けマンCrewにおいて実現されているUIや機能の主な特徴だが、松本氏によれば、今回の開発プロジェクトを通して同社では、いくつかの気づきを得たという。その1つが、TypeScriptの型付けについてだ。
「JavaScriptによる開発では、型付けを行わなかったり、any型で済ましてしまうというスタイルをとることが通常ですが、後々のメンテナンスや拡張を考えると、TypeScriptベースの開発により、明示的に型付けを行っておくことがやはり重要だと切に感じました」と松本氏は語る。
型付けがされていないと、意図しない型で値をわたされて思わぬエラーを引き起こすといった懸念もある。その一方で、引数や戻り値の型付けが明記されていれば、プログラムコードの読解もスムーズに行え、メンテナンス性が高まるといったメリットにもつながるという。
また、もう1つの気づきとしては、開発途上もしくは運用後に追加要件が発生した際にも、外部ライブラリを利用していれば、そこで追加要件に必要な機能がサポートされているか否かを調べるだけで、対応の可否を速やかに回答できるということだ。
「今回、独自実装した部分については、テスト工数が膨らむということが避けられませんでした。外部ライブラリの機能で対応していれば、そうしたテストもかなり楽になったかと思います」と松本氏。工数の削減のみならず、品質の担保にかかわる安心感を得るという意味からも、可能な限り外部ライブラリの利用が望ましい旨を強調する。
そのほか、プロジェクトではいくつかの困難な問題に直面することもあったが、そうした際には積極的にグレープシティの技術サポートを活用したという。「技術サポートに相談すると、大いに頭を悩ませていた問題が、思いの外あっさりと解決するということも少なくありませんでした。スピード感に富んだサポートを日本語で受けられるという観点でも、SpreadJSを選択したことは正しかったと実感しています」と松本氏は語る。
今後も鉄道情報システムでは、勤務シフト作成お助けマンのさらなる機能の拡充と、なお一層の使いやすさの向上に取り組んでいくことになる。「それに向けては、ご採用いただいているお客さまの声にも真摯に耳を傾け、サービスの実装へとフィードバックして、サービスの継続的なブラッシュアップに努めていきたいと考えています」と宮澤氏は語る。同社ソリューションの今後の躍進が大いに期待されるところである。
システム利用者におなじみのExcel機能を網羅的に提供するライブラリ製品
続く後半のセッションには、グレープシティの村上功光氏が登場。「使い勝手はそのままに！Webアプリケーションで実現する高機能スプレッドシート」と題する講演を行い、前半のセッションで活用事例が紹介されたグレープシティのスプレッドシートライブラリ「SpreadJS」について解説した。
スプレッドシートライブラリでは、行と列で構成されるUIを装備し、数式や関数によるデータ計算機能を備え、シート形式の表示切り替えなどの機能が最初から組み込まれていることが基本となる。
「今日、市場にはスプレッドシートライブラリを謳った製品が数多く投入されており、総じてそれら3つの要素を組み込んでいます。ただし、ほとんどのケースで、高機能なExcelとかGoogleスプレッドシートに迫る内容にはなっていないというのが実情です」と村上氏は指摘する。言い換えれば、SpreadJSこそ、それらスプレッドシートに迫り得るUIおよび機能性を実現しているライブラリ製品だといえる。
まずSpreadJSでは、3種類のUI表示が可能である。1つめは行列で構成されるオーソドックスなスプレッドシート。2つめは、数式バーやステータスバー。そして3つめが、リボンメニューである。「特にリボンメニューについては、最新版のSpreadJSにおいてリボンコンテナという非常に強力なコンポーネントが搭載されたことで実現できるようになりました」と村上氏は紹介する。
一方、使い勝手についてSpreadJSでは、システム利用者にお馴染みのExcelの機能が網羅的に提供されている。例えば、すでに述べたリボンメニューには、フォント設定やフィルタの挿入、ウィンドウ枠の固定といった機能があらかじめ組み込まれていて、即座に利用することができるようになっている。もちろん数式バーやステータスバーなども同様で、数式バーに投入された計算式が最初からシートに適用される状態となっているほか、数式のサジェスト機能、ズーム表示するためのスライダー、ドラッグフィル、コンテキストメニューなども初期設定のみで動作可能な状態となっている。
「さらにAPIを利用すれば、グループ化やスパークラインの表示、チャート機能や条件付き書式の設定なども行えます。加えて、過去にExcelで作成したスプレッドシート資産を読み込んで利用できる点もSpreadJSにおける重要なポイントです」と村上氏は強調する。
あわせて同ライブラリ製品には、スプレッドシートアプリケーションを簡便に実装できる「SpreadJSデザイナ」というツールも用意されている。それ自体、ExcelライクなUIを備えたツールで、開発するアプリケーションの外観やプロパティの設定を行って保存すると、JSONファイルが出力される。SpreadJSではこのJSONファイルを読み込むことで、デザインしたアプリケーションの初期設定が完了することになる。
今日、新たに開発する業務アプリケーションに、表計算の機能を組み込みたいというニーズはさらに増えており、その要求レベルもますます高まっている。「ただ、Excelにしても、マイクロソフトが膨大な時間と資金を費やして実現してきたものであり、その機能を業務アプリケーション開発でスクラッチにより実装するというのは、もはや非現実的と言わざるを得ません。Excelと同等の機能をライブラリ製品として提供するSpreadJSに、ぜひご注目いただければと思います」と村上氏は語りセッションを閉じた。
Excel OnlineやGoogleスプレッドシートなどの利用が拡大し、今やオンラインで表計算アプリケーションを利用するというスタイルも当たり前になっている。そうした中、Web上の業務アプリケーションに表計算のUI、機能性を組み込みたいというニーズの高まりは、むしろ自然の流れであるといえる。
今回の「Web TECH FORUM 2022 Winter」では、本来、極めて技術的ハードルが高い、そうしたニーズへの対応を容易にしてくれるSpreadJSの有用性を受講者に対し十分に伝えるものとなったはずだ。
