PleasanterとQR読取りを組み合わせた物品情報管理 #プリザンター – Qiita

// html5Qrcode の初期設定
const config = {fps: 2, qrbox: { width: 250, height: 250} }; // スキャン範囲のサイズ
let html5Qrcode = null;

//QRコード読み取り成功時の処理
function qrCodeSuccessCallback(decodedText, decodedResult) {
    //URLから対象のレコードIDを抽出
    const idMatch = decodedText.match(/\/items\/(\d+)/);
    if (idMatch && idMatch[1]) {
        const extractedId = idMatch[1];
        checkRecordId(extractedId);
    } else {
        $p.clearMessage();
        $p.setMessage('#Message', JSON.stringify({
            Css: 'alert-warning', 
            Text: `読取り結果から有効なレコードIDを抽出できませんでした。${decodedText}`
        }));
    }
}

//抽出したIDでレコード存在確認、物品マスタに存在する有効なレコードIDであればClassBにセット
function checkRecordId(recordId) {
    $p.apiGet({
        id: recordId,
        done: function (data) {
            if (data?.Response?.Data?.length > 0) {
                if ($p.getControl("ClassB").val() !== recordId) {
                    $p.set($p.getControl("ClassB"), recordId);
                    $p.clearMessage();
                    $p.setMessage('#Message', JSON.stringify({ 
                        Css: 'alert-success', 
                        Text: `物品マスタ情報 (ID: ${recordId}) を取得しました。`
                    }));
                } 
            } else {
                $p.clearMessage();
                $p.setMessage('#Message', JSON.stringify({ 
                    Css: 'alert-warning', 
                    Text: `指定ID (${recordId}) の物品マスタレコードが見つかりませんでした。`
                }));
            }
        },
        fail: function (xhr, status, error) {
            $p.clearMessage();
            $p.setMessage('#Message', JSON.stringify({ 
                Css: 'alert-error', 
                Text: `物品マスタからの情報取得に失敗しました。 ${status} ${error}`
            }));
        }
    });
}

//スキャナーUI要素を表示し、スキャンを開始
async function startScanner() {
    try {
        // カメラアクセスを要求 (facingMode を指定して背面カメラへのアクセスを試みる)
        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
    } catch (permissionError) {
        // getUserMedia が失敗した場合 (権限がない、カメラがない、その他のエラー)
        $p.clearMessage();
        $p.setMessage('#Message', JSON.stringify({ 
            Css: 'alert-error', 
            Text: `カメラの起動に失敗しました。(${permissionError.name})` 
        }));
        // 権限がない、またはエラーが発生した場合はスキャナーを開始せずに終了
        return;
    }

    // Reader Divを表示
    $(`#reader`).show();

    // 編集モードでボタンから開始した場合、ボタンを非表示
    if ($p.action() === 'edit') {
        $('#action-button').hide();
    }
    // スキャン開始
    try {
        await html5Qrcode.start({ facingMode: "environment" },config,qrCodeSuccessCallback);
    } catch (error) {
        $p.clearMessage();
        $p.setMessage('#Message', JSON.stringify({
            Css: 'alert-error',
            Text: 'カメラを開始できませんでした。ブラウザのカメラ権限を確認してください。' 
        }));
        //失敗した場合、Readerを隠し、編集モードならボタンを再表示 
        $('#reader').hide();
        if ($p.action() === 'edit') {
            $('#action-button').show();
        }
    }
}

//「編集画面」を読み込んだときに実行するメソッド
$p.events.on_editor_load = function () {

    // 読み取り領域のDivをClassB要素のあとに非表示状態で追加
    $('#Results_ClassB').after('').next('#reader').hide();

    // Html5Qrcode オブジェクトを初期化
    if (!html5Qrcode) {
        try {
            // Html5Qrcodeを初期化
            html5Qrcode = new Html5Qrcode("reader", {formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE],verbose: false});
        } catch (initError) {

             $p.clearMessage();
             $p.setMessage('#Message', JSON.stringify({ 
                Css: 'alert-danger', 
                Text: 'QRコードリーダーの準備に失敗しました。'
            }));
             if ($('#action-button').length > 0) {
                 $('#action-button').button("disable");
             }
             return; // 初期化失敗時は以降の処理を中断
        }
    }

    if ($p.action() === 'new') {
        // 新規作成時: 自動でスキャン開始
        startScanner();
    }else{
        // 編集時: ボタン準備
        if ($('#action-button').length === 0) {
            const qrButton = $('QR読取')
                .button({ icon: 'ui-icon-video' })
                .on('click.qrscan', startScanner); // クリックでスキャン開始
            $('#Results_ClassB').after(qrButton);
        }
        // 初期状態ではReaderは非表示
        $('#reader').hide();
        // ボタン表示
        $('#action-button').show();
    }

};