はじめに
本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
サンプルプログラム
プログラム
- 登録された顧客/商品データをSpreadJSにバインドし、見積書として表示するサンプルです。
- Prev/Nextボタンの押下によって前登録データ/次登録データの見積もり処理を表示します。
- 合計額はSpreadJSの表計算機能で表示されており、ユーザーがこれを計算する必要はありません。
実行例
開発の参考情報
製品ヘルプ
技術情報
その他
ライセンス
本製品はトライアル版を用意しております。トライアル版の利用期限は30日間です。
また、ライセンスと料金表は下記リンク先にてご確認ください。
お問合せ
SpreadJSに関するお問合せ先はこちらをご確認ください。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。