1. IronBarcode
  2. 始める
  3. ASP.NET Coreバーコードスキャナー

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

カーティス・チャウ
カーティス・チャウ
更新日:
This article was translated from English: Does it need improvement?
Translated
View the article in English

はじめに

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

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

## ASP.NET Coreでのバーコードの読み取りとスキャン方法
  1. バーコードを読み取るためのC#ライブラリをインストール
  2. 新しいASP.NET Core Razor Pagesプロジェクトを作成する
  3. バーコード画像を受け付けるファイルアップロードフォームを設計する
  4. `Read`メソッドを使用して、アップロードされた画像からバーコードをスキャンする
  5. ページにデコードされたバーコード値を表示する

IronBarcode: C# Barcode Library

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

ウェブアプリケーションの場合、IronBarcodeは特に役立ちます。なぜなら、画像をメモリ内で完全に処理するからです。 アップロードされたファイルをディスクに保存する必要がないため、デプロイを簡素化し、クリーンアップの負担を軽減します。 このライブラリはまたBarcodeWriter.CreateBarcodeでバーコードを生成するため、読み書きの両方に対する単一の依存関係となります。

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

ASP.NET Core Razor PagesとIronBarcodeを使用して、ウェブベースのバーコードスキャナーを作成するための手順を以下に示します。

前提条件

  1. Visual Studio 2022以降（または.NETサポートがあるIDE）
  2. .NET 6.0以降のSDK

プロジェクトを作成する

新しいASP.NET Coreウェブアプリ（Razor Pages）プロジェクトを作成します。 これはVisual Studioのプロジェクトウィザードまたはコマンドラインから実行できます。

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

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

NuGetパッケージマネージャーコンソールを使用して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

"https://ironsoftware.com"をエンコードしたQRコード

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

"IRONBARCODE-2026"をエンコードしたCode 128バーコード

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

"HELLO123"をエンコードしたCode 39バーコード

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();
    }
}
$vbLabelText   $csharpLabel

上記のコードの主なステップ：

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

次のGIFは、バーコードリーダーが実際に動作している様子を、バーコード画像をアップロードし、デコードされた結果を表示する例です。

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

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

Base64画像データの処理

（例：WebカメラキャプチャやJavaScriptキャンバスからの）base64文字列として画像データを受け取るアプリケーションでは、同じ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})";
}
$vbLabelText   $csharpLabel

このアプローチは、生のbase64とデータURI形式（例：data:image/png;base64,...）の両方を扱い、カンマで分割して実際の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");
}
$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が画像処理を内部で行うため、どのウェブフレームワークであっても統合には最小限のコードで済みます。

他 for .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でバーコードスキャナーを実装するにはどうすればよいですか？

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

IronBarcodeを使用して読み取れるバーコードの種類は何ですか？

IronBarcodeは、QRコード、コード128、コード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#アプリケーションでのバーコードスキャンに効率的な選択となります。

カーティス・チャウ
カーティス・チャウ
  今すぐエンジニアリングチームとチャット
テクニカルライター

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

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

準備はできましたか？
Nuget ダウンロード 2,108,094 | バージョン: 2026.3 リリース
Still Scrolling Icon

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

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