クイックスタート

このトピックでは、SpreadJSをブラウザに表示する方法について説明します。

参照ファイル

SpreadJSを使用したWebアプリケーションに必要な最低限のファイルは製品パッケージに含まれる以下のファイルです。

メモ：ファイル名に含まれる「x.x.x」はご利用のSpreadJSのバージョン番号となります。

フォルダ	ファイル名	説明
SpreadJS/css	gc.spread.sheets.x.x.x.css	SpreadJSのスタイル設定に使用されるCSSルールが含まれています。適用するExcelテーマに応じて参照するcssファイルを変更します。
SpreadJS/scripts	gc.spread.sheets.all.x.x.x.min.js	SpreadJSの基本機能を定義したスクリプトファイルです。

また、使用する機能や言語に応じて、以下のファイルを参照に追加する必要があります。

フォルダ	ファイル名	機能
SpreadJS/scripts/resources/ja	gc.spread.sheets.resources.ja.x.x.x.min.js	日本語リソース
SpreadJS/scripts/interop	gc.spread.excelio.x.x.x.min.js	Excel入出力
SpreadJS/scripts/plugins	gc.spread.pivot.pivottable.x.x.x.min.js	ピボットテーブル
SpreadJS/scripts/plugins	gc.spread.sheets.barcode.x.x.x.min.js	バーコード
SpreadJS/scripts/plugins	gc.spread.sheets.charts.x.x.x.min.js	チャート
SpreadJS/scripts/plugins	gc.spread.sheets.shapes.x.x.x.min.js	シェイプ
SpreadJS/scripts/plugins	gc.spread.sheets.pdf.x.x.x.min.js	PDF出力
SpreadJS/scripts/plugins	gc.spread.sheets.print.x.x.x.min.js	PDF出力、印刷
SpreadJS/scripts/plugins	gc.spread.calcengine.languagepackages.x.x.x.min.js	計算用言語パッケージ

より細かい機能単位のサブライブラリを参照することで、特定の機能のみロードすることも可能です。サブライブラリの詳細については「SpreadJSライブラリ」を参照してください。

リボンコンテナ使用時に必要となるファイルはこちらを参照してください。

ローカルファイルを参照

製品パッケージに含まれる必要なファイルを、アプリケーション内のフォルダにコピーします。コピーしたファイルを参照するため、scriptタグ内にコピーしたファイルへのパスを指定してHTMLページに追加します。

<!-- CSSファイル -->
<link href="css/gc.spread.sheets.x.x.x.min.css" rel="stylesheet"/>
<!-- SpreadJS スクリプトファイル -->
<script src="scripts/gc.spread.sheets.sheets.all.x.x.x.min.js"></script>
<!-- リソースファイル（オプション。必要なカルチャーを含める） -->
<script src="scripts/resources/ja/gc.spread.sheets.resources.ja.xx.x.x.min.js"></script>

<!-- SpreadJS機能（オプション。必要な機能を含める） -->
<script src="scripts/plugins/gc.spread.pivot.pivottables.x.x.x.min.js"></script>
<script src="scripts/plugins/gc.spread.sheets.charts.x.x.x.min.js"></script>

npmからインストールして参照

SpreadJSはnpmを利用してインストールすることができます。@grapecity/spread-sheetsおよび@grapecity/spread-sheets-resources.jaパッケージをプロジェクトにインストールし、スタイルとJSライブラリを参照します。

コマンドラインから次のコマンドを実行すると、SpreadJSの最新版をnpmからインストールできます。

npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-resources-ja

次のようにimport文を記述します。

// SpreadJSスクリプトファイル
import * as GC from '@grapecity/spread-sheets'; 

// リソースファイル
import '@grapecity/spread-sheets-resources-ja';

// SpreadJS機能（オプション。必要な機能を含める）
import '@grapecity/spread-sheets-pivots';
import '@grapecity/spread-sheets-charts';

SpreadJSインスタンスの生成

前項のように必要なスタイルとJSライブラリの参照を設定し、ホスト要素をアプリケーションに追加し、それにIDを指定します。これを、SpreadJSとして初期化します。

ページ本文にホストとなるHTML要素を追加します。
```
<div id="ss" style="height:550px"></div>
```
SpreadJSを初期化します。また、初期化する前に、SpreadJSのライセンスキーを設定します。詳細は「ライセンスキーの設定方法」を参照してください。
```
GC.Spread.Sheets.LicenseKey = "xxxxxxxx";
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
```
Workbookコンストラクタの引数に、HTML要素のIDを直接指定することも可能です。
```
GC.Spread.Sheets.LicenseKey = "xxxxxxxx";
var spread = new GC.Spread.Sheets.Workbook("ss");
```

HTMLファイルの完全なコードは次のようになります。

<head>
<link href="css/gc.spread.sheets.x.x.x.min.css" rel="stylesheet"/>
<script src="scripts/gc.spread.sheets.sheets.all.x.x.x.min.js"></script>
<script src="scripts/resources/ja/gc.spread.sheets.resources.ja.xx.x.x.min.js"></script>
</head>
<body>
    <!-- SpreadJSのホスト要素を作成します。-->
    <div id="ss" style="height:550px"></div>
</body>
<script>
    window.onload = function ()
    {
        // ライセンスキーを設定します
        GC.Spread.Sheets.LicenseKey = "xxxxxxxx";

        // SpreadJSを初期化します
        var spread = new GC.Spread.Sheets.Workbook("ss");

        // または、以下のコードでも初期化可能です
        // var spread = new GC.Spread.Sheets.Workbook("ss");
    };
</script>

メモ：SpreadJSに日本語カルチャを適用する方法については「カルチャの設定」をご参照ください。