SHOEISHA iD

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

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

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

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

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

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

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

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

はじめに

 第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に従ってファイルを配置してください。

次のページ
既存のExcelファイルを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/9799 2016/12/08 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング