PR

Zxingを使ってWEBページで1次元バーコードを読み込むHPを作成する手順

プログラミング

Zxingを活用してWEBページ上で1次元バーコードを読み取る機能を実装する方法について解説します。本記事では、必要な準備、コードの実装、そして最終的な完成までの流れを詳しく説明します。

参考URL

バーコード読み取り

1. 準備

必要なツールと環境
  • WordPress環境
    • 必要に応じてプラグインをインストールできる管理者権限が必要です。
  • Zxingライブラリ
    • Zxingは、バーコードの生成とスキャンを可能にするオープンソースライブラリです。
  • SSL証明書
    • Webカメラを利用する場合、HTTPSが必須です。
必要なスクリプトとライブラリの確認

以下のライブラリを利用します。

  1. ZxingのJavaScriptポート
  2. HTML5の<video>要素
  3. jQuery(WordPressの標準で利用可能)

2. 実装手順

(1) Zxingライブラリのインストール
  1. ライブラリの取得
    • Zxing GitHubページからソースコードをダウンロードします。
    • 必要なファイルはzxing.min.jsです。
  2. ファイルのアップロード
    • zxing.min.jsをWordPressのテーマフォルダ内の適切な場所(例: jsフォルダ)にアップロードします。
(2) HTMLの構造を準備する

以下のようなシンプルなHTMLを用意します。

<div id="barcode-scanner">
  <video id="video" width="300" height="200" autoplay></video>
  <button id="start-scan">バーコードをスキャン</button>
  <p id="barcode-result">スキャン結果: <span></span></p>
</div>Code language: HTML, XML (xml)
(3) JavaScriptの実装

WordPressのfunctions.phpで以下のようにスクリプトを読み込みます。

function enqueue_barcode_scripts() {
    wp_enqueue_script('zxing', get_template_directory_uri() . '/js/zxing.min.js', [], null, true);
    wp_enqueue_script('barcode-scanner', get_template_directory_uri() . '/js/barcode-scanner.js', ['zxing'], null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_barcode_scripts');Code language: JavaScript (javascript)

次に、barcode-scanner.jsの内容を以下のように記述します。

window.onload = function() {
  const codeReader = new ZXing.BrowserBarcodeReader();
  const videoElement = document.getElementById('video');
  const resultElement = document.getElementById('barcode-result').querySelector('span');

  document.getElementById('start-scan').addEventListener('click', async () => {
    try {
      const devices = await codeReader.listVideoInputDevices();
      if (devices.length === 0) {
        alert('カメラが見つかりません');
        return;
      }
      await codeReader.decodeOnceFromVideoDevice(devices[0].deviceId, 'video');
      codeReader.decodeFromVideoDevice(null, 'video', (result, error) => {
        if (result) {
          resultElement.textContent = result.text;
        } else if (error) {
          console.error(error);
        }
      });
    } catch (error) {
      console.error('エラーが発生しました: ', error);
    }
  });
};Code language: JavaScript (javascript)
(4) CSSでデザインを整える

基本的なデザインをCSSで適用します。

#barcode-scanner {
  text-align: center;
  margin: 20px;
}
#barcode-scanner video {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
#barcode-scanner button {
  padding: 10px 20px;
  background-color: #0073aa;
  color: white;
  border: none;
  cursor: pointer;
}
#barcode-scanner button:hover {
  background-color: #005177;
}
#barcode-scanner p {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}Code language: CSS (css)

3. テストとデプロイ

(1) HTTPS環境の確認
  • Webカメラを利用するには、HTTPSでサイトが動作している必要があります。
  • Let’s Encryptなどを使用してSSL証明書を無料で導入できます。
(2) 動作テスト
  1. Webページを開き、カメラへのアクセス権を許可します。
  2. 1次元バーコードをカメラに向けてスキャンを試してください。
  3. スキャン結果が画面に正しく表示されることを確認します。
(3) 問題の解決
  • カメラが動作しない場合:
    • ブラウザがサポートしているか確認。
    • HTTPS環境で動作しているか確認。
  • スキャン結果が空の場合:
    • 照明の条件を改善してください。
    • カメラの解像度を調整します。

4. まとめ

Zxingを利用して1次元バーコードを読み取る機能をWordPressサイトに実装するのは、比較的簡単ですが、いくつかの重要なポイントに注意が必要です。特に、HTTPS環境での動作確認やブラウザの互換性をしっかりチェックしましょう。

これで、Zxingを使ったバーコードスキャナー機能を持つWEBページの作成手順が完了です。これを活用して、業務効率化やユーザー体験の向上を図ってください!