弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
kintone JavaScriptで添付ファイルを操作したい時があります。
kintone JavaScriptによる添付ファイル操作
現状の結論としては、
・UTF-8のテキストファイルであれば、kintone JavaScript API標準のkintone.proxy() で操作できる
・JSによる添付ファイルの操作には基本的にFormDataオブジェクトやBLOBでの操作が必要で、kintone.api()やkintone.proxy()では難しいため、XHRに頼らざるを得ない（関連Tips）
といった感じでしょうか。
汎用性が高いのは後者ですが、kintone JavaScript APIではないことが困りどころです。一方、前者は超限定的ですが、kintone.proxy()を利用するため、ドメイン越えのリクエストも可能というニッチなニーズに応えることができます。FormDataオブジェクトがkintone.api() や kintone.proxy() で対応されると一番ありがたい気もしますが、JavaScriptで添付ファイルをこね繰り回すのもどうかと思う今日この頃です。
そんな中、今回は前者の方法のご紹介です。
この記事のようなカスタマイズはしたいけれど自分だけではできないという方は、カスタマイズ開発を1週間20万円という定額料金で提供していますので、弊社までお気軽にお問い合わせください。
kintone.proxy()による添付ファイル操作
準備
アップロードとダウンロード、UTF-8のテキストファイルであればkintone.proxy()でどちらとも操作可能です。そこで今回は、シンプルに次のようなフィールドを持つアプリをコピー元とコピー先のアプリとして準備します。
| フィールド名 | フィールドコード（フィールドタイプ） |
|---|---|
| タイトル | タイトル（文字列1行） |
| 添付ファイル | 添付ファイル（添付ファイル） |
コードサンプル
コピー元に仕込むJavaScriptのサンプルです。レコード詳細画面に添付ファイルのコピーボタンを設置します。押すと、次のように動作します。
・開いているレコードの1つ目の添付ファイルをfileKey（ダウンロード用）を指定して、ダウンロード
・ダウンロードした内容を、そのままアップロードしfileKey（アップロード用）を取得
・コピー先アプリにレコード新規登録とともに、fileKeyを指定して添付ファイルを紐つけ
試すときには、jQueryを別途読み込んで、「tar_app_id（必須）」、「auth_token（必須）」、「basic_token（必要時）」を差し替えてください。
(function() {
"use strict";
kintone.events.on(['app.record.detail.show'], function(event) {
// レコード詳細画面にボタン設置
$(kintone.app.record.getHeaderMenuSpaceElement()).append(
$('<button>').prop('id', 'my-copy-file').html('添付ファイルのコピー')
);
// 「添付ファイルのコピー」ボタン押下時の処理
// 添付ファイルをダウンロードしてアップロードする
$('#my-copy-file').click(function() {
// パラメータ群
var tar_app_id = 94; // 添付ファイルコピー先のアプリID
var auth_token = 'auth_token'; // 「ログインID:パスワード」のBase64エンコード値
var basic_token = ''; // Basic認証における「ログインID:パスワード」のBase64エンコード値
var filename = event.record["添付ファイル"].value[0].name; // 現レコードの添付ファイルのファイル名
var downloadFileKey = event.record["添付ファイル"].value[0].fileKey; // 現レコードの添付ファイルのfileKey
var downloadFileUrl = kintone.api.url('/k/v1/file', true) + '?fileKey=' + downloadFileKey; // 添付ファイルダウンロード用URL
var uploadFileUrl = kintone.api.url('/k/v1/file', true); // 添付ファイルアップロード用URL（同一ドメイン内）
var boundary = '---------------------------20111107kintone20111107cybozucom'; // multipart/form-dataリクエスト用のboundayr
// 現レコードの既存添付ファイル（先頭1つ）をダウンロード
return kintone.proxy(downloadFileUrl, 'GET', {
"X-Cybozu-Authorization": auth_token,
"Authorization": "Basic " + basic_token
}, {}).then(function(get_args){
console.log(get_args);
// ダウンロードした添付ファイルをkintoneにアップロード
var param = '--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="file"; filename="'
+ filename + '"\r\nContent-Type: application/octet-stream\r\n\r\n' + get_args[0] + '\r\n' + '--' + boundary + '--'; // 挟み込むリクエストbody部分
// ファイルアップロードをリクエスト
return kintone.proxy(uploadFileUrl, 'POST', {
"X-Cybozu-Authorization": auth_token,
"Authorization": "Basic " + basic_token,
'Content-Type': 'multipart/form-data; boundary=' + boundary
}, param);
}).then(function(post_args){
console.log(post_args);
// アップロードしたファイルを紐つけてレコード登録
var fileValue = JSON.parse(post_args[0]);
return kintone.api(kintone.api.url('/k/v1/record', true), 'POST', {
app: tar_app_id,
record:{
"タイトル":{
"value": "コピーされた" + filename
},
"添付ファイル":{
"value":[fileValue]
}
}
});
}).then(function(resp){
console.log(resp);
alert('添付ファイルをコピーしました。');
}).catch(function(err){
console.log(err);
alert('添付ファイルのコピーに失敗しました。');
});
});
});
})();
実行
ボタンを押すと次のように添付ファイルがコピーされます。
まとめ
ちょっとニッチな記事になりましたが、kintone.proxy() でテキスト（UTF-8）の添付ファイルであれば操作できるという内容でした。用途は限定的ですが、デプロイAPIにおけるカスタマイズファイルの操作等には使い道がありそうです。
おまけ
今回利用したkintone.proxy()ですが、cybozu.com developer networkのTipsで「kintoneマッシュアップのための豆知識（curlコマンドとkintone.proxy()の対応）」としてまとめさせて頂いていますので、合わせてご覧いただければと思います。
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
