ExcelライクなUIを実現する「SpreadJS（スプレッドJS）」をMonacaで使ってみる

はじめに

「SpreadJS（スプレッドJS）」はグレープシティが提供しているJavaScriptライブラリです。エンタープライズ向けのWeb／モバイルアプリケーション開発で利用できるExcelライクなスプレッドシートUIコンポーネントSpread.Sheetsを提供しています。

SpreadJSはWebアプリケーションのデータ表示に特化した二つのコントロールを収録するJavaScript製品です。今回紹介するExcelライクなUIを実現するSpread.Sheetsと、グリッド表現の枠を超え多彩なデータレイアウトを可能にするSpread.Viewsが含まれています。

Spread.Sheetsの特長

Spread.Sheetsは以下の特長を持っています。

Excelのような操作性と外観
データを単一スプレッドシートおよびマルチシートで表示。セル範囲や行、列の選択、セルのドラッグ移動、アンドゥ・リドゥといったExcelと同等の操作性を提供。
セル型
コマンドボタンやチェックボックス、コンボボックスやハイパーリンク動作をセル上に実現。単純なExcel互換スプレッドシートにとどまらない拡張性で、多岐に渡るアプリケーション要件へ柔軟に対応。
GUIデザイナ
Excelライクな使い勝手のデザイナで各種外観スタイルを直感的に操作可能。多くのコード量が必要な設定もノンコーディングで実現。
豊富な組み込み関数
日付、財務、統計、検索、文字列などさまざまな業種や職種で活用できる450種以上の実用的な表計算関数を提供。ほぼ全ての表計算関数がExcel互換。
ファイル入出力
Excel形式ファイルをインポート・エクスポートすることが可能。
JavaScriptフレームワーク（Angular／React／Vue.js）に対応

なじみのあるExcelライクなUIと操作性、そして豊富なExcel互換機能を提供するUIコンポーネント、それが「Spread.Sheets」です。

デモの紹介

Spread.Sheetsが提供するさまざまな機能の詳細については公開しているデモでご確認いただけます。

Spread.Sheets基本機能デモ
実際に操作して、さまざまな機能を直観的に確認できるデモです。

Spread.Sheetsチュートリアルデモ
わかりやすい解説つきで学習できるチュートリアルデモです。

Monacaで使ってみる

ではさっそくSpread.SheetsをMonacaで使ってみます。

プロジェクトの作成

Monaca Cloud IDEから新しいプロジェクトを作成します。テンプレートは［最小限のテンプレート］を選択します。

Spread.Sheetsのファイルを追加

ダウンロードページより、「SpreadJS」のトライアル版を入手してください。

Monaca Cloud IDEで www/vendors/spreadjs フォルダを作成して、下記のファイルをアップロードします。

gc.spread.sheets.12.0.7.css
gc.spread.sheets.all.12.0.7.min.js
gc.spread.sheets.resources.ja.12.0.7.min.js

Spread.SheetsのファイルをアップロードせずにCDNから取得する場合は、index.htmlのheadセクションに以下のコードを追加します。

<link rel="stylesheet" href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.12.0.7.css" />
<script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.12.0.7.min.js"></script>  
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/resources/ja/gc.spread.sheets.resources.ja.12.0.7.min.js"></script>

Spread.Sheetsはnpmでのインストールに対応しています。Proプラン以上ではMonaca Cloud IDEからターミナルでnpm installを実行してインストールできます。

HTMLを編集

index.htmlのheadセクションにSpread.Sheetsの参照コードを追加します。上述のCDNから取得した場合は、このコードは不要です。

<link rel="stylesheet" href="vendors/spreadjs/gc.spread.sheets.12.0.7.css" />
<script src="vendors/spreadjs/gc.spread.sheets.all.12.0.7.min.js"></script>
<script src="vendors/spreadjs/gc.spread.sheets.resources.ja.12.0.7.min.js"></script>

index.htmlのbodyセクションに、divとscriptタグを追加します。

<div id="ss" style="width:100%;height:100%"></div>

<script>
</script>

scriptタグ内にJavaScriptコードを記述します。

GC.Spread.Common.CultureManager.culture("ja-jp");

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
var sheet = spread.getSheet(0);

var datasource = [
    { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', price: 200, amount: 30 },
    { id: 17, product: 'だしこんぶ', date: '2017/01/08', price: 290, amount: 50 },
    { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', price: 200, amount: 20 },
    { id: 84, product: 'なまわさび', date: '2017/01/21', price: 200, amount: 40 },
    { id: 85, product: 'なまからし', date: '2017/01/13', price: 200, amount: 40 },
    { id: 86, product: 'なましょうが', date: '2017/01/20', price: 200, amount: 40 }
];

var idColInfo = { name: "id", displayName: "商品番号", size: 70 };
var productColInfo = { name: "product", displayName: "商品名", size: 140 };
var dateColInfo = { name: "date", displayName: "日付", size: 100 };
var priceColInfo = { name: "price", displayName: "価格", size: 50 };
var amountColInfo = { name: "amount", displayName: "数量", size: 50 };

sheet.setDataSource(datasource);
sheet.bindColumn(0, idColInfo);
sheet.bindColumn(1, productColInfo);
sheet.bindColumn(2, dateColInfo);
sheet.bindColumn(3, priceColInfo);
sheet.bindColumn(4, amountColInfo);

編集したindex.htmlを保存します。この時点ではライセンスキーを設定していないのでプレビューに警告が表示され、スプレッドシートは表示されません。

現時点ではSpreadJSはクラウド開発環境に対応していないため、ライセンスキーを設定した場合でも上記と同じように警告が表示され、スプレッドシートは表示されません。LocalKit／Monaca CLIを使ったローカル開発、Monacaデバッガーを使用したデバッグにおいては、ライセンスキーを設定していれば警告は表示されず、スプレッドシートが表示されます。

Office 2016のテーマを適用する

Spread.Sheetsは、Microsoft Excelスタイルのテーマをサポートしており、Office 2016のテーマは以下のようなcssファイルで提供されています。

Excel 2016 Colorful：gc.spread.sheets.excel2016colorful.xx.x.x.css
Excel 2016 Dark Gray：gc.spread.sheets.excel2016darkGray.xx.x.x.css

index.htmlのheadセクションにcssファイルの参照を追加することで、テーマの利用が可能です。

<!-- CDN参照の場合 -->
<link rel="stylesheet" href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2016colorful.11.2.4.css" />

<!-- cssファイルをアップロードして参照する場合 -->
<link rel="stylesheet" href="vendors/spreadjs/gc.spread.sheets.excel2016colorful.11.2.4.css" />

列の固定と書式を設定する

スプレッドシートに表示されている列をカスタマイズしてみましょう。「商品番号」と「商品名」の固定と「価格」と「数量」の書式を設定してみます。列の固定は frozenColumnCount メソッド、セルの書式は setFormatter メソッドを使って設定できます。

sheet.frozenColumnCount(2);

sheet.setFormatter(0, 3, '￥#,##0');
sheet.setFormatter(1, 3, '￥#,##0');
sheet.setFormatter(2, 3, '￥#,##0');
sheet.setFormatter(3, 3, '￥#,##0');
sheet.setFormatter(4, 3, '￥#,##0');
sheet.setFormatter(5, 3, '￥#,##0');

sheet.setFormatter(0, 4, '#,##0');
sheet.setFormatter(1, 4, '#,##0');
sheet.setFormatter(2, 4, '#,##0');
sheet.setFormatter(3, 4, '#,##0');
sheet.setFormatter(4, 4, '#,##0');
sheet.setFormatter(5, 4, '#,##0');

プレビューで確認した結果はこちらです。

まとめ

本記事では、グレープシティのJavaScriptライブラリ「SpreadJS」のコンポーネント「Spread.Sheets」を紹介しました。エンタープライズなアプリケーションをWeb／モバイル向けにモダナイズするケースなどでも、依然としてExcelライクなスプレッドシートを求められるシーンがあるかと思います。そんな時に是非お試しください。

SpreadJSのページ
 グレープシティのブログ「GrapeCity.devlog」
グレープシティのWebサイト