IRONBARCODEの使用

Blazor QRコードスキャナーの作り方

公開済み 2024年2月18日

共有:

イントロダクション

この記事では、クイックレスポンスコードスキャナーの統合について探ります。(QRコードスキャナー)BlazorアプリケーションでIronQRを使用する、.NETライブラリ。 QRコードは、通常の一次元バーコードよりも多くのデータを格納できる二次元バーコードです。

Blazorは、マイクロソフトのフレームワークであり、開発者がシングルページアプリを作成することを可能にします(Blazor WebAssembly アプリを使用して)インタラクティブなウェブインターフェースを構築するためにC#を使用するために(このガイドで焦点を当てるBlazor Server).

IronQRとBlazor Serverを組み合わせたQRコードスキャンの統合は、両技術の強みを活用する戦略的な組み合わせです。 IronQRをBlazorアプリケーションと統合することで、QRコードの生成およびスキャンを効率的に処理することができます。 QRコードリーダーのこの機能は、在庫管理、チケッティングシステム、非接触情報共有など、さまざまなビジネス文脈でますます需要が高まっています。

基本を理解する

Blazor Server とは何ですか？

Blazor サーバーは、ASP.NET Coreプラットフォームの一部であるWebアプリケーションフレームワークです。それにより、開発者はJavaScriptではなくC#を使用してインタラクティブなWebユーザインターフェースを構築することができます。このサーバーサイドモデルは、リアルタイムWeb機能であるSignalR接続を介してユーザーとのやり取りを処理することによって動作します。これにより、開発者は効果的でインタラクティブなウェブアプリを作成できます。

IronQR の紹介

IronQR.NETライブラリは、読み取り、解釈、およびQRコードを生成する高精度で。それは、さまざまな種類のQRコードコンテンツを処理できる機能を含む、幅広い機能を提供します。 IronQRの強みは、そのシンプルさと.NETアプリケーションへの統合の容易さにあります。これは、QRコード機能を組み込んで作成することを求める開発者にとって理想的な選択肢となっています。

Blazor QRコードスキャナーの作り方

Visual Studio CodeでBlazor Serverアプリケーションを作成する
NuGetパッケージマネージャーを使用してQRコードクラスライブラリをインストール
HTML と CSS を使用して index.razor でユーザーインターフェイスを作成します。
アップロードされたファイル処理のロジックを書く
QRライブラリを使用してQRスキャンロジックを記述する
テキストボックスに結果を表示してください。

環境の設定

新しいBlazor Serverアプリケーションを作成

Visual Studioを起動し、「新しいプロジェクトの作成」を選択します。プロジェクトテンプレートの選択画面で、「Blazor Server App」テンプレートを見つけて選択してください。次へ進む。

Blazor QRコードスキャナーを作成する方法: 図1 – 実装に適したテンプレートを探す

テンプレートを選択した後、プロジェクト名と場所を入力してください。(他のすべての値をデフォルトのままにする)「次へ」ボタンをクリックしてください。

Blazor QRコードスキャナーの作成方法：図2 - プロジェクトの詳細を設定する

次に、希望する.NETフレームワークを選択し、作成ボタンを押してください。 Blazor Server アプリケーションが作成されます。

Blazor QRコードスキャナーの作成方法: 図3 - .NET Frameworkを選択し、プロジェクトを作成

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

メニューバーからツールをクリックします。ドロップダウンメニューから、NuGetパッケージマネージャーを選択します。コンテキストメニューから「ソリューションの NuGet パッケージの管理」を選択してください。これにより、NuGetパッケージマネージャータブが開きます。

Blazor QRコードスキャナーの作成方法: 図4 - NuGetパッケージマネージャーへのアクセス

NuGet パッケージマネージャーで、「Browse」タブ内の「IronQR」を検索してください。次に、リストの中から「IronQR」パッケージを見つけます。「Install」ボタンをクリックします。

Blazor QRコードスキャナーの作成方法: 図5 - 「参照」タブを通してIronQRパッケージをインストールする

すべてのインストールが完了したので、プロジェクトの構造とすべてをプロジェクトにどのように実装するかを見ていきましょう。

QRコードスキャンの実装

ユーザーインターフェイスの構築

QRコードスキャナーのユーザーインターフェースは主にIndex.razorファイル内で構築されています。このファイルはBlazor Serverプロジェクトの一部であり、HTMLとRazor Syntaxの組み合わせを使用して動的でインタラクティブなウェブページを作成します。構造には以下が含まれます:

