Wijmoを開発の標準ツールに。Wijmo × Vue.js × ASP.NET Core MVCで実現した食品業界特化型SCM計画系クラウドサービス

日鉄ソリューションズ株式会社は、日本大手の製鉄メーカー・日本製鉄グループのユーザー系システムインテグレーターである。あらゆる業界に多種多様なサービスを手掛ける同社では、食品業界特化型SCM計画系クラウドサービス「PPPlan（ピーピープラン）」の開発において、メシウスのJavaScriptライブラリ「Wijmo（ウィジモ）」を採用した。PPPlanではほぼすべての画面にWijmoのコントロールが利用されており、Wijmoを開発の標準ツールとして扱っているという。Wijmoを標準ツールとして扱うメリットとは何か？また、開発に利用したJavaScriptフレームワーク「Vue.js」とWijmoの親和性はどうだったのか？同社産業ソリューション事業本部 産業ソリューション第二事業部の阿部さま、吉田さまにお話を伺った。

受託開発から得た知見を持って、社会情勢の変化にスピーディに対応できるサービスを提供

―「PPPlan（ピーピープラン）」とはどのようなシステムでしょうか？

阿部さま
食品メーカー向けの需給計画システムです。食品は受注生産のケースは少なく、たいてい見込生産となります。これぐらい売れるだろうという見込みを立て、数週間前から数か月前に工場で生産します。それを全国に配送してコンビニやスーパーで消費者が買う、という流れになりますが、食品メーカーは生産にあたって原料の手配を含めて計画を立てます。そういった生産計画や商品配送計画などを一元管理できるシステムです。

―どのような経緯で開発が始まったのでしょうか？

阿部さま
弊社ではもともと20年くらい前から食品業界向けに多数の需給計画システムを受託開発していました。規模的には開発期間1年半、費用は数億円程度となることが多かったです。しかし昨今の社会情勢の影響を受け、食品業界も変化が激しくなっており、大規模な受託開発は中規模・小規模の企業が多い日本の食品メーカーには合わないと考えるようになりました。また、食品業界は需要予測や在庫管理にITコストをかけず、Excelで運用している企業も多いです。そういった背景から、コストと時間をかけて大規模な受託開発をするのではなく、20年かけて得た知見を基にコンパクトなサービスをリリースし、広く安くスピーディに変化に対応していこう、と企画されたのがこの「PPPlan」です。

過去の利用実績からサードパーティ製ライブラリはメシウス製品一択

―受託開発でもWijmoをお使いいただいていた経験があるのですね。

吉田さま
はい。これまでの20年間で約30社の開発を行いました。当初は欧米系のパッケージ導入案件が多く、ある時期よりスクラッチ開発の案件が増えました。その中でWeb化の必要があり、かつスプレッドシート要件に対応するためにWijmoやSpreadJSを採用したシステムもありました。

―他社のライブラリとは比較をされたのでしょうか？

阿部さま
スプレッド形式の画面が必要な場合、思い浮かべるライブラリといえばメシウス製品でした。スプレッドシートの数式の機能が強いのは、メシウス製品が随一と感じていますので、比較することもなかったです。ちょっと褒めすぎかもしれませんが（笑）

―過去にスプレッドシートライブラリのSpreadJSの採用実績もあるようですが、「PPPlan」にはSpreadJSではなくWijmoを採用した理由を教えてください。

吉田さま
スプレッドシートのライブラリを導入するにあたり、SpreadJSにするかWijmoにするか、それともWijmo+SpreadJSの組み合わせにするか？という点は1つの検討ポイントでした。SpreadJSはほぼExcelと同等の機能が実現できるものと理解しています。PPPlanに必要と考える機能要件としては、Excelをまるごと再現する必要はなく、Excelの数式やExcelファイルのダウンロードやアップロード、コピー＆ペーストができれば良く、WijmoのFlexSheetコントロールの機能で十分だという結論になりました。このため、費用面も鑑みて、Wijmoの採用を決めました。

Wijmoを開発の標準ツールに。ほぼすべての画面でWijmoのコントロールを利用

―Wijmoではどのようなコントロールを利用しているのでしょうか？

吉田さま
FlexSheetをメインに利用しています。FlexSheetまでの機能は不要だが表形式が必要な部分はFlexGrid、在庫のグラフ表示にはFlexChartを活用しています。そのほかにもボタンやListBoxなど、Wijmoのコントロールを幅広く取り入れています。

―多くのコントロールをご利用いただきありがとうございます。Wijmoが使われている画面数はどのくらいあるのでしょうか？

阿部さま
見た目や操作感を統一する目的で、Wijmoのコントロールを使用して画面標準を決めました。そのため、結果的にほぼすべての画面にWijmoのいずれかのコントロールを使っていることになります。Wijmoが開発標準の一部のような扱いになり、開発の標準化の助けにもなっています。

―Wijmoの使い勝手はいかがでしたか？

阿部さま
実装面で困ったことはあまりありませんでした。特にExcelのインポート／エクスポート機能については、コードを1つ書くだけなので「これだけで出来てしまうのか」と感動したほどでした。
画面の設計などを行うときに、どのコントロールを使うかというのは結構迷うものですが、デモサイトでサンプルコードを確認できますし、どんな動きをするかというのもその場で確認できるので、それを活用して開発しました。デモサイトは他社にはないメリットだと感じています。

