kintoneアプリにword帳票出力機能を自前で実装してみる！（後編）

さて、今回は前回の記事に引き続き、kintoneアプリにword帳票出力機能を実装する方法についてお伝えします。

前回はkintoneアプリのデータを参照してwordファイルを作成するところまで書きましたが、せっかくkintoneに機能を実装しているのだから、作成されたファイルをkintoneにアップしてほしいですよね。

そこで、ローカルファイルをkintoneにアップロードしてアプリに添付する方法についてお伝えします！

本記事はこんな方にお勧め！

・プログラミングの経験あり
・プラグインにお金を使いたくない人
・ないなら作ってしまえの精神の持ち主

kintoneアプリ機能拡張の開発環境

今回は下記環境で実装します。

・開発環境：node.js
・kintoneのデータ取得：kintone JS SDK
・HTTPクライアント：axios
※axiosはnode.jsで動くPromiseベースHTTPクライアントで、RESP API実行したい時に使用すると便利なので、今回採用しました。

開発環境のインストール

$ npm install --save @kintone/kintone-js-sdk
$ yarn add form-data
$ yarn add fs
$ yarn add path
$ yarn add axios

package.jsonは下記の通り編集してください。

"dependencies": {
 "@kintone/kintone-js-sdk": "^0.4.2",
 "axios": "^0.19.0",
 "form-data": "^2.5.1",
 "fs": "^0.0.1-security",
 "path": "^0.12.7"
 }

サンプルコード

var kintone = require('@kintone/kintone-js-sdk');
var fs = require('fs');
var path = require('path');
var axios = require('axios');
var formdata = require('form-data');

var DOMAIN = "xxx";
var APIToken = 'xxx';
var appID = xxx;
var recordId = 1; // TEST固定

const uploadFile = async (filePath) => {
 const url = `https://${DOMAIN}/k/v1/file.json`;
 const form = new formdata();
 form.append('file', fs.readFileSync(filePath), path.basename(filePath));
 const config = {
   headers: {
     'X-Cybozu-API-Token': APIToken,
     'Content-Type': form.getHeaders()['content-type']
   }
 };
 try {
   // kintone REST APIを実行する際に、axiosを利用
   return await axios.post(url, form, config);
 } catch (err) {
   console.log('uploadFile err', err);
   throw new Error(err);
 }            
}

async function updateAttachFile() {
 var fileName = './test.docx';
 // uploadFile()の処理結果を待つ
 var result = await uploadFile(fileName);
 // ファイルキーを取得
 var fileKey = result.data.fileKey;
 var kintoneAuth = new kintone.Auth();
 kintoneAuth.setApiToken(APIToken);
 var kintoneConnection = new kintone.Connection(DOMAIN, kintoneAuth);
 var kintoneRecord = new kintone.Record(kintoneConnection);
 // フィールドコード：fileの場合
 var record = {
   file: {
     value: [{
       fileKey: fileKey // ファイルキー
     }]
   }
 };
 // レコードを指定して更新(ファイル添付)
 kintoneRecord.updateRecordByID(appID, recordId, record).then((rsp) => {
   console.log(rsp);
 }).catch((err) => {
   console.log(err);
 });
}

updateAttachFile();

kintoneアプリにファイルを添付する機能実装で気をつけるべき事！

サンプルコードでは大きく2つの処理（uploadFileとupdateAttachFile）が実行されるのですが、実はJavaScriptでkintoneアプリにファイルを添付する場合、一発で添付することができないのです！

一度、指定されたドメインのkintoneサーバ上にファイルをアップロードしてから、その時に発行されたファイルキーを使ってアプリに添付する、という少し二度手間感が否めない仕様となっています。

ここさえ理解できれば、処理自体はあまり複雑ではありません。

処理１．ファイルをサーバにアップする（uploadFile）

const uploadFile = async (filePath) => {
 const url = `https://${DOMAIN}/k/v1/file.json`;
 const form = new formdata();
 form.append('file', fs.readFileSync(filePath), path.basename(filePath));
 const config = {
   headers: {
     'X-Cybozu-API-Token': APIToken,
     'Content-Type': form.getHeaders()['content-type']
   }
 };
 try {
   // kintone REST APIを実行する際に、axiosを利用
   return await axios.post(url, form, config);
 } catch (err) {
   console.log('uploadFile err', err);
   throw new Error(err);
 }            
}

この処理を実行すると下記のようなファイルキーが生成され、レスポンスとして返ってきます。

{
   "fileKey": "c15b3870-7505-4ab6-9d8d-b9bdbc74f5d6"
}

この値を添付先のフィールドの”fileKey”に入れてあげれば、ファイルは添付されます。

処理２．kintoneアプリに添付する（updateAttachFile）

async function updateAttachFile() {
 var fileName = './test.docx';
 // uploadFile()の処理結果を待つ
 var result = await uploadFile(fileName);
 // ファイルキーを取得
 var fileKey = result.data.fileKey;
 var kintoneAuth = new kintone.Auth();
 kintoneAuth.setApiToken(APIToken);
 var kintoneConnection = new kintone.Connection(DOMAIN, kintoneAuth);
 var kintoneRecord = new kintone.Record(kintoneConnection);
 // フィールドコード：fileの場合
 var record = {
   file: {
     value: [{
       fileKey: fileKey // ファイルキー
     }]
   }
 };
 // レコードを指定して更新(ファイル添付)
 kintoneRecord.updateRecordByID(appID, recordId, record).then((rsp) => {
   console.log(rsp);
 }).catch((err) => {
   console.log(err);
 });
}

今回は、async/await（こちらを参考）を使って実装しています。

updateAttachFileをasync functionとすることで、uploadFileの処理が完了してから実行されるようにしています。

fileKeyさえ取得できてしまえば、あとは基本的なPUTの記述と同様です。

本記事のまとめ

本記事では、wordファイルをkintoneアプリに添付する方法についてまとめました。大まかな処理の流れは、

1. ファイルをサーバにアップする
2. kintoneアプリに添付する

この2つですので、そこさえ理解できれば難しくありません。ただ、実はkintoneでのファイルの取り扱いは、結構混乱するところだと思います。

今回は触れていませんが、kintoneにおけるファイルキーは2種類あります。それについては、また別途解説したいと思います！

参考：kintoneアプリにword帳票出力機能を自前で実装してみる！（前編）