ASP.NET Core バーコードスキャナー

This article was translated from English: Does it need improvement?
Translated
View the article in English

はじめに

ASP.NET Core は、モダンなウェブアプリケーションを構築するためのクロスプラットフォームフレームワークです。 その Razor ページモデルは、HTTP リクエストを処理するためのページベースのアプローチを提供し、サーバー側のバーコード処理に適しています。 IronBarcode を使用すると、アップロードされた画像を IFormFile オブジェクトとして受け取り、バイト配列に変換し、ディスクに一時ファイルを書き込むことなく BARCODE リーダーに直接渡すことができます。

この記事では、IronBarcode を ASP.NET Core Razor Pages アプリケーションに統合し、アップロードされた画像からバーコードや QR コードをスキャンし、サーバーからバーコードを生成する方法を解説します。

IronBarcode: C# バーコードライブラリ

IronBarcode は、.NET アプリケーションでバーコードの読み取りと書き込みを行うための堅牢な API を提供します。 このライブラリは内部で画像処理を処理するため、開発者は別途画像処理ライブラリを用意することなく、生のバイトデータ、ファイルパス、またはストリームを BarcodeReader.Read メソッドに直接渡すことができます。 QR Code、Code 128、Code 39、PDF417、EAN など、多くのバーコード形式をサポートしています。

ウェブアプリケーション向けの IronBarcode は、完全にメモリ内で画像を処理するため、特に便利です。 アップロードされたファイルをディスクに保存する必要がなく、デプロイが簡単になり、クリーンアップの負担が軽減されます。 このライブラリは BarcodeWriter.CreateBarcode によるBARCODE生成機能も備えており、読み取りと書き込みの両方に対応する単一の依存関係となります。

ASP.NET Core でバーコードスキャナーを構築する手順

ASP.NET Core Razor Pages と IronBarcode を使用して、ウェブベースのバーコードスキャナーを作成するために、次の手順に従ってください。

前提条件

  1. Visual Studio 2022 またはそれ以降(または .NET をサポートする任意の IDE)
  2. .NET 6.0 以上の SDK

プロジェクトを作成する

新しい ASP.NET Core Web App (Razor Pages) プロジェクトを作成します。 これは Visual Studio のプロジェクトウィザードを通じて、またはコマンドラインから実行できます。

dotnet new webapp -n BarcodeWebApp
dotnet new webapp -n BarcodeWebApp
SHELL

IronBarcode ライブラリのインストール

NuGet Package Manager Console を使用して IronBarcode ライブラリをインストールします。 Visual Studio で Tools > NuGet Package Manager > Package Manager Console に移動し、以下を実行してください:

Install-Package BarCode

あるいは、コマンドラインから dotnet add package BarCode を使用してインストールすることもできます。 最新バージョンは NuGet ウェブサイトで入手できます。

フロントエンド

フロントエンドはファイルアップロードフォームと結果表示エリアで構成されます。 このフォームでは、バイナリファイルのアップロード処理に enctype="multipart/form-data" を使用しています。 バーコードが検出されると、アップロードされた画像の下に成功のアラートで結果が表示されます。

Index.cshtml ファイルの内容を次の内容に置き換えます。

@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>
@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>
HTML

レイアウトはデフォルトの ASP.NET Core テンプレートに既に含まれている Bootstrap クラスを使用します。 フォームは Upload ページハンドラーに送信され、条件付きブロックによって、アップロードされた画像のプレビュー、デコード結果、またはエラーメッセージが表示されます。

サンプル入力バーコード

以下のサンプルバーコードを使用してスキャナーをテストできます。 各画像は異なる形式と値をエンコードしています。

ASP.NET Core Barcode Scanner - Sample QR Code input encoding a URL

QR Code にエンコードされた "https://ironsoftware.com"

ASP.NET Core Barcode Scanner - Sample Code 128 barcode input

Code 128バーコードは"IronBarcode-2026"をエンコードします

ASP.NET Core Barcode Scanner - Sample Code 39 barcode input

Code 39 にエンコードされた "HELLO123"

IronBarcode を使用したバーコードスキャン

サーバーサイドロジックは、OnPostUploadAsyncメソッド内でアップロードされたファイルを処理します。 アップロードされた IFormFile はバイト配列として読み込まれ、その配列が BarcodeReader.Read に直接渡されます。 これにより、テンポラリファイルを保存せずに、処理を完全にメモリ内で行います。

