UjiieTwitterFacebookはてブPocketLINEはじめに「SpreadJS(スプレッドJS)」はグレープシティが提供しているJavaScriptライブラリです。エンタープライズ向けのWeb/モバイルアプリケーション開発で利用できるExcelライクなスプレッドシートUIコンポーネントSpread.Sheetsを提供しています。SpreadJSはWebアプリケーションのデータ表示に特化した二つのコントロールを収録するJavaScript製品です。今回紹介するExcelライクなUIを実現するSpread.Sheetsと、グリッド表現の枠を超え多彩なデータレイアウトを可能にするSpread.Viewsが含まれています。Spread.Sheetsの特長Spread.Sheetsは以下の特長を持っています。Excelのような操作性と外観データを単一スプレッドシートおよびマルチシートで表示。セル範囲や行、列の選択、セルのドラッグ移動、アンドゥ・リドゥといったExcelと同等の操作性を提供。セル型コマンドボタンやチェックボックス、コンボボックスやハイパーリンク動作をセル上に実現。単純なExcel互換スプレッドシートにとどまらない拡張性で、多岐に渡るアプリケーション要件へ柔軟に対応。GUIデザイナExcelライクな使い勝手のデザイナで各種外観スタイルを直感的に操作可能。多くのコード量が必要な設定もノンコーディングで実現。さまざまな業種や職種で活用できる450種以上の実用的な表計算関数を提供。全ての表計算関数がExcel互換。ファイル入出力Excel形式ファイルをインポート・エクスポートすることが可能。JavaScriptフレームワーク(Angular/React/Vue.js)に対応なじみのあるExcelライクなUIと操作性、そして豊富なExcel互換機能を提供するUIコンポーネント、それが「Spread.Sheets」です。デモの紹介Spread.Sheetsが提供するさまざまな機能の詳細については公開しているデモでご確認いただけます。Spread.Sheets基本機能デモ実際に操作して、さまざまな機能を直観的に確認できるデモです。Spread.Sheetsチュートリアルデモわかりやすい解説つきで学習できるチュートリアルデモです。Monacaで使ってみるではさっそくSpread.SheetsをMonacaで使ってみます。IDEから新しいプロジェクトを作成します。テンプレートは[最小限のテンプレート]を選択します。Spread.Sheetsのファイルを追加ダウンロードページより、「SpreadJS」のトライアル版を入手してください。フォルダを作成して、下記のファイルをアップロードします。gc.spread.sheets.12.0.7.cssgc.spread.sheets.all.12.0.7.min.jsgc.spread.sheets.resources.ja.12.0.7.min.jsSpread.SheetsのファイルをアップロードせずにCDNから取得する場合は、index.htmlのheadセクションに以下のコードを追加します。src="https://cdn.grapecity.com/spreadjs/hosted/scripts/resources/ja/gc.spread.sheets.resources.ja.12.0.7.min.js"></script>Spread.Sheetsはnpmでのインストールに対応しています。installを実行してインストールできます。HTMLを編集index.htmlのheadセクションにSpread.Sheetsの参照コードを追加します。上述のCDNから取得した場合は、このコードは不要です。src="vendors/spreadjs/gc.spread.sheets.resources.ja.12.0.7.min.js"></script>index.htmlのbodyセクションに、divとscriptタグを追加します。style="width:100%;height:100%"></div><script></script>scriptタグ内にJavaScriptコードを記述します。amountColInfo);編集したindex.htmlを保存します。この時点ではライセンスキーを設定していないのでプレビューに警告が表示され、スプレッドシートは表示されません。現時点ではSpreadJSはクラウド開発環境に対応していないため、ライセンスキーを設定した場合でも上記と同じように警告が表示され、スプレッドシートは表示されません。CLIを使ったローカル開発、Monacaデバッガーを使用したデバッグにおいては、ライセンスキーを設定していれば警告は表示されず、スプレッドシートが表示されます。2016のテーマは以下のようなcssファイルで提供されています。Gray:gc.spread.sheets.excel2016darkGray.xx.x.x.cssindex.htmlのheadセクションにcssファイルの参照を追加することで、テーマの利用が可能です。/>列の固定と書式を設定するスプレッドシートに表示されている列をカスタマイズしてみましょう。「商品番号」と「商品名」の固定と「価格」と「数量」の書式を設定してみます。メソッドを使って設定できます。'#,##0');プレビューで確認した結果はこちらです。まとめ本記事では、グレープシティのJavaScriptライブラリ「SpreadJS」のコンポーネント「Spread.Sheets」を紹介しました。エンタープライズなアプリケーションをWeb/モバイル向けにモダナイズするケースなどでも、依然としてExcelライクなスプレッドシートを求められるシーンがあるかと思います。そんな時に是非お試しください。Ujiieグレープシティでプロダクトマーケティングマネージャーしてます。