クイックスタート

このトピックでは、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を利用してインストールすることができます。@mescius/spread-sheetsおよび@mescius/spread-sheets-resources-jaパッケージをプロジェクトにインストールし、スタイルとJSライブラリを参照します。

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

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

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

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

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

// SpreadJS機能（オプション。必要な機能を含める）
import '@mescius/spread-sheets-pivots';
import '@mescius/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に日本語カルチャを適用する方法については「カルチャの設定」をご参照ください。

コンテンツセキュリティポリシー (CSP)

コンテンツセキュリティポリシー (CSP)は、Web サイトへのコンテンツの読み込みを規制および承認するために、ヘッダーまたはメタ要素を通じて実装されるセキュリティポリシーです。

CSP ディレクティブ参照を確立するには、サーバー上で HTTP 応答ヘッダーを構成するか、HTML のヘッダー要素にメタ要素を設定します。これにより、許可または禁止されるコンテンツを決定するルールを作成できます。これらのルールは、コンテンツインジェクションやクロスサイトスクリプティング (XSS) 攻撃に対する Web サイトのセキュリティを強化します。

SpreadJSは、組み込みアプリケーションとして潜在的な攻撃からソースコードを保護するために、CSP ガイドラインに準拠する必要があります。以下に、SpreadJSのセキュリティを向上させるための特定のルールです。

// TSLINT には Eval ルールがありません。
eval("alert('XSS!')");

setTimeout("alert('Hi!');", 100);
setInterval("alert('Hi!');", 100);
execScript("alert('Hi!')");
window.setTimeout("count = 5", 10);
window.setInterval("foo = bar", 10);

// TSLINT には新しい関数ルールがありません。
new Function("alert('XSS!')")();

type=warning
メモ：インポートとエクスポート関連APIは、ファイルを圧縮または解凍するためにWeb Workerを使用しますので、エラーを回避するために適切なCSPルールを設定する必要があります。

たとえば、次のサンプルコードは、 CSP ルールを設定する方法を示します。

<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: 'unsafe-inline' 'unsafe-eval' data:">

このCSPルールは、同じ生成元のWeb ワーカーの読み込みを許可し、Web Workerの blob URIを使用できます。

worker-src 'self': Web Workerの読み込みをドキュメントと同じ生成元に制限します。
blob: Web Workerでのblob URIの使用を許可します。
'unsafe-inline': インラインスクリプトの実行を許可します。
'unsafe-eval': eval()などのJavaScript関数の使用を許可します。これらの関数は、文字列として渡されたコードを実行します。
data: Data URIの使用を許可します。