kintoneのレコード詳細画面にQRコードを表示する

今回は、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を使用し、手順もざっくりでしたが、やってみたい！という場合は参考ページで勉強してからやってみてくださいね！

では！