@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrc))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrc))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: @page "/" using System.IO using Microsoft.AspNetCore.Components.Forms using IronQr using IronSoftware.Drawing inject IJSRuntime JSRuntime <PageTitle> QR Code Scanner</PageTitle> <div> <h1> QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" /> if(!string.IsNullOrEmpty(qrImageSrc))
"image/*" Class="file-input" /> [if](Not String.IsNullOrEmpty(qrImageSrc))
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Friend @page "/" using System.IO using Microsoft.AspNetCore.Components.Forms using IronQr using IronSoftware.Drawing inject IJSRuntime JSRuntime <PageTitle> QR Code Scanner</PageTitle> <div> <h1> QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept="image/*" Class
"HandleSelectedFile" accept="image/*" Class
Friend page "/" [using] System.IO [using] Microsoft.AspNetCore.Components.Forms [using] IronQr [using] IronSoftware.Drawing inject IJSRuntime JSRuntime (Of PageTitle) QR Code Scanner</PageTitle> (Of div) (Of h1) QR Code Scanner</h1> <InputFile OnChange="HandleSelectedFile" accept
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
		"QR Code Image" class="qr-image" />
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <img src="@qrImageSrcForDisplay" alt="QR Code Image" class
		"@qrImageSrcForDisplay" alt="QR Code Image" class
		<img src="@qrImageSrcForDisplay" alt
End Class
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button"> Scan QR Code</button> if(!string.IsNullOrEmpty(scannedText))
	"@(!fileSelected)" class="button scan-button"> Scan QR Code</button> [if](Not String.IsNullOrEmpty(scannedText))
	If True Then
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <button onclick="ScanQRCode" disabled="@(!fileSelected)" class
	"ScanQRCode" disabled="@(!fileSelected)" class
	<button onclick="ScanQRCode" disabled
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class="button copy-button"> Copy</button> </div>
		"CopyToClipboard" class="button copy-button"> Copy</button> </div>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <div class="result-section"> <button onclick="CopyToClipboard" class
		"result-section"> <button onclick="CopyToClipboard" class
		<div class="result-section"> <button onclick
	End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'</div>

VB C#

タイトルと見出し：タイトルと見出しと

<title> タグと <h1> タグは、それぞれページのタイトルとメインの見出しを定義し、ユーザーのためのコンテキストを設定します。

アップロードウィジェットを使用して新しい画像を追加します。

画像アップロードコントロール: <InputFile> component はQRコード画像のアップロードに使用されます。この要素は画像ファイルのみを受け入れるように設計されており、関連性のないファイルタイプをフィルタリングすることでユーザーエクスペリエンスを向上させます。

