JANスキャナー (インライン検索)
バーコードを探しています...
</div> <script> // JANコード（日本のバーコードは基本45か49から始まる13桁、または8桁）をチェックする関数 function isValidJAN(code) { // 数字のみ、かつ8桁または13桁であるか const isLengthValid = (code.length === 8 || code.length === 13); const isNumeric = /^\d+$/.test(code); // 日本の国コード（45または49から始まるか）を厳密にチェックする場合は以下も有効 // const isJapan = code.startsWith('45') || code.startsWith('49'); return isLengthValid && isNumeric; } function startScanner() { document.getElementById('result').innerText = "バーコードを探しています..."; document.getElementById('action-space').innerHTML = ""; document.getElementById('search-frame').style.display = "none"; Quagga.init({ inputStream: { name: "Live", type: "LiveStream", target: document.querySelector('#interactive'), constraints: { width: 640, height: 480, facingMode: "environment" }, }, decoder: { readers: ["ean_reader", "ean_8_reader"] } }, function(err) { if (err) { document.getElementById('result').innerText = "カメラエラー"; return; } Quagga.start(); }); } // 読み取りイベント Quagga.onDetected(function(data) { const code = data.codeResult.code; // JANコードの規格に合っているか検証 if (isValidJAN(code)) { Quagga.stop(); // 正しいJANなら停止 document.getElementById('result').innerText = "JANコードを検出: " + code; // 【ページを切り替えない対策】 // 1. ページ内に設置したiframeで検索を開く（※一部制限のない検索エンジン用） // ※Googleはiframeを禁止しているため、代わりに直接別窓を開かない「検索リンク」をその場に生成するか、対応サイトを表示します。 const searchUrl = "https://www.google.com/search?q=" + encodeURIComponent(code); const actionSpace = document.getElementById('action-space'); actionSpace.innerHTML = ` <a href="${searchUrl}" target="_blank" class="btn">Googleで検索結果を見る</a> <button class="btn" style="background:#6c757d;" onclick="startScanner()">もう一度スキャン</button> `; // もしiframe表示が許可されているサイト（独自のAPIやショップ検索など）を使う場合は以下を有効化 /* const iframe = document.getElementById('search-frame'); iframe.src = "https://www.search-engine-allowed.com?q=" + code; iframe.style.display = "block"; */ } else { // JANじゃない（誤認識、または規格外）なら、stopせずそのままスキャンを継続（自動で1からやり直し） console.log("JANコードではないためスキップ: " + code); } }); window.onload = startScanner; </script> </body> </html> <script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>