Index.cshtml.cs の内容を以下に置き換えます。

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}
Imports Microsoft.AspNetCore.Mvc
Imports Microsoft.AspNetCore.Mvc.RazorPages
Imports IronBarCode
Imports System.IO
Imports System.Threading.Tasks

Public Class IndexModel
    Inherits PageModel

    <BindProperty>
    Public Property UploadedFile As IFormFile

    Public Property BarcodeResult As String
    Public Property ErrorMessage As String
    Public Property ImageDataUrl As String

    Public Sub OnGet()
    End Sub

    Public Async Function OnPostUploadAsync() As Task(Of IActionResult)
        If UploadedFile Is Nothing OrElse UploadedFile.Length = 0 Then
            ErrorMessage = "Please select an image file."
            Return Page()
        End If

        Try
            Using ms As New MemoryStream()
                Await UploadedFile.CopyToAsync(ms)
                Dim imageBytes As Byte() = ms.ToArray()

                ' Store image as base64 for preview display
                Dim base64 As String = Convert.ToBase64String(imageBytes)
                ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}"

                ' Read barcode from uploaded image bytes
                Dim results = BarcodeReader.Read(imageBytes)

                If results IsNot Nothing AndAlso results.Count() > 0 Then
                    BarcodeResult = String.Join(vbLf, results.Select(Function(r) r.Value))
                Else
                    ErrorMessage = "No barcode detected in the uploaded image."
                End If
            End Using
        Catch ex As Exception
            ErrorMessage = $"Error processing image: {ex.Message}"
        End Try

        Return Page()
    End Function
End Class
$vbLabelText   $csharpLabel

上記のコードにおける重要な手順:

  1. アップロードの受信 - IFormFile[BindProperty] を通じてバインドされ、POST ハンドラーで受信されます。
  2. バイトへの変換 - ファイルは MemoryStream にコピーされ、バイト配列に変換されます。 これは、Webスキャナーで使用されたのと同じアプローチであり、base64文字列の代わりにASP.NET Coreの IFormFile に対応するように適応されています。
  3. BARCODE を読み取る - BarcodeReader.Read(imageBytes) は画像を処理し、検出されたすべての BARCODE を返します。
  4. 結果を表示する - 検出されたすべてのバーコードの値が結合され、UIに表示されます。

以下の GIF は、バーコードリーダーが動作しているシーンを示し、バーコード画像をアップロードして、デコードされた結果を表示します。

ASP.NET Core Barcode Scanner - Demonstration of uploading and reading a barcode

ASP.NET Core アプリケーションで、アップロードされた画像をスキャンするバーコードリーダー

Base64 画像データの処理

画像データを base64 文字列として受け取るアプリケーション(例:Web カメラのキャプチャや JavaScript の canvas など)の場合、同じ BarcodeReader.Read メソッドが、base64 からデコードされたバイト配列に対しても機能します。このパターンは、AJAX 経由で画像データを送信するシングルページアプリケーションで一般的です:

public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}
public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}
Public Function ReadBarCode(imageDataBase64 As String) As String
    ' Decode the base64 image data
    Dim splitObject = imageDataBase64.Split(","c)
    Dim imageByteData As Byte() = Convert.FromBase64String(
        If(splitObject.Length > 1, splitObject(1), splitObject(0)))

    ' Read barcode directly from byte array
    Dim results = BarcodeReader.Read(imageByteData)

    Return $"{DateTime.Now}: Barcode is ({results.First().Value})"
End Function
$vbLabelText   $csharpLabel

このアプローチでは、カンマで分割して実際のBase64ペイロードを取り出すことで、生のBase64形式とデータURI形式(例:data:image/png;base64,...)の両方を処理します。 このパターンを使用した完全な Blazor 実装については、Blazor インテグレーションガイドを参照してください。

サーバーでのバーコードの生成

IronBarcodeはサーバーサイドでのBARCODE生成も可能です。BarcodeWriter.CreateBarcodeを使用すれば、同じアプリケーションに生成エンドポイントを追加するのは簡単です:

public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}
public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}
Public Function OnPostGenerate() As IActionResult
    Dim barcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com", BarcodeEncoding.QRCode)
    Dim barcodeBytes As Byte() = barcode.ToPngBinaryData()

    Return File(barcodeBytes, "image/png", "generated-barcode.png")
End Function
$vbLabelText   $csharpLabel

生成されたバーコードはファイルのダウンロードとして返されます。 以下の画像は、OnPostGenerate ハンドラーによって生成されたQRコードの出力を示しています:

ASP.NET Core Barcode Scanner - Server-generated QR code output

BarcodeWriter.CreateBarcode でサーバー側で生成された QR コード

