SpreadJS機能概説(1)[PR]

GrapeCity Garage SpreadJS機能概説(1)[PR]

Excelライクなグリッド表示(スプレッドシート、表計算)を簡単に作れるJavaScriptライブラリ「SpreadJS」の機能概要[PR]

2017年2月6日

Web上でもExcel形式の表計算型のデータ入力やデータ表示を実現したい?! それならJavaScript UIウィジットの「SpreadJS」が利用できる。そのSpreadJSの特徴と機能概要をまとめる。

デジタルアドバンテージ 一色 政彦
  • このエントリーをはてなブックマークに追加

 Excelは、毎日、業務で使っているから慣れている。日本の一般的な企業の社員であれば、実際にこういう人が多いだろう。そのため、Web系業務アプリでも「ExcelライクなスプレッドシートUI(ユーザーインターフェイス)を提供してほしい」という要望や、「利用者が難なく使えるように、Excel風の操作性を実現したい」という要件が上がってくることは、よくあることではないだろうか。

 単純なHTMLの<table>タグで実現できるレベルなら苦労はしないが、“Excelライク”となると通常のWeb開発では実現が難しい。もちろん「不可能」とは言わないが、その開発にそれほど時間もかけられないのが現実だろう。そんなときに活用できるのが「SpreadJS」(スプレッド・ジェイ・エス)だ。

 本稿では、SpreadJSは何が良くて、どんなことが実現できるのか、その特徴を簡潔にまとめる。

SpreadJSとは?

 あらためて説明すると、SpreadJSとは、Webブラウザー上でMicrosoft ExcelライクなUIを実現するために開発されたJavaScriptライブラリだ。いわゆるスプレッドシート(=別名でグリッド表示表計算ソフトなど)と呼ばれる機能をWebで実現できるものと考えてよい。例えば図1のようなUIを手軽に作成できる。

図1 ExcelライクなUIを作成できるSpreadJSの例

これらのページはSpreadJSの基本機能デモで実行できる。
右側に表示されている操作パネルは、SpreadJS自体の機能ではなくサンプル側で独自に実装されたものなので注意してほしい。このパネル上で何らかの操作を実行すると、それに基づき、JavaScriptで書かれたロジックが走り、SpreadJSのAPIが呼ばれて対象の処理が実施される。

 ぱっと見た印象はどうだろうか。Excelと同じように、縦横に並んだマス目(=セル)に文字/数値を入力して各セルの書式を設定したりできるだけでなく、セルに数式を入力して計算したり、表やグラフを作成したりできるのが分かる。

 このようなExcelライクなスプレッドシートUIを「単に表示するだけ」であれば、リスト1のようなシンプルなJavaScript&HTMLコードで実現できる。難しいところは何もないだろう。

HTML
<!DOCTYPE html>
<html>
  <head>

    <!-- SpreadJSのカルチャに「ja-jp(日本語)」を指定 -->
    <meta name="spreadjs culture" content="ja-jp">

    <!-- スプレッドシートに「Excel 2016 カラフル」テーマを指定 -->
    <link  href="http://localhost/spreadjs/9201610/css/gc.spread.sheets.excel2016colorful.9.20161.0.css" rel="stylesheet">

    <!-- SpreadJSの全機能ライブラリをロード -->
    <script src="http://localhost/spreadjs/9201610/scripts/gc.spread.sheets.all.9.20161.0.min.js"></script>

    <!-- SpreadJSの日本語リソースをロード -->
    <script src="http://localhost/spreadjs/9201610/scripts/resources/ja/gc.spread.sheets.resources.ja.9.20161.0.min.js"></script>

    <script>
      window.onload = function() {

        // スプレッドシートを生成する処理
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var sheet = spread.getActiveSheet();
        // ……ここでさまざまな処理を実行できる……

      };
    </script>
  </head>
  <body>
    
    <!-- スプレッドシートが表示される場所 -->
    <div id="ss" style="width:555px; height:200px;"></div>
    
  </body>
