本サイトからスピンオフした姉妹サイトです。UIウィジットの「SpreadJS」が利用できる。そのSpreadJSの特徴と機能概要をまとめる。→Excelは、毎日、業務で使っているから慣れている。日本の一般的な企業の社員であれば、実際にこういう人が多いだろう。そのため、Web系業務アプリでも「ExcelライクなスプレッドシートUI(ユーザーインターフェイス)を提供してほしい」という要望や、「利用者が難なく使えるように、Excel風の操作性を実現したい」という要件が上がってくることは、よくあることではないだろうか。単純なHTMLの<table>タグで実現できるレベルなら苦労はしないが、“Excelライク”となると通常のWeb開発では実現が難しい。「不可能」とは言わないが、その開発にそれほど時間もかけられないのが現実だろう。そんなときに活用できるのが「SpreadJS」(スプレッド・ジェイ・エス)だ。本稿では、SpreadJSは何が良くて、どんなことが実現できるのか、その特徴を簡潔にまとめる。ExcelライクなUIを実現するために開発されたJavaScriptライブラリだ。いわゆるスプレッドシート(=別名でグリッド表示/表計算ソフトなど)と呼ばれる機能をWebで実現できるものと考えてよい。図1のようなUIを手軽に作成できる。ExcelライクなUIを作成できるSpreadJSの例これらのページはSpreadJSの基本機能デモで実行できる。※右側に表示されている操作パネルは、SpreadJS自体の機能ではなくサンプル側で独自に実装されたものなので注意してほしい。このパネル上で何らかの操作を実行すると、それに基づき、JavaScriptで書かれたロジックが走り、SpreadJSのAPIが呼ばれて対象の処理が実施される。見た印象はどうだろうか。Excelと同じように、縦横に並んだマス目(=セル)に文字/数値を入力して各セルの書式を設定したりできるだけでなく、セルに数式を入力して計算したり、表やグラフを作成したりできるのが分かる。このようなExcelライクなスプレッドシートUIを「単に表示するだけ」であれば、リスト1のようなシンプルなJavaScript&HTMLコードで実現できる。難しいところは何もないだろう。リスト1をChromeで開いたところあとは、データをロードしたり、書式を設定したり、イベント処理をしたりと、目的に応じてJavaScriptコードを追記していくだけだ。9J*1は、上記のリスト1の例からも分かるように、他のライブラリへの依存もなく単体で動作する、HTML5に準拠したJavaScriptライブラリである。9JのスプレッドシートはHTML5の<canvas>要素上に描画される仕組みで(図3)、他に特別なものは何も使っていないので、Webデベロッパー/デザイナーは安心して使用できる。9.20161.0)」を指すこととする。SpreadJSが動作するブラウザーは?HTML5技術が使われているということは、大半のモダンブラウザーであればSpreadJSが動作することを意味する。具体的には以下のブラウザーがサポートされている。本連載では次回「SpreadJSで何ができるのか」がイメージできるよう基本機能を紹介していく。その前に今回は、その特徴や強みを簡潔に紹介しておこう。非常に豊富な機能が提供されている“Excelライク”と名乗るだけあって、Excelで提供されている多種多様な機能と同等のものが提供されている。簡単に紹介すると、主に以下のような機能が使える。ワークブックを構成する「シート」「タブストリップ(=下部にあるシートを管理するタブのリスト)」「スクロールバー」などの制御やイベント処理。フォント指定」「配置・セル結合」「セルの幅や高さの調整」「折り返して全体を表示、縮小による全体表示、隣接セルへのオーバーフロー表示」などの、セルのスタイル設定。数値(Number)・文字列(String)・真偽値(Boolean)・日付(Date)といった表示形式を指定する「書式」。UIのテーマの適用」といった外観のカスタマイズ。四則演算などの「数式」。複数のセルによる「配列数式」。SUM関数(=数値を合計)をはじめ、Excelにあるほとんどの「関数」が使用できる(後述)だけでなく、「独自の関数」も作成可能。「テーブル」と、そのデータをフィルタリングするための「通常のフィルタリング機能」に加えて「テーブルスライサー」。セル内に表示するグラフである「スパークライン」「拡張スパークライン(カスケード/ボックスプロット/ブレッド/水平バーと垂直バー/パレート/円/面/散布図/スプレッド/積み上げ/バリ/数式による標準スパークライン/カスタム)」。任意の場所に画像などを置いたりできる「フローティングオブジェクト」。セルに対して「コメント」も設定できる。「キーボード操作」「アンドゥ/リドゥ」「拡大/縮小表示」「ドラッグによるオートフィル」「ドラッグによる移動」などのユーザー操作が標準で可能。列データの並べ替えや絞り込みなどを行うための「フィルタリング機能」や「シートの保護とセルのロック」「印刷」といったユーザー操作用のオプション機能を有効化できる。「タッチ操作」にも対応している。「ソートとフィルター」や「検索」、JSON形式での「データの保存(シリアル化)/ロード(逆シリアル化)」、「CSVファイルのインポート/エクスポート」、サーバー側やクライアント側での「Excelファイル(.xlsx)の入出力」、セルに対する「タグ」データの追加/取得、ユーザーにより変更された内容を管理するための「ダーティ状態のチェック」、配列オブジェクトなどとの「データバインディング」、ユーザーにより入力された「データの検証」。テキスト(Text)だけでなく、ハイパーリンク(HyperLink)・コンボボックス(ComboBox)・チェックボックス(CheckBox)・ボタン(Button)などの「セル型」を提供。日本語などの現地語に対応する「ローカライゼーション」や、アプリの国際化を意味する「グローバリゼーション」の作り込みが可能な、「カルチャ」の提供。「TypeScript」で活用するための定義ファイル(GC.Spread.Sheets.d.ts)の提供。外部のJavaScriptライブラリと組み合わせて使用可能。それぞれの具体的な内容については、次回でスクリーンキャプチャ画像とそれを実現するためのコードを列挙することで示す。表1は、SpreadJSの関数とExcelの関数を筆者が独自に比較して、SpreadJSがExcelの関数にどれだけ対応しているかをまとめたものだ。サポート」を参考にした。SpreadJSで使える関数の一覧このようにSpreadJSは、「ほとんど全て」といってよい数のExcel関数をサポートしている。これだけあれば、ほとんどのケースで事足りるだろう。本稿では、表1のSpreadJSの関数をよりよく理解して使いこなせるよう、SpreadJS公式ヘルプページへのリンクと比較参考用のExcel公式ページへのリンクを付けて簡単な説明を補足した「SpreadJS関数一覧(カテゴリ・機能別)」「SpreadJS関数一覧(アルファベット順)」を用意したので、ぜひ活用してほしい。ユーザーはExcelの知識が活用できる以上、エンドユーザー視点で見ると、スプレッドシートの機能と関数の両方でExcelの知識が活用できるので、SpreadJSを採用しても新たな学習コストはほとんどかからないだろう。それがWebブラウザーでできるという点が、SpreadJSの最大の魅力である。長年の実績と経験が生かされたライブラリ開発者視点で見ても、SpreadJSには多数のメリットがある。Basic)向けの表計算コンポーネントがあり、20年以上という長い年月、多数のユーザーにより活用されており、同社には豊富な実績と経験が蓄積されている。SpreadJSは、そのSPREADの経験をベースにグレープシティがWebアプリを対象として開発したJavaScriptライブラリなので、開発者にとって使いやすい概念やクラス構造が採用されており、基本さえ理解できれば、簡単かつすぐに実践で活用していけるだろう。SpreadJSは、グレープシティがメンテナンス・開発を続けており、改善・進化し続けている。サポートの手厚いグレープシティが手掛けているので安心して長く使っていけることも、大きなメリットである。Web系業務アプリを開発している場合は、エンドユーザーをイライラさせないためにも、パフォーマンスに非常に気を使っているという人も少なくないだろう。SpreadJSでは主に、ファイルサイズ処理速度の2点でパフォーマンスに対する工夫が施されている。ファイルサイズSpreadJSのライブラリはJavaScriptファイル(.js)の形で提供されているので、そのファイルをWebページ上でインポートすることでSpreadJSが使えるようになる。よって、.jsファイルはできるだけ軽量な方が、ページの読み込み(つまり表示)が速くなる。SpreadJSでは、インポートする容量が可能な限り少なくなるよう、ライブラリ全体をロードせずに、必要なモジュール(Modules、サブライブラリ)だけをインポートできるようになっている。そのモジュールとして、表2の.jsファイルが提供されている。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/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の主要機能のイメージが手っ取り早くつかめるように、極力、シンプルで使いやすい内容に工夫した。次回もご一読いただけるとうれしい。UIウィジットの「SpreadJS」が利用できる。そのSpreadJSの特徴と機能概要をまとめる。主要機能とコードをまとめて知ろう[PR]Web向けスプレッドシートUIが簡単に作れるSpreadJS。スクリーンキャプチャ画像とシンプルなコードで、主要機能と開発のイメージを手っ取り早くつかもう。ExcelライクなスプレッドシートUIを持つWebアプリの開発に挑戦してみた(SpreadJS活用)[PR]JSONデータを活用した表とグラフの作成や、Excel互換関数による計算、印刷・CSVファイル出力といった機能を持つシングルページWebアプリの開発を体験してみよう。SpreadJSで使える関数の一覧(カテゴリ・機能別)[Excel関数互換][PR]SpreadJSで使える関数をカテゴリ・機能別で紹介。Excelユーザーに優しいExcel互換の関数になっているので、対応しているExcel関数ページのリンク付き。SpreadJSで使える関数の一覧(アルファベット順)[Excel関数互換][PR]SpreadJSで使える関数をアルファベット順で紹介。Excelユーザーに優しいExcel互換の関数になっているので、対応しているExcel関数ページのリンク付き。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。2020最適なビューへの切り替えを推奨します:スマートフォン用表示に。