JavaScriptライブラリ「Wijmo（ウィジモ） 5」で1レコード複数行表示のグリッドを実現

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第13回

　本連載では、グレープシティが提供するJavaScriptライブラリWijmo（ウィジモ）について、サンプルとともに利用例を紹介します。今回はWijmoの上位エディション「Wijmo Enterprise」で利用できるグリッド部品MultiRowを紹介します。1レコードを複数行に分けて表示でき、柔軟なグリッド表示を実現します。

はじめに

　Wijmo（ウィジモ）は、グレープシティがHTML／JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現行版はECMAScript 5に対応した「Wijmo 5」です。

　Wijmoの上位エディション「Wijmo Enterprise」では、Wijmo 5で利用できる追加のUI部品が提供されます。今回紹介するMultiRowコントロールもその一つで、Wijmoのグリッド部品FlexGridに、1レコードを複数行に分けて表示する機能を追加したものです。MultiRowはFlexGridのサブクラスなので、Excelライクなショートカットキー操作や、Excel／PDFファイルへのエクスポートといったFlexGridの基本的な機能を備えつつ、より柔軟なグリッドレイアウト機能を提供します。

図1　MultiRowコントロールの例（Wijmoサンプルより）

　本記事では、MultiRowコントロールの利用方法を説明していきます。

対象読者

• WebサイトやWebアプリケーションのレベルをワンランク上げたい方
• より軽量／高速なJavaScriptのUI部品を探している方
• 標準のFlexGridより凝ったグリッド配置をしたい方

必要な環境

　Wijmo 5はECMAScript 5に対応するブラウザーをサポートします。詳細はWijmoのWebサイトで案内されています。

　Wijmo 5はそれ単体で利用できるほか、Angular（AngularJS 1／Angular 2以降）、KnockoutJS、React、Vue.js（1／2）といったJavaScriptフレームワークと組み合わせて利用できます。本記事ではAngular（バージョン5）とWijmoを組み合わせて利用します。

　今回は以下の環境で動作を確認しています。

• Windows 10 64bit版
  • Wijmo 5 5.20173.380 体験版
  • Angular バージョン5
  • Node.js v8.9.4 64bit版
  • Microsoft Edge 41.16299.15.0

　Angularの開発ではTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。

　本記事のサンプルコードは、AngularのコマンドラインツールAngular CLIで作成したプロジェクトにWijmo 5を組み込んで作成します。手順の詳細はグレープシティのブログで説明されていますが、本記事では以下のように手順を変更しています。

　まず、使用するWijmoのバージョンを更新します。具体的には、Wijmoをインストールするときに実行するコマンドを、リスト1のようにします。

リスト1　Wijmoをインストールするコマンド

npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJS-5.20173.380.tgz

　プロジェクトに含めるwijmo.min.cssとwijmo.culture.ja.min.jsのバージョンも変更します。上記リンクから本記事のサンプルで利用しているファイルをダウンロードできます。

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --open」コマンドを実行します（--openオプションを指定すると、ブラウザーが自動的に起動してページを表示します）。