SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

高機能JavaScriptグリッド部品「SpreadJS」の活用(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

次のページ
SpreadJSの実装をTypeScriptで記述する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
高機能JavaScriptグリッド部品「SpreadJS」の活用連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9604 2016/09/28 13:22

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング