ライブ環境でテストする
ウォーターマークなしで本番環境でテストしてください。
必要な場所でいつでも動作します。
完全に機能する製品
30日間のフル機能製品をお試しください。
数分で稼働させることができます。
24/5 テクニカルサポート
製品トライアル期間中にサポートエンジニアリングチームへの完全アクセス
IRONBARCODEの使用
Razorバーコード生成Webアプリの作成
公開済み 2024年4月7日
Razor Barcode Generatorは、開発者や企業にとってバーコード作成を簡素化する便利なツールです。バーコード生成をウェブアプリケーションに統合することで、機能性とユーザー体験が向上し、さまざまな種類のバーコードを簡単に生成できます。在庫管理、資産追跡、チェックアウトプロセスの効率化など、Razor Barcode Generatorを利用することで、効率と精度が大幅に向上します。 使用しますIronBarcodeこのバーコードジェネレーター作成チュートリアルでは。
IronBarcodeの紹介
IronBarcodeは、.NET Coreと共に作業する開発者にとって不可欠なツールであり、使いやすいライブラリを提供します。バーコード生成と読んでいます。 それはプロジェクトへの統合が簡単であり、バーコードやQRコードを生成または解読するために最小限のコードを必要とする点で際立っています。 これにより、IronBarcodeは、Razorページを使用するウェブアプリケーションからデスクトップおよびモバイルアプリケーションまで、バーコード生成とバーコード読取機能の両方を備えたアプリケーションを強化するための汎用的な選択肢となります。 広範囲な対応バーコードフォーマットにより、.NET MVC、Blazor WebAssemblyアプリ、およびBlazorアプリの多様なプロジェクト要件を満たすことができ、開発者にとって信頼できる選択肢となります。
バーコード生成器を作成する手順
手順1: ASP.NET Core Webアプリケーション（Razor Pages）の作成
このプロジェクトでは、BlazorアプリケーションまたはBlazorサーバーアプリケーションを選択できます。 しかし、このチュートリアルでは、ASP.NET Core Webアプリを使用します。(Razor Pages (レイザーページ)). Visual StudioでRazor Pagesを使用してASP.NET Core Webアプリを作成するには、いくつかの簡単な手順が必要です。 このガイドは、最初からプロジェクトを設定するのに役立ちます。
Visual Studioを開く: Visual Studioを起動します。 開始ウィンドウで、「Create a new project」を選択して、新しいウェブアプリケーションのセットアッププロセスを開始します。
プロジェクトタイプの選択: 「新しいプロジェクトの作成」ウィンドウで、プロジェクトタイプを選択する必要があります。 検索ボックスに「Razor」と入力してオプションを絞り込み、プロジェクトテンプレート一覧から「ASP.NET Core Web App」を選択します。 選択した後、「次へ」ボタンをクリックして進めてください。
プロジェクトを構成する: 新しいプロジェクトの構成を求められます。
- Webアプリケーションの「プロジェクト名」を入力してください。
- プロジェクトファイルが保存されるコンピュータ上の適切な「場所」を選択してください。
- 必要に応じて、「ソリューション名」をプロジェクト名とは異なる名前に変更します。
-
「次へ」をクリックして続行してください。
プロジェクトの詳細を設定: 「追加情報」ウィンドウ内で、以下を行ってください:
- ドロップダウンから適切なバージョンの.NETを選択してください。 最新の機能を利用するには、最新のバージョンを選択してください。
- 「HTTPS の構成」がチェックされていることを確認して、安全な HTTP 接続を有効にします。
-
「Create」をクリックして、新しいRazor Pages Webアプリケーションの作成を開始します。
ステップ2: IronBarcodeライブラリをインストールします
IronBarcodeをVisual StudioのNuGetパッケージマネージャーを使用してインストールするには、以下の手順に従ってください。これにより、ASP.NET Core Web Appや他の.NETプロジェクトにスムーズに統合できます。
NuGetパッケージマネージャーにアクセスするには：通常はVisual Studioインターフェースの右側にあるソリューションエクスプローラペインで、プロジェクト名を右クリックします。 表示されるコンテキストメニューから、「NuGet パッケージの管理...」を選択します。これにより、NuGet パッケージ マネージャー タブが開きます。
IronBarcodeを検索: NuGetパッケージマネージャーのタブで、「参照」タブをクリックしてオンラインでパッケージを検索します。検索ボックスに「IronBarcode」と入力して、IronBarcodeライブラリを見つけます。
IronBarcodeのインストール：検索結果から「IronBarcode」パッケージを見つけます。 同様の名前のパッケージがあるかもしれませんので、正しいパッケージを選択するようにしてください。 「IronBarcode」パッケージをクリックして選択し、「インストール」ボタンをクリックしてください。 Visual Studioは、IronBarcodeと一緒にインストールされる追加の依存関係を含む、変更内容を一覧表示するダイアログボックスを表示する場合があります。 変更を確認し、「OK」または「承諾」をクリックしてインストールを進めてください。 ライセンス契約が表示された場合、確認して同意してから続行してください。
ステップ 3: UIの設計
ウェブアプリケーションの視覚的な側面に焦点を当てる時が来ました。 インデックスページの強化から始めましょう。 これを行うには、プロジェクト内のindex.cshtmlファイルを開きます。 このファイルには、ホームページのマークアップが含まれています。 ページをより視覚的に魅力的で使いやすくするために、カスタムスタイリングを適用します。
デザイン用のCSS: 以下のCSSをindex.cshtmlファイルの<head>セクションに挿入するか、HTML内に直接埋め込む場合は<style>タグ内に挿入してください。
<style>
body {
font-family: 'Poppins', sans-serif;
}
.container {
padding-top: 30px;
max-width: 900px;
}
.row.justify-content-center {
margin-right: 0;
margin-left: 0;
}
.text-center {
text-align: center;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.mb-4 {
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 20px;
}
.btn-primary {
background-color: #0056b3;
border-color: #004b9b;
padding: 10px 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: background-color 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
background-color: #004b9b;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.btn-block {
display: block;
width: 100%;
}
.form-control {
border: 1px solid #ced4da;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
label {
color: #495057;
font-weight: bold;
}
datalist option {
background-color: white;
color: black;
}
#message {
display: block;
margin-top: 20px;
font-size: 1rem;
}
#messageContainer {
text-align: center;
padding: 10px;
margin-top: 20px;
}
#imageContainer {
text-align: center;
padding: 10px;
margin-top: 20px;
display: none;
}
#barcodeImage {
max-width: 100%;
padding: 10px;
height: auto;
display: inline-block;
margin: 0 auto;
}
.divider {
border-right: 2px solid #dee2e6;
}
.divider {
border-right: 2px solid #dee2e6;
padding-right: 30px;
}
.image-padding {
padding-left: 30px;
}
#fileName,
#customDownloadBtn {
height: calc(1.5em + .75rem + 2px);
}
#customDownloadBtn {
display: flex;
align-items: center;
justify-content: center;
}
.row.mt-3 > div [class*="col-"] {
padding-right: .15rem;
padding-left: .15rem;
}
.pr-1 {
padding-right: .5rem;
}
.pl-1 {
padding-left: .5rem;
}
.svg-container {
text-align: center;
}
.barcode-logo {
width: 40%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style><style>
body {
font-family: 'Poppins', sans-serif;
}
.container {
padding-top: 30px;
max-width: 900px;
}
.row.justify-content-center {
margin-right: 0;
margin-left: 0;
}
.text-center {
text-align: center;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.mb-4 {
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 20px;
}
.btn-primary {
background-color: #0056b3;
border-color: #004b9b;
padding: 10px 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: background-color 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
background-color: #004b9b;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.btn-block {
display: block;
width: 100%;
}
.form-control {
border: 1px solid #ced4da;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
label {
color: #495057;
font-weight: bold;
}
datalist option {
background-color: white;
color: black;
}
#message {
display: block;
margin-top: 20px;
font-size: 1rem;
}
#messageContainer {
text-align: center;
padding: 10px;
margin-top: 20px;
}
#imageContainer {
text-align: center;
padding: 10px;
margin-top: 20px;
display: none;
}
#barcodeImage {
max-width: 100%;
padding: 10px;
height: auto;
display: inline-block;
margin: 0 auto;
}
.divider {
border-right: 2px solid #dee2e6;
}
.divider {
border-right: 2px solid #dee2e6;
padding-right: 30px;
}
.image-padding {
padding-left: 30px;
}
#fileName,
#customDownloadBtn {
height: calc(1.5em + .75rem + 2px);
}
#customDownloadBtn {
display: flex;
align-items: center;
justify-content: center;
}
.row.mt-3 > div [class*="col-"] {
padding-right: .15rem;
padding-left: .15rem;
}
.pr-1 {
padding-right: .5rem;
}
.pl-1 {
padding-left: .5rem;
}
.svg-container {
text-align: center;
}
.barcode-logo {
width: 40%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
HTML
このCSSコードは、インデックスページに洗練されたモダンな外観を与えるよう設計されており、スッキリとした見た目の「Poppins」フォントを使用し、コンテナー、ボタン、フォームコントロールなどのスタイルを定義して、統一感のあるユーザーインターフェースを実現しています。 あなたのウェブアプリケーションの特定のデザイン要件に合わせて、これらのスタイルをさらにカスタマイズしてください。
ウェルカムメッセージを追加する：ユーザーに挨拶し、アプリケーションの目的を紹介するために、ページ上に目立つウェルカムメッセージを配置します。 私たちのデザインテーマに合わせて色も調整します。 ページの中央にロゴ画像を、ウェルカムメッセージのすぐ下に配置します。 以下の方法で行うことができます：
<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barode Generator</h1>
<div class="svg-container text-center">
<img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div><h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barode Generator</h1>
<div class="svg-container text-center">
<img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>
HTML
バーコードジェネレータのユーザーインターフェースの設計を続けるために、中央揃えのレイアウト内に主要コンテンツを構築することに焦点を当てましょう。 以下のスニペットは、コンテンツを中央に配置し、フォーム、ボタン、または情報テキストエリアなどの他のUIコンポーネントの準備をするために、Bootstrapのグリッドシステムを使用する方法を示しています。
<div class="container">
<div class="row justify-content-center">
</div>
</div><div class="container">
<div class="row justify-content-center">
</div>
</div>
HTML
入力フォームの設計
では、上記の構造において、ユーザーからの入力を取得してバーコードを設計するためのフォームを設計します。 次のフィールドの入力を受け付けます：バーコードのデータ、バーコードの種類、最大幅、最大高さ、およびバーコードの色。 こちらがコードです:
<div class="col-md-6 divider col-padding">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="barcodeText">Data for Barcode</label>
<input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
</div>
<div class="form-group">
<label for="barcodeType">Type of Barcode</label>
<input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
<datalist id="typeOptions">
@foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
{
<option value="@type">@type</option>
}
</datalist>
</div>
<div class="row">
<div class="form-group col-6">
<label for="maxWidth">Max Width (px)</label>
<input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
</div>
<div class="form-group col-6">
<label for="maxHeight">Max Height (px)</label>
<input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
</div>
</div>
<div class="form-group">
<label for="barcodeColor">Color for Barcode</label>
<input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
<datalist id="colorOptions">
@foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
{
<option value="@color">@color</option>
}
</datalist>
</div>
<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><div class="col-md-6 divider col-padding">
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="barcodeText">Data for Barcode</label>
<input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
</div>
<div class="form-group">
<label for="barcodeType">Type of Barcode</label>
<input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
<datalist id="typeOptions">
@foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
{
<option value="@type">@type</option>
}
</datalist>
</div>
<div class="row">
<div class="form-group col-6">
<label for="maxWidth">Max Width (px)</label>
<input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
</div>
<div class="form-group col-6">
<label for="maxHeight">Max Height (px)</label>
<input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
</div>
</div>
<div class="form-group">
<label for="barcodeColor">Color for Barcode</label>
<input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
<datalist id="colorOptions">
@foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
{
<option value="@color">@color</option>
}
</datalist>
</div>
<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
以下は、各部分の機能を簡単に説明したものです：
コンテナー: これは、バーコードの作成に関連するすべてを保持するウェブページ上のボックスのようなものです。 クラス col-md-6 のために親コンテナの半分の幅になります。
