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

Updated: 2026年3月2日

はじめに

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

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

ASP.NET Core でバーコードを読み取る & スキャンする方法

C#ライブラリをインストールしてバーコードを読み取り、スキャンします
新しい ASP.NET Core Razor Pages プロジェクトを作成します。
バーコード画像を受け取るためのファイルアップロードフォームをデザインします。
アップロードされた画像にバーコードをスキャンするために Read メソッドを使用します。
ページにデコードされたバーコードの値を表示します。

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

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

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

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

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

前提条件

Visual Studio 2022 またはそれ以降（または .NET をサポートする任意の IDE）
.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に移動し、実行します。

PM > Install-Package BarCode

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 バーコードスキャナー - URL をエンコードしたサンプル QR コードの入力

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メソッドでアップロードされたファイルを処理します。アップロードされた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

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

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

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

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

ASP.NET Core バーコードスキャナー - バーコードのアップロードと読み取りのデモンストレーション

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

Base64 画像データの処理

画像データをbase64文字列として受信するアプリケーション（例えば、ウェブカメラキャプチャやJavaScriptのキャンバスから）では、同じ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

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

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

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

IronBarcodeはサーバー側でバーコードを生成することもできます。同じアプリケーションに生成エンドポイントを追加するのは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

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

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

ASP.NET Core バーコードスキャナー - サーバーで生成された QR コードの出力

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 のチュートリアルをさらに入手するには、バーコード読み取りチュートリアルを参照してください。

すばやく始めるために、完全なBarcodeWebAppプロジェクトをダウンロードし、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# アプリケーションでのバーコードスキャンにおいて効率的な選択です。

What method does IronBarcode provide to read barcodes from byte arrays?

IronBarcode provides the BarcodeReader.Read method to process images and read barcodes directly from byte arrays.

Curtis Chau

今すぐエンジニアリングチームとチャット

テクニカルライター

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

...

詳しく読む