今回は、kintoneのレコード詳細画面にQRコードを表示するカスタマイズです。
webpackを使用します。
アプリの準備
| フィールド種類 | フィールドコード | 備考 |
|---|---|---|
| 文字列(1行) | url | |
| スペース | spQR |
コーディングまでの準備
webpackどうやるんだっけ・・・というところはこちらを参考にしました。
私の手順（参考までに）
QRコードアプリ用のディレクトリを作成する。
ディレクトリ内で
npm init -yとすると
package.jsonができる。
webpackとwebpack-cliをインストールする
npm install --save-dev webpack webpack-cli
node-qrcodeをインストールする
npm install --save qrcode
package.jsonのscriptsフィールドにwebpackコマンドを追加する
"scripts": {
"build": "webpack"
},
webpack の設定ファイル（webpack.config.js）を作成する
module.exports = {
// モード
mode: "production",
};
srcフォルダを作って中にindex.jsファイルを作成してkintoneのコードを書く
詳細は後述します。
(() => {
"use strict";
// 保存
kintone.events.on(["app.record.detail.show"], (event) => {
//コードを書くところ
});
return event;
});
})();
ビルドする
npm run build
main.jsをアップロード
distディレクトリ内にmain.jsが生成されるので、アプリのJavaScript / CSSでカスタマイズにアップロードします。
JavaScript
というわけで、srcディレクトリ内のJavaScriptの中身を書いていきます。
文字列(1行)の内容をQRコードにしてスペースフィールドに表示します。
↓使用したライブラリはこちらです
https://github.com/soldair/node-qrcode
const QRCode = require("qrcode");
QRCode.toDataURL(event.record.url.value, function (err, url) {
let sp = kintone.app.record.getSpaceElement("spQR");
let img = document.createElement("img");
img.setAttribute("src", url);
sp.appendChild(img);
});
JavaScriptができたら、ビルドしてアプリにアップロードしてくださいね。
動作確認＆まとめ
文字列(1行)の値をQRコードにすることができました。（確認してみてね）
今回はwebpackを使用し、手順もざっくりでしたが、やってみたい！という場合は参考ページで勉強してからやってみてくださいね！
では！