</html>
リスト1 SpreadJS 9Jのスプレッドシートを日本語モードで表示するための最小のHTMLソース(index.html)
図2 リスト1をChromeで開いたところ
図2 リスト1をChromeで開いたところ

 あとは、データをロードしたり、書式を設定したり、イベント処理をしたりと、目的に応じてJavaScriptコードを追記していくだけだ。

SpreadJSの内部ではWeb標準技術が使われている

 2016年1月に初版がリリースされ、2016年7月にSP1(Service Pack 1)がリリースされたSpreadJS 9J*1は、上記のリスト1の例からも分かるように、他のライブラリへの依存もなく単体で動作する、HTML5に準拠したJavaScriptライブラリである。SpreadJS 9JのスプレッドシートはHTML5の<canvas>要素上に描画される仕組みで(図3)、他に特別なものは何も使っていないので、Webデベロッパー/デザイナーは安心して使用できる。

図3 SpreadJS 9JのスプレッドシートはHTML5上のCanvas上にレンダリングされる
図3 SpreadJS 9JのスプレッドシートはHTML5上のCanvas上にレンダリングされる
  • *1 以下では、「SpreadJS」という記載は、「SP1が適用されたSpreadJS 9J(バージョン: 9.20161.0)」を指すこととする。

SpreadJSが動作するブラウザーは?

 HTML5技術が使われているということは、大半のモダンブラウザーであればSpreadJSが動作することを意味する。具体的には以下のブラウザーがサポートされている。

  • Internet Explorer 9以上
  • Microsoft Edge
  • Chrome
  • FireFox
  • Safari 5.1以上
  • iOS(Safari、Chrome)
  • Android用ブラウザーはサポートされていない

SpreadJSの特徴

 本連載では次回「SpreadJSで何ができるのか」がイメージできるよう基本機能を紹介していく。が、その前に今回は、その特徴や強みを簡潔に紹介しておこう。

非常に豊富な機能が提供されている

 “Excelライク”と名乗るだけあって、Excelで提供されている多種多様な機能と同等のものが提供されている。簡単に紹介すると、主に以下のような機能が使える。

  • スプレッドシートとしての基本機能: ワークブックを構成する「シート」「タブストリップ(=下部にあるシートを管理するタブのリスト)」「スクロールバー」などの制御やイベント処理。「行や列のヘッダー」「罫線(けいせん)」「行・列」「セル」「IME(一部ブラウザーのみ)」「グループ化」などの管理・制御。「背景色/文字色の指定」「文字装飾・フォント指定」「配置・セル結合」「セルの幅や高さの調整」「折り返して全体を表示、縮小による全体表示、隣接セルへのオーバーフロー表示」などの、セルのスタイル設定。数値(Number)・文字列(String)・真偽値(Boolean)・日付(Date)といった表示形式を指定する「書式」。値が重複するときのみ色付けするなどの「条件付き書式」。「枠固定」「スプレッドシート全体のExcelテーマ」「ドキュメントテーマ」「BootstrapやjQuery UIのテーマの適用」といった外観のカスタマイズ。
  • 表計算ソフトとしての計算機能: 四則演算などの「数式」。複数のセルによる「配列数式」。SUM関数(=数値を合計)をはじめ、Excelにあるほとんどの「関数」が使用できる(後述)だけでなく、「独自の関数」も作成可能。
  • ヴィジュアライゼーション(情報の可視化): 「テーブル」と、そのデータをフィルタリングするための「通常のフィルタリング機能」に加えて「テーブルスライサー」。セル内に表示するグラフである「スパークライン」「拡張スパークライン(カスケード/ボックスプロット/ブレッド/水平バーと垂直バー/パレート/円/面/散布図/スプレッド/積み上げ/バリ/数式による標準スパークライン/カスタム)」。任意の場所に画像などを置いたりできる「フローティングオブジェクト」。セルに対して「コメント」も設定できる。
  • ユーザー操作: 「キーボード操作」「アンドゥ/リドゥ」「拡大/縮小表示」「ドラッグによるオートフィル」「ドラッグによる移動」などのユーザー操作が標準で可能。さらに列データの並べ替えや絞り込みなどを行うための「フィルタリング機能」や「シートの保護とセルのロック」「印刷」といったユーザー操作用のオプション機能を有効化できる。「タッチ操作」にも対応している。
  • データ管理: 「ソートとフィルター」や「検索」、JSON形式での「データの保存(シリアル化)/ロード(逆シリアル化)」、「CSVファイルのインポート/エクスポート」、サーバー側やクライアント側での「Excelファイル(.xlsx)の入出力」、セルに対する「タグ」データの追加/取得、ユーザーにより変更された内容を管理するための「ダーティ状態のチェック」、配列オブジェクトなどとの「データバインディング」、ユーザーにより入力された「データの検証」。
  • 開発: テキスト(Text)だけでなく、ハイパーリンク(HyperLink)・コンボボックス(ComboBox)・チェックボックス(CheckBox)・ボタン(Button)などの「セル型」を提供。日本語などの現地語に対応する「ローカライゼーション」や、アプリの国際化を意味する「グローバリゼーション」の作り込みが可能な、「カルチャ」の提供。「TypeScript」で活用するための定義ファイル(GC.Spread.Sheets.d.ts)の提供。もちろん外部のJavaScriptライブラリと組み合わせて使用可能。

 それぞれの具体的な内容については、次回でスクリーンキャプチャ画像とそれを実現するためのコードを列挙することで示す。