画像表示: 画像がアップロードされると、` related to ユーザーインターフェイスの構築以下のコンテンツを日本語に翻訳します：

IronPDFは、HTML、JavaScript、CSSをPDFに変換するための強力なツールです。あなたのWebアプリケーションでPDFを生成するために、HTMLコードを使用して簡単にPDFファイルを作成できます。IronPDF for .NET, IronPDF for Java, IronPDF for Python, あるいは IronPDF for Node.jsのいずれかを使用することで、お好みのプログラミング言語での統合が可能です。

Pythonでの利用方法の例:

from ironpython import *

pdf = IronPDF(html_content="<h1>Hello, World!</h1>")
pdf.save("output.pdf")

from ironpython import *

pdf = IronPDF(html_content="<h1>Hello, World!</h1>")
pdf.save("output.pdf")

PYTHON

上記のコードでは、HTMLをPDFに変換するためにIronPDFライブラリをインポートし、HTMLコンテンツを含むPDFファイルを生成します。生成されたPDFは "output.pdf" という名前で保存されます。

Iron Softwareの製品は、プログラミングの効率を高め、開発プロセスを簡略化するために設計されています。例えば、IronOCR for .NETを使用して画像からテキストを抽出することができます。また、IronXL for .NETを使用してExcelファイルを操作し、IronBarcode for .NETを使用してバーコードを生成および読み取ることができます。

このように、多様な製品を揃えたIron Suiteを使用することで、さまざまなニーズに対応することができます。Lite License、Plus License、Professional License、Unlimited Licenseの各ライセンスオプションから選択して、ニーズに合った最適なソリューションを見つけてください。

IronPDFを使用して、タグ <pdf>...</pdf> 内にHTMLコードを配置することにより、簡単にPDFを生成することができます。この視覚的なフィードバックは、適切なファイルがアップロードされたことをユーザーに確信させるために非常に重要です。

スキャンボタン: @onclick="ScanQRCode とタグ付けされたボタンがスキャンプロセスを起動します。それの可用性は、ファイルが選択されているかどうかに依存し、インターフェースの直感性を高めます。

表示結果：スキャンされたQRコードのテキストは、簡単に閲覧できるようにテキスト入力フィールドに表示されます。別のボタンを使用すると、ユーザーはこのテキストをクリップボードにコピーできます。

site.cssでのCSSスタイリング

QRコードスキャナーの視覚的な美しさとレイアウトは、site.cssファイルで定義されています。

.content {
    padding: 20px;
    margin: 10px auto; /* Centers the content */
    max-width: 500px; /* Sets a max width for the content */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}
.file-input, .result-input {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 100%;
}
.button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: auto; /* Adjusts button width */
    display: inline-block; /* Allows the width to adjust to content */
}
.button:hover {
    background-color: #45a049;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} 
.qr-image {
    max-width: 300px;
    max-height: 300px;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}
.result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.result-input {
    width: 100%;
    box-sizing: border-box;
}
.copy-button {
    margin-top: 10px;
    white-space: nowrap;
}

.content: このクラスは、メインコンテンツエリアにスタイルを適用し、定義された幅、中央揃え、および深みを持たせる控えめな影を与えます。

.file-input, .result-input：これらのクラスは、ファイル入力および結果表示要素をスタイルし、視覚的一貫性を保ちつつ、コンテナの幅全体に収まるようにします。

.button: ボタンには際立った緑色の背景、丸い角、そしてユーザーの操作を向上させるためのホバー効果が施されています。

.qr-image: QRコード画像に適用されるスタイルには、サイズ制約と自動マージンが含まれており、画像が目立つが圧倒的でないように中央に配置されます。

.result-section：このクラスは、結果セクション内の要素が中央に配置され、適切な間隔が確保されるようにします。

ファイルのアップロード処理

HandleSelectedFileメソッドは、ユーザーがアップロードしたファイルを処理し、スキャンの準備を行う、QRコードスキャンプロセスの重要な部分です。このメソッドは、ユーザーが`を介してファイルを選択したときにトリガーされます。コンポーネント以下のコードに示されています:

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists
    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);
    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }
    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;
    // Optionally, create a base64 string for displaying the image (if needed)
    byte [] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists
    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);
    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }
    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;
    // Optionally, create a base64 string for displaying the image (if needed)
    byte [] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
	selectedFile = e.File
	fileSelected = True
	Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
	Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists
	' Use a GUID as the unique file name
	Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
	Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	await using(var fileStream = New FileStream(fullPath, FileMode.Create))
'	{
'		await selectedFile.OpenReadStream().CopyToAsync(fileStream);
'	}
	' Store the full path in qrImageSrc for scanning
	qrImageSrc = fullPath
	' Optionally, create a base64 string for displaying the image (if needed)
	Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
	Dim base64String = Convert.ToBase64String(imageBytes)
	qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function

VB C#

以下は、その機能の詳細な内訳です:

ファイルの選択と検証: ユーザーがファイルをアップロードすると、この方法は InputFileChangeEventArgs を使用してファイルの詳細をキャプチャします。その後、selectedFile変数にこのファイルが割り当てられ、fileSelectedというブール値がtrueに設定されます。これは、入力データ/ファイルが処理の準備ができていることを示します。

ファイルパスの作成: メソッドはアップロードされた画像を保存するためのディレクトリを準備します。 Path.Combineを使用して、UploadedImagesディレクトリへのパスを作成し、Directory.CreateDirectoryでそのディレクトリが存在することを確認します。このステップは、アップロードされたファイルを体系的に整理するために重要です。

一意のファイル名の生成：既存のファイルとの競合を避けるために、GUIDを使用して一意のファイル名が生成されます。(グローバル一意識別子)元のファイルの拡張子が追加されます。これにより、アップロードされた各ファイルが uniquePathdentified されることが保証されます。

