学習コストを抑制できる製品を選定――未経験者も含めた開発を円滑に推進
「グレープシティ開発支援ツールの活用事例紹介」がテーマの「GrapeCity ECHO week 2020」。初日最初の講演には、クロスキャットの飛沢峰氏、千島健太郎氏の2人が登壇し、「Wijmoで実現した簡単勤怠管理CC-BizMateについて」と題する講演を行った。1973年に設立された老舗ソリューションベンダーとして長年にわたり広範な企業のシステム構築・運用を手がけてきたクロスキャットでは現在、業務効率化に寄与する独自製品・サービスの提供にも注力している。その代表的なものが、クラウド型勤怠管理ソリューション「CC-BizMate」だ。特徴は「人事総務部門に寄り添う」をコンセプトに、勤怠・労務管理に加え、残業抑制や36協定対策につながる残業予測、あるいは各人の仕事内容の可視化・分析、作業時間のリアルタイムな予実管理といった幅広い機能の提供だ。これにより、企業の人事総務部門における生産性向上と人的コストの最適化を支援している。
「CC-BizMate」のサービス提供がスタートしたのは、2011年ごろのこと。以来、クロスキャットでは顧客ニーズの変化に合わせて随時機能をブラッシュアップしてきた。「特に近年は、働き方改革の推進など労働環境の変化が急激に進む一方で、法改正も頻繁に行われています。そうした動きにシステムの改修によって追随していくには自ずと限界がありました。加えて、従来のシステムではASP.NET Web Formsを使用しており、Web Formsが.NET 5以降ではサポートされなくなる背景もあって、アーキテクチャの大幅な見直しを行ってシステムを全面リニューアルし、2020年4月にリリースしたのが現在のサービスです」と千島氏は紹介する。
リニューアルに向けたプロジェクトにおいて同社では、開発をMicrosoft Visual Studio 2019プラットフォームに、ASP.NET Core Webアプリケーションで新システムを構築することとした。さらに、フロントエンド部分の実装のためのフレームワークにはVue.jsを、UIライブラリとしてグレープシティの「Wijmo（ウィジモ）」をそれぞれ採用した。
Wijmoの選定理由については、入力やデータグリッド、グラフなど、およそ必要と考えられるUIコントロールがトータルに取りそろえられていることに加え、グレープシティのWebサイト上で公開されているサンプルが豊富で、それらコントロールのデザインや挙動、レスポンスを容易に確認できる点を挙げ、高く評価した。加えて同社では、以前からグレープシティの製品をさまざまなプロジェクトで活用してきた経緯もあった。「重要なポイントとなったのが、Wijmoでは学習コストが抑えられるということ。工期も限られ、Vue.jsなどのフレームワークを使った開発の経験者が少ない中、いかにスムーズに開発を進めていけるかといった観点で最適なツールとして挙がったのがWijmoでした」と飛沢氏は説明する。
「CC-BizMate」では、勤務実績の入力にコンボボックスやテキストコントロールやカレンダーコントロールを、従業員の残業状況や累計時間の推移の可視化にはグラフコントロールを、さらに作業ごとの工数表示にグリッドコントロールをそれぞれ活用するなど、UI実装のトータルな局面でWijmoを役立てた。これらは開発コストの削減だけでなく、デザイン面の統一性担保にも貢献している。
「今回のプロジェクトを通じて、Wijmoの使いやすさについては十分に実感できました。ただし、そうしたツールの使いやすさと、システムの作りやすさ、ユーザーの使いやすさは必ずしもイコールではありません。メンテナンス性やユーザビリティを高めるための工夫、アイデアの創出こそが必要で、言い換えればそこに開発の醍醐味があるものと考えます」と飛沢氏は強調する。
今後もクロスキャットでは「CC-BizMate」のさらなる機能強化・改善により、ユーザー企業の人事総務部門における課題解決への貢献を目指していくことになる。「その一方で、例えばAPIを介した外部ソリューションとの連携の促進など、パートナーさまとの間の協業拡大といったことも目指していきたいです」と千島氏。これらの取り組みを通して、「CC-BizMate」が顧客に提供する付加価値のさらなる拡大が期待されているわけだ。
「汎用型」「用途特化型」2方向でJavaScriptの開発を強力に支援
続く初日2つ目のセッションでは、グレープシティの村上功光氏が「よくわかるグレープシティのJavaScript製品ラインナップ」と題し、講演を行った。グレープシティではJavaScriptに対応した開発支援ツールを4つのラインナップで展開している。具体的には、「Wijmo」「SpreadJS（スプレッドJS）」「InputManJS（インプットマンJS）」「ActiveReportsJS（アクティブレポートJS）」が該当する。「これらのラインナップについては、多様な案件をカバーする『汎用型』と、ディープな要件に対応する『用途特化型』という、2つのカテゴリで捉えていただければわかりやすいかと思います」と村上氏は話す。
まず、汎用型に相当するのが「Wijmo」だ。その最大の特徴としては、データグリッドやチャート、インプット、ゲージ、ピボットなど40以上の各種コントロールをオールインワンで提供する多機能性が挙げられる。また洗練されたアルゴリズムによる高速処理とモジュールの極小化を実現していることも重要なポイントだ。これらについて村上氏は「例えばグリッドビューのサイズは150キロバイトに過ぎず、100万のデータをわずか200ミリ秒でソートできる処理性能を実現しています」と紹介する。また「Wijmo」は、AngularやReact、Vue.jsといったフレームワークやTypeScriptなどの最先端技術による開発にも対応している。
一方の用途特化型に該当するのが「SpreadJS」「InputManJS」「ActiveReportsJS」である。具体的には、「SpreadJS」は表計算の機能を提供するもので、ExcelライクなUIと操作性を備えるだけでなく、380を超える数式を装備していることに加えて、チャートや数式バー、条件付き書式にも対応。また、xlsxファイルの入出力もサポートしている。
「InputManJS」は入力制御を支援するツールだ。全角・半角、ひらがな・カタカナに対応したフィルタや自動変換機能を用意しているなど、日本語の制御において大きな強みを持つ。加えて、和暦表示や漢数字による数値表現が可能であるほか、漢字入力からふりがなの取得が行える便利な機能も提供している。
そして、帳票出力を支援するのが「ActiveReportsJS」である。フロントエンドにエンジンを置いて帳票の生成・出力を行うアプローチで、サーバーサイドのテクノロジに依存することなく動作させることが可能だ。また、クロスプラットフォームで利用可能な帳票デザイナとブラウザを選ぶことのないビューワも付属する。「グレープシティがActiveReportsシリーズの製品で培ってきたノウハウのエッセンスを継承し、日本企業ならではの帳票仕様にかかわるニーズにもきめ細かに対応できる点が、とりわけ大きなアドバンテージとなっています」と村上氏は強調した。
情シス担当1人でのシステム再構築を――高品質な帳票開発支援ツールが支援
続く2日目前半のセッションには、丸喜の荒川雄介氏が登場。「情シス担当が1人でVBレガシーシステムの移行に挑んだ話」と題する講演を行った。丸喜は仏壇や仏具、装具用品、ひつぎ、骨つぼなどを仏壇店や葬祭業者の顧客に供給する宗教用具卸業だ。京都に本社を置き、東京、名古屋、徳島、札幌など、全国に拠点を展開する、従業員数139名の規模の企業である。
同社ではかねてより、商品出荷に際して発行する、4～5枚つづりになった顧客宛ての専用伝票（指定伝票）を出力するためのシステムを長年にわたって運用してきた。このシステムは、UI部分がVisual Basic 6.0、帳票印刷部分がFileMakerでそれぞれ構築されており、Windows XPベースで稼働するものだった。「社内の端末がWindows 7やWindows 10になっても、それらのOS上では動作させることできないため、引き続きWindows XPの端末を設置して運用する必要がありました。加えて、実装されているソースも複雑で、帳票の追加にあたってはFileMakerのスクリプトを編集しなければならないなど、システムの運用やメンテナンスをめぐるさまざまな問題を抱えていたのです」と荒川氏は振り返る。
これに対し同社では、基幹システムの移行を手がけていたシステム会社に同システムのリニューアルを依頼。Visual Studio 2017（Visual Basic .NET）とActiveReports for .NET（アクティブレポート）の活用をベースに.NETベースでシステムを再構築し、それを荒川氏がメンテナンスしていく方針を打ち出した。「ところが、いざシステムができあがってみると、帳票の追加にVisual Basic .NETのソースの修正が必要だったり、ActiveReportsの利用についても、設計時のレイアウトがそのまま印刷結果に直結する最新のページレポートではなく、コードへの依存が高いセクションレポートを採用していたりするなど、メンテナンスを円滑に行う上では不都合と思われる点が多く、プログラムの納品を拒否せざるを得ませんでした。そして結局のところ、私自身の手で開発を進める運びとなりました」と荒川氏は経緯を明かす。
とは言え、既存システムには仕様書と呼べるものも存在しなかった。そこで荒川氏は既存システムのソースやデータを解析する一方で、システムを利用する現場担当者にヒアリングを行うところから開発の取り組みを進めていく。2019年3月末から開発を開始し、5月中旬には旧システムと並行稼働させる形をとった。「このとき、究明しきれない仕様上の不明点もあったので、まずは7割程度完成したらリリースして現場の利用に委ねることとし、不具合の修正や足りない機能の追加を重ねていくアプローチをとりました。その結果、11月ごろにはシステムを完成させることができました」と荒川氏は話す。
そうした中でも、ActiveReportsを採用していることのメリットは大きかった。例えば、帳票デザイナをスタンドアロンで利用できるので、それを使って帳票設計を効率的に進めることができた。具体的には、3日間で60種類ほどの帳票を設計したという。
また、テンプレートのフィールド内で各種演算が行え、スクリプトが記述できることも開発生産性の向上に貢献した。これについて荒川氏は「例えばテンプレート側で軽減税率を含む消費税や歩引き、合計金額などの計算や、顧客区分に応じたデータフィールドの出力の有無を制御するといったことをスクリプトの記述により実現できます。これによりVisual Basic .NETのプログラム側のソースコードを、よりシンプルなものにできました」と説明する。そのほか、令和対応を含む和暦の利用や専用伝票で多用される罫線の設定も非常にスムーズに行えたという。
「今回の取り組みを成功に導く上では、グレープシティのサポートが非常に大きな力になりました。今後に向けてシステムのWebサービス化も検討しているところですが、そうした局面でもグレープシティには変わらぬ支援を期待しています」と荒川氏は語る。
リッチでモダンなWeb帳票アプリの開発ニーズを満たす支援ツール
2日目後半のセッションは、グレープシティの福井潤之氏が「DX時代の帳票開発ツール『ActiveReportsJS』の使いどころを徹底解説」というタイトルで講演した。今日の企業ではDXの推進やテレワークへの対応が必須要件となっており、帳票に関しても「脱ハンコ」によるペーパーレス化の要請が高まっている。そのようなニーズに応える帳票アプリケーションの構築に大きな威力を発揮するのが「ActiveReportsJS」だ。
「グレープシティでは1998年から.NETの開発ツールとして『ActiveReports』を提供していますが、『ActiveReportsJS』はそのDNAを受け継いだ、モダンなWeb開発に対応する帳票開発支援JavaScriptライブラリです」と福井氏は紹介する。サーバーサイドで動く.NET版とは異なり、クライアントサイドで動作することが大きな特徴で、クライアントにダウンロードされたレポートファイルに対し、Web APIなどを介して取得したデータを埋め込んで必要な帳票を生成する形だ。
帳票の設計に関しては、WindowsおよびMacで動作するスタンドアロンのデザイナアプリケーションが用意されており、GUI画面上のツールボックスに用意された多彩なレポートコントロールを、ドラッグ＆ドロップ操作で配置してデザインしていくことができる。そのほか、イメージの調整もツールバーやプロパティグリッドを使って直感的に行える。加えてActiveReportsJSには、さまざまなブラウザで帳票を閲覧するためのビューワがJavaScriptのライブラリとして提供されている。よって、幅広い種類のアプリケーションに組み込んで使うことが可能となる。
「データバインディングについては、データソースにJSON形式のものを設定する形となりますが、レポートに表示するデータソースとの接続もデザイナからGUIを使って簡単に行うことができ、Web API経由での取得に加え、固定のJSONデータを埋め込んだり、JSONファイルを指定したりすることも可能です」と福井氏は説明する。
そのほか、日本固有の要件に対応する機能も充実。縦書きや各種罫線、禁則処理、均等割り付けといった仕様にもきめ細かく対応している。
2020年12月には最新バージョンとなる「ActiveReportsJS V2J」がリリースされた。そこでは、エンドユーザーがWebブラウザ上で帳票の新規作成や変更を行うためのデザイナアプリケーションの作成を支援する「Webデザイナコンポーネント」を提供。さらに、JSON形式によるデータバインディング機能がさらに強化されていることに加え、.NET版のActiveReportsでも好評だったレイヤー機能が追加されるなど製品拡充が図られている。
「AngularやReact、Vue.jsといったJavaScriptフレームワークにも対応する『ActiveReportsJS』は、当社の提供する『InputManJS』や『Wijmo』などの強力なUIライブラリとの併用も可能です。リッチでモダンな『今どきの』Webアプリケーション開発のニーズに応えます」と福井氏は語る。
DXの時代にマッチするローコード開発の実践
「GrapeCity ECHO week 2020」の中日である3日目最初のセッションは、OutSystemsジャパンの河原﨑剛氏による「アプリケーション開発 2.0 ―ローコードで切り開く新しい未来」だ。近年、できる限りソースコードを記述せず、開発作業の多くの部分を自動化する「ローコード」というアプローチが注目を集めている。「企業が既存システムのメンテナンスにほとんどのIT予算と人的リソースを投入せざるを得ない状況にある一方で、デジタルトランスフォーメーション（DX）の要請が高まり、こなすべき開発案件がさらに増えている状況です。これらを背景に、特に2020年はまさに『ローコード元年』として、システム開発の歴史における大きな転換期になる可能性があります」と河原﨑氏は切り出す。
そうしたローコードによる開発を実現するツールとして、グローバルな規模で広く受け入れられているのが「OutSystems」だ。世界中で1500社以上に採用されているほか、国内のユーザーも130社を数える。業務効率化のための社内システムや顧客向けモバイルアプリ、BtoC・BtoBのポータルの構築など、広範な領域で用いられており、基幹系システムの開発において採用されている事例も豊富だ。
「OutSystems」では提供するIDEの上で、画面やビジネスロジックの開発を統合的に進めていくことが可能だ。例えばIF文による条件分岐はもちろん、データベースへのアクセスやAPIによる外部サービスの呼び出しも、ビジュアルな画面上で実装していくことができる。「これにより、極めて大きな開発工数削減効果が期待できます。例えば、あるお客さまでは、従来2年かかると見積もられていたシステムを、半年程度でリリースできたというケースもあります。これらが開発人員のスリム化やコスト削減につながることは言うまでもありません」と河原﨑氏は語る。
セッションでは、会社が管理するクレジットカードの情報を一覧し、各カードの登録情報を表示したり、カードごとの利用履歴をチャートで示す、あるいは外部のWebサービスとのAPI連携により為替レートの情報を取り込んだりできるようなWebアプリケーションの実装を河原﨑氏がデモして見せ、「OutSystems」の活用でいかに俊敏な開発が可能になるかを紹介した。またその中で、グレープシティの「Wijmo」で開発された「Data Grid」コントロールを「OutSystems」上で活用し、ExcelライクなUIを実装する様子も実演された。
これに関して河原﨑氏は「『OutSystems』では『Forge』というWebサイト上で、3300種類以上のUI系コンポーネントや外部サービスと連携するためのコネクタなどを公開しています。開発者の皆さんは必要なものをダウンロードして即座に利用していただくことが可能です」と紹介する。もちろん、その中には先のデモで紹介した「Data Grid」も含まれており、このことは「OutSystems」と「Wijmo」の互換性がしっかりと担保されていることの証左でもある。
さらに「OutSystems」では、開発のフェーズにとどまらず、設計やテスト、リリース、分析、管理といったシステムの開発ライフサイクル全体をサポートしている。例えば、テスト関連のツールやフレームワークが提供されており、単体テストの自動化も可能であるほか、開発したアプリケーションを本番環境へリリースする際の、モジュールの依存関係に関する自動チェック、さらには継続的インテグレーションなども支援している。
「ローコードの利用により、ソフトウェアの品質の担保と開発スピードの向上を両立させることが可能となり、もちろんメンテナンスにかかわる工数も軽減できます。そうしたことが、時代の変化に追随し得る、より使い勝手の良いシステムの実現へと確実につながってくるはずです」と河原﨑氏はあらためて強調する。
ローコード開発環境のメリットを最大化するライブラリ製品
続く3日目後半のセッションでは、伊藤忠テクノソリューションズ（CTC）の伊藤晃規氏が、「『SpreadJS for OutSystems』圧倒的生産性向上のための更なるツール」と題する講演を行った。ローコード開発を支援する「OutSystems」については直前の河原﨑氏のセッションで紹介された通りだが、伊藤氏のセッションでは、CTCとグレープシティの共同開発により2020年7月にリリースされた、「OutSystems」での開発におけるさらなる生産性向上に寄与するコンポーネント製品「SpreadJS for OutSystems（スプレッドJS フォー アウトシステムズ）」の詳細が紹介された。
「SpreadJS」自体は、WebアプリケーションのUIにおいて、Excelライクなスプレッドシートを実現するグレープシティ製のJavaScriptライブラリとして広く利用されているが、「SpreadJS for OutSystems」は文字通り「SpreadJS」を「OutSystems」上で効果的に利用するための製品である。これについて伊藤氏は「これまで『OutSystems』で『SpreadJS』を使う場合には、相応の量でJavaScriptのコーディングを行う必要がありました。これに対し『SpreadJS for OutSystems』では、ほぼノンコーディングでExcelライクな画面UIを開発するアプリケーションに実装することが可能で、『OutSystems』におけるローコード開発のメリットを最大限に享受できるようにするものです」と紹介する。
「SpreadJS for OutSystems」には「SpreadJS」の多くの機能が踏襲されており、ソートやフィルタ、条件付き書式、グループ化といった機能をはじめ、450種以上の表計算関数などのExcel互換機能を豊富に備えている。例えば「SpreadJS」では「電卓」や「日付時刻ピッカー」「リスト」などのドロップダウンオブジェクト機能をセルやセルボタンに適用し、Excelにはない高機能なドロップダウンセルの動作を実現できるが、それらは「SpreadJS for OutSystems」にもしっかりと継承されている。
セッションでは複数の工場で生産を行う部品メーカーを例に、グローバルな市場に供給する製品在庫を管理するイメージのアプリケーションを、画面の追加からPreparationアクションの設定、画面の調整、デザイナ画面の追加、ヘッダの日本語化、フィルタの設定、バーの設定、条件による行の塗りつぶしといった一連の流れで実装するデモを伊藤氏が実演。「OutSystems」と「SpreadJS for OutSystems」の組み合わせによって、ExcelライクなUIの構築をいかに手軽に行えるかが示された。
以上、「GrapeCity ECHO week 2020」の5日の会期のうち、12月21～23日に実施されたセッションの模様をお送りした。残りの24日、25日のセッションについては、後編であらためてその模様をレポートしたい。