Excel同等の関数を多数提供

 表1は、SpreadJSの関数とExcelの関数を筆者が独自に比較して、SpreadJSがExcelの関数にどれだけ対応しているかをまとめたものだ。カテゴリの分け方やExcel 2016の関数項目の列挙は、公式サイト「Excel 関数 (機能別) - Office のサポート」を参考にした。

カテゴリ 関数
財務 ACCRINT、ACCRINTM、AMORDEGRC、AMORLINC、COUPDAYBS、COUPDAYS、COUPDAYSNC、COUPNCD、COUPNUM、COUPPCD、CUMIPMT、CUMPRINC、DB、DDB、DISC、DOLLARDE、DOLLARFR、DURATION、EFFECT、FV、FVSCHEDULE、INTRATE、IPMT、IRR、ISPMT、MDURATION、MIRR、NOMINAL、NPER、NPV、ODDFPRICE、ODDFYIELD、ODDLPRICE、ODDLYIELD、PMT、PPMT、PRICE、PRICEDISC、PRICEMAT、PV、RATE、RECEIVED、SLN、SYD、TBILLEQ、TBILLPRICE、TBILLYIELD、VDB、XIRR、XNPV、YIELD、YIELDDISC、YIELDMAT
日付/時刻 DATE、DATEDIF、DATEVALUE、DAY、DAYS360、EDATE、EOMONTH、HOUR、MINUTE、MONTH、NETWORKDAYS、NETWORKDAYS.INTL、NOW、SECOND、TIME、TIMEVALUE、TODAY、WEEKDAY、WEEKNUM、WORKDAY、WORKDAY.INTL、YEAR、YEARFRAC
数学/三角 ABS、ACOS、ACOSH、ASIN、ASINH、ATAN、ATAN2、ATANH、CEILING、CEILING.PRECISE、COMBIN、COS、COSH、DEGREES、EVEN、EXP、FACT、FACTDOUBLE、FLOOR.PRECISE、GCD、INT、ISO.CEILING、LCM、LN、LOG、LOG10、MDETERM、MINVERSE、MMULT、MOD、MROUND、MULTINOMIAL、ODD、PI、POWER、PRODUCT、QUOTIENT、RADIANS、RAND、RANDBETWEEN、ROMAN、ROUND、ROUNDDOWN、ROUNDUP、SERIESSUM、SIGN、SIN、SINH、SQRT、SQRTPI、SUBTOTAL、SUM、SUMIF、SUMIFS、SUMPRODUCT、SUMSQ、SUMX2MY2、SUMX2PY2、SUMXMY2、TAN、TANH、TRUNC
統計 AVEDEV、AVERAGE、AVERAGEA、AVERAGEIF、AVERAGEIFS、BETA.DIST、BETA.INV、BINOM.DIST、BINOM.INV、CHISQ.DIST、CHISQ.DIST.RT、CHISQ.INV、CHISQ.INV.RT、CHISQ.TEST、CONFIDENCE.NORM、CONFIDENCE.T、CORREL、COUNT、COUNTA、COUNTBLANK、COUNTIF、COUNTIFS、COVARIANCE.P、COVARIANCE.S、DEVSQ、EXPON.DIST、F.DIST、F.DIST.RT、F.INV、F.INV.RT、F.TEST、FINV、FISHER、FISHERINV、FORECAST、FREQUENCY、GAMMA.DIST、GAMMA.INV、GAMMALN、GAMMALN.PRECISE、GEOMEAN、GROWTH、HARMEAN、HYPGEOM.DIST、INTERCEPT、KURT、LARGE、LINEST、LOGEST、LOGNORM.DIST、LOGNORM.INV、MAX、MAXA、MEDIAN、MIN、MINA、MODE.MULT、MODE.SNGL、NEGBINOM.DIST、NORM.DIST、NORM.S.DIST、NORM.S.INV、NORMINV、PEARSON、PERCENTILE.EXC、PERCENTILE.INC、PERCENTRANK.EXC、PERCENTRANK.INC、PERMUT、POISSON.DIST、PROB、QUARTILE.EXC、QUARTILE.INC、RANK.AVG、RANK.EQ、RSQ、SKEW、SLOPE、SMALL、STANDARDIZE、STDEV.P、STDEV.S、STDEVA、STDEVPA、STEYX、T.DIST、T.DIST.2T、T.DIST.RT、T.INV、T.INV.2T、T.TEST、TREND、TRIMMEAN、VAR.P、VAR.S、VARA、VARPA、WEIBULL.DIST、Z.TEST
検索/行列 ADDRESS、CHOOSE、COLUMN、COLUMNS、HLOOKUP、INDEX、INDIRECT、LOOKUP、MATCH、OFFSET、ROW、ROWS、TRANSPOSE、VLOOKUP
データベース DAVERAGE、DCOUNT、DCOUNTA、DGET、DMAX、DMIN、DPRODUCT、DSTDEV、DSTDEVP、DSUM、DVAR、DVARP
文字列操作 CHAR、CLEAN、CODE、CONCATENATE、DOLLAR、EURO、EXACT、FIND、FIXED、LEFT、LEN、LOWER、MID、PROPER、REPLACE、REPT、RIGHT、SEARCH、SUBSTITUTE、T、TEXT、TRIM、UPPER、VALUE
論理 AND、FALSE、IF、IFERROR、NOT、OR、TRUE
情報 ERROR.TYPE、ISBLANK、ISERR、ISERROR、ISEVEN、ISLOGICAL、ISNA、ISNONTEXT、ISNUMBER、ISODD、ISREF、ISTEXT、N、NA、TYPE
エンジニアリング BESSELI、BESSELJ、BESSELK、BESSELY、BIN2DEC、BIN2HEX、BIN2OCT、COMPLEX、CONVERT、DEC2BIN、DEC2HEX、DEC2OCT、DELTA、ERF、ERF.PRECISE、ERFC、ERFC.PRECISE、GESTEP、HEX2BIN、HEX2DEC、HEX2OCT、IMABS、IMAGINARY、IMARGUMENT、IMCONJUGATE、IMCOS、IMDIV、IMEXP、IMLN、IMLOG10、IMLOG2、IMPOWER、IMPRODUCT、IMREAL、IMSIN、IMSQRT、IMSUB、IMSUM、OCT2BIN、OCT2DEC、OCT2HEX
キューブ (なし=SQL Serverからデータを取得・分析するためのものでSpreadJS向きではない)
互換性 BETADIST、BETAINV、BINOMDIST、CHIDIST、CHIINV、CHITEST、CONFIDENCE、COVAR、CRITBINOM、EXPONDIST、FDIST、FLOOR、FTEST、GAMMADIST、GAMMAINV、HYPGEOMDIST、LOGINV、LOGNORMDIST、MODE、NEGBINOMDIST、NORM.INV、NORMDIST、NORMSDIST、NORMSINV、PERCENTILE、PERCENTRANK、POISSON、QUARTILE、RANK、STDEV、STDEVP、TDIST、TINV、TTEST、VAR、VARP、WEIBULL、ZTEST
アドイン/オートメーション EUROCONVERT
Web (なし=SpreadJSではJavaScriptが使えるので不要)
SpreadJSで使えない関数(Excelにはある) ACOT、ACOTH、AGGREGATE、ARABIC、AREAS、ASC、BAHTTEXT、BASE、BINOM.DIST.RANGE、BITAND、BITLSHIFT、BITOR、BITRSHIFT、BITXOR、CEILING.MATH、CELL、COMBINA、CONCAT、COT、COTH、CSC、CSCH、DAYS、DBCS、DECIMAL、FLOOR.MATH、FORECAST.ETS、FORECAST.ETS.CONFINT、FORECAST.ETS.SEASONALITY、FORECAST.ETS.STAT、FORECAST.LINEAR、FORMULATEXT、GAMMA、GAUSS、GETPIVOTDATA、HYPERLINK、IFNA、IFS、IMCOSH、IMCOT、IMCSC、IMCSCH、IMSEC、IMSECH、IMSINH、IMTAN、INFO、ISFORMULA、ISOWEEKNUM、JIS、MAXIFS、MINIFS、MUNIT、NUMBERVALUE、PDURATION、PERMUTATIONA、PHI、PHONETIC、RRI、RTD、SEC、SECH、SHEET、SHEETS、SKEW.P、SWITCH、TEXTJOIN、UNICHAR、UNICODE、XOR、YEN、キューブ関数(CUBEKPIMEMBER、CUBEMEMBER、CUBEMEMBERPROPERTY、CUBERANKEDMEMBER、CUBESET、CUBESETCOUNT、CUBEVALUE)、アドイン/オートメーション関数(CALL、REGISTER.ID、SQL.REQUEST)、Web関数(ENCODEURL、FILTERXML、WEBSERVICE)
Excelにはない関数(SpreadJSでは使える) EURO
表1 SpreadJSで使える関数の一覧

 このようにSpreadJSは、「ほとんど全て」といってよい数のExcel関数をサポートしている。これだけあれば、ほとんどのケースで事足りるだろう。

 本稿では、表1のSpreadJSの関数をよりよく理解して使いこなせるよう、SpreadJS公式ヘルプページへのリンクと比較参考用のExcel公式ページへのリンクを付けて簡単な説明を補足した「SpreadJS関数一覧(カテゴリ・機能別)」「SpreadJS関数一覧(アルファベット順)」を用意したので、ぜひ活用してほしい。

