はじめに

在庫管理システムをkintoneで構築しており、
レコードの情報をバーコードで読み取る必要があった。

※セットアップについては、公式を確認下さい。

アプリの作成、設定について

アプリを作成し、設定画面のフォームタブを選択し、スペースを設置してください。

その後、設置したスペースの設定で、要素IDを設定できるので、
ここでは、「barcode」を設定してください。

JavaScript作成

レコード詳細画面で、レコード番号のバーコードを表示するJavaScriptを作成します。

(function($) {
"use strict";
kintone.events.on('app.record.detail.show', function(event) {
var recordNo=kintone.app.record.getId().toString(10);
$(kintone.app.record.getSpaceElement("barcode")).barcode(recordNo, "code39");
});})(jQuery);

JavaScriptの設置

barcode-coder.comからダウンロードする。
Download barcode jQuery pluginと書いているところです。

CSSでカスタマイズ画面で、下記4点を追加

https://js.cybozu.com/jquery/2.2.4/jquery.min.js)
jquery-barcode.js(ダウンロードしたファイル)
jquery-barcode.min.js(ダウンロードしたファイル)
先程作成したsample.js

確認

レコードの詳細画面を表示すると、無事バーコードが表示されていることが確認できると思います。

これを印刷して、現場にあるバーコードリーダを使用する予定です！

参考サイト
 https://developer.cybozu.io/hc/ja/community/posts/115000155246-%E4%BD%9C%E6%A5%AD%E5%A0%B1%E5%91%8A%E6%9B%B8%E3%81%AB%E3%83%90%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%9F%E3%81%84