kintoneで登録されているデータを元に請求書 (エクセル)を作成する方法
はじめに
kintoneでは、請求書の作成に利用できるさまざまなプラグインが提供されています。しかし、多くのプラグインは年会費や月額費用が高額で、コストの問題から導入が難しい場合があります。
そこで本記事では、kintoneのカスタマイズ機能を活用して、請求書 (エクセルのテンプレート)をダウンロードするボタンを設置する方法を解説します。
1. テンプレートのエクセルファイルの準備
請求書のフォーマットがエクセル形式で存在する場合、エクセルファイルをBASE64にエンコードして利用します。これは、kintoneで外部URLから直接取得するコードが動作しないためです。
const response = await fetch('https://example.com/path/to/template.xlsx'); // テンプレートのパスを指定
このようなコードはkintoneではエラーとなるため、以下の方法でエクセルファイルをBASE64にエンコードします。
MacでエクセルファイルをBASE64にエンコードする方法
base64 -i template.xlsx -o output.txt
上記のコマンドを実行すると、template.xlsx が output.txt に変換され、長い文字列が記述されたファイルが生成されます。
このBASE64データは後ほど create-invoice.js に埋め込むために使用します。
2. create-invoice.js の作成
このスクリプトでは、kintoneのレコード詳細画面に「エクセルファイルをダウンロード」ボタンを設置し、ボタンを押すと請求書 (エクセル)をダウンロードする仕組みを実装します。
// kintone にアップした create-invoice.js
(function() {
"use strict";
kintone.events.on('app.record.detail.show', function(event) {
if (document.getElementById('download-excel-button')) return;
const button = document.createElement('button');
button.id = 'download-excel-button';
button.textContent = 'エクセルファイルをダウンロード';
button.style.marginLeft = '10px';
const headerMenu = kintone.app.record.getHeaderMenuSpaceElement();
headerMenu.appendChild(button);
button.addEventListener('click', function() {
downloadExcelFile();
});
});
function downloadExcelFile() {
// ✅ Base64データをここに貼り付ける（改行なし）
const base64Data = "ここに「１」でエンコードされたBase64データを貼り付けてください";
try {
// ✅ Base64デコード（エラーを防ぐための適切な方法）
const binaryString = window.atob(base64Data);
const binaryLen = binaryString.length;
const bytes = new Uint8Array(binaryLen);
for (let i = 0; i < binaryLen; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
// ✅ Blobを作成し、エクセルファイルとしてダウンロード
const blob = new Blob([bytes], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = "template.xlsx"; // ダウンロードされるファイル名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} catch (error) {
console.error("Base64デコードエラー:", error);
alert("エクセルファイルのダウンロードに失敗しました。Base64データが正しいか確認してください。");
}
}
})();
3. kintoneの設定
3.1 JavaScriptを適用する場所
kintoneの「アプリの設定」>「JavaScriptカスタマイズ」から create-invoice.js を追加します。
3.2 kintoneのJavaScript編集画面でライブラリのアップロード
エクセルファイルを操作するために、以下のライブラリを追加します。
追加するライブラリのURL
https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js
このURLをkintoneのJavaScriptカスタマイズのライブラリ設定画面で追加してください。
3.2 設定を適用する
- 設定画面でJavaScriptファイルを追加した後、「変更を保存」し、アプリを更新してください。
- これでレコード詳細画面に「エクセルファイルをダウンロード」ボタンが追加されます。
設定画面サンプル
まとめ
本記事では、
- エクセルテンプレートをBASE64にエンコードする方法
- kintoneのJavaScriptカスタマイズでライブラリを追加する方法
-
create-invoice.jsを作成し、請求書 (エクセル) をダウンロードする方法
を解説しました。
このカスタマイズを活用することで、プラグインに頼ることなく、kintone上で請求書の生成を自動化できます。