IRONBARCODEの使用

RazorバーコードジェネレーターWebアプリを作成する

Curtis Chau
Curtis Chau
Updated: 2026年5月11日

Razorバーコードジェネレーターは、開発者や企業がバーコードを簡単に作成できる便利なツールです。Webアプリケーションにバーコード生成を統合することで、機能性とユーザーエクスペリエンスが向上し、さまざまな種類のバーコードを生成することが簡単になります。在庫管理、資産追跡、チェックアウトプロセスの合理化など、Razorバーコードジェネレーターを利用することで、効率と正確性が大幅に向上します。 このチュートリアルではIronBarcodeを使用してバーコードジェネレーターを作成します。

IronBarcodeの紹介

IronBarcodeは、.NET Coreを使用する開発者にとって不可欠なツールであり、バーコード生成および読み取りのための使いやすいライブラリを提供します。 プロジェクトに簡単に統合できることが特長で、バーコードやQRコードを生成または解読するために最小限のコードが必要です。 これにより、Razorページを使用するWebアプリケーションからデスクトップおよびモバイルアプリケーションまで、バーコード生成および読み取り機能を備えたアプリケーションを強化するのに便利な選択肢となります。 幅広いバーコード形式のサポートにより、.NET MVC、Blazor WebAssemblyアプリ、Blazorアプリなどの多様なプロジェクト要件に対応し、開発者にとって信頼性の高い選択肢となります。

バーコードジェネレータを作成する手順

ステップ1: ASP.NET Core Webアプリケーション (Razor Pages) を作成する

Visual StudioでRazor Pagesを使用してASP.NET Core Webアプリケーションを作成するのは簡単です。 このガイドは、プロジェクトをゼロからセットアップするのを手助けします。

  1. Visual Studio を開く: Visual Studio を起動します。 スタートウィンドウで、"新しいプロジェクトを作成"を選択し、新しいWebアプリケーションの設定を始めます。 2.プロジェクトタイプの選択: "新しいプロジェクトの作成"ウィンドウで、プロジェクトテンプレートの一覧から"ASP.NET Core Web App"を選択します。 次に"次へ"をクリックして進みます。

新しいRazorプロジェクトを作成

3.プロジェクトの設定：新しいプロジェクトを設定するよう求められます。

  • Webアプリケーションの"プロジェクト名"を入力します。
  • プロジェクトファイルが保存されるコンピュータ上の適切な"場所"を選択します。
  • 任意で、"ソリューション名"を調整します。
  • "次へ"をクリックして続行します。

プロジェクト名、ソリューション名、ファイルパスを設定

4.プロジェクトの詳細を設定する： "追加情報"ウィンドウで、以下の点を確認してください。

  • 適切な.NETのバージョンを選択します。
  • "HTTPS用に構成"がチェックされていることを確認してください。
  • "作成"をクリックして、新しいRazor Pages Webアプリケーションの作成を開始します。

追加情報を設定

ステップ2：IronBarcodeライブラリをインストール

Visual StudioのNuGetパッケージマネージャーを使用してIronBarcodeをインストールするには：

  1. NuGetパッケージ マネージャーにアクセスします。ソリューション エクスプローラー ペインでプロジェクト名を右クリックします。 2. IronBarcodeを検索: "参照"タブで"IronBarcode"と入力してライブラリを探します。
  2. IronBarcodeを検索する： "参照"タブで"IronBarcode"と入力してライブラリを検索します。
  3. IronBarcodeをインストールします:"IronBarcode"を選択して"インストール"をクリックします。 依存関係とライセンス契約を確認し、進むために同意します。

NuGetパッケージマネージャーを通じてIronBarcodeをインストール

ステップ3: UIをデザインする

Indexページをindex.cshtmlファイルを編集して、カスタムスタイリングを適用します。

Indexページを強化するためにindex.cshtmlファイルを編集します。カスタムスタイリングを適用してください：

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    /* More CSS styles omitted for brevity */
</style>
HTML

ウェルカムメッセージの追加:

<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barcode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>
HTML

メインコンテンツの構造:

<div class="container">
    <div class="row justify-content-center">
        <!-- Form and Image Column will go here -->
    </div>
</div>
HTML

入力フォームのデザイン:

ユーザー入力を収集してバーコードを生成するフォームを含めます。

バーコード生成のためのユーザー入力を収集するフォームを含めます:

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <!-- Form elements omitted for brevity -->
        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>
HTML

画像列:

生成されたバーコードを表示およびダウンロードするために:

<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <!-- Image and download button elements omitted for brevity -->
    </div>
</div>
HTML

スクリプト:

jQueryを使用して入力およびダウンロードアクションを処理する機能を追加します:

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // jQuery code omitted for brevity
        });
    </script>
}
JavaScript

ステップ4: 機能するコードを書く

色を定義する:

あなたのindex.cshtmlファイルの先頭に以下を追加します：

using Color = IronSoftware.Drawing.Color;

バーコード色列挙体:

バーコードの利用可能な色を定義します:

public enum BarcodeColors
{
    AliceBlue,
    AntiqueWhite,
    Aqua,
    Aquamarine,
    Azure,
    Beige,
    Bisque
    // And others...
}

バーコードタイプ列挙体:

バーコードの利用可能なタイプを定義します:

public enum BarcodeTypes
{
    Aztec,
    Codabar,
    // Other barcode types...
}

アプリケーションをF5またはCtrl + F5を押して実行します。画面の指示に従いデータを入力し、バーコードタイプを選択し、寸法を設定し、バーコードを生成します。

ヘルパー関数:

列挙体を色とバーコードエンコードに変換します:

private Color EnumToColor(BarcodeColors colorEnum) { /* Conversion logic */ }
private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes barcodeType) { /* Encoding logic */ }

OnPostUpload関数:

バーコード生成のためのフォーム送信を処理します:

public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor)
{
    // Function logic...
}

レイアウト編集:

ミニマリストデザインのために\_Layout.cshtmlを編集します：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head contents omitted for brevity -->
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <!-- Scripts inclusion omitted for brevity -->
</body>
</html>
HTML

アプリケーションを実行する

F5またはCtrl + F5を押してアプリケーションを実行し、画面の指示に従ってデータ入力、バーコードの種類選択、寸法設定を行います。

アプリケーションを実行するには、F5またはCtrl + F5を押します。指示に従ってデータを入力し、バーコードタイプを選択し、寸法を設定し、バーコードを生成します。

出力されたWebアプリケーション

結論

バーコードジェネレーターWebアプリケーションは、カスタムバーコードを作成する簡単な方法を提供します。 IronBarcodeは無料試用が可能で、ライセンスは$999から始まります。 IronBarcodeは無料トライアルと共にこのアプリケーションを駆動し、ライセンスは$999から始まります。

QR コード画像を生成するには、 IronQR の使用を検討してください。

Curtis Chau
Curtis Chau
テクニカルライター

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

詳しく読む

関連する記事