本記事ではJavaScriptを使ってデータを週次でCSV出力する方法についてご紹介します。
アプリの作成からステップバイステップで丁寧に解説していますので、一緒に手を動かしながら実装していきましょう！
- kintone一覧画面にボタンを追加する
- 1週間分のレコードを絞り込む
- データをCSV形式に変換する
- Excelで文字化けしないようSJISに変換
- ボタンクリックで週次CSVを出力
アプリを作ろう
まずはテスト用のアプリを作成し必要なフィールドを設置しましょう！
アプリを作成
アプリ名は「週次ＣＳＶ出力テスト」など分かりやすい名前にしておきましょう！
フィールドを追加＆設定
赤枠の「日付」と「文字列(1行)」をドラッグ＆ドロップで画像のよう設置しましょう！
設置した「日付」にカーソルを合わせ、歯車アイコンから設定をクリック、フィールドコードをdateに変更し保存をしましょう！
同じように設置した「文字列(1行)」にカーソルを合わせ、歯車アイコンから設定をクリック、フィールドコードをtodoに変更し保存をしましょう！
アプリを公開
フィールドの変更をしたら「保存」して「アプリを公開」をします。
これで準備は完了です！次はアプリにデータを登録していきましょう！！
必要なデータを登録しよう
ここでは出力に必要なデータを登録していきます！
１．一覧画面から 「＋」アイコン をクリック
２．日付には 今日の日付 を入力
３．todo には 「テスト1」 と入力
４．入力ができたら保存をクリック
※参考までに、私が登録したときは9月23日でしたが、皆さんは実際に登録する日の 日付を入力 してください！
登録ができたら、同じ手順で 1週間分（7日分）のデータ を追加します。
・日付は「昨日」から順番に入力してください。
・todo の名前は「テスト2」「テスト3」…と番号を増やしていきましょう！
画像のように７つのデータが登録されていればOKです！
これで準備は完了です！次のJavaScriptの実装も一緒に頑張りましょう！！
JavaScriptを読み込もう
ここからはJavaScriptファイルを作成し実際にkintoneに読み込んでみましょう！
サンプルコードのコピー
以下のコードをコピーして、テキストファイルに貼り付けましょう。
(function () {
'use strict';
kintone.events.on('app.record.index.show', function (event) {
if (document.getElementById('export-weekly-btn')) return;
const exportButton = document.createElement('button');
exportButton.id = 'export-weekly-btn';
exportButton.innerText = '週次データCSV出力';
exportButton.onclick = ExportData;
const headerMenuSpace = kintone.app.getHeaderMenuSpaceElement();
headerMenuSpace.appendChild(exportButton);
return event;
});
})();
function ExportData() {
const appId = kintone.app.getId();
const today = new Date();
const weekAgo = new Date();
weekAgo.setDate(today.getDate() - 6);
function formatDate(date) {
return date.toISOString().split('T')[0];
}
const fromDate = formatDate(weekAgo);
const toDate = formatDate(today);
// クエリは date フィールドを利用
const query = `date >= "${fromDate}" and date <= "${toDate}" order by date desc`;
const params = {
app: appId,
query: query,
fields: ['date', 'todo']
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params)
.then(function (resp) {
const headers = ['日付', 'ToDo'];
const csvRows = resp.records.map(record => {
return [
record.date.value,
record.todo.value
].join(',');
});
const csvContent = [headers.join(','), ...csvRows].join('\n');
// SJISに変換（Excelで文字化けしないように）
const sjisArray = Encoding.convert(csvContent, {
to: 'SJIS',
from: 'UNICODE',
type: 'array'
});
const blob = new Blob([new Uint8Array(sjisArray)], { type: 'text/csv' });
// ファイル名例: todo_2025-09-16~2025-09-22.csv
saveAs(blob, `todo_${fromDate}~${toDate}.csv`);
})
.catch(function (error) {
console.error('レコード取得エラー', error);
});
}
JavaScriptファイルとして保存
テキストファイルにコードを貼り付けたら
１．「ファイル」→「名前を付けて保存」
２．「ファイルの種類」を すべてのファイル に設定
３．「ファイル名」は weeklyExport.js
保存先はデスクトップなど、分かりやすい場所でにしておきましょう！
これでJavaScriptファイルが完成しました。次は この JavaScript ファイルを kintone に読み込んでいきましょう！
作成したファイルをアップロード
作成した weeklyExport.js をkintoneに読み込みます。
１．対象アプリの歯車アイコンの矢印をクリック
２．カスタマイズ／サービス連携をクリック
３．JavaScript／CSSでカスタマイズをクリック
まずは作成したファイルを動かすために、 FileSaver.js と Encoding.js を読み込みます。
１．「URL指定で追加」をクリック
２．以下のURLを入力して保存します
https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
同じように「URL指定で追加」をクリックし以下のURLを入力して保存しましょう
https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/2.0.0/encoding.min.js
次に作成したファイルをアップロードします。
１．「アップロードして追加」をクリック
２．先ほど保存したweeklyExport.jsをダブルクリック
３つのJavaScriptファイルが追加されているかを確認しましょう！
画面右下の「保存ボタン」をクリックしましょう！
右上の「アプリの更新」をクリック、「アプリの変更を運用環境に適用します。よろしいですか？」という画面が出るのでもう一度「アプリの更新」をクリックしましょう！
これで、週次CSV出力アプリの作成が完了です！完成すると、一覧画面に「週次データCSV出力」ボタンが表示されます。
ボタンをクリックして、CSV出力が正しく動作するか確認してみましょう！
うまく動作しないときの確認ポイント
記事の通りにやったのに動作しない…と不安になった方も大丈夫！
ここではよくあるつまずきポイントを一緒に確認していきましょう。
- １．フィールドコードの設定ミス
-
- 日付はdate文字列は todo
→ スペルミスや別の単語だとうまく動作しません。必ず確認しましょう。
- ２．コードに不要な文字
-
- 余計な文字が入っていないか
→ テキストファイルに不要な文字や改行が混ざっていると、アプリが正しく動作しません。
- ３．正しくファイルをアップロードできていない
-
- JavaScripを順番にアップロード
→ 順番が違うとエラーが出る場合があります。もう一度確認してください。
動作に問題がある場合は、まず上記の3点をチェックしてみてくださいね。
皆さんのアプリがスムーズに動きますように！
コードのポイントを押さえよう
「コピペしたはいいけどどういう仕組みなんだ…？」
そう感じた方のために、ここではコードをポイントごとに解説していきます！
即時実行関数・ボタン追加
(function () {
'use strict';
kintone.events.on('app.record.index.show', function (event) {
if (document.getElementById('export-weekly-btn')) return;
const exportButton = document.createElement('button');
exportButton.id = 'export-weekly-btn';
exportButton.innerText = '週次データCSV出力';
const headerMenuSpace = kintone.app.getHeaderMenuSpaceElement();
headerMenuSpace.appendChild(exportButton);
exportButton.onclick = ExportData;
return event;
});
})();- コード全体を即時実行関数で囲み、他のスクリプトと干渉しないようにしています。
- 一覧画面が表示されたタイミングでボタンを作成し、既存のボタンがあれば重複を防ぎます。
- ボタンはヘッダーに追加され、クリックすると
ExportData関数が呼ばれます。
ExportData 関数の開始・日付計算
function ExportData() {
const appId = kintone.app.getId();
const today = new Date();
const weekAgo = new Date();
weekAgo.setDate(today.getDate() - 6);
function formatDate(date) {
return date.toISOString().split('T')[0];
}
const fromDate = formatDate(weekAgo);
const toDate = formatDate(today);- 現在のアプリIDを取得し、日付を操作するための変数を定義しています。
todayとweekAgoで1週間分の日付範囲を計算します。formatDateで日付をYYYY-MM-DD形式に変換し、クエリで使用できる形に整えます。
kintone クエリ作成
const query = `date >= "${fromDate}" and date <= "${toDate}" order by date desc`;
const params = {
app: appId,
query: query,
fields: ['date', 'todo']
};- クエリ文字列で1週間分のレコードを絞り込みます。
order by date descで日付の新しい順に並べます。fieldsで必要なフィールドのみ取得するよう指定しています。
レコード取得・CSV作成・保存
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params)
.then(function (resp) {
const headers = ['日付', 'ToDo'];
const csvRows = resp.records.map(record => {
return [
record.date.value,
record.todo.value
].join(',');
});
const csvContent = [headers.join(','), ...csvRows].join('\n');- kintone API を使って非同期でレコードを取得します。
- ヘッダ行を定義し、取得したレコードをカンマ区切りで CSV の行に変換します。
- 配列を結合して、1つの CSV 文字列にまとめています。
CSV 変換・保存
const sjisArray = Encoding.convert(csvContent, {
to: 'SJIS',
from: 'UNICODE',
type: 'array'
});
const blob = new Blob([new Uint8Array(sjisArray)], { type: 'text/csv' });
saveAs(blob, `todo_${fromDate}~${toDate}.csv`);
})
.catch(function (error) {
console.error('レコード取得エラー', error);
});
}- Excelで文字化けしないように CSV を SJIS に変換します。
Blobでファイル化し、saveAsで PC に CSV として保存します。- エラー発生時はコンソールに出力されます。
まとめ
今回の記事では、kintoneのデータを週次でCSV出力する方法を紹介しました。
少し長く感じたかもしれませんが、その分、得られた知識も多かったはずです！
- 一覧画面にボタンを追加できる
- 1週間分のレコードを取得・絞り込める
- データをCSV形式に変換できる
- Excelで文字化けせず保存できる
- ボタンクリックで週次CSVを出力できる
コメント