カテゴリー内の他の記事

kintoneから直接Excelファイルに出力する

フォローする

はじめに

kintoneの標準機能にはCSVファイルへ書き出す機能がありますが、Excelファイルとして利用するには、
いったんcsv形式で書き出してから、xlsx形式に変換する必要があります。

今回は、kintoneからボタン1つで直接Excelファイルに出力する方法をご紹介します。 

できること

Excel出力用の一覧でボタンを押すと、kintoneアプリ内のデータがExcelファイルに出力されます。

kintonetoexcel.png

事前に準備するもの

kintoneアカウント ※開発者ライセンスの取得方法はこちら

手順

  1. kintoneアプリの作成
  2. JavaScriptカスタマイズ

kintoneアプリの作成

はじめから作成

ポータル画面のアプリの「+」ボタンをクリックします。
Image_2018-08-03_12-19-08.png

「はじめから作成」をクリックします。
__________2018-08-03_12.18.38.png

フォームの設定

フォームは以下の画像を参考にして設定します。
Image_2018-08-03_14-34-04.png

以下のフィールドをフォームに配置してください。

 フィールドの種類  フィールド名  フィールドコード
レコード番号 レコード番号 レコード番号
文字列 (1行) タイトル title
文字列 (複数行) 詳細 detail

カスタマイズビューの設定

Excel出力用のカスタマイズビューを作成します。「一覧」タブに移動し「+」ボタンをクリックします。
Image_2018-08-03_14-43-19.png

レコード一覧の表示形式に「カスタマイズ」を選択し、以下の画像を参考にして設定します。
Image_2018-08-15_10-57-09.png

HTMLには以下のコードを入力します。 

「保存」ボタンをクリックし、最後に「アプリの公開」ボタンをクリックすると、アプリが作成されます。

JavaScriptカスタマイズ

下のサンプルコードをコピーしてJavaScriptファイル outputXLSX.js として保存します。

outputXLSX.js

コード解説

  1. 132-136行目 一覧画面を開いたときのイベント app.record.index.show の発生時に、出力用のデータを作成しています。
  2. 33-47行目 function fetchRecords()で、kintoneのレコードを全件取得します。
  3. 22-31行目 取得したデータからエレメントを作成します。
  4. 105-117行目 エレメントからHTMLのtableを作成します。
  5. 61-86行目 ボタンをクリックしたタイミングで、ライブラリを使用してtableからxlsxへ書き出しします。

また、いくつかライブラリも使っているので、それらもkintoneに適用します。
outputXLSX.jsと併せて、PC用のJavaScriptファイルに記述してください。

Cybozu CDNのライブラリ…URLで指定します

  • jQuery
    • https://js.cybozu.com/jquery/3.3.1/jquery.min.js

Cybozu CDN外のライブラリ…GitHubからダウンロードしたファイルをアップロードして適用します

  • SheetJS js-xlsx
    • dist/xlsx.full.min.js を適用
    • Apache License 2.0
  • FileSaver
    • FileSaver.min.js v1.3.4を適用
      (FileSaver.jsのv1.3.6以降を利用する場合、ソースからビルドする必要があるため)
    • MIT License

全てアップロードすると、以下のようになります。
アプリへのJavaScript/CSSファイルのアップロードの方法はヘルプ - JavaScriptやCSSでアプリをカスタマイズするをご参照ください。
__________2018-08-13_17.13.27.png

動作確認

冒頭でお見せしたとおり、Excel出力用に作成した一覧(カスタマイズビュー)に移動し「Download XLSX」ボタンを押すと、
kintone のデータが xlsx形式 に出力されます。

おわりに

これまで、csv形式で出力するか、Excel側にVBAを埋め込むという方法はあったものの、直接kintoneからxlsx形式で出力する方法は公開されていませんでした。
Excelファイルが読み込めるサービスとの連携が、より敷居が低くなりますね。

デモ環境

https://dev-demo.cybozu.com/k/299/

※デモ環境についての説明はこちら

このTipsは、2018年9月版 kintoneで確認したものになります。

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

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