CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/08/26 14:00
目次

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

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


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 矢後 比呂加(ヤゴ ヒロカ)

     Microsoft MVP for Visual Studio and Development Technologies(https://mvp.microsoft.com/ja-jp/PublicProfile/5000246)  シグマコンサルティング株式会社にて、Microsoft Azu...

バックナンバー

連載:高機能JavaScriptグリッド部品「SpreadJS」の活用
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5