吉田さま
E-mailサポートも利用しましたが、必ず3日以内に何か回答が来るので、レスポンスが早くて助かりました。回答が「調査に時間がかかります」という内容だったこともありますが、必ず3日以内に回答がくることはライブラリを利用するうえでの安心感にもつながっています。

―社内でのWijmoに対する認知度や評価はいかがでしょうか？

阿部さま
社内全体の認知度をすべて把握できているわけではありませんが、少なくとも我々が所属する事業部ではExcel化やスプレッドシートの要件があればSPREADやWijmoが必ず選択肢に出てきます。事業部内の情報共有ツールでは、Wijmoで開発したときの注意点や事例などが多く共有されています。また、幹部クラスの社員もWijmoを認識しているので、社内での認知度も高いです。

吉田さま
当社内でのWijmoの評価ですが、機能面は十分だが大量データを扱う場合のレスポンスに注意が必要、とは言われています。単純に表示するだけであればそれほどパフォーマンスは問題になりませんが、フロント側でセルに書式設定をしたり数式を埋め込んだりといった加工をすると、どうしても重くなってしまうことはあります。正直、大量のデータを出す場合に時間がかかるのは仕方がないので、そこは無理な実装にならないよう設計や運用を工夫しています。

WijmoとJavaScriptフレームワークの親和性の評価は？

―開発フレームワークにはASP.NET Core MVCとVue.jsを採用されていますね。それらを選んだ理由を教えてください。

阿部さま
直近で受託開発した案件でWijmoを利用した実績があったので、そのアーキテクチャを有効展開したかったのですが、そのシステムがASP.NET Web Formsと古い技術であったため、そのままでは展開できないという判断になりました。5年10年と長くサービスを提供し続けたいので、将来性や開発者の集めやすさなどを考え、ASP.NET Core MVCを選びました。
また、JavaScriptフレームワークでは3大フレームワーク（Angular、React、Vue.js）から比較検討しました。その中で、中規模向け開発であることや学習しやすさなどを考え、Vue.jsに決めました。ただ、3つのうち、「これじゃなきゃダメ」というのは特に無く、あまり明確な決め手がなかったのも事実です。

―開発にあたって、WijmoとVue.jsの親和性についてはいかがでしたか？

吉田さま
特に苦労することなく開発を進めることができました。デモサイトでVue.jsのサンプルコードを確認できるので便利でした。

―システムのインフラ部分の構成について教えてください。

阿部さま
PPPlanでは、シンプルなシステム構成にすることで低価格なサービス提供を目指しています。お客さまごとにシングルテナントモデルを採用すること、VPN接続を採用することでセキュリティを担保しています。

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

―PPPlanの今後の展開を教えてください。

阿部さま
食品は幅が広く、仕込みに数年かかる食品もあれば、卵や牛乳を使ったチルド食品のように賞味期限が短いものもあります。また、海外の相場を見ながら原料を買付ける食品があったり、飲料の場合は食品とはまた違う計画が必要になったりなど、多種多様です。現在のシステムはごく一般的・標準的な加工食品の需給計画に対応していますが、いずれはさまざまな食品に対応できるようにしていきたいと考えています。

吉田さま
機能改善レベルの改修は数か月に1回は実施していきたいと考えています。アーキテクチャについても、今はシングルテナントで運用しているところをマルチテナントに変更したり、コンテナ化して運用開発コストを下げるような取り組みを数年スパンで実施する予定です。

―メシウスに対するご要望があれば教えてください。

阿部さま
認証認可系のライブラリや、システム運用に関わるようなライブラリが揃っていると、画面の設計と合わせて一緒に作っていけるので、助かりますし導入しやすいなと思います。画面UIはすべてメシウスのライブラリを入れていますが、ログイン画面の裏のユーザー管理部分などは全部自前で作っているので、そのあたりのシステム管理機能があると良いですね。

吉田さま
今はクラウド化の流れがあるので、アーキテクチャはこういう構成がおすすめで、この構成のこの範囲がメシウス製品でカバーできます、などの具体的な案内があると嬉しいです。サービスを開発する場合、アーキテクチャは顧客指定などの制約を受けずに全部自分たちで決めなくてはならないので、ある程度セットできちんと動く実績のある組み合わせを紹介してもらえると、それを採用しやすいと思います。また、スマートフォンやタブレットで利用するケースが増えているので、レスポンシブデザインやタッチ操作に対応できるライブラリがあると嬉しいです。実際、お客様からもタブレットで入力したいという要望は出ているので、いずれはPPPlanでも対応していきたいと考えています。

阿部さま
Wijmoのデモサイトについても要望があります。コントロールごとにサンプルが分けられていますが、具体的な画面のテンプレートがあると画面設計のイメージが湧きやすいです。我々の場合は需給計画システムのサンプルがあると助かりますが、例えば鉄道業界や建築業界といった業界ごとによく使われる画面、一般的な受発注の画面など、複数のコントロールを組み合わせてよくある画面のサンプルみたいなものが欲しいです。

―とても参考になるご要望をありがとうございます。今後の製品開発に活かしていきたいと存じます。今回は食品業界のさまざまなお話を伺うことができ、PPPlanを通じて食品業界の支援を間接的にできることをとても喜ばしく感じます。本日はありがとうございました。

取材協力：2023年2月

※ NS（ロゴ）、NS Solutions、PPPlanは、日鉄ソリューションズ株式会社の登録商標です