現在、多くの業務アプリケーションでは ASP.NET 環境で QR コードやバーコードをスキャン するニーズが高まっています。チケット認証や決済、在庫管理などで、ASP.NET の QR コードスキャナーやバーコード読み取り機能を導入すると、Web/エンタープライズシステムの効率と精度が大きく向上します。 本チュートリアルでは、Spire.Barcode for .NET を使用し、C# で ASP.NET にバーコードスキャン機能を実装する手順を解説します。画像アップロードから QR/各種バーコードの読み取りまでをカバーし、高い認識精度と既存プロジェクトへの容易な統合を実現します。 ガイド構成 1. プロジェクトの準備 2. ASP.NETでC#によるQRコード・バーコードスキャン機能の実装 3. テストとトラブルシューティング 4. 他の .NET アプリケーションへの応用 5. まとめ 1. プロジェクトの準備 ステップ 1:プロジェクトの作成 スキャン機能の土台となる ASP.NET Core Razor Pages プロジェクトを作成します。以下のコマンド(または Visual Studio での作成)を使用します。 dotnet new webapp -n QrBarcodeScanner cd QrBarcodeScanner ステップ 2:Spire.Barcode for .NET のインストール 幅広いバーコード形式をデコードできる Spire.Barcode for .NET の NuGet パッケージをインストールします。NuGet パッケージ マネージャーから検索するか、次のコマンドを実行します。 dotnet add package Spire.Barcode Spire.Barcode for .NET は、QR コードに加え Code128、EAN-13、Code39 など多数の形式をサポートします。追加の画像処理ライブラリは不要で、ASP.NET Core へ簡単に組み込めます。対応形式の一覧は BarcodeType API リファレンス を参照してください。 小規模用途には Free Spire.Barcode for .NET も利用できます。 2. ASP.NETでC#によるQRコード・バーコードスキャン機能の実装 信頼性の高いスキャン機能は、次の 2 要素で構成します。 アップロード画像を処理・デコードする バックエンドロジック ユーザーが画像をアップロードできる シンプルな Web インターフェイス まずバックエンド実装でスキャン処理を確実に動かし、その後最小構成の Razor Pages フロントエンドに接続します。 バックエンド:Spire.Barcode によるスキャン処理 アップロードファイルをメモリに読み込み、Spire.Barcode で処理します(MemoryStream またはファイルパスのいずれも可)。スキャン結果は配列で返却されます。形式ごとの分岐は不要で、QR/各種バーコードを一括認識できます。 Index.cshtml.cs 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) { using (var ms = new MemoryStream()) { // ファイルをメモリに読み込む Upload.CopyTo(ms); // HTML <img> 表示用に Base64 へ変換 UploadedImageBase64 = "data:" + Upload.ContentType + ";base64," + Convert.ToBase64String(ms.ToArray()); // ストリーム位置を先頭に戻す ms.Position = 0; // バーコード/QR コードをスキャン try { string[] scanned = BarcodeScanner.Scan(ms); Result = scanned != null && scanned.Length > 0 ? string.Join(", ", scanned) : "コードが検出されませんでした。"; } catch (Exception ex) { Result = "スキャン中にエラーが発生しました: " + ex.Message; } } } } } 主なクラスとメソッド BarcodeScanner:QR/バーコードをデコードする静的クラス BarcodeScanner.Scan(Stream imageStream):ストリームから直接スキャンし、検出文字列の配列を返します(1 枚の画像内に複数コードがある場合も対応)。 補助メソッド(任意) BarcodeScanner.Scan(string imagePath):ファイルパスでスキャンします。 BarcodeScanner.ScanInfo(string imagePath):種類・位置・データなど追加情報を含む結果を取得します。 要件に応じて使い分けできます。 フロントエンド:アップロード&結果表示 UI 以下は、画像をアップロードしてスキャン結果を表示する簡易 UI です。アップロード後にプレビューと認識結果を表示し、ワンクリックでコピーできます。検証を素早く行えるよう、最低限のスタイルにしています。 Index.cshtml @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 style="font-size:1.5rem;">QR & バーコードスキャナー</h2> <form method="post" enctype="multipart/form-data" id="uploadForm"> <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 コードと Code128 バーコードの両方を認識した後の画面イメージです。結果表示とワンクリックコピーが利用できます。 この ASP.NET Core アプリは、アップロード画像から QR コードおよび各種バーコードをスキャンできます。コード生成が必要な場合は、ASP.NET Core で QR コードを生成する方法 も参照してください。 3. テストとトラブルシューティング アプリを実行したら、次のような画像で動作確認を行います。 URL またはプレーンテキストを含む QR コード画像 Code128 や EAN-13 などの バーコード画像 認識がうまくいかない場合のチェックポイント: コントラストが高く、歪みの少ない画像を使用します。 解像度は極端に大きすぎ/小さすぎないものにします。 JPG / PNG / BMP など複数形式で試します。 反射・映り込み・暗所などを避けます。 1 枚の画像に複数コードがある場合は、各コードの間隔を十分に空けて認識精度を高めます。 回帰テスト向けに、サンプルの QR/バーコード画像ライブラリを小規模に用意しておくと便利です。 4. 他の .NET アプリケーションへの応用 本チュートリアルのスキャンロジックは アプリ種別に依存しません。画像の受け渡し方法だけを変えれば、以下のような環境でも同じ BarcodeScanner.Scan() を再利用できます。 ASP.NET Core MVC コントローラー/Web API エンドポイント WinForms / WPF などのデスクトップアプリ コンソールユーティリティ(バッチ処理) 例:最小構成の ASP.NET Core Web API HTTP POST で画像ファイルを受け取り、JSON で結果を返します。 [ApiController] [Route("api/[controller]")] public class ScanController : ControllerBase { [HttpPost] public IActionResult Scan(IFormFile file) { if (file == null) return BadRequest("No file uploaded"); using var ms = new MemoryStream(); file.CopyTo(ms); ms.Position = 0; string[] results = BarcodeScanner.Scan(ms); return Ok(results); } } 例:コンソールアプリ ローカル画像をスキャンして結果を出力します。 string[] result = BarcodeScanner.Scan(@"C:pathtoimage.png"); Console.WriteLine(string.Join(", ", result)); この柔軟性により、既存/新規の .NET プロジェクトへ QR/バーコードスキャンを素早く追加できます。 5. まとめ 本記事では、Spire.Barcode for .NET を用いて ASP.NET Core に QR/バーコードスキャン機能を実装する手順 を解説しました。画像を受け取り、デコードし、結果を表示するまでの流れをシンプルに構築でき、EC、チケット、ドキュメント認証など多様な業務シナリオに応用できます。 高度な要件に対しては、認識処理のカスタマイズや複数画像形式・バーコード種類への詳細対応など、追加機能も利用可能です。すべての高度機能を解放するには、無償評価ライセンスの申請 を行ってください。 今すぐ Spire.Barcode for .NET をダウンロード して、ASP.NET 向けのバーコードスキャン機能を実装しましょう。