Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

実践! SpreadJSとASP.NET MVCで帳票Webアプリを作成してみよう

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

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

 ExcelライクなJavaScriptライブラリ「SpreadJS」と「ASP.NET MVC」の組み合わせで、"請求書"を管理する帳票Webアプリを作成します。データの保存・読み込みや、Excelファイルの入出力、印刷機能を実装します。

目次

はじめに

 第1、2回では、「SpreadJS」の基本的な使い方や、サーバー側のWebフレームワークとしてASP.NET MVCの現状を確認しました。

 本稿では、SpreadJSとサーバー側を連携し、実際にとあるシナリオを想定して帳票Webアプリを作成します。サンプルの一部を抜粋しながら、以下の機能がどのように実装できるか、紹介します。

想定シナリオ

  • "請求書"をブラウザ上で表示・編集し、データをサーバー側に保存する。
  • 作成した"請求書"を再度読みこむ。
  • 作成した"請求書"を、印刷・Excelファイルとして出力する。

構成

  • サーバー側 Web フレームワーク:ASP.NET MVC、ASP.NET Web API
  • クライアント側:TypeScript、SpreadJSライブラリ
  • IDE:Visual Studio 2015

作成する帳票Webアプリの図

数量や単価を変更することで、小計や合計も自動的に計算されます。中間はテーブルとして定義し、上下数行を固定化しました。
数量や単価を変更することで、小計や合計も自動的に計算されます。中間はテーブルとして定義し、上下数行を固定化しました。
テーブルなので並べ替えもできます。
テーブルなので並べ替えもできます。
サンプルでは、SpreadJSの操作をHTML要素のボタンから行います。
サンプルでは、SpreadJSの操作をHTML要素のボタンから行います。

対象読者

  • ASP.NET、JavaScriptを利用する開発者
  • スプレッドシートの機能に興味がある方
  • Excelのような帳票Webアプリを作成したい方

必要な環境

 SpreadJS 9J の必要システムを参照。

 本稿では、次の環境で開発・動作確認を行っています。

  • Chrome
  • Visual Studio 2015
  • Windows 10

サンプルについて

 サンプルにはSpreadJSライブラリは含まれておりません。ご利用いただく場合には、別途SpreadJSのトライアル版(または製品版)をダウンロードする必要があります。ダウンロードした後、サンプル内のREADME.txtに従ってファイルを配置してください。


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

著者プロフィール

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

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

バックナンバー

連載:ASP.NET MVCとSpreadJSで業務Webアプリケーションモダン化計画
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5