GrapeCity Garage SpreadJS機能概説（2）［PR］
SpreadJSで何が開発できるのか？ 主要機能とコードをまとめて知ろう［PR］
2017年2月13日
Web向けスプレッドシートUIが簡単に作れるSpreadJS。具体的には何が実現できるのか？ スクリーンキャプチャ画像とシンプルなコードで、主要機能と開発のイメージを手っ取り早くつかもう。
デジタルアドバンテージ 一色 政彦
前回は、SpreadJSの概要と特徴、強みを紹介した。今回は、前回紹介したSpreadJSの主要機能がより具体的にイメージしやすいように、スクリーンキャプチャ画像とそれを実現するコードを掲載する。
なお本稿では、執筆時の最新バージョン「SpreadJS 9J SP1（バージョン： 9.20161.0）」を使用した。本稿の「SpreadJS」という記載は、このSpreadJS 9J SP1を指すこととする。
SpreadJSの機能を試すための環境準備
以下で説明する各機能を手元で動かして挙動を確認したいという人もいるだろう。そこで機能説明に入る前に、SpreadJS（トライアル版）の実行開発環境を手元のWindows PC上に構築する方法を簡単に紹介しておこう。なお、トライアル版と製品版に機能差はない。ライセンスなど、製品についてはグレープシティ公式のSpreadJS製品ページを参照してほしい。
まずは上記からSpreadJSのライブラリをダウンロードして、
http://localhost/spreadjs/9201610/
でアクセスされるフォルダー（筆者の例では
C:\WebSites\spreadjs\9201610\
）に、ライブラリ内に含まれるscripts／cssフォルダーをコピーしてほしい。これにより、以下のURLに間違いなくアクセスできるようになっているかを確認してほしい。
http://localhost/spreadjs/9201610/scripts/gc.spread.sheets.all.9.20161.0.min.jshttp://localhost/spreadjs/9201610/scripts/resources/ja/gc.spread.sheets.resources.ja.9.20161.0.min.jshttp://localhost/spreadjs/9201610/scripts/pluggable/gc.spread.sheets.print.9.20161.0.min.jshttp://localhost/spreadjs/9201610/css/gc.spread.sheets.excel2016colorful.9.20161.0.css
リスト1は、前回掲載したものと同じJavaScript＆HTMLコードである。今回はこれをベースに話を進める。
HTML
|
<!DOCTYPE html>
<html>
<head>
<!-- SpreadJSのカルチャに「ja-jp（日本語）」を指定 -->
<meta name="spreadjs culture" content="ja-jp">
<!-- スプレッドシートに「Excel 2016 カラフル」テーマを指定 -->
<link href="http://localhost/spreadjs/9201610/css/gc.spread.sheets.excel2016colorful.9.20161.0.css" rel="stylesheet">
<!-- SpreadJSの全機能ライブラリをロード -->
<script src="http://localhost/spreadjs/9201610/scripts/gc.spread.sheets.all.9.20161.0.min.js"></script>
<!-- SpreadJSの日本語リソースをロード -->
<script src="http://localhost/spreadjs/9201610/scripts/resources/ja/gc.spread.sheets.resources.ja.9.20161.0.min.js"></script>
<script>
window.onload = function() {
// スプレッドシートを生成する処理
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
// ……ここでさまざまな処理を実行できる……
};
</script>
</head>
<body>
<!-- スプレッドシートが表示される場所 -->
<div id="ss" style="width:555px; height:200px;"></div>
</body>
</html>
|
リスト1 SpreadJSのスプレッドシートを日本語モードで表示するための最小のHTMLソース（index.html）
SpreadJSでは何ができるのか？ 開発可能な機能群
それでは、スクリーンキャプチャ画像とそれを実現するコードを掲載していく。あくまでSpreadJSの機能概要を手っ取り早くつかんでほしいだけなので、説明は必要最小限しか記載しない。各機能の目次は以下のとおり。
＜SpreadJSで開発可能な機能群一覧＞
なお、特に断りがなければ、前掲のリスト1の// ……ここでさまざまな処理を実行できる……の部分に書き込むコードだけを記載することとする。本稿ではトライアル版を試用していたため、ウォーターマークが表示されているが、これは正規ライセンス版では表示されない。
スプレッドシートとしての基本機能
シート
ワークブックを構成するシート（＝ワークシート）を1つ、ロードする。
サンプル実行 シート
▲
JavaScript
|
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
// ［参考］SpreadJSのイベント処理はこのように書ける
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function(e, args) {
// シート追加などでアクティブなシートが変わると、シート名をポップアップ
alert(spread.getActiveSheet().name());
});
|
サンプルコード シート
コードはリスト1と同じものである。SpreadJS開発では（基本的に）このコードを最初に書く。ちなみにssの部分は開発者が任意にID値を設定してよい。
参考までに、SpreadJSのイベント処理を行うコードも記載している。このリンク先に示すように、いくつかのイベントが用意されている。
タブストリップ
タブストリップとは、下部にあるシートを管理するタブのリストのこと。
サンプル実行 タブストリップ
▲
JavaScript
|
// タブストリップ全体を表示する（true）／しない（false）。デフォルトはtrue
//spread.options.tabStripVisible = false;
// 各タブの右にある新規追加ボタンを表示する（true）／しない（false）
sheet.options.newTabVisible = false;
// 各他部の左にあるナビボタンを表示する（true）／しない（false）
spread.options.tabNavigationVisible = false;
// タブの色指定
sheet.options.sheetTabColor = "#00FF00";
// シートの追加
spread.addSheet(1, new GC.Spread.Sheets.Worksheet("シート2"));
var sheet2 = spread.getSheet(1).options.sheetTabColor = "#FF0000";
|
サンプルコード タブストリップ
スクロールバー
水平／垂直のスクロールバーの表示を制御できる。
サンプル実行 スクロールバー
▲
JavaScript
|
// 水平／垂直のスクロールバーを表示する（true）／しない（false）
spread.options.showHorizontalScrollbar = true;
spread.options.showVerticalScrollbar = false;
|
サンプルコード スクロールバー
行／列のヘッダー
行／列のヘッダーの表示内容をカスタマイズできる。
サンプル実行 行／列のヘッダー
▲
JavaScript
|
// 行／列のヘッダーを表示する（true）／しない（false）
sheet.options.rowHeaderVisible = true;
sheet.options.colHeaderVisible = true;
// ヘッダーテキストの種類を指定
sheet.options.rowHeaderAutoText = GC.Spread.Sheets.HeaderAutoText.letters;
sheet.options.colHeaderAutoText = GC.Spread.Sheets.HeaderAutoText.numbers;
// グリッド線の色や有無を指定
sheet.options.gridline = {color:"#FF2235", showVerticalGridline: true, showHorizontalGridline: false};
// ヘッダーの行数／列数を指定
sheet.setRowCount(2, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setColumnCount(1, GC.Spread.Sheets.SheetArea.rowHeader);
// 列ヘッダーに任意のテキストを指定
sheet.setValue(0, 2, "列名", GC.Spread.Sheets.SheetArea.colHeader);
|
サンプルコード 行／列のヘッダー
罫線（けいせん）
罫線の表示ももちろんカスタマイズできる。下記のサンプルコード内では、描画処理を効率化するのに不可欠なメソッドsuspendPaint／resumePaintについても触れているので、ぜひ一読してほしい。
サンプル実行 罫線
▲
JavaScript
|
// まとめて描画するために、描画をいったん停止する
sheet.suspendPaint();
// 二重線の緑の枠（罫線）を描画する
var lineStyle = GC.Spread.Sheets.LineStyle.double;
var lineBorder = new GC.Spread.Sheets.LineBorder("green", lineStyle);
sheet.getRange(1, 1, 3, 3).setBorder(lineBorder, { left: true, right: true, top: true, bottom: false });
// まとめて描画するために、描画を再開する
// ※suspendPaint()とresumePaint()は記載した方がよいが以降のサンプルでは省略する
sheet.resumePaint();
// 次のようなコードでグリッド線の色や水平／垂直ガイドラインの表示の有無を指定できる
sheet.options.gridline = {
color:"#FFFF00",
showHorizontalGridline: true,
showVerticalGridline: true
};
|
サンプルコード 罫線
行・列
行や列を操作したり、表示内容をカスタマイズしたりできる。
サンプル実行 行・列
▲
JavaScript
|
// ビューポート（＝左上セルから右下セルまでの領域）で表示する行・列の数を指定
sheet.setRowCount(4, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnCount(6); // 上の第2引数はデフォルト値なので指定不要
// 行の高さや列の幅を指定
sheet.setRowHeight(1, 50);
sheet.setColumnWidth(2, 100);
// 2行目と3列目はサイズ変更不可に
sheet.setRowResizable(1, false);
sheet.setColumnResizable(2, false);
// 行・列の追加／削除
sheet.addRows(5, 1);
sheet.deleteColumns(5, 1);
|
サンプルコード 行・列
セル
セルの値を取得・設定できる。
サンプル実行 セル
▲
JavaScript
|
// 1行2列目に値を設定
sheet.setValue(0, 1, "値を設定");
// 2行3列目のCellオブジェクトを取得して値設定
sheet.getCell(1, 2).value("値設定2");
// 1行2列目の値を取得
alert(sheet.getValue(1, 2))
// ［参考］「常時入力モード」＝セルに来たら常に編集開始にする
spread.bind(GC.Spread.Sheets.Events.EnterCell, function (event, data) {
data.sheet.startEdit(false);
});
|
サンプルコード セル
IME制御（一部ブラウザーのみ）
日本語入力切り替えなどのIME制御は、Chrome／Safariでは動作せず、Internet Explorer／Firefoxでのみ動作するのを確認した。どのブラウザーでも常に使えるとは限らない点に注意が必要だ。
サンプル実行 IME制御
▲
JavaScript
|
sheet.getCell(0, 0).imeMode(GC.Spread.Sheets.ImeMode.active);
|
サンプルコード IME制御
グループ化
行や列をグループ化してまとめることができる。
サンプル実行 グループ化
▲
JavaScript
|
// 2～5（＝2＋3）行目をグループ化
sheet.rowOutlines.group(1, 3);
// 2～8行目、2～4行目をグループ化
sheet.columnOutlines.group(1, 6);
sheet.columnOutlines.group(1, 2);
|
サンプルコード グループ化
背景色／文字色の指定
指定セルの背景色（backColor）や文字色（foreColor）を指定できる。
サンプル実行 背景色／文字色
▲
JavaScript
|
sheet.getCell(1, 3).
value("背景色／文字色の指定").
backColor("#FFFF00").
foreColor("green");
|
サンプルコード 背景色／文字色
文字装飾・フォント指定
指定セルのフォント（太字などの文字装飾を含む）を指定できる。
サンプル実行 文字装飾・フォント
▲
JavaScript
|
sheet.getCell(1, 3).
value("太字・文字サイズ・フォントの指定").
font("bold 20pt Meiryo");
|
サンプルコード 文字装飾・フォント
配置・セル結合
センタリングなどの文字の横位置や、下揃えなどの縦位置を指定できる。複数のセルを結合することも可能だ。
サンプル実行 配置・セル結合
▲
JavaScript
|
sheet.getCell(1, 3).
value("文字の配置（センタリングと下揃え）").
hAlign(GC.Spread.Sheets.HorizontalAlign.center).
vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
// セルの結合（1行1列目のセルから2行と2列を結合）
sheet.addSpan(0, 0, 2, 2);
|
サンプルコード 配置・セル結合
セルの幅・高さの調整
指定した列の幅や行の高さを設定できる。
サンプル実行 セルの幅・高さの調整
▲
JavaScript
|
sheet.setColumnWidth(0, 200);
sheet.setRowHeight(0, 50);
sheet.getCell(0, 0).value("セルの幅と高さの設定");
|
サンプルコード セルの幅・高さの調整
折り返して全体を表示／縮小による全体表示／隣接セルへのオーバーフロー表示
セル内のテキスト全体を表示するための方法がいくつか用意されている。
サンプル実行 セル表示のカスタマイズ
▲
JavaScript
|
sheet.getCell(1, 2).
value("長い文字列を折り返して表示。\n改行も可能").
wordWrap(true);
sheet.setValue(0, 0, "列の幅を自動調整");
sheet.setValue(1, 0, "行の高さを自動調整");
sheet.autoFitColumn(0);
sheet.autoFitRow(1);
sheet.getCell(1, 4).
text("縮小による全体表示").
shrinkToFit(true);
sheet.setValue(2, 0, "隣接セルへのオーバーフロー表示");
sheet.options.allowCellOverflow = true;
|
サンプルコード セル表示のカスタマイズ
セル表示形式を指定する書式
数値（Number）・真偽値（Boolean）・文字列（String）・日付（Date）といったJavaScriptデータ型に基づき、セルの型（書式）が決定される。
サンプル実行 書式
▲
JavaScript
|
sheet.setText(0, 0, "数値（Number）");
sheet.setValue(0, 1, 123);
sheet.setValue(0, 2, 45.6789);
sheet.setValue(0, 3, 0xff);
sheet.setValue(0, 4, new Number(345));
sheet.setValue(0, 5, new Number("67.89"));
sheet.setValue(0, 6, new Number(NaN));
sheet.setText(1, 0, "文字列（String）");
sheet.getCell(1, 1).value("valueは書式なしの値").wordWrap(true);
sheet.getCell(1, 2).text("textは書式付きテキスト\n改行").wordWrap(true);
sheet.setValue(1, 4, "345"); // 数字ではない
sheet.setValue(1, 5, new String("67.89"));
sheet.setText(2, 0, "真偽値（Boolean）");
sheet.setValue(2, 1, true);
sheet.setValue(2, 2, new Boolean(false));
sheet.setText(3, 0, "日付（Date）");
sheet.setValue(3, 1, new Date(2017, 0, 30, 1, 2, 3, 456));
sheet.setText(4, 0, "配列（array）");
sheet.setValue(4, 1, new Array("Tokyo", "Osaka", "Nagoya"));
// 表示用の微調整
sheet.autoFitColumn(0);
sheet.autoFitRow(1);
sheet.addSpan(3, 1, 1, 2);
sheet.options.allowCellOverflow = true;
|
サンプルコード 書式
数値の表記を「○○％」としたり、日付表記を「○年○月○日」のような形式にカスタマイズ（＝フォーマット）する方法については、次回詳しく説明する。
条件付き書式
値が重複するときのみ色付けするなどといったような書式設定が可能。
サンプル実行 条件付き書式
▲
JavaScript
|
// 重複する項目に背景色を設定するルールを作成
var style = new GC.Spread.Sheets.Style();
style.backColor = "yellow";
var ranges = [new GC.Spread.Sheets.Range(0, 0, 10, 1)];
sheet.conditionalFormats.addDuplicateRule(style, ranges);
sheet.setValue(0, 0, "りんご");
sheet.setValue(1, 0, "すいか");
sheet.setValue(2, 0, "りんご");
sheet.setValue(3, 0, "みかん");
|
サンプルコード 条件付き書式
枠固定
先頭の行や列（主に見出しとなる）や末尾の行や列（主に計算結果になる）を常時表示するために、それらの領域を枠として固定することができる。
サンプル実行 枠固定
▲
JavaScript
|
// 左上から「行：1、列：2」と、
sheet.frozenRowCount(1);
sheet.frozenColumnCount(2);
// 右下から「行：2、列：3」で枠固定
sheet.frozenTrailingRowCount(2);
sheet.frozenTrailingColumnCount(3);
// 枠線をオレンジ色に
sheet.options.frozenlineColor = "orange";
|
サンプルコード 枠固定
スプレッドシート全体のExcelテーマ
スプレッドシート全体にExcel風の外観テーマを適用できる。
「SpreadJS（Excel 2007風）」テーマ
サンプル実行 スプレッドシート全体のExcelテーマ
▲
HTML
|
<!DOCTYPE html>
<html>
<head>
<!-- ……省略…… -->
<!-- スプレッドシートに「SpreadJS（Excel 2007風）」テーマを指定 -->
<link href="http://localhost/spreadjs/9201610/css/gc.spread.sheets.9.20161.0.css" rel="stylesheet">
<!-- ……省略…… -->
<script>
window.onload = function() {
// ……省略……
sheet.options.allowCellOverflow = true;
sheet.getCell(1, 3).
value("「SpreadJS（Excel 2007風）」テーマ").
font("bold 20pt Meiryo").
foreColor("green").
hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.autoFitRow(1);
};
</script>
</head>
<body>
<!-- ……省略…… -->
</body>
</html>
|
サンプルコード スプレッドシート全体のExcelテーマ
スプレッドシート全体のExcelテーマは、上記のコードにおける太字部分のgc.spread.sheets.9.20161.0.cssで切り替えられる。SpreadJSでは、表3に示すExcelテーマが用意されている。
| テーマ指定用のCSSファイル名 | テーマ名 |
|---|---|
| gc.spread.sheets.9.20161.0.css | 「SpreadJS（Excel 2007風）」テーマ |
| gc.spread.sheets.excel2013white.9.20161.0.css | 「Excel 2013 白」テーマ |
| gc.spread.sheets.excel2013lightGray.9.20161.0.css | 「Excel 2013 薄い灰色」テーマ |
| gc.spread.sheets.excel2013darkGray.9.20161.0.css | 「Excel 2013 濃い灰色」テーマ |
| gc.spread.sheets.excel2016colorful.9.20161.0.css | 「Excel 2016 カラフル」テーマ |
| gc.spread.sheets.excel2016darkGray.9.20161.0.css | 「Excel 2016 濃い灰色」テーマ |
表3 Excelテーマ一覧
表3の「Excel 2013 白」以降のテーマを実際に適用すると、順に、次の図4のような表示となる。
「Excel 2013 白」テーマ
「Excel 2013 薄い灰色」テーマ
「Excel 2013 濃い灰色」テーマ
「Excel 2016 カラフル」テーマ
「Excel 2016 濃い灰色」テーマ
図4 各テーマの表示例
ドキュメントテーマ
スプレッドシート全体にExcelテーマを指定できる他に、スプレッドシート内に表示されるドキュメントにもテーマを指定できる。
サンプル実行 ドキュメントテーマ
▲
JavaScript
|
sheet.getCell(1, 1).text("text 1").themeFont("Body");
sheet.getCell(1, 2).text("text 2").themeFont("Headings");
sheet.getCell(1, 3).text("background 1");
sheet.getCell(1, 4).text("background 2");
sheet.getCell(1, 5).text("accent 1");
sheet.getCell(1, 6).text("accent 2");
sheet.getCell(2, 0).text("-10");
sheet.getCell(3, 0).text("30");
sheet.getCell(4, 0).text("hyperlink");
sheet.getCell(5, 0).text("followedhyperlink");
sheet.getCell(2, 1).backColor("text 1 -10");
sheet.getCell(2, 2).backColor("text 2 -10");
sheet.getCell(2, 3).backColor("background 1 -10");
sheet.getCell(2, 4).backColor("background 2 -10");
sheet.getCell(2, 5).backColor("accent 1 -10");
sheet.getCell(2, 6).backColor("accent 2 -10");
sheet.getCell(3, 1).backColor("text 1 30");
sheet.getCell(3, 2).backColor("text 2 30");
sheet.getCell(3, 3).backColor("background 1 30");
sheet.getCell(3, 4).backColor("background 2 30");
sheet.getCell(3, 5).backColor("accent 1 30");
sheet.getCell(3, 6).backColor("accent 2 30");
sheet.getCell(4, 1).backColor("hyperlink");
sheet.getCell(5, 1).backColor("followedhyperlink");
sheet.currentTheme("Apex");
|
サンプルコード ドキュメントテーマ
ドキュメントテーマには、
- 本文フォント：
Body - ヘッダーフォント：
Headings
の他に、
- テキスト：
text 1・text 2 - 背景：
background 1・background 2 - アクセント（強調）：
accent 1～accent 6 - ハイパーリンク：
hyperlink - 表示済みハイパーリンク：
followedhyperlink
などのキー名に対する基本色があらかじめ定義されている。上記のサンプルコードでは（色の違いが見分けやすいよう）全てのキー名の色を各セルの背景色として設定しているが、本来、「text 1」のようなキー名であれば背景色ではなく文字色（foreColorメソッド）として設定する方が好ましい。ちなみに、backColor("background 1 -10")メソッドの-10は、色の濃さを指定しており、記載なし、もしくは0が基準で、プラス方向に99に近づく従って白くなり、マイナス方向に-99に近づくに従って黒くなる。
ドキュメントテーマを活用したい場合は、ドキュメント全体の各所にforeColor("text 1")やbackColor("background 1 30")のようにして色を指定していけばよい。
これをしておけば、あとはcurrentThemeメソッドの呼び出しでドキュメントテーマ名を書き換えるだけでドキュメント全体の配色を切り替えられるようになる。ドキュメントテーマとしては表4のものが用意されている。
| テーマ名 | 意味・内容 |
|---|---|
| Apex | ひらめき |
| Aspect | シック |
| Civic | クール |
| Concourse | ビジネス |
| Default | デフォルト |
| Equity | ジャパネスク |
| Flow | リゾート |
| Foundry | エコロジー |
| Median | デザート |
| Metro | メトロ |
| Module | モジュール |
| Office | Office |
| Office2007 | Office 2007 |
| Opulent | キュート |
| Oriel | スパイス |
| Origin | アース |
| Paper | ペーパー |
| Solstice | フレッシュ |
| Technic | テクノロジー |
| Trek | トラベル |
| Urban | アーバン |
| Verve | ネオン |
表4 ドキュメントテーマ名の一覧
BootstrapやjQuery UIのテーマの適用
Excelテーマの代わりに、Bootstrapのテーマや、jQuery UIのThemeRollerで作ったテーマを適用することも可能である。
サンプル実行 Bootstrapのテーマの適用
▲
HTML
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" />
|
サンプルコード Bootstrapのテーマの適用（<head>タグ内に記載）
サンプル実行 jQuery UIのテーマの適用
▲
HTML
|
<link href="https://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css" rel="stylesheet">
|
サンプルコード jQuery UIのテーマの適用（<head>タグ内に記載）
表計算ソフトとしての計算機能
数式
四則演算をはじめ、基本的な計算処理が行える。
サンプル実行 数式
▲
JavaScript
|
sheet.setValue(1, 1, 100);
sheet.setValue(1, 2, "＋");
sheet.setValue(1, 3, 200);
sheet.setValue(1, 4, "＝");
// 数式で計算する
sheet.setFormula(1, 5, "=B2+D2");
// 数式を編集可能にする
spread.options.canUserEditFormula = true;
sheet.setFormula(1, 6, "=B2+D2");
|
サンプルコード 数式
配列数式
複数のセルで構成される配列に対して、配列数式で計算できる。
サンプル実行 配列数式
▲
JavaScript
|
sheet.setValue(0, 1, "数量");
sheet.setValue(0, 2, "金額");
sheet.setValue(0, 3, "小計");
sheet.setValue(1, 1, 5);
sheet.setValue(1, 2, 100);
sheet.setValue(2, 1, 8);
sheet.setValue(2, 2, 200);
sheet.setValue(3, 1, 3);
sheet.setValue(3, 2, 100);
// 1行3列目～3行1列の範囲に配列で指定して、配列数式で計算する
sheet.setArrayFormula(1, 3, 3, 1, "=B2:B4*C2:C4");
spread.options.canUserEditFormula = true;
|
サンプルコード 配列数式
関数
前回説明したとおり、SUM関数（＝数値を合計）をはじめ、Excelにあるほとんどの関数が使用できる。
サンプル実行 関数
▲
JavaScript
|
sheet.setValue(1, 1, 100);
sheet.setValue(1, 2, "＋");
sheet.setValue(1, 3, 200);
sheet.setValue(1, 4, "＝");
// 関数で計算する
sheet.setFormula(1, 5, "=SUM(B2, D2)");
// 数式を編集可能にする
spread.options.canUserEditFormula = true;
sheet.setFormula(1, 6, "=SUM(B2, D2)");
|
サンプルコード 関数
独自の関数
ビルトインの関数だけでなく、関数を自作して使うことも可能である。
サンプル実行 独自の関数
▲
JavaScript
|
// 独自の関数を定義する
function MySumFunction() {
this.name = "MYSUM"; // 関数名
this.minArgs = 2; // 引数の最小数
this.maxArgs = 2; // 引数の最大数
}
MySumFunction.prototype = new GC.Spread.CalcEngine.Functions.Function();
MySumFunction.prototype.evaluate = function (arg1, arg2) {
return arg1 + arg2;
}
MySumFunction.prototype.description = function(){
return { name:"MYSUM", description:"カスタムのSUM関数です。" };
}
spread.addCustomFunction(new MySumFunction());
// 数値をセット
sheet.setValue(1, 1, 100);
sheet.setValue(1, 2, "＋");
sheet.setValue(1, 3, 200);
sheet.setValue(1, 4, "＝");
// カスタム関数で計算する
sheet.setFormula(1, 5, "=MYSUM(B2, D2)");
// 数式を編集可能にする
spread.options.canUserEditFormula = true;
sheet.setFormula(1, 6, "=MYSUM(B2, D2)");
|
サンプルコード 独自の関数
ヴィジュアライゼーション（情報の可視化）
テーブル
テーブル（＝表）機能を使うと、オブジェクト配列をデータソースとして指定したり、外観テーマを指定できたり、後述のフィルターが利用できるメリットがある。
サンプル実行 テーブル
▲
JavaScript
|
var source = [
{ Fruit: "りんご", Price: 100, Count: 5 },
{ Fruit: "すいか", Price: 500, Count: 1 },
{ Fruit: "みかん", Price: 200, Count: 3 },
];
var theme = GC.Spread.Sheets.Tables.TableThemes.medium24;
var table = sheet.tables.addFromDataSource("Table1", 0, 1, source, theme);
table.showFooter(true);
table.showHeader(true);
table.highlightFirstColumn(true);
table.highlightLastColumn(false);
table.setColumnValue(0, "Total");
table.setColumnFormula(1, "=SUM(C2:C4)");
table.setColumnFormula(2, "=SUM(D2:D4)");
|
サンプルコード テーブル
GC.Spread.Sheets.Tables名前空間のTableThemes型のmedium24フィールドを使っているが、これは組み込みのテーブルテーマである。そのテーマとしては、
- 濃色：
dark1～dark11 - 淡色：
light1～light21 - 中間色：
medium1～medium28
が用意されている。
テーブルのフィルター
テーブルの列ヘッダーにおける各列の右端にある［▼］ボタンをクリックすると、データを並び替えたり、フィルタリングしたりするためのダイアログが表示される。
サンプル実行 テーブルのフィルター
テーブルスライサー
上記のテーブル標準のフィルタリング機能に加えて、Excelのスライサー機能と同じようにクリックだけで素早くフィルタリングできるテーブルスライサーという機能も提供されている。
サンプル実行 テーブルスライサー
▲
JavaScript
|
var source = [
{ Fruit: "りんご", Price: 100, Count: 5 },
{ Fruit: "みかん", Price: 500, Count: 1 },
{ Fruit: "みかん", Price: 200, Count: 3 },
];
var tableName = "Table1";
var table = sheet.tables.addFromDataSource(tableName, 0, 1, source);
var columnName0 = "フルーツ";
var columnName1 = "単価";
var columnName2 = "数量";
table.setColumnName(0, columnName0);
table.setColumnName(1, columnName1);
table.setColumnName(2, columnName2);
// スライサーを追加して、表示位置を移動
var slicer0 = sheet.slicers.add("slicer0", tableName, columnName0);
slicer0.position(new GC.Spread.Sheets.Point(10, 90));
var slicer1 = sheet.slicers.add("slicer1", tableName, columnName1);
slicer1.position(new GC.Spread.Sheets.Point(220, 90));
|
サンプルコード テーブルスライサー
スパークライン
スパークラインとは、セル内に表示するグラフである。
サンプル実行 スパークライン
▲
JavaScript
|
// サンプルデータの作成
sheet.options.allowCellOverflow = true;
sheet.setValue(10, 0, "データ範囲： A11-A19");
sheet.setValue(11, 0, 70.0);
sheet.setValue(12, 0, 70.20);
sheet.setValue(13, 0, 70.95);
sheet.setValue(14, 0, 70.5);
sheet.setValue(15, 0, 70.6);
sheet.setValue(16, 0, 70.95);
sheet.setValue(17, 0, 70.9);
sheet.setValue(18, 0, 71.4);
var data = new GC.Spread.Sheets.Range(11, 0, 8, 1);
sheet.getCell(0, 0).text("line");
sheet.getCell(0, 3).text("column");
// スパークラインタイプ： line
sheet.addSpan(1, 0, 4, 3);
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.lineWeight = 3;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
sheet.setSparkline(1, 0, data, GC.Spread.Sheets.Sparklines.DataOrientation.vertical, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);
// スパークラインタイプ： column
sheet.addSpan(1, 3, 4, 3);
setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
sheet.setSparkline(1, 3, data, GC.Spread.Sheets.Sparklines.DataOrientation.vertical, GC.Spread.Sheets.Sparklines.SparklineType.column, setting);
sheet.currentTheme("Apex");
|
サンプルコード スパークライン
GC.Spread.Sheets.Tables名前空間のSparklineType型のline／columnフィールドを使っているが、これはスパークラインの種類を表す。その種類としては、
- 折れ線スパークライン：
line - 縦棒スパークライン：
column - 勝敗スパークライン：
winloss
が用意されている。
拡張スパークライン
上記の3つが基本的なスパークラインとなるが、これ以外に拡張スパークラインが用意されている。
サンプル実行 拡張スパークライン
▲
JavaScript
|
sheet.options.allowCellOverflow = true;
sheet.setValue(10, 0, "データ範囲： A11-A15");
sheet.setValue(11, 0, 20);
sheet.setValue(12, 0, 40);
sheet.setValue(13, 0, 30);
sheet.setValue(14, 0, 20);
sheet.setValue(15, 0, 10);
sheet.getCell(0, 0).text("PIESPARKLINE： 拡張スパークラインタイプ： 円（PIE）");
sheet.addSpan(1, 0, 6, 5);
sheet.setFormula(1, 0, "=PIESPARKLINE(A11:A15,"#919F81","#D7913E","CEA722","#B58091","#8974A9")");
|
サンプルコード 拡張スパークライン
setFormulaメソッドにPIESPARKLINEという拡張スパークラインの関数を指定している。その関数としては、以下のようなものが用意されている。
- カスケード：
CASCADESPARKLINE - ボックスプロット：
BOXPLOTSPARKLINE - ブレッド：
BULLETSPARKLINE - 水平／垂直バー：
HBARSPARKLINE、VBARSPARKLINE - パレート：
PARETOSPARKLINE - 円：
PIESPARKLINE - 面：
AREASPARKLINE - 散布図：
SCATTERSPARKLINE - スプレッド：
SPREADSPARKLINE - 積み上げ：
STACKEDSPARKLINE - バリ：
VARISPARKLINE - 数式による標準スパークライン：
LINESPARKLINE、COLUMNSPARKLINE、WINLOSSSPARKLINE
もちろんカスタムのスパークラインも作成可能だ。
フローティングオブジェクト
任意の場所に画像などを置いたりできる。
サンプル実行 フローティングオブジェクト
▲
JavaScript
|
var picture = sheet.pictures.add("logo-picture", "https:///re.buildinsider.net/img/logo-fb.png", 10, 10, 120, 120);
|
サンプルコード フローティングオブジェクト
コメント
セルに対して「コメント」も追加できる。
サンプル実行 コメント
▲
JavaScript
|
sheet.setValue(1, 1, "ここに");
sheet.comments.add(1, 1, "コメント表示！");
|
サンプルコード コメント
ユーザー操作
キーボード操作
↑／↓／←／→キーによる移動をはじめ、Excelで使う基本的なキー操作が可能になっている。具体的には、製品ヘルプの「キーボードナビゲーションの使用」を参照されたい。
アンドゥ／リドゥ
いわゆる「元に戻す」（＝Undo： アンドゥ）と「やり直し」（＝Redo： リドゥ直し）に対応している。
拡大／縮小表示
Ctrlキーを押しながらマウスホイールすることで拡大／縮小表示することが可能。次の画像は拡大した例である。
サンプル実行 拡大／縮小表示
ドラッグによるオートフィル
範囲選択したセルの右下をドラッグすると、連番や同じ値が他のセルに自動入力されるオートフィル機能に対応している。
サンプル実行 ドラッグによるオートフィル
ドラッグによる移動
セルの下線あたりにマウスカーソルを乗せて十字形になったら、その状態でドラッグするとそのセルを移動できる。ドロップ時にCtrlキーが押されていたらコピーされる。
サンプル実行 ドラッグによる移動
列のフィルタリング
エンドユーザーは、列のフィルタリング機能を使ってデータを並び替えたり絞り込んだりできる。
サンプル実行 列のフィルタリング
▲
JavaScript
|
// データ
sheet.setValue(0, 0, 10);
sheet.setValue(0, 1, "元1番目");
sheet.setValue(1, 0, 50);
sheet.setValue(1, 1, "元2番目");
sheet.setValue(2, 0, 60);
sheet.setValue(2, 1, "元3番目");
sheet.setValue(3, 0, 40);
sheet.setValue(3, 1, "元4番目");
sheet.setValue(4, 0, 30);
sheet.setValue(4, 1, "元5番目");
sheet.setValue(5, 0, 20);
sheet.setValue(5, 1, "元6番目");
sheet.setValue(6, 0, 70);
sheet.setValue(6, 1, "元7番目");
// 列ヘッダー上でフィルタリング機能［▼］の表示
var cellrange =new GC.Spread.Sheets.Range(0, 0, 7, 2);
var hideRowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(cellrange);
sheet.rowFilter(hideRowFilter);
|
サンプルコード 列のフィルタリング
シートの保護とセルのロック
スプレッドシートをアプリとして使う場合には、想定外のユーザー入力を防ぐために、セルへの入力をブロックする必要がある（のが一般的だ）。SpreadJSでは、シート全体を保護してユーザー入力完全不可にすることもできるし、任意のセルのみロックして入力不可（もしくは逆にアンロックして入力許可）に設定したりできる。
サンプル実行 シートの保護とセルのロック
▲
JavaScript
|
// シート全体をロックして保護する
sheet.options.isProtected = true;
sheet.setText(1, 1, "ロックされて編集できない");
sheet.getCell(2, 1).
locked(false). // ロックを解除
value("一部のセルのみアンロック");
sheet.getRange(3, 1, 2, 2).
locked(false).
value("一部の範囲のみアンロック");
sheet.setColumnWidth(1, 200);
sheet.setColumnWidth(2, 200);
|
サンプルコード シートの保護とセルのロック
印刷
印刷にも対応している。下記のサンプルコードでは説明していないが、単に表示内容のままに印刷する以外にも、印刷内容（例えば印刷領域や印刷用のフッターなど）をカスタマイズする機能も提供されている。
サンプル実行 印刷
▲
JavaScript
|
sheet.setValue(1, 1, "印刷データを入力");
sheet.autoFitColumn(1);
// 0番目インデックスのシートを印刷開始
spread.print(0);
|
サンプルコード 印刷
printメソッドは、全モジュール用のgc.spread.sheets.all.x.xxxxx.x.jsファイルには含まれていないので、追加で印刷用のgc.spread.sheets.print.x.xxxxx.x.jsファイルをインポートする必要がある。
HTML
|
<script src="http://localhost/spreadjs/9201610/scripts/pluggable/gc.spread.sheets.print.9.20161.0.min.js"></script>
|
サンプルコード 印刷モジュールのインポート（<head>タグ内に記載）
タッチ操作
タッチ操作にも対応。タッチ可能なPCでスプレッドシートに触れると、次のサンプル実行のように選択ハンドルが少し大きく表示されたりする。
サンプル実行 タッチ操作
▲
JavaScript
|
spread.options.useTouchLayout = true;
|
サンプルコード タッチ操作
データ管理
ソートとフィルター
指定範囲の列や行をソートしたり、行をフィルタリングしたりできる。
サンプル実行 ソートとフィルター
▲
JavaScript
|
// データ
sheet.setValue(0, 0, 10);
sheet.setValue(0, 1, "元1番目");
sheet.setValue(1, 0, 50);
sheet.setValue(1, 1, "元2番目");
sheet.setValue(2, 0, 60);
sheet.setValue(2, 1, "元3番目");
sheet.setValue(3, 0, 40);
sheet.setValue(3, 1, "元4番目");
sheet.setValue(4, 0, 30);
sheet.setValue(4, 1, "元5番目");
sheet.setValue(5, 0, 20);
sheet.setValue(5, 1, "元6番目");
sheet.setValue(6, 0, 70);
sheet.setValue(6, 1, "元7番目");
// 1行目をキーに昇順ソート
sheet.sortRange(
0, // 開始「行」のインデックス
0, // 開始「列」のインデックス
-1, // 行数（-1で全行）
2, // 列数（-1で全列）
true, // true＝行のソート、false＝列のソート
[{index: 0, // ソートする行／列のインデックス
ascending: true}]); // true＝昇順、false＝降順
// 20～50のみをフィルタリングして表示する独自のフィルターを作成
function CustomFilter(){
GC.Spread.Sheets.ConditionalFormatting.Condition.apply(this, arguments);
};
CustomFilter.prototype = new GC.Spread.Sheets.ConditionalFormatting.Condition();
CustomFilter.prototype.evaluate = function (evaluator, row, col) {
var value = evaluator.getValue(row, col);
if (value !== null && value >= 20 && value <= 50) {
return true;
} else {
return false;
}
};
// 独自のフィルターを設定
var cellrange =new GC.Spread.Sheets.Range(0, 0, 7, 2);
var hideRowFilter =new GC.Spread.Sheets.Filter.HideRowFilter(cellrange);
sheet.rowFilter(hideRowFilter);
hideRowFilter.addFilterItem(0, new CustomFilter());
hideRowFilter.filter(0);
hideRowFilter.filterButtonVisible(1, false);
|
サンプルコード ソートとフィルター
検索
指定シートや全シートに対して、キーワード検索が可能である。
サンプル実行 検索
▲
JavaScript
|
// データ
sheet.setValue(0, 1, "りんご");
sheet.setValue(1, 1, "すいか");
sheet.setValue(2, 1, "みかん");
// 全てのシートを対象に「みかん」というキーワードで検索
var searchCondition = new GC.Spread.Sheets.Search.SearchCondition();
searchCondition.searchString = "みかん";
searchCondition.startSheetIndex = spread.getActiveSheetIndex();
searchCondition.endSheetIndex = spread.getActiveSheetIndex();
searchCondition.searchOrder = GC.Spread.Sheets.Search.SearchOrder.nOrder;
searchCondition.searchTarget = GC.Spread.Sheets.Search.SearchFoundFlags.cellText;
searchCondition.searchFlags =
GC.Spread.Sheets.Search.SearchFlags.ignoreCase |
GC.Spread.Sheets.Search.SearchFlags.useWildCards;
var searchresult= spread.search(searchCondition);
var str = "\rシートのインデックス："+searchresult.foundSheetIndex +
"\n行インデックス：" +searchresult.foundRowIndex +
"\n列インデックス："+searchresult.foundColumnIndex;
alert(str);
|
サンプルコード 検索
JSON形式でのデータの保存／ロード
JSON形式でのデータの保存（シリアル化）とロード（逆シリアル化）が可能だ。ただし、JSONデータは文字列として受け渡しするだけなので、ファイルとしての入出力は独自に実装する必要がある。
サンプル実行 JSON形式でのデータの保存／ロード
▲
JavaScript
|
var spread1 = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"));
var spread2 = new GC.Spread.Sheets.Workbook(document.getElementById("ss2"));
// データ
var sheet1 = spread1.getActiveSheet();
sheet1.setValue(0, 1, "りんご");
sheet1.setValue(1, 1, "すいか");
sheet1.setValue(2, 1, "みかん");
// JSON形式でのデータの保存（シリアル化）
var jsonString = JSON.stringify(spread1.toJSON());
console.log(jsonString); // チェック用
// JSON形式でのデータのロード（逆シリアル化）
spread2.fromJSON(JSON.parse(jsonString));
|
サンプルコード JSON形式でのデータの保存／ロード
上記のコードを試すには、HTMLソース部分も以下のように変更する必要がある。
HTML
|
<!-- スプレッドシートが表示される場所 -->
<div id="ss1" style="width:555px; height:100px;"></div>
<p>上：データの保存、下：データのロード</p>
<div id="ss2" style="width:555px; height:100px;"></div>
|
サンプルコード データの保存／ロードする場所の作成（<body>タグ内に記載）
CSVファイルのインポート／エクスポート
JSON形式だけでなく、カンマ区切りでより汎用的なCSV形式でもデータをインポート／エクスポートできる。ただし、これもJSON形式の場合と同じく、文字列としての受け渡しになるので、ファイルとして入出力する部分の処理は独自に実装する必要がある（※ちなみに、出力については次回記事のコード内容が参考になるだろう）。
サンプル実行 CSVファイルのインポート／エクスポート
▲
JavaScript
|
var spread1 = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"));
var spread2 = new GC.Spread.Sheets.Workbook(document.getElementById("ss2"));
// データ
var sheet1 = spread1.getActiveSheet();
sheet1.setValue(0, 1, "りんご");
sheet1.setValue(1, 1, "すいか");
sheet1.setValue(2, 1, "みかん");
var sheet2 = spread2.getActiveSheet();
// CSV形式でのデータの保存
var csvString = sheet1.getCsv(
0, 0, // アクティブシート内の全てのデータが対象
sheet1.getRowCount(),
sheet1.getColumnCount()-1,
"\n", ","); // 行区切りと列区切りの文字
console.log(csvString); // チェック用
// CSV形式でのデータのロード
sheet2.setCsv(
0, 0, // シートの左上端が開始点
csvString,
"\n", ",", // 行区切りと列区切りの文字
GC.Spread.Sheets.TextFileOpenFlags.none);
// TextFileOpenFlagsはなし（none）以外にも列名あり（includeColumnHeader）や行名あり（includeRowHeader）などを組み合わせて指定できる
|
サンプルコード CSVファイルのインポート／エクスポート
上記のコードを試すには、HTMLソースに対して、前述の「JSON形式でのデータの保存／ロード」と同様の修正が必要。
Excelファイル（.xlsx）の入出力
クライアント側でのExcelファイル（.xlsx）の入出力については、「SPREADの開発担当者が執筆しているブログ記事「クライアント側Excel入出力機能」」を参照してほしい。特にgc.spread.excelio.x.xxxxx.x.jsファイルのインポートが必要になる点を注意してほしい。
タグ
セルに「タグ」データを追加したり、それを取得したりできる。
サンプル実行 タグ
▲
JavaScript
|
sheet.tag("シートにタグを設定");
sheet.getCell(0, 0).tag("A1にタグを設定");
sheet.getRange(1, 1, 2, 2).tag("範囲セルにタグを設定");
alert("A1のタグを取得： " + sheet.getCell(0, 0).tag());
|
サンプルコード タグ
ダーティ状態のチェック
エンドユーザーにより編集された（＝ダーティ状態）データをチェックして、その後の処理を決めたりすることが可能。
サンプル実行 ダーティ状態のチェック
▲
JavaScript
|
document.getElementById("button1").onclick = function() {
// 行のダーティ状態をチェック
var dirtyRows = sheet.getDirtyRows();
for (var i = 0; i < dirtyRows.length; i++) {
var dr = dirtyRows[i];
console.log("行インデックス:" + dr.row);
}
// セルのダーティ状態をチェック（中身の出力処理は省略）
var dirtyCells = sheet.getDirtyCells();
for (var i = 0; i < dirtyCells.length; i++) {
var cl = dirtyCells[i];
console.log("セルインデックス:（" +
cl.row + "、" +
cl.col +"）「" +
cl.oldValue +"」→「" +
cl.newValue +"」");
}
};
|
サンプルコード ダーティ状態のチェック
上記のコードを試すには、HTMLソースに下記のコードを追記する必要がある。
HTML
|
<input type="button" id="button1" value="ボタン1">
|
サンプルコード データの保存／ロードする場所の作成（<body>タグ内に記載）
データバインディング
配列オブジェクトなどのデータとシート／セル／テーブルのレベルでバインディングできる。
サンプル実行 データバインディング
▲
JavaScript
|
var fruit = { name: "Apple", color: "red", nutrition: { calories : 138 } };
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(fruit);
sheet.setBindingPath(1, 1, "name");
sheet.setBindingPath(2, 1, "color");
sheet.setBindingPath(3, 1, "nutrition.calories");
sheet.setDataSource(source);
|
サンプルコード データバインディング
データの検証
ユーザーにより入力されたデータを検証する機能も搭載されている。
サンプル実行 データの検証
▲
JavaScript
|
// 無効データのハイライトを有効化
spread.options.highlightInvalidData = true;
// リストのバリデーター（データ検証内容）を作成して、2行2列目のセルに設定
var dv1 = new GC.Spread.Sheets.DataValidation.createListValidator("りんご,すいか,みかん");
dv1.inputTitle("フルーツを選んでください：");
dv1.inputMessage("りんご、すいか、みかん");
sheet.setDataValidator(1, 1, dv1);
sheet.setDataValidator(1, 3, dv1); // チェック用
|
サンプルコード データの検証
この例ではリストに基づくバリデーターを作成しているので、リストから項目を選択できるようなっている。リストを含めて、以下のようなバリデーターを作成可能だ。
- 数値：
createNumberValidatorメソッド - 日付：
createDateValidatorメソッド - テキストの長さ：
createTextLengthValidatorメソッド - 数式：
createFormulaValidatorメソッド - 数式リスト：
createFormulaListValidatorメソッド - リスト：
createListValidatorメソッド
開発
セル型
セルの型として、通常の「テキスト」以外にも、アプリ開発でよく使う「ボタン」「チェックボックス」「コンボボックス」「ハイパーリンク」が用意されている。
サンプル実行 セル型
▲
JavaScript
|
// ボタン型セル
sheet.setText(1, 0, "Button");
var b1 = new GC.Spread.Sheets.CellTypes.Button();
b1.marginLeft(2); b1.marginTop(2); b1.marginRight(2); b1.marginBottom(2);
b1.text("ボタン型セル");
//b1.buttonBackColor("green"); // 背景色も設定できる
sheet.setCellType(1, 1, b1);
// チェックボックス型セル
sheet.setText(2, 0, "CheckBox");
var c1 = new GC.Spread.Sheets.CellTypes.CheckBox();
c1.isThreeState(true);
c1.textTrue("チェックあり");
c1.textFalse("チェックなし");
c1.textIndeterminate("チェック中間状態");
c1.caption("チェックボックス型セル");
sheet.setCellType(2, 1, c1);
// コンボボックス型セル
sheet.setText(3, 0, "ComboBox");
var c2 = new GC.Spread.Sheets.CellTypes.ComboBox();
c2.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
c2.editable(true); // 編集可能なコンボボックスにもできる
c2.items([
{ text: "りんご", value: 150 },
{ text: "すいか", value: 950 },
{ text: "みかん", value: 200 }
]);
sheet.setCellType(3, 1, c2);
// ハイパーリンク型セル
sheet.setText(4, 0, "HyperLink");
sheet.getCell(4, 1).value("http://jp.spread.grapecity.com/");
var h1 = new GC.Spread.Sheets.CellTypes.HyperLink();
h1.text("ハイパーリンク型セル");
h1.linkToolTip("ここはツールチップです。");
h1.linkColor("orange");
h1.visitedLinkColor("yellow");
sheet.setCellType(4, 1, h1);
|
サンプルコード セル型
もちろんカスタムのセル型も作成できるし、カスタムのヘッダーセルも作成可能だ。
カルチャ（ローカライゼーション／グローバリゼーション）
SpreadJSではカルチャという仕組みを提供しており、これを活用することで、日本語などの現地語に対応する「ローカライゼーション」や、アプリの国際化を意味する「グローバリゼーション」の作り込みが可能だ。
次のサンプルは、ローカライゼーションとして表示言語を切り替えている例である。グローバリゼーションの例は割愛。
サンプル実行 カルチャ
▲
HTML
|
<meta name="spreadjs culture" content="zh-cn">
<!--// "en-us" "ja-jp" "zh-cn" などが設定できる -->
<script src="http://localhost/spreadjs/9201610/scripts/resources/zh/gc.spread.sheets.resources.zh.9.20161.0.min.js"></script>
|
サンプルコード カルチャ（<head>タグ内に記載）
TypeScript
定義ファイル（GC.Spread.Sheets.d.ts）を参照することで、Visual Studio CodeではIntelliSenseが表示されるようになるなど（以下のサンプルを参照）、TypeScript開発がより快適になる。
サンプル実行 TypeScript
▲
TypeScript
|
/// <reference path="definition/GC.Spread.Sheets.d.ts" />
// .d.tsファイルがSpreadJSのライブラリに同梱されている
|
サンプルコード TypeScript
まとめ
今回は、SpreadJSが提供する各機能の実際のスクリーンキャプチャ画像と、それを実現するためのサンプルコードを示した。SpreadJSで何ができるか、それをどのようなコードで実現できるか、イメージできるようになっただろうか。
依然として「ゼロから始めるのは大変」「開発のイメージが湧かない」という方も少なくないだろう。そこで次回は実践編として、実際にSpreadJSを使ったサンプルアプリを開発する。次回もぜひご一読いただければ幸いだ。
1. Excelライクなグリッド表示（スプレッドシート、表計算）を簡単に作れるJavaScriptライブラリ「SpreadJS」の機能概要［PR］
Web上でもExcel形式の表計算型のデータ入力やデータ表示を実現したい？！ それならJavaScript UIウィジットの「SpreadJS」が利用できる。そのSpreadJSの特徴と機能概要をまとめる。
2. 【現在、表示中】≫ SpreadJSで何が開発できるのか？ 主要機能とコードをまとめて知ろう［PR］
Web向けスプレッドシートUIが簡単に作れるSpreadJS。具体的には何が実現できるのか？ スクリーンキャプチャ画像とシンプルなコードで、主要機能と開発のイメージを手っ取り早くつかもう。
3. ExcelライクなスプレッドシートUIを持つWebアプリの開発に挑戦してみた（SpreadJS活用）［PR］
JSONデータを活用した表とグラフの作成や、Excel互換関数による計算、印刷・CSVファイル出力といった機能を持つシングルページWebアプリの開発を体験してみよう。
4. SpreadJSで使える関数の一覧（カテゴリ・機能別）［Excel関数互換］［PR］
SpreadJSで使える関数をカテゴリ・機能別で紹介。Excelユーザーに優しいExcel互換の関数になっているので、対応しているExcel関数ページのリンク付き。
5. SpreadJSで使える関数の一覧（アルファベット順）［Excel関数互換］［PR］
SpreadJSで使える関数をアルファベット順で紹介。Excelユーザーに優しいExcel互換の関数になっているので、対応しているExcel関数ページのリンク付き。