バーコード生成のオプションについては、バーコード画像生成チュートリアルバーコードスタイリングガイドを参照してください。

アプリケーションの実行

Visual Studio からまたはコマンドラインからプロジェクトを実行します。

dotnet run
dotnet run
SHELL

アプリケーションは、https://localhost:5001など)で起動します。 ホームページに移動して、バーコードスキャナーのインターフェースを確認します。

結論

この記事では、ASP.NET Core Razor Pages と IronBarcode を使用して、サーバー側でバーコードスキャナーを構築する方法を紹介しました。 同じアプローチは、ASP.NET Core MVC コントローラー、Web API エンドポイント、および Blazor サーバーアプリケーションとも連携し、画像データの受信方法を適応させることができます。 IronBarcode は画像処理を内部で処理するため、ウェブフレームワークに関係なく、統合には最小限のコードが必要です。

他の .NET プラットフォームでバーコードを読み取るためには、.NET MAUI バーコードスキャナーチュートリアルバーコードの読み取り方法ガイドを参照してください。 IronBarcode のチュートリアルをさらに入手するには、バーコード読み取りチュートリアルを参照してください。

To get started quickly, download the complete BarcodeWebApp project and run it with dotnet run.

IronBarcode は、開発および商業使用にライセンスされる必要があります。 ライセンスの詳細はこちらでご覧いただけます。

よくある質問

Razor Pages を使用して ASP.NET Core でバーコードスキャナーを実装するにはどうすればいいですか?

ASP.NET Core Razor Pages プロジェクトで IronBarcode を使用してバーコードスキャナーを実装できます。このライブラリを使用すると、QR コード、Code 128、Code 39 などのさまざまなバーコードフォーマットを読み取ることができ、画像をアップロードして BarcodeReader.Read で処理します。

IronBarcode を使用してどのような種類のバーコードを読むことができますか?

IronBarcode は QR コード、Code 128、Code 39 などの複数のバーコードフォーマットを読み取ることができ、さまざまなアプリケーションに対応します。

ASP.NET Core プロジェクトでバーコードスキャンのために画像をアップロードするにはどうすればよいですか?

ASP.NET Core プロジェクトでは、IFormFile を使用して画像をアップロードできます。IronBarcode はこれらの画像を処理して内部のバーコードを読み取ります。

IronBarcode で ASP.NET Core のサーバー側でバーコードを生成できますか?

はい、IronBarcode は ASP.NET Core において BarcodeWriter.CreateBarcode メソッドを使用してサーバーサイドでバーコードを生成することができ、動的にバーコードを作成して表示させます。

BarcodeReader.Read メソッドは何に使われますか?

IronBarcode の BarcodeReader.Read メソッドは画像からバーコードをデコードするために使用され、ASP.NET Core においてバーコードスキャナーを実装する上で重要な部分です。

ASP.NET Core で同じライブラリを使用して QR コードとバーコードの両方をスキャンすることは可能ですか?

はい、IronBarcode を使用すると、同じ ASP.NET Core アプリケーション内で QR コードとさまざまな他のバーコードフォーマットをスキャンすることができ、統一されたソリューションを提供します。

C# でのバーコードスキャンにおいて IronBarcode を使用する利点は何ですか?

IronBarcode は、簡単な統合、複数のバーコードフォーマットのサポート、堅牢なサーバー側バーコード生成機能を提供しており、C# アプリケーションでのバーコードスキャンにおいて効率的な選択です。

IronBarcode は 1D と 2D の両方のバーコードを処理できますか?

IronBarcode は 1D および 2D の両方のバーコードを処理でき、単純な製品ラベリングから複雑なデータエンコーディングまで幅広いアプリケーションに対応しています。

IronBarcode の商業用途のライセンスオプションはありますか?

Iron Software は、IronBarcode のために企業レベルのアプリケーションに適した商業ライセンスを含むさまざまなライセンスオプションを提供し、ビジネス要件への準拠を確保します。

IronBarcodeはバーコードのバッチ処理をサポートしていますか?

はい、IronBarcode はバッチ処理をサポートしており、開発者が単一の操作で複数のバーコードを生成または読み取ることを可能にし、大規模アプリケーションの効率を高めます。

カーティス・チャウ
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT(Internet of Things)への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか?
Nuget ダウンロード 2,240,258 | バージョン: 2026.5 just released
Still Scrolling Icon

まだスクロールしていますか?

すぐに証拠が欲しいですか? PM > Install-Package BarCode
サンプルを実行する 文字列が BarCode になるのを見る。