ユーザーはExcelの知識が活用できる

 以上、エンドユーザー視点で見ると、スプレッドシートの機能と関数の両方でExcelの知識が活用できるので、SpreadJSを採用しても新たな学習コストはほとんどかからないだろう。しかもそれがWebブラウザーでできるという点が、SpreadJSの最大の魅力である。

長年の実績と経験が生かされたライブラリ

 開発者視点で見ても、SpreadJSには多数のメリットがある。

 まず、業務アプリでグレープシティ製品を触ったことがあればご存じだろうが、「SPREAD」という.NET(古くはVisual Basic)向けの表計算コンポーネントがあり、20年以上という長い年月、多数のユーザーにより活用されており、同社には豊富な実績と経験が蓄積されている。SpreadJSは、そのSPREADの経験をベースにグレープシティがWebアプリを対象として開発したJavaScriptライブラリなので、開発者にとって使いやすい概念やクラス構造が採用されており、基本さえ理解できれば、簡単かつすぐに実践で活用していけるだろう。

 SpreadJSは、グレープシティがメンテナンス・開発を続けており、改善・進化し続けている。サポートの手厚いグレープシティが手掛けているので安心して長く使っていけることも、大きなメリットである。

パフォーマンスに対する配慮

 特にWeb系業務アプリを開発している場合は、エンドユーザーをイライラさせないためにも、パフォーマンスに非常に気を使っているという人も少なくないだろう。SpreadJSでは主に、

  • ファイルサイズ
  • 処理速度

