SpreadJS(グレープシティ株式会社) – cybozu developer network

はじめに

本tipsでは、kintoneとSpreadJSの連携方法をご紹介します。SpreaeJSと連携することで、条件付き書式や表計算、テーブル機能を備えたExcelライクなスプレッドシートをkintone上で実現することができます。

SpreadJSとは

GrapeCityが開発したスプレッドシートUI開発用のJavaScriptライブラリです。Webアプリケーションのクライアント側"UIウィジェット"として、データのソートやフィルタリング、条件付き書式設定や300を超える表計算関数など、豊富なExcel互換機能を備えたスプレッドシートUIを提供しています。また、「ExcelIOコンポーネント」と呼ばれるASP.NET用のDLLや専用のAPIを使用することで既存のExcelファイル内容をSpreadJSにインポートしたり、SpreadJSの内容をExcelファイルにエクスポートしたりすることも可能です。

使用例

kintone上の一覧をスプレッドシートとして表示し、シート上でExcelのような機能を使用することが可能になります。

■kintone標準の一覧画面

■SpreadJSでカスタマイズした画面例

グループ化、シート機能、ウィンドウ枠の固定、表示書式(金額に￥マークを付与)、条件付き書式（データバー）等を使用

エクセルライクなフィルタの実行

表計算関数の利用

SpreadJSを利用したサンプルの作成

ここでは、kintone上でSpreadJSを利用する基本的な手順と、kintoneに登録したデータを使用したSpreadJSによる見積書作成アプリのサンプルを紹介します。

なお、本サンプルのほか、SpreadJSに含まれる様々な機能の使用方法はSpreadJSのサイトで確認することができます。

事前準備

kintone

アプリの作成で「はじめから作成」を選択します

フィールドタイプ	フィールド名	フィールドコード
文字列(1行)	会社	会社
文字列(1行)	担当者	担当者
文字列(1行)	商品名	商品名
数値	数量	数量
数値	単価	単価

フォームの編集で以下のようにフィールドを設定します
また上記のうち、フィールド「商品名」「数量」「単価」は同一行に配置し、テーブルとしてそのフィールドコードを”明細”に設定します。

▲フィールド設定例 - 「商品名」「数量」「単価」をテーブルとして設定します
「アプリの設定」-「その他の設定」-「一覧の追加」で新しい一覧を作成します。
ドロップダウンリストから作成した一覧を選択して以下のようなHTMLタグを追加します。
<input type="button" value="<" onclick="prev()">
<input type="button" value=">" onclick="next()">
<div id="ss" style=" width: 650px; height: 500px;" />
「アプリの設定」-詳細設定 - 「JavaScript / CSSでカスタマイズ」でSpreadJSを動作させるために必要な以下のJavaScriptファイルとCSSファイルを設定します
- https://cdn.grapecity.com/spreadjs/9201610/scripts/gc.spread.sheets.all.9.20161.0.min.js
- https://cdn.grapecity.com/spreadjs/9201610/scripts/resources/ja/gc.spread.sheets.resources.ja.9.20161.0.min.js
- https://cdn.grapecity.com/spreadjs/9201610/css/gc.spread.sheets.excel2013white.9.20161.0.css
※上記cdn.grapecity.com上のSpreadJSはトライアル版のみご利用可能です。製品版のご利用にあたっては製品に収録されている各ファイルをkintone上にアップロードする必要があります。