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のトライアル版(または製品版)をダウンロードする必要があります。ダウンロードした後、サンプル内のREADME.mdに従ってファイルを配置してください。

 トライアル版を入手するには、SpreadJSのサイトの「無料評価版をダウンロード」から「トライアル版」のページにアクセスし、ライブラリをダウンロードします。ダウンロードしたzipファイルを展開し、さらに「spreadjs/spreadsheets.zip」を展開します。今回のサンプルで使用するファイルは次の通りです。

今回のサンプルで使用するファイル
ファイルパス 説明
css/gc.spread.sheets.excel2016colorful.9.20161.0.css スプレッドシートのテーマ(Excel2016テーマ)
definition/GC.Spread.Sheets.d.ts SpreadJSのTypeScript型定義ファイル。TypeScriptで記述する場合に必要です。
scripts/gc.spread.sheets.all.9.20161.0.min.js SpreadJSの本体ライブラリ
scripts/resources/ja/gc.spread.sheets.resources.ja.9.20161.0.min.js SpreadJSを日本語で表示するためのリソース

 次の手順にて、これらのファイルをASP.NET MVCのプロジェクトに追加します。

ASP.NET MVCのプロジェクトを作成しSpreadJSを組み込む

 ASP.NET MVCのプロジェクトを作成し、先ほど入手したSpreadJSのライブラリを配置し参照します。

ASP.NET MVCのプロジェクトを作成する

 Visual Studio 2015を開き、メニューから[ファイル]―[新規作成]―[新しいプロジェクト]を選択し、左の欄では[テンプレート]―[Visual C#]―[Web]を選択、右の欄では[ASP.NET Webアプリケーション]を選択します。[名前]に任意の値を入力し[OK]を選択します。

 表示されるダイアログにて、ASP.NET 4.6テンプレートの[Empty]を選択し、下の欄にて「MVC」と「Web API」にチェックを入れ、[OK]を選択します。

この選択により、シンプルな構成であるASP.NET MVCのプロジェクトから開発をスタートすることができます。
この選択により、シンプルな構成であるASP.NET MVCのプロジェクトから開発をスタートすることができます。

ページとWeb APIを用意する

 スプレッドシートを表示するためのページをASP.NET MVCで用意し、データを取得するためのAPIをASP.NET Web APIで用意します。

 [ソリューションエクスプローラー]から、[Controllers]フォルダを右クリックし、コンテキストメニューから[追加]―[コントローラー]を選択し、ダイアログにて[MVC5コントローラー – 空]―[追加]をクリックします。[コントローラー名]は「HomeController」とします。

 追加されたHomeController.csのIndexメソッドを右クリックし、コンテキストメニューから[ビューを追加]を選択し、そのまま[追加]をクリックします。これで、「/(ルートURL)」で表示されるページの用意ができました。

 追加されたView/Home/Index.cshtmlファイルに次のようにコードを記述します。

@{ ViewBag.Title = "SpreadJS サンプル"; }
<h2>SpreadJS サンプル</h2>
@* この要素にスプレッドシートを出力します *@
<div id="spread-container" style="width:100%; height:400px;"></div>
@section scripts {
    <script src="~/ts/app.js"></script>
}

 コード中の「ts/app.js」は、後述の手順で用意します。

 次に、ASP.NET Web APIコントローラーを追加して「api/data」のURLでアクセスできるAPIを用意します。

 [Models]フォルダの配下に「ComparisonData」(前期後期を比較したデータという意味です)という名前でクラスを作成します。サンプルファイルを参照し、いくつかのプロパティを定義します。

namespace MySpreadJSSample.Models
{
    public class ComparisonData
    {
        public string Item1 { get; set; }
        public string Item2 { get; set; }
        public decimal Previous { get; set; }
        public decimal Current { get; set; }
    }
}

 namespaceは、実際のプロジェクトに合わせて変更してください。

 [ソリューションエクスプローラー]から、[Controllers]フォルダを右クリックし、コンテキストメニューから[追加]―[コントローラー]を選択し、ダイアログにて[Web API 2 コントローラー – 空]―[追加]をクリックします。[コントローラー名]は「ComparisonDataController」とします。サンプルデータを返す実装を記述します。これで、「api/data」でデータを取得するAPIの用意ができました。

using MySpreadJSSample.Models;
using System.Collections.Generic;
using System.Web.Http;

namespace MySpreadJSSample.Controllers
{
    public class ComparisonDataController : ApiController
    {
        [Route("api/data")]
        public IHttpActionResult GetAll()
        {
            var data = new List<ComparisonData>()
            {
                new ComparisonData() { Item1 = "現金", Item2 = "小口現金", Previous = 43288, Current = 75680 },
                new ComparisonData() { Item1 = "現金", Item2 = "工場小口現金", Previous = 61065, Current = 102659 },
                //省略
            };

            return Ok(data);
        }
}

次のページ
SpreadJSのライブラリを追加する

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング