イマドキの業務WebアプリをめぐるASP.NETの現状と、表・帳票機能の開発に便利な「SpreadJS」の紹介

ASP.NET MVCとSpreadJSで業務Webアプリケーションモダン化計画 第1回

SpreadJSのライブラリを追加する

　最初の手順で入手したSpreadJSのファイルを、プロジェクトに配置します。配置する場所は次の表の通りです。

SpreadJSのファイルを配置する場所

SpreadJSのファイルパス	プロジェクトに配置する場所
css/gc.spread.sheets.excel2016colorful.9.20161.0.css	Contentフォルダ配下
definition/GC.Spread.Sheets.d.ts	Scripts/typingsフォルダ配下（Scriptsフォルダ配下にtypingsフォルダを作成します）
scripts/gc.spread.sheets.all.9.20161.0.min.js	Scriptsフォルダ配下
scripts/resources/ja/gc.spread.sheets.resources.ja.9.20161.0.min.js	Scriptsフォルダ配下

配置後のプロジェクト構成の図

　追加した後、「Views/Shared/_Layout.cshtml」にて、次のようにコードを追加し（置換ではなく）、SpreadJSライブラリへの参照を追加します。

<head>内

<link href="~/Content/gc.spread.sheets.excel2016colorful.9.20161.0.css" rel="stylesheet" />
<meta name="spreadjs culture" content="ja-jp" />

　2行目は、SpreadJSを日本語表示するための設定です。

<body>の最後（</body>の直前）

<script src="~/Scripts/gc.spread.sheets.all.9.20161.0.min.js"></script>
<script src="~/Scripts/gc.spread.sheets.resources.ja.9.20161.0.min.js"></script>
@RenderSection(name: "scripts", required: false)

　@RenderSectionは、Views/Home/Index.cshtml にてスクリプトを記述するために必要です。

TypeScriptファイルを追加する

　SpreadJSにデータの表示やスタイルの設定を、TypeScriptで実装します。

　プロジェクトルートに「ts」フォルダを作成します。作成した「ts」フォルダを右クリックし、コンテキストメニューから［追加］―［新しい項目］を選択します。表示されるダイアログの右上の欄にて、「typescript」を入力し、「TypeScript JSON 構成ファイル」を選択して追加します。同じようにして、「TypeScript ファイル」を「app.ts」という名前で追加します。

　「tsconfig.json」はTypeScriptのコンパイルの設定ファイルです。ここでは、編集せず、デフォルトのままとします。

jQueryのTypeScript型定義ファイルを追加する

　「app.ts」にてjQueryの処理を記述するため、jQueryのTypeScript型定義ファイルをNuGetよりインストールします。これにより、jQueryの各種APIに対して型情報が使えるようになります。

　「パッケージマネージャーコンソール」にて、次のようにコマンドを実行します。パッケージマネージャーコンソールが表示されていない場合は、メニューの［表示］―［その他のウィンドウ］―［パッケージマネージャーコンソール］をクリックし表示します。

install-package jQuery.TypeScript.DefinitelyTyped

　インストールが完了すると、次の図のようにファイルが追加されます。