の2点でパフォーマンスに対する工夫が施されている。

ファイルサイズ

 SpreadJSのライブラリはJavaScriptファイル(.js)の形で提供されているので、そのファイルをWebページ上でインポートすることでSpreadJSが使えるようになる。よって、.jsファイルはできるだけ軽量な方が、ページの読み込み(つまり表示)が速くなる。

 SpreadJSでは、インポートする容量が可能な限り少なくなるよう、ライブラリ全体をロードせずに、必要なモジュール(Modules、サブライブラリ)だけをインポートできるようになっている。そのモジュールとして、表2の.jsファイルが提供されている。

ライブラリ サイズ 機能
gc.spread.calcengine.x.xxxxx.x.js 136KB 計算機能
gc.spread.calcengine.advancedfunctions.x.xxxxx.x.js 81KB 高度な関数の機能
gc.spread.calcengine.basicfunctions.x.xxxxx.x.js 21KB 基本的な関数の機能
gc.spread.common.x.xxxxx.x.js 109KB 共通機能
gc.spread.excelio.x.xxxxx.x.js 323KB Excel入出力(IO)機能
gc.spread.sheets.bindings.x.xxxxx.x.js 12KB データバインド機能
gc.spread.sheets.celltypes.x.xxxxx.x.js 33KB セル型機能
gc.spread.sheets.comments.x.xxxxx.x.js 41KB コメント機能
gc.spread.sheets.conditionalformatting.x.xxxxx.x.js 65KB 条件付き書式機能
gc.spread.sheets.core.x.xxxxx.x.js 411KB スプレッドシートと、ドラッグによる移動や選択などの基本操作機能
gc.spread.sheets.datavalidation.x.xxxxx.x.js 14KB データ検証機能
gc.spread.sheets.fill.x.xxxxx.x.js 44KB ドラッグによるフィル機能
gc.spread.sheets.filter.x.xxxxx.x.js 59KB フィルタリング機能
gc.spread.sheets.floatingobjects.x.xxxxx.x.js 43KB ピクチャ/フローティングオブジェクト機能
gc.spread.sheets.formulatextbox.x.xxxxx.x.js 38KB 数式テキストボックス機能
gc.spread.sheets.outlines.x.xxxxx.x.js 21KB 範囲グループ機能
gc.spread.sheets.print.x.xxxxx.x.js 32KB 印刷機能
gc.spread.sheets.search.x.xxxxx.x.js 3KB 検索機能
gc.spread.sheets.slicers.x.xxxxx.x.js 38KB スライサー機能
gc.spread.sheets.sparklines.x.xxxxx.x.js 23KB スパークライン機能
gc.spread.sheets.tables.x.xxxxx.x.js 34KB テーブル機能
gc.spread.sheets.touch.x.xxxxx.x.js 51KB タッチ操作機能
表2 SpreadJSモジュール(サブライブラリ)の一覧(abc順)

