今回は、JavaScriptを使ってkintoneアプリからcybozu.comのユーザーを登録する方法について紹介したいと思います。
ユーザーマスターをkintoneアプリで作成し、定期的に登録や更新することで、ExcelやCSVで使わずにメンテナンスできます！
「あとチョット」な部分をユーザ管理アプリという形で実現させてみましょう。
- フォームの情報からCSVファイルを作成する。
- CSVファイルをユーザインポートAPIを使って登録する。
まずはアプリフォームのイメージです。以下の項目を用意しておきます。
今回はこのユーザ情報をcybozu.comに登録してみましょう。
上記のフォームデータを元にCSVを生成します。
フォームにない項目については空アイテムとして指定します。
CSVのフォーマット形式については
CSV フォーマットを参照してください。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
// kintone のレコード取得
const record = kintone.app.record.get().record;
// CSVの作成
let strCSV = record['ログイン名'].value;
strCSV += ',' + record['表示名'].value;
strCSV += ',sample'; // 新ログイン名
strCSV += ',password'; // パスワード
strCSV += ',' + record['姓'].value;
strCSV += ',' + record['名'].value;
strCSV += ',' + record['よみがな姓'].value;
strCSV += ',' + record['よみがな名'].value;
strCSV += ','; // 別言語での表示
strCSV += ','; // 別言語の名前を表示する言語
strCSV += ',' + record.E_mail.value;
strCSV += ',0'; // 使用状態
strCSV += ','; // 言語
strCSV += ','; // タイムゾーン
strCSV += ',' + record['電話番号'].value;
strCSV += ',' + record['内線'].value;
strCSV += ','; // 携帯
strCSV += ','; // URL
strCSV += ',' + record['従業員ID'].value;
strCSV += ','; // 入社日
strCSV += ','; // 誕生日
strCSV += ','; // メモ
strCSV += ','; // 表示優先度
strCSV += ','; // Skype名
strCSV += ','; // 削除
strCSV += ',\n';
|
CSVファイルを作成したら次にファイルをアップロードします。
ファイルのアップロード手順は
こちら。
ファイルのアップロード、ダウンロードを実行する際には、セッション認証が必要になります。
ではユーザインポート処理のコードを見てみましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// FormDataにCSVを格納
const formData = new FormData();
const oBlob = new Blob([strCSV], {type: 'text/csv'});
const tokenKey = kintone.getRequestToken();
formData.append('__REQUEST_TOKEN__', tokenKey);
formData.append('file', oBlob, 'user.csv');
// CSVファイルをアップロードする
const xmlHttp = new XMLHttpRequest();
xmlHttp.open('POST', '/v1/file.json');
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState === 4) {
// ファイルのアップロードが完了したらレスポンスデータからfileKeyを取得する
const key = JSON.parse(this.responseText).fileKey;
// fileKeyを設定してユーザを登録する
kintone.api(kintone.api.url('/v1/csv/user'), 'POST', {fileKey: key}, (resp) => {});
}
};
xmlHttp.responseType = 'multipart/form-data';
xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xmlHttp.send(formData);
|
前項で作成したCSVファイルをアップロードして、そのレスポンスからfileKeyを取得します。
次にfileKeyをユーザーインポートAPIを使用して登録しています。
このときユーザインポートAPIでは"POST"します。通常のファイルアップデートではレコードに対して"PUT"しますが、ここでは"POST"です。
意外と間違えちゃう箇所なので注意してください。
