はじめに
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の基本的な機能を備えつつ、より柔軟なグリッドレイアウト機能を提供します。
本記事では、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のようにします。
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オプションを指定すると、ブラウザーが自動的に起動してページを表示します）。