「x.xxxxx.x」の部分はバージョンを指し、SP1が適用されたSpreadJS 9Jなら「9.20161.0」となる。
[サイズ]列の値はバージョン「9.20161.0」の場合のものなので注意してほしい(バージョンによって異なる可能性がある)。

 SpreadJSを動かすのに最低限必要なのがgc.spread.sheets.core.x.xxxxx.x.jsファイルだ。これを見ると411KBと非常に軽量である。

 print(印刷機能)やexcelio(Excel入出力機能)以外の全てのモジュールを含む.jsファイルとして、gc.spread.sheets.all.x.xxxxx.x.jsが提供されている。サイズは1258KBと少し大きくなるが、パフォーマンスを厳しく調整しなければならないケース以外、通常は、こちらをインポートするとよい。前掲のリスト1でもこちらを使用している。

 前掲のリスト1を見るとlocalhostにある.jsファイルを指定しているが、このように開発時には自分のPCやイントラネット上に、実運用時には自分のサイト上にホストする必要がある(その手順は次回説明する。早く知りたい方は「CodeZineの紹介記事」を参考にしてほしい)。

  • 全てのモジュール: http://localhost/spreadjs/9201610/scripts/gc.spread.sheets.all.9.20161.0.min.js
  • ExcelIOモジュール: http://localhost/spreadjs/9201610/scripts/interop/gc.spread.excelio.9.20161.0.min.js
  • 個別のモジュール(ExcelIO以外): http://localhost/spreadjs/9201610/scripts/pluggable/gc.spread.sheets.core.9.20161.0.min.js
  • SpreadJSの日本語化リソース: http://localhost/spreadjs/9201610/scripts/resources/ja/gc.spread.sheets.resources.ja.9.20161.0.min.js

 /scripts//scripts/interop//scripts/pluggable/など、いくつかのディレクトリがあることに注意してほしい。次回、開発用にSpreadJSの開発者ライブラリをダウンロードするが、これらのディレクトリは、そのライブラリの中にあるフォルダー構成と一致している。

