ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

『GrapeCity Web TECH FORUM』開催レポート

導入支援パートナーであるエス・ビー・エス株式会社様と共同セミナー『GrapeCity Web TECH FORUM ~Webシステムリノベーション~』を、開催しました。

Webを取り巻く環境は日々進化し続けており、新しいWeb技術は業務システムにも広く活用されるようになっています。しかしコンシューマー向けWebサービスと違い、安定稼働しているエンタープライズWebシステムの再構築には慎重にならざるを得ません。本セミナーでは、ASP.NET MVCとUIコンポーネントを使用して既存システムの資産を活かしながら最新技術を取り入れてシステムの価値を高めて「リノベーション」する手法をご提案しました。

本セミナーは、グレープシティ関東支社のある埼玉県川口市で開催し、たくさんの方にご参加いただきました。ご来場いただきましてありがとうございました。

≫≫ エス・ビー・エス株式会社様の紹介を見る

WebシステムにおけるUXと開発効率向上への提案

f:id:ComponentOne_JP:20170808143703p:plain

最初のセッションでは、エス・ビー・エス株式会社 第一システム部 部長代理の須藤 隆一郎氏に、Webシステムのリノベーションの手法や考慮すべきポイントをご説明いただきました。

Webシステムをリノベーションする際の設計手法として、電子化したデータをより効率的に活用できるように、これまで各システムで個別に管理していたデータをWeb API化して一括管理し、データ表現のための処理をJavaScriptで実装してサーバー側からブラウザ側に比重を移すようにリノベーションすると良いとご説明いただきました。

また、非同期通信やグラフィック処理などのJavaScriptの高機能化の恩恵により、WebアプリでUXを強化して使い勝手の良いシステムを提供できるようになりましたが、その一例としてWijmoのMultiAutoCompleteコントロールでサジェスト機能を用いて直感的な操作方法で都道府県を入力・編集するデモを実演いただきました。

従来の単純なテキストボックスを使った画面から新しい画面への変更は、ASP.NET MVCのコントローラーを1行変更するだけで可能でした。画面の差し替えが簡単であるだけでなく、希望するユーザーにだけ新しい画面を表示して、新しい画面に慣れないユーザーには古い画面を表示することも可能で、ASP.NET MVCの柔軟性と使い勝手の良さも実感することができました。

JavaScript UIコンポーネントの選定と活用ポイント

f:id:ComponentOne_JP:20170808143720p:plain

続いて、エス・ビー・エス株式会社 第一システム部 プロジェクト主任の泉氏には、手作り、OSSを使用、有償製品(Wijmo)を使用という3つのケースでUIをで作成して、それぞれの利点や欠点を徹底比較していただきました。

手作りする場合は、正規表現で入力値をチェックしてエラーをツールチップで表示するという基本的な検証処理を実現することができました。日付入力は、Chromeなどのモダンブラウザではカレンダーを使って入力できますが、機能はブラウザ依存で、IE11ではただのテキストボックスとして表示されてしまいます。円グラフはCanvas描画処理で実現できますが、多くのコードを実装する必要があります。総じて、手作りするには標準仕様の学習コストや保守コストがかかるという課題があります。

一方で、OSSを使用する場合は、jQuery UI、jQuery Validation Plugin、Chart.jsなどのライブラリを使用して、手作りする場合に比べて短く分かりやすいコードで同じ画面を作成できました。IE11でもカレンダーを使って日付を入力したり、正規表現よりも簡単なコードで検証することができますが、かゆいところに手が届かず複雑な要件の実現は難しい場合があり、複数のライブラリを使い分けないといけない、英語のドキュメントしかないという課題もあります。

最後に有償製品の例としてWijmoを使用する場合は、展開縮小できるツリービューを使って項目を選択したり、カレンダーを使った日付入力で和暦を表示したり、カタカナの入力のみを許可したりと、より複雑な機能を持った画面を作成できました。決められた文字だけしか入力できないため、検証処理を実装・テストする必要がないという点も利点として挙げていただきました。有償製品は購入コストがかかりますが、Wijmoでは日本語のドキュメントやサポートが提供されますし、長期的に安定的な開発ができ、トータルのコストを考えると製品購入が近道となる場合もあるので、何を重視するかでUIコンポーネントを選択することが重要であるとのことです。

グレープシティのJavaScriptライブラリ

f:id:ComponentOne_JP:20170808103914j:plain

次のセッションでは、グレープシティ 森谷から、弊社製品「SpreadJS」の新バージョンと「Wijmo」をご紹介させていただきました。

Spread.SheetsはExcelと同じ操作性と機能を提供するコントロールで、WijmoのFlexGridはデータグリッドの強化版という位置付けのコントロールです。どちらの製品もVB、ActiveXの頃から長く親しまれてきた歴史のあるコントロールです。Visual Studio Codeを使った開発デモンストレーションでは、JSON形式でデータを作成してデータソースに設定するだけで表示することができ、Excelにコピー&ペーストすることも可能であることを示しました。また、FlexGridのExcelファイル出力処理や、Spread.Sheetsの数式やドラッグフィル操作などのExcelと同様の機能も好評だった様子です。

次に、WijmoのMultiRowは複数行のレイアウトでグリッドを表示するコントロールで、「プレイWijmo」サンプルを使って、列のレイアウトを設定するだけで、単純なグリッドレイアウトを複数行レイアウトに切り替えることができました。

パネルディスカッション&質疑応答

f:id:ComponentOne_JP:20170808143741p:plain

セミナー最後のプログラムとして、以前のセミナーで登壇いただいたエス・ビー・エス システム開発事業部 統括部長の夜久氏も加わり、Webシステムの移行案件の実情などについてディスカッションが行われました。

≫≫ 前回のセミナー開催報告を見る

Web開発ではASP.NET MVCが主流になりつつあることや、Web Formsとの共存、Webブラウザのサポート対象など、一開発者として興味深い話題が盛りだくさんでした。

質疑応答でも、個人的に「そうですよね、分かります」と思わず頷くご質問をいただき、Webシステム開発では要件定義の段階でプロトタイプが必要になるケースが多いという、エス・ビー・エス社の経験談も参考となりました。

ご参加いただいた方の声(アンケートから抜粋)

  • 非常に参考になった。Spreadがローカル並みの動作が実現できていることに興味をもった。
  • 実践編での手作り、OSS利用、製品利用の3種について、デモを交えた比較がとても分かりやすかった。
  • 有償ライブラリのメリットを知り、また御社の製品の特長を知ることができました。参考にさせていただきます。ありがとうございました。
  • 現状のWeb開発の実際が分かりやすかったです。
  • 現存、既存のWebシステムの改修を予定しているので参考になりました。
  • Wijmoに対して興味がわいた。手作り、OSS、有償の差がわかりやすくよく理解できた。パネルディスカッションに今後のWeb開発のヒントがたくさんあったので社内で展開したい。
  • とても良い流れで実施いただいたセミナーでした。GrapeCity製品を使って新たなシステム構築に役立てたいと思いました。ありがとうございました。
ComponentOne