ん～熱っぽい・・・あー風邪ひいたかなぁ・・・→ 体温計起動！！
→ 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に関してはここからトライアル版がダウンロードできます。
(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っぽい画面が！！？
ヘッダー部分も指定したものが表示されています。
ここまでできたらあと一歩、ダウンロード向けてもうちょっと頑張りましょう。
ダウンロードの準備
まずはダウンロードするためのボタンを追加しましょう！
// 後で処理が入るよ！！
// 後で処理が入るよ！！
となっていた場所に
// 後で処理が入るよ！！
// 出力ボタンを追加！
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を利用してみてください。