カテゴリー内の他の記事

SpreadJS(グレープシティ株式会社)

はじめに

本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行)

    担当者

    担当者

    文字列(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の表計算機能で表示されており、ユーザーがこれを計算する必要はありません。

実行例

開発の参考情報

製品ヘルプ

技術情報

その他

ライセンス

本製品はトライアル版を用意しております。トライアル版の利用期限は30日間です。

トライアル版ダウンロード

また、ライセンスと料金表は下記リンク先にてご確認ください。

ご購入ガイド

お問合せ

SpreadJSに関するお問合せ先はこちらをご確認ください。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。