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

kintone Advent Calender 11日目の記事ですね！

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

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

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

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

※この際、一覧はカスタマイズでHTML部に

  <div id="grid"></div>

と、設定してください。
ここにwijmoのgridが表示されます。

アプリにデータを入れて

追加したら一覧を確認！

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

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

今回必要なソースはこれ！！
　◆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に関してはここからトライアル版がダウンロードできます。

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っぽい画面が！！？
ヘッダー部分も指定したものが表示されています。

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

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

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');
    });    
    // 後で処理が入るよ！！

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

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

ダウンロードしたExcelファイルを表示してみます。

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

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

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

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

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

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