ファイルの保存: ファイルはサーバーに保存されます。このメソッドは、新たに生成されたファイルパスを指すファイルストリームを作成し、アップロードされたファイルの内容を await selectedFile.OpenReadStream を使用してこのストリームにコピーします。().CopyToAsync(ファイルストリーム)`. このステップはアップロードプロセスを完了します。

画像の表示準備：ファイルを保存した後、確認のためにユーザーに画像を再表示する必要があります。ファイルをバイト配列に読み込み、直接 に埋め込むのに適したbase64文字列に変換するメソッドです。<img> related to ファイルのアップロード処理 タグのsrc`属性。この変換により、画像ファイルのためにサーバーへ個別のリクエストを送信せずに画像を表示できます。

QRコードのスキャン

ScanQRCodeメソッドは、Blazor ServerアプリケーションにおけるQRコードスキャン機能の中心です。このメソッドはアップロードされた画像を受け取り、IronQRを使用してQRコードデータを抽出します。

private async Task ScanQRCode()
{   
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;
    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);
        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

private async Task ScanQRCode()
{   
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;
    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);
        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

Private Async Function ScanQRCode() As Task
	' Check if there is a valid image to work with
	If String.IsNullOrEmpty(qrImageSrc) Then
		Return
	End If
	Try
		Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
		Dim imageInput As New QrImageInput(inputBmp)
		Dim reader As New QrReader()
		Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)
		' Check if there are any results and if the first result contains text
		Dim firstResult = results.FirstOrDefault()
		If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
			scannedText = firstResult.Value.ToString()
		Else
			scannedText = "QR value not found!"
		End If
	Catch ex As Exception
		scannedText = "Error scanning QR code: " & ex.Message
	End Try
End Function

VB C#

最初に、このメソッドは、アップロードされた画像のパスを保持する qrImageSrc 変数が空でないかどうかを確認します。このチェックは、進行する前に有効な画像が存在することを確認します。

