ASP.NET で QR コードとバーコードを簡単にスキャンする方法

現代のアプリケーションでは、QR コードやバーコードは重要な情報伝達手段として広く利用されています。オンライン決済、物流追跡、チケット認証など、さまざまな場面で効率的なスキャン機能が求められます。Web アプリでは、ASP.NET Core のファイルアップロード機能と Free Spire.Barcode for .NET の認識機能を組み合わせることで、軽量で使いやすいスキャンツールを実装できます。

本記事では、Razor Pages プロジェクトを構築し、画像をアップロードすると即座に QR コードやバーコードを解析し、ブラウザ上で結果を表示する方法を紹介します。画像は一時ファイルに保存せず、メモリストリームを利用して直接スキャンするため、パフォーマンスとセキュリティが向上します。

プロジェクトの準備と依存パッケージのインストール

まず、Razor Pages アプリを新規作成します：

dotnet new webapp -n BarcodeReaderApp

次に、NuGet から Free Spire.Barcode for .NET をインストールします：

dotnet add package FreeSpire.Barcode

インストールが完了したら、BarcodeScanner クラスを使用して QR コードやバーコードの認識を行います。

バックエンドでのメモリストリームによるスキャン実装

IndexModel の OnPost() メソッドでユーザーがアップロードしたファイルを受け取り、IFormFile.OpenReadStream() で取得したストリームを直接 BarcodeScanner.Scan() に渡してスキャンします。これにより、一時ファイルを作成せずに解析が可能です。また、画像を Base64 に変換して前端に送信し、プレビュー表示も可能です。

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Spire.Barcode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile Upload { get; set; }  // アップロードされたファイル

    public string Result { get; set; }     // スキャン結果
    public string UploadedImageBase64 { get; set; } // プレビュー用 Base64

    public void OnPost()
    {
        if (Upload != null && Upload.Length > 0)
        {
            try
            {
                // Base64 に変換して前端でプレビュー表示
                using (var ms = new MemoryStream())
                {
                    Upload.CopyTo(ms);
                    UploadedImageBase64 = "data:" + Upload.ContentType + ";base64," +
                                          Convert.ToBase64String(ms.ToArray());

                    // メモリストリームを直接スキャン
                    ms.Position = 0; // ストリーム位置をリセット
                    string[] scanned = BarcodeScanner.Scan(ms);

                    Result = scanned != null && scanned.Length > 0
                        ? string.Join(", ", scanned)
                        : "QRコードまたはバーコードが検出されませんでした。";
                }
            }
            catch (Exception ex)
            {
                Result = "スキャンに失敗しました：" + ex.Message;
            }
        }
    }
}

補足：

• Scan() メソッドは Stream だけでなく、ファイルパス文字列も受け付けます。
• より詳細な情報（QR コードやバーコードの種類、画像上の位置など）が必要な場合は、ScanInfo() メソッドを使用できます。
• Scan() および ScanInfo() は、画像内のすべての QR コードやバーコードをスキャンし、結果を返します。

この方法は一時ファイルを保存する方式と比較して、IO 負荷を減らせるだけでなく、ファイルの削除処理も不要なため、高負荷やクラウド環境での利用に適しています。

フロントエンドページとインタラクション

Razor Pages のテンプレートを使用し、ファイルを選択すると自動でフォームを送信し、画像プレビューとスキャン結果を表示します。結果はコピーも可能です。

@page
@model IndexModel
@{
    ViewData["Title"] = "QRコード・バーコードスキャナー";
}

<div style="max-width:420px;margin:40px auto;padding:20px;border:1px solid #ccc;border-radius:8px;background:#f9f9f9;">
    <h2>QRコード・バーコードスキャナー</h2>
    <form method="post" enctype="multipart/form-data">
        <input type="file" name="upload" accept="image/*" required onchange="this.form.submit()" style="margin:10px 0;" />
    </form>

    @if (!string.IsNullOrEmpty(Model.UploadedImageBase64))
    {
        <div style="margin-top:15px;text-align:center;">
            <img src="@Model.UploadedImageBase64" style="width:300px;height:300px;object-fit:contain;border:1px solid #ddd;background:#fff;" />
        </div>
    }

    @if (!string.IsNullOrEmpty(Model.Result))
    {
        <div style="margin-top:15px;padding:10px;background:#e8f5e9;border-radius:6px;">
            <b>スキャン結果：</b>
            <p id="scanText">@Model.Result</p>
            <button type="button" onclick="navigator.clipboard.writeText(scanText.innerText)" style="background:#28a745;color:#fff;padding:6px 10px;border:none;border-radius:4px;">コピー</button>
        </div>
    }
</div>

ページの特徴：

• ファイルを選択すると自動で解析を開始。
• アップロード画像をリアルタイムでプレビュー表示。
• スキャン結果はコピー可能で、他のアプリケーションに簡単に貼り付けられます。

ページおよびQRコードの認識効果：

まとめ

本記事では、ASP.NET Core Razor Pages プロジェクトで QR コードやバーコードをスキャンする方法を紹介しました。メモリストリームを使った直接スキャンにより、一時ファイルを作成する手間を省き、パフォーマンスと安全性を向上させています。Spire.Barcode for .NET の多形式対応に加え、Scan() と ScanInfo() の柔軟なインターフェースを活用することで、画像内のすべてのバーコードをスキャンし、必要に応じて種類や位置などの追加情報を取得できます。これにより、EC 注文処理、物流追跡、チケット認証、企業内ドキュメント管理など、さまざまな業務シナリオで効率的にスキャン処理を導入可能です。

より多くのQRコードやバーコードの操作テクニックについては、Spire.Barcode for .NETの公式チュートリアルをご確認ください。