Angularと高機能JavaScriptライブラリで作るスプレッドシートアプリ

Wijmo（ウィジモ）と組み合わせて利用する例

　Spread.Sheetsを、ほかのJavaScriptライブラリと組み合わせて利用できます。本記事では、グレープシティが提供する「Wijmo」（ウィジモ）と組み合わせたサンプルを説明します。Wijmoは、さまざまなUI部品を提供するJavaScriptライブラリで、現行版の「Wijmo 5」は、Angularと組み合わせて利用できます。

図5　SpreadJSと同じく、グレープシティから提供されている「Wijmo（ウィジモ）」

　今回紹介するサンプルでは、Spread.Sheetsで表示したスプレッドシートに入力した値を、Wijmoのチャート部品FlexChatでグラフ表示します。

図6　Spread.Sheets＋Wijmo＋Angularのサンプル（P003-wijmo）

　まず、Spread.Sheetsを設定したAngularのプロジェクトに、さらにWijmoを設定します。Wijmoの設定方法は、グレープシティの技術記事を参照してください。ダウンロードできるサンプルコード（P003-wijmo）は、「npm install」コマンドでWijmoを含めたライブラリ一式がインストールされるようになっています。

　コンポーネントのテンプレートは、リスト9のようになります。

リスト9　FlexChartとSpread.Sheetsを表示するテンプレート（P003-wijmo/src/app/app.component.html）

<!-- Wijmo FlexChart ...（1）-->
<wj-flex-chart [itemsSource]="cView" [bindingX]="'種類'"
  style="width:480px;height:240px"><!-- チャート全体 ...（2）-->
  <wj-flex-chart-series [binding]="'在庫'"><!-- データ系列 ...（3）-->
  </wj-flex-chart-series>
</wj-flex-chart>
<!-- Spread.Sheets ...（4）-->
<gc-spread-sheets
  [hostStyle]="hostStyle" [newTabVisible]="newTabVisible"
  (valueChanged)="onValueChanged()"> <!-- データ変更時イベント ...（5）-->
  <gc-worksheet [name]="workSheetName1"
    [dataSource]="cView.items"> <!-- CollectionViewを参照 ...（6）-->
（略）
</gc-spread-sheets>

　（1）がFlexChartの記述です。チャート全体を表す<wj-flex-chart>タグ（2）の[itemsSource]属性にWijmoのデータクラスCollectionViewの変数cViewを、[bindingX]属性には、チャートのX軸に設定するデータの名前（「種類」）を指定します。

　<wj-flex-chart-series>タグ（3）はチャートに表示する1つのデータ系列に対応します。ここでは[binding]属性に、チャートのY軸に設定するデータの名前（「在庫」）を指定します。なお、属性指定時に「"'<値>'"」のようにダブルクォーテーションとシングルクォーテーションを重ねる記述は、属性に（変数名ではなく）値を直接設定するAngularの記法です。

　Spread.Sheetsに対応する記述（4）は、データ変更時に発生する(valueChanged)イベント処理（5）を指定します。また（6）の[dataSource]属性には、CollectionView変数cViewのitems属性を指定します。CollectionViewの詳細は後述します。

　コンポーネントの実装は、リスト10のようになります。

リスト10　リスト9に対応するコンポーネントの実装（P003-wijmo/src/app/app.component.ts）

export class AppComponent {
（略）
  // ワークシートにデータを設定
  workSheetData:any = [
    {"種類":"リンゴ", "在庫": 100},
（略）
  ];
（略）
  // ワークシートデータに対応するCollectionView ...（1）
  cView:CollectionView = new CollectionView(this.workSheetData);
  // スプレッドシートが変更されたときの処理 ...（2）
  onValueChanged() {
    // CollectionViewを更新して、FlexChartに変更を反映
    this.cView.refresh();
  }
}

　（1）で宣言しているcViewは、データを保持／ソート／フィルターする機能を提供するWijmoのCollectionViewオブジェクトです。コンストラクターで、引数にデータ変数（workSheetData）を与えると、CollectionViewのオブジェクトが生成できます。

　（2）は、リスト9（5）で指定した、スプレッドシートが変更されたときに実行する処理です。cViewのrefreshメソッドを実行して、FlexChartの内容を更新します。

　リスト10で宣言したCollectionViewの変数cViewをUI部品に指定するとき、FlexGridはリスト9（2）のように[itemsSource]属性に直接設定できます。Spread.SheetsはWijmo由来のCollectionViewに対応しないため、リスト9（6）のように、データ内容を取得するcView.itemsプロパティを[dataSource]属性に設定する必要があります。

参考：Spread.SheetsとFlexSheets、どちらを使う？

　Wijmoの上位エディション「Wijmo Enterprise」では、Excelのように使えるグリッド部品FlexSheetが利用できます。

　FlexSheetはWijmoとの親和性が高いのが特徴で、例えば、FlexChart同様CollectionViewを直接利用できます（Spread.Sheetsは上述の通り、CollectionViewを直接利用できません）。

　一方でSpread.Sheetsには、画像の埋め込みなどのよりExcelライクな機能や、Spread.Sheetsデザイナが利用できるといった利点があります。

　実際にはFlexSheetとSpread.Sheetsのメリット・デメリットを勘案して、使用するライブラリを選択することになります。

まとめ

　本記事では、JavaScriptライブラリSpreadJSのスプレッドシート部品Spread.Sheetsを、Angularと組み合わせて利用する方法を説明しました。連携機能により、Spread.SheetsをAngularの一部のように活用できます。また、他ライブラリとの連携例として、WijmoとSpread.Sheetsを組み合わせて利用する方法を説明しました。

参考資料

• SpreadJS
• Wijmo
• Angular