画像が処理の準備が整ったことが確認されると、メソッドはQRコード読み取りのコア機能に進みます。これは、まず画像を保存された場所から読み込み、QRコード分析に適した形式にするといういくつかの重要なステップを含みます。この変換は AnyBitmap.FromFile によって可能です。(qrImageSrc)スキャンプロセスのために画像を準備する` method。

次のステップでは、QrReaderオブジェクトの作成が含まれます。このオブジェクトはIronQRライブラリにおいて重要であり、画像からQRコードをデコードするための主要なツールとして機能します。 QrReaderのインスタンスが準備できたら、アプリケーションはアップロードされた画像をスキャンします。 reader.Read は、 IronPDF と IronOCR のデータを読み取るために使用されるメソッドです。これらのライブラリは、開発者が PDF ドキュメントや画像内のテキストを簡単に解析するのに役立ちます。例えば、以下のコードスニペットは、PDF ファイルからテキストを抽出する様子を示しています：

var reader = new IronOCR.PdfInput("example.pdf");
var text = reader.Read();
Console.WriteLine(text);

var reader = new IronOCR.PdfInput("example.pdf");
var text = reader.Read();
Console.WriteLine(text);

Dim reader = New IronOCR.PdfInput("example.pdf")
Dim text = reader.Read()
Console.WriteLine(text)

VB C#

このコードでは、example.pdf ファイルからテキストを抽出してコンソールに出力します。 IronPDF と IronOCR は、多くのプログラミング言語向けに提供されており、様々な環境での使用が可能です。例えば、.NET、Java、Python、Node.js などです。(画像入力)この操作を担当する関数は、画像内のQRコードを体系的に検索し、そのデータを抽出します。

スキャンの結果は IEnumerable に保存されます。コレクションこのコレクションを精査して最初のQRコードの結果を見つけます。 QRコードが検出され、それに可読なテキストが含まれている場合、このテキストはキャプチャされて scannedText 変数に保存されます。しかし、QRコードが見つからない、またはテキストを含まない場合、アプリケーションはデフォルトメッセージを設定して、ユーザーにQR値が検出されなかったことを通知します。

QRコードが正常にスキャンされると、Blazorの双方向データバインディング機能により、テキスト文字列がテキスト入力フィールドに表示されます。これは、scannedText変数をテキスト入力要素にバインドすることによって実現されます。入力フィールドは無効に設定されており、読み取り専用です。この設計の選択は、ユーザーの操作をコンテンツの編集ではなく、結果の閲覧とコピーに集中させます。

スキャンプロセス全体がtry-catchブロック内に囲まれており、スキャン操作中の予期しないエラーに対して保護します。これは、画像ファイル形式に関連する問題や、読み取りプロセス中の予期しないエラーを含む可能性があります。例外が発生した場合、それをキャッチし、エラーメッセージを作成してユーザーに表示します。このアプローチは、問題の特定に役立つだけでなく、ユーザーとの透明性を維持し、アプリケーションの信頼性を向上させます。

結果をコピーする

クリップボードへのコピー機能を有効にするために、copyTextToClipboardという名前のJavaScript関数が_Host.cshtmlファイル内で定義されています。このスクリプトはクリップボードとやり取りするためのシンプルかつ効果的な方法です:

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

JAVASCRIPT

この関数はテキストパラメーターを受け取り、コピーするテキストを指定します。これは、クリップボードとやり取りするための最新の方法であるnavigator.clipboard.writeTextメソッドを使用します。この方法は、そのシンプルさとウェブ標準への準拠のために推奨されます。これは、コピーが成功した際にコンソールに成功メッセージを記録するように設計されており、デバッグを支援し、スムーズな機能を確保します。エラーが発生した場合、エラーメッセージがコンソールに記録され、操作中に発生した問題についての洞察を提供します。

CopyToClipboard メソッドは、index.razor の @code 部分にあり、Blazor アプリと JavaScript 関数の橋渡しをします。ボタンがこのメソッドのクリックをユーザーインターフェースでトリガーします。有効化されると、BlazorのJavaScriptインターオペラビリティ機能を使用して、copyTextToClipboard JavaScript関数を呼び出します。 scannedTextはこの関数に引数として渡され、ユーザーのクリップボードにテキストを効果的にコピーします。

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

Private Async Function CopyToClipboard() As Task
	Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function

VB C#

アプリケーションの実行

プロジェクトを実行すると、ユーザーは次のようなシンプルでクリーンなインターフェイスを目にするでしょう。初期画面にはQRコードスキャナーモジュールが目立つように表示されます。このモジュールには、QRコード画像ファイルをアップロードするボタンが含まれています。(「ファイルを選択」)スキャンプロセスを開始するためのもう一つの手段(「QRコードをスキャン」). 最初は、ファイルが選択されておらず、スキャン領域が空白であり、ユーザーの入力を待っています。

Blazor QRコードスキャナーを作成する方法：図6 - プロジェクトの最初の実行結果

ユーザーは「ファイルを選択」ボタンを使用してQRコード画像を選択してアップロードし、選択したファイルの名前が表示されます。(例えば、 'qrvalue.png'). アップロードされたQRコードはインターフェースの指定されたエリアに表示され、画像がスキャンの準備が整っていることをユーザーに確認させます。

Blazor QRコードスキャナーの作成方法：図7 - ユーザーがQRコードを入力した結果

ユーザーが「Scan QR Code」ボタンをクリックした後、アプリケーションは画像を処理します。スキャンが成功すると、QRコード内にエンコードされたテキストが画像のすぐ下に表示されます。この場合、スキャンされた結果('<https://ironsoftware.com/csharp/qr/>')QRコードをQRリーダーでスキャンした際に、ユーザーが誘導されるURLです。結果の横にコピーボタンが表示され、ユーザーがスキャンされたテキストをクリップボードに簡単にコピーしてさらに使用することができます。

Blazor QRコードスキャナの作成方法: 図8 - これはQRコードからのテキストとコピーボタンを示しています

結論

Blazor QRコードスキャナーの作成方法: 図9

要約すると、Blazor ServerアプリケーションにIronQRを統合するプロセスはスムーズかつ効果的で、QRコードスキャンのソリューションとなります。セットアップの開始からスキャン機能の実装まで、IronQRの強力な処理とBlazorの動的なUIレンダリングの組み合わせのおかげで、応答性が高く使いやすいです。環境のセットアップからデプロイメントまでのプロセスは、実際のアプリケーションにおけるこの統合の実用性と効果性を強調しています。 IronQRはQRコードに優れていますが、バーコードのスキャン機能が必要なプロジェクトの場合、IronBarcodeは、同様の使いやすさと統合性を提供する理想的なオプションです。

IronQRは無料試用購入前に機能を探索するための開発者向け。製品環境でそのすべてのプロフェッショナル機能を利用するために、IronQR ライセンスは$749から始まります。

< 以前
C#でバーコードを印刷する方法

次へ >
VB .NETでバーコードラベルを印刷する方法