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

イントロダクション

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

MicrosoftのフレームワークであるBlazorは、開発者がBlazor WebAssemblyアプリを使用してシングルページアプリを作成するか、C#を使用してインタラクティブなWebインターフェースを構築することを可能にします（本ガイドで焦点を当てるBlazor Serverを使用します）。

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

基本を理解する

Blazor Server とは何ですか？

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

IronQR の紹介

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

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

1. Visual Studio CodeでBlazor Serverアプリケーションを作成する

2. NuGetパッケージマネージャーを使用してQRコードクラスライブラリをインストール

3. HTML と CSS を使用して index.razor でユーザーインターフェイスを作成します。

4. アップロードされたファイル処理のロジックを書く

5. QRライブラリを使用してQRスキャンロジックを記述する

6. テキストボックスに結果を表示してください。

環境の設定

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

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

テンプレートを選択したら、プロジェクト名と場所を入力し（その他すべてをデフォルト値のままに）、次へボタンをクリックします。

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

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

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

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

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

QRコードスキャンの実装

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

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

@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>

タイトルと見出し：<PageTitle> および <h1> タグは、それぞれページのタイトルとメイン見出しを定義し、ユーザーに対するコンテキストを設定します。

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

画像表示: 画像がアップロードされると、<img>タグを使用して表示されます。 この視覚的なフィードバックは、適切なファイルがアップロードされたことをユーザーに確信させるために非常に重要です。

スキャンボタン: @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コードスキャンプロセスの重要な部分であり、ユーザーのファイルアップロードを処理し、それをスキャンの準備をします。 このメソッドは、ユーザーが<InputFile>コンポーネントを使用してファイルを選択したときにトリガーされます。 以下のコードに示されています:

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

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

ファイル選択と検証：ユーザーがファイルをアップロードすると、そのメソッドはInputFileChangeEventArgs eを使用してファイルの詳細をキャプチャします。 selectedFile 変数はこのファイルに代入され、fileSelected というブール値が true に設定され、入力データ/ファイルが処理の準備が整ったことを示します。

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

ユニークなファイル名の生成: 既存のファイルとの競合を避けるため、元のファイルの拡張子にGUID（Globally Unique Identifier）を付加してユニークなファイル名を生成します。 これにより、アップロードされた各ファイルがuniquePathdentifiedされることが確実になります。

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

画像を表示する準備: ファイルを保存した後、確認のためにユーザーに画像を表示する必要があります。 このメソッドはファイルをバイト配列に読み込み、base64文字列に変換し、<img>タグの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

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

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

次のステップでは、QrReaderオブジェクトの作成を行います。 このオブジェクトはIronQRライブラリにおいて重要であり、画像からQRコードをデコードするための主要なツールとして機能します。 QrReader インスタンスが準備できたら、アプリケーションはアップロードされた画像をスキャンします。 reader.Read(imageInput) 関数は、このアクションを担当しており、画像からQRコードを綿密に検索してデータを抽出します。

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

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

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

結果をコピーする

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

<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>

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

CopyToClipboard メソッドは、index.razor の@code 部分にあり、Blazor アプリと JavaScript 関数の間の橋渡しとして機能します。 ボタンがこのメソッドのクリックをユーザーインターフェースでトリガーします。 アクティベートされると、BlazorのJavaScript InterOp機能を使用して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

アプリケーションの実行

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

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

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

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

結論

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

IronQRは、開発者が購入前にその機能を探索するための無料トライアルを提供しています。 本番環境での拡張使用と全てのプロフェッショナル機能へのアクセスのためのIronQRライセンスは、$749から始まります。