はじめに
本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でカスタマイズした画面例
グループ化、シート機能、ウィンドウ枠の固定、表示書式(金額に￥マークを付与)、条件付き書式（データバー）等を使用
エクセルライクなフィルタの実行
表計算関数の利用
デモ環境で試す
kintoneのデモ環境であらかじめ作成したkintoneアプリでSpreadJSを活用したサンプルを実際にお試しいただく事ができます。
下記アカウントでアクセスし、kintone上での実際の動作をお試しください。
サイトURL: https://gcdemo.cybozu.com/
ユーザーID: demo1
パスワード: test2
SpreadJSを利用したサンプルの作成
ここでは、kintone上でSpreadJSを利用する基本的な手順と、kintoneに登録したデータを使用したSpreadJSによる見積書作成アプリのサンプルを紹介します。
なお、本サンプルのほか、SpreadJSに含まれる様々な機能の使用方法はSpreadJSのサイトで確認することができます。
事前準備
kintone
1. アプリの作成で「はじめから作成」を選択します
|
フィールドタイプ |
フィールド名 |
フィールドコード |
|
文字列(1行) |
会社 |
会社 |
|
文字列(1行) |
担当者 |
担当者 |
|
文字列(1行) |
商品名 |
商品名 |
|
数値 |
数量 |
数量 |
|
数値 |
単価 |
単価 |
2. フォームの編集で以下のようにフィールドを設定します
また上記のうち、フィールド「商品名」「数量」「単価」は同一行に配置し、テーブルとしてそのフィールドコードを”明細”に設定します。
▲フィールド設定例 - 「商品名」「数量」「単価」をテーブルとして設定します
3. 「アプリの設定」-「その他の設定」-「一覧の追加」で新しい一覧を作成します。
4. ドロップダウンリストから作成した一覧を選択して以下のようなHTMLタグを追加します。
<input type="button" value="<" onclick="prev()">
<input type="button" value=">" onclick="next()">
<div id="ss" style=" width: 650px; height: 500px;" />
5. 「アプリの設定」-詳細設定 - 「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上にアップロードする必要があります。
サンプルプログラム
プログラム
- 登録された顧客/商品データをSpreadJSにバインドし、見積書として表示するサンプルです。
- Prev/Nextボタンの押下によって前登録データ/次登録データの見積もり処理を表示します。
- 合計額はSpreadJSの表計算機能で表示されており、ユーザーがこれを計算する必要はありません。
実行例
開発の参考情報
SpreadJSでできること
SpreadJSを使用することで実現できる機能は以下のオンラインデモで確認できます。
SpreadJS
製品ヘルプ
技術情報
その他
ライセンス
本製品はトライアル版を用意しております。トライアル版の利用期限は30日間です。
また、ライセンスと料金表は下記リンク先にてご確認ください。
お問合せ
SpreadJSに関するお問合せ先はこちらをご確認ください。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。