CSVのアップロードについての質問です。
■動作確認中の作業内容
Kintoneのアプリ上の画面にボタンを作成してます。
そのボタンを押下したら、PCローカルに保存してあるCSVを取り込み
その後、Kintoneアプリのレコードに登録をする。
まずは、CSVをKintone上にアップロードをするための方法を
ご教示いただければと思います。
以下の◆◆の箇所より 〈参考〉の（1）にある
コードを入れていきますが、現時点のスキルでは難しいため
このままでは実現したい動作を確認することができません。
サンプルコードを記述いただけると幸いです。
＜サンプルソース：CSVLOAD.js＞
(function () {
“use strict”;
kintone.events.on(‘app.record.index.show’, function (event) {
if (document.getElementById (‘my_index_button’) != null) {
return;
}
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerHTML = 'CSV取り込み';
// ボタンクリック時の処理
myIndexButton.onclick = function() {
◆ ここにCSVアップロードする処理 ◆
}
kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});
})();
〈参考〉
▼テーブル形式データを含んだCSVの一括取込
https://cybozudev.zendesk.com/hc/communities/public/questions/201356730
（1）JavaScript で File API を使用してファイルを読み取る
ファイル選択にフォーム入力を使用する
http://www.html5rocks.com/ja/tutorials/file/dndfiles/
よろしくお願い致します。
kids007さん
cstapの落合です。
まず、ブラウザからローカルファイルを直接見に行くことはできません。これはセキュリティ上許してはいけない操作です。
そのため、ドラッグ＆ドロップなどでブラウザにローカルファイルを手渡ししないと、ファイル操作はできません。
以上を認識した上で開発するとJavascriptによるCSVアップロード機能も実現できるかと思います。
具体的には、file フォームなどでファイル情報を取得し、CSV → JSON 変換を行い、REST API で登録/更新/削除する感じです。
以上、参考になりますでしょうか？
cstap
落合 様
ご回答いただき、有り難うございます。
早速、参考にさせていただき、一つ目がクリアできました。
カスタマイズビューとJavascriptを組み合わせて
ドラッグ＆ドロップにてファイル情報を取得することが
確認できています。
今度は、CSVからJSONに変換を行う箇所で試行錯誤してます。
カスタマイズビューに変換するためのボタンを追加して
変換処理をかけようとしていますがうまくいきません。
コードを一部、抜粋したものを以下に記載します。
・カスタマイズビューより一部抜粋
<input type=“submit” id=“the_form” value=“JSON変換”
class=“btn”/>
<output id=“list2”></output>
・test.jsより一部抜粋（ファイル情報取得の処理も含まれてます）
function handleFileList(evt) {
var res = evt.dataTransfer.files;
var d = res.split(‘’);
var jsonArray = csvjson(d);
}
function csvjson(csvArray){
var jsonArray = [];
var items = csvArray[0].split(‘,’);
for (var i = 1; i < csvArray.length - 1; i++) {
var a_line = new Object();
var csvArrayD = csvArray[i].split(‘,’);
for (var j = 0; j < items.length; j++) {
a_line[items[j]] = csvArrayD[j];
}
jsonArray.push(a_line);
}
//console.debug(jsonArray);
//return jsonArray;
document.getElementById(‘list2’).innerHTML = ‘<ul>’
- jsonArray.join(‘’) + ‘</ul>’;
}
・・ （中略）・・
var btn1 = document.getElementById(‘button1’);
btn1.addEventListener(‘submit’, handleFileList, false);
ご教示いただけますでしょうか。
宜しくお願いいたします。
kids007さん
cstapの落合です。
CSV → JSON 変換については、ライブラリを利用すると良いでしょう。
GitHubで検索 すると、いくつか使えそうなライブラリが見つかると思います。
https://github.com/shancarter/mr-data-converter
https://github.com/rwjblue/pivot.js
ライブラリを使って JSON に変換した後は、REST API の仕様に沿った形式に変換し、 kintone.api を使ってアップロードします。
登録/編集/削除それぞれAPIが異なりますので、それぞれのAPI仕様に沿った形式にJSONを変換する必要があります。
以上、参考になりますでしょうか？
回答いただき有り難うございます。
参考にさせていただき、トライしてみます。