処理速度

 スプレッドシートの中の処理も、できるだけ高速に動作するように工夫がなされている。具体的には、ユーザー操作アクションをきっかけに、必要な部分のみが更新される仕組みになっている。SpreadJSライブラリはクライアント側で動かすJavaScriptコードのみで構成されているので、当然ながらその動作はクライアント側だけで完結させることができ、サーバー側の機能には(基本的に)依存していない。このため、サーバーとの通信が大きく減らせるので、ページ更新による処理の遅延も起こりにくくなる。実際にSpreadJSを使ったページを触ってみると、デスクトップ版のExcelを操作しているかのようにスムーズに動作するはずだ。

 上記のリンク先で、処理速度を計測して速さを実感できるので、ぜひ試してみてほしい。

 以上が、筆者が感じたSpreadJSの特徴と強みである。

まとめ

 今回は、SpreadJSの概要と特徴、強みを紹介した。SpreadJSの主要機能について、先ほどは機能名のみ羅列したが、その機能内容を理解するには、実際にデモに触れてみるのが手っ取り早い。オンラインデモが提供されているので、ぜひ自分で触ってみて、コードを確認してほしい。

 次回は、前述したSpreadJSの主要機能がより具体的にイメージしやすいように、スクリーンキャプチャ画像とそれを実現するコードを掲載する。SpreadJSの主要機能のイメージが手っ取り早くつかめるように、極力、シンプルで使いやすい内容に工夫した。ぜひ次回もご一読いただけるとうれしい。

1. 【現在、表示中】≫ Excelライクなグリッド表示(スプレッドシート、表計算)を簡単に作れるJavaScriptライブラリ「SpreadJS」の機能概要[PR]

Web上でもExcel形式の表計算型のデータ入力やデータ表示を実現したい?! それならJavaScript UIウィジットの「SpreadJS」が利用できる。そのSpreadJSの特徴と機能概要をまとめる。

2. SpreadJSで何が開発できるのか? 主要機能とコードをまとめて知ろう[PR]

Web向けスプレッドシートUIが簡単に作れるSpreadJS。具体的には何が実現できるのか? スクリーンキャプチャ画像とシンプルなコードで、主要機能と開発のイメージを手っ取り早くつかもう。

3. ExcelライクなスプレッドシートUIを持つWebアプリの開発に挑戦してみた(SpreadJS活用)[PR]

JSONデータを活用した表とグラフの作成や、Excel互換関数による計算、印刷・CSVファイル出力といった機能を持つシングルページWebアプリの開発を体験してみよう。

4. SpreadJSで使える関数の一覧(カテゴリ・機能別)[Excel関数互換][PR]

SpreadJSで使える関数をカテゴリ・機能別で紹介。Excelユーザーに優しいExcel互換の関数になっているので、対応しているExcel関数ページのリンク付き。

5. SpreadJSで使える関数の一覧(アルファベット順)[Excel関数互換][PR]

SpreadJSで使える関数をアルファベット順で紹介。Excelユーザーに優しいExcel互換の関数になっているので、対応しているExcel関数ページのリンク付き。

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社