Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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

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

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

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

図6 Spread.Sheets+Wijmo 5+Angularのサンプル(P003-wijmo)
図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を組み合わせて利用する方法を説明しました。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:高機能JavaScriptグリッド部品「SpreadJS」の活用
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5