kintone で SpreadJS を使ってみた

#[SpreadJS 9J](http://jp.spread.grapecity.com/spreadjs/)

Excel のような機能を持つ、スプレッドシートで、Developer Network に、紹介ページがあります。
[SpreadJS(グレープシティ株式会社)](https://cybozudev.zendesk.com/hc/ja/articles/207611073-SpreadJS-%E3%82%B0%E3%83%AC%E3%83%BC%E3%83%97%E3%82%B7%E3%83%86%E3%82%A3%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE-)

SpreadJS 単体では、リボンの無い Excel のようで、かなりJavaScript で面倒を見なくてはいけません。
あまりにも、機能が多いので使いこなすのは大変そうです。

とりあえず、基本機能だけで、簡単に使えそうなものを作ってみました。
レコード画面に、スプレッドシートを張り付けただけです。
サブテーブルの代わりに、スプレッドシートを使うようなイメージです。

![image](https://qiita-image-store.s3.amazonaws.com/0/100572/d1c58701-fca3-b609-d63c-f3db7b6ff745.png)

#SpreadJS テスト用アプリの作成
![image](https://qiita-image-store.s3.amazonaws.com/0/100572/27769fee-1c0d-3d89-fab4-87d83d36cac6.png)

タイトルとデータ格納用項目、あとSPACEフィールドだけです。

#SpreadJS の JavaScript, CSS

![image](https://qiita-image-store.s3.amazonaws.com/0/100572/ec2af4c0-aaf1-55dd-481d-8ea8fb534874.png)

SpreadJS 本体のサイズが 512KB を超えているので、kintone にアップロード出来ず、外部サーバーに設定するしかありません。

#kintone カスタマイズ JavaScript

- 「データ」項目は、非表示にします。
- 画面表示イベントにおいて、「データ」項目の Json データを SpreadJS にインポートします。
- 保存イベントでは、SpreadJS を Json 変換して、「データ」項目に設定します。

スプレッドシートのデータや計算式は、「保存」で「データ」項目に json 形式で格納されます。
文字列項目は、長さ制限がないためかなり大きなデータも入るはずです。
詳細表示画面では、変更できないようにスプレッドシートをロックしたほうがいいのですが、まだロック方法がわかりません。

```js
(function() {
    "use strict";
    kintone.events.on(["app.record.detail.show", "app.record.edit.show", "app.record.create.show"], function(event) {
        
        kintone.app.record.setFieldShown('データ', false);
        
        //----------------------------------------------
        // SpreadJS設定
        //----------------------------------------------
        // SpreadJSカルチャ設定
        $.wijmo.wijspread.Culture("ja-jp");
        // SpreadJSインスタンス生成とシートの取得
        var sspace1 = kintone.app.record.getSpaceElement('SPREAD1');
        $(sspace1).css("height","300px");
        $(sspace1).wijspread();
        var spread = $(sspace1).wijspread("spread");

        if(event.record['データ']['value']){
            // インポート
            spread.fromJSON(JSON.parse(event.record['データ']['value']));
        }
        

        return event;
    });
    
    kintone.events.on(["app.record.edit.submit", "app.record.create.submit"], function(event){
        var sspace1 = kintone.app.record.getSpaceElement('SPREAD1');
        var spread = $(sspace1).wijspread("spread");
        // エクスポート
        event.record['データ']['value'] = JSON.stringify(spread.toJSON());
        return event;
        
    });
    
})();
```

#スプレッドシートの基本機能
一部ですが、かなり高機能です。しかし右クリックでメニューが出ません。
そこらへんは、作りこみが必要です。

- Excel のように、四則演算や合計などの関数が使えます。
- ドラッグで列幅、行の高さを変更可能
- Excel から コピペでデータを入力可能
- シートを追加可能。シート名変更可能。

> [kintone で SpreadJS による計算](http://qiita.com/rex0220/items/43956808a0d066e87617)

![image](https://qiita-image-store.s3.amazonaws.com/0/100572/de09d3ff-744c-1ed8-4d97-2e94c1e2c7ad.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/100572/26f0e199-cc04-76fc-a93f-b523e824d641.png)

#印刷機能

残念ながら、そのままではスプレッドシートが表示されません。
ここは、CANVAS から印刷するようにカスタマイズ出来るか要検討です。
>[kintone で SpreadJS を印刷](http://qiita.com/rex0220/items/033d5d1118029065212d)

![image](https://qiita-image-store.s3.amazonaws.com/0/100572/8628c056-7649-2fdd-a7db-cbd5d3c33226.png)

#アプリについて
レコードを複写すると、当然ながらスプレッドシートの内容も複写されます。
Excel ファイルを添付するようなアプリの場合、用途によってはこちらのほうが使い勝手がいいかもしれません。
テンプレートを作って、Json 形式で項目に保存しておけば、手軽に使いまわしできそうです。

>[kintone で SpreadJS のフォーマット設定](http://qiita.com/rex0220/items/9bceaf007f258ac57aa1)

ただ機能が多いが　GUI で設定できる機能が少ないので、使いこなしに時間がかかりそうです。
「次期サービスパックには、さらに高速かつ軽量で、多くの機能が追加された新しいスプレッドシートウィジェットが加わります。」とのアナウンスがありますので、使いやすく改善されるように期待しています。