Excelをダウンロードしたい！？じゃあwijmoのflexgridを使ってみますか・・・

ん～熱っぽい・・・あー風邪ひいたかなぁ・・・→　体温計起動！！　
→　35.3度・・・・はい、のんびんです！！

[kintone Advent Calender](http://qiita.com/advent-calendar/2016/kintone) 11日目の記事ですね！

実はQiita初投稿です、私。
さてさて、何を書こうか悩んだんですが、今回はkintoneからwijmoを利用してExcel出力する方法をご紹介しようかと思います。
実際に自分で利用したときに、便利な点や微妙な点が見えたので、ここで共有させてもらいます。

#まずは準備
kintoneのアプリストアから、アプリをダウンロードします。
(今回は顧客リスト)

![image](https://qiita-image-store.s3.amazonaws.com/0/150335/2279962e-6bfb-5199-62b3-6c79640f4e2b.png)

このままだとカスタマイズする際に、わかりづらいので、フィールドコードをフィールド名と同じにします。

![image](https://qiita-image-store.s3.amazonaws.com/0/150335/d1626caf-7537-d123-451d-77ea595ea348.png)


フィールドコードの設定が終わったら、一覧を追加します。

![image](https://qiita-image-store.s3.amazonaws.com/0/150335/9c903691-628d-2183-1815-313f7cc38929.png)

※この際、一覧はカスタマイズでHTML部に
```
  <div id="grid"></div>
```
と、設定してください。
ここにwijmoのgridが表示されます。

アプリにデータを入れて
![image](https://qiita-image-store.s3.amazonaws.com/0/150335/d852cae6-87c6-64da-e443-75fae3222b82.png)

追加したら一覧を確認！
![image](https://qiita-image-store.s3.amazonaws.com/0/150335/65688261-d874-cc66-4b87-03659a93de47.png)

・・・まぁそうだよね。
プログラムを何も入れてないもん・・・

#画面に出してみよう！
では、プログラムを追加しましょう！

今回必要なソースはこれ！！
　◆JavaScript
　 ・https://js.cybozu.com/jquery/2.2.4/jquery.min.js
　 ・https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js
　 ・wijmo.js
　 ・wijmo.xlsx.js
　 ・wijmo.grid.js
　 ・wijmo.grid.xlsx.js
　 ・nonbin.js
　◆CSS
　 ・wijmo.min.css
　 ・wijmo.theme.office.min.css
※wijmoに関しては[ここ](http://wijmo.c1.grapecity.com/download/)からトライアル版がダウンロードできます。

```nonbin.js
(function () {
  "use strict";
  var flexGrid = null;
  kintone.events.on('app.record.index.show', function(event){
    //一覧表示イベント時のレコード
    var records = event.records; 
    // 行ヘッダーのリスト
    var columns = [];
    columns = [{ 
      // 紐づけるﾃﾞｰﾀのキー
      binding: '会社名', 
      // 表示するヘッダー文字列(フィールドコードとは別の文字を設定できる)
      header: '会社名(正式名称)', 
      // 表示幅
      width:400 
    }];
    // 今回はいくつか先にヘッダを設定しておく
    columns.push({ binding: '部署名', header: '部署', width:220 });
    columns.push({ binding: '担当者名', header: '担当者', width:120 });
    columns.push({ binding: '郵便番号', header: '〒', width:120 });
    columns.push({ binding: 'TEL', header: '電話番号', width:120 });

    var rowList;
    var dataList = []; 
    for(var i=0; i<records.length; i++){
      rowList = {};
      for(var field in records[i]){
        if (!checkField(columns,field)) continue;
        rowList[field] = records[i][field].value;
      }
      dataList.push(rowList);
    }
    var cv = new wijmo.collections.CollectionView(dataList);
    if (!flexGrid) {
      flexGrid = new wijmo.grid.FlexGrid('#grid', {
        // グリッドに表示するデータ
        itemsSource : cv,
        // グリッドに表示するカラムヘッダー
        columns : columns,
        // 読み取り専用
        isReadOnly : true,
        // 自動でカラムを作成するか
        autoGenerateColumns : true
      });
    } else {
      // 既に存在した場合
      flexGrid.itemsSource = cv;
    }
    // 後で処理が入るよ！！

    // 後で処理が入るよ！！

  });
  /**フィールドが出力対象かチェック */
  function checkField(_columns,_field)
	{
    for (var i=0;i<_columns.length;i++) {
      if (_columns[i].binding === _field) {
        // 出力対象のフィールド
        return true;
      }
    }
    return false;
  }
})();

```

nonbin.jsを読み込ませると、Excelっぽい画面が！！？
ヘッダー部分も指定したものが表示されています。

![image](https://qiita-image-store.s3.amazonaws.com/0/150335/bbefcefb-8d23-edad-5a5c-1fe417e15310.png)


ここまでできたらあと一歩、ダウンロード向けてもうちょっと頑張りましょう。

#ダウンロードの準備
まずはダウンロードするためのボタンを追加しましょう！


```nonbin.js
    // 後で処理が入るよ！！


    // 後で処理が入るよ！！
```

となっていた場所に

```nonbin.js
    // 後で処理が入るよ！！
    // 出力ボタンを追加！
    var hDiv = document.createElement('div');
    hDiv.id = 'print'
    var excelOutputBtn = document.createElement('button');
    excelOutputBtn.id = 'excelOutputBtn';
    excelOutputBtn.innerHTML = 'Excelが出力されちゃいます';
    // ボタンのクラスは自分で設定してね？
    // excelOutputBtn.class = 'kintone-button-normal';
    // excelOutputBtn.className = 'kintone-button-normal';
    hDiv.appendChild(excelOutputBtn);  
    kintone.app.getHeaderMenuSpaceElement().appendChild(hDiv);
    
    $("#excelOutputBtn").click(function() {
      var workbook = wijmo.grid.xlsx.FlexGridXlsxConverter.save(flexGrid, {
          includeCellStyles: true
      });
      workbook.save('顧客管理.xlsx');
    });    
    // 後で処理が入るよ！！
```

といった具合に処理を追加します！

![image](https://qiita-image-store.s3.amazonaws.com/0/150335/a1a66446-cf17-c131-e375-b619f77fe07c.png)

お！ボタンがでましたね！
早速クリックしてみましょう。

![image](https://qiita-image-store.s3.amazonaws.com/0/150335/bed0e7b2-23d3-580c-15cc-ba6c1375f4d1.png)

ダウンロードしたExcelファイルを表示してみます。
![image](https://qiita-image-store.s3.amazonaws.com/0/150335/ec2e223f-0ea5-63de-258f-f343918204d2.png)

おおお！でた！！！
画面に表示できちゃうと、その先は意外と簡単に出力することができます！！

#この先きっと困ること
えーと、実はここまでは意外と簡単にできちゃうんですが、
flexgridをそのまま出力ではなく、
  **帳票のような形で出力したい！！**
ってな要望がでると・・・ふふふ、結構苦労します。

excelでは普通に使っている
　・折り返して全体を表示する
　・ユーザ書式(1000→1,000円)
などが利用できなかったりする。
ヘッダー列の結合や、その他スタイルの適用などもなかなか苦戦する・・・てかしました。
今後は、この続きとして、そのあたりも更新していきたいと思います。

と、ネガティブなことを書いちゃいましたが、
**サーバレスでkintoneからExcel出力できるのは素晴らしい！！**

(今までだと、kintone→AWS Lambda(JAVA＆POI)→kintoneとかしていた)
せっかくライセンスも購入したので、今後もガシガシ使って行く予定です！

興味のある方は是非、kintoneでwijmoを利用してみてください。