Blazor QRコードスキャナーを作成する方法

Blazor サーバーとは何ですか？

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

IronQRの紹介

IronQR is a .NET library that stands out for its ability to read, interpret, and 生成する能力で際立つ.NETライブラリです。 さまざまな種類のQRコードコンテンツを処理する機能を含む一連の機能を提供します。 IronQRの強みはそのシンプルさと.NETアプリケーションへの統合のしやすさにあり、QRコード機能を組み込み、作成しようとする開発者にとって頼りになる選択肢となっています。

新しいBlazorサーバーアプリケーションの作成

Visual Studioを開始し、「新しいプロジェクトを作成」を選択します。プロジェクトテンプレート選択画面で「Blazor Server App」テンプレートを見つけて選択します。 次へをクリックします。

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

希望の.NETフレームワークを選択し、作成ボタンを押します。 これにより、Blazorサーバーアプリケーションが作成されます。

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

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

NuGetパッケージマネージャーで、「IronQR」を「参照」タブ内で検索します。 リスト内の「IronQR」パッケージを見つけ、インストールボタンをクリックします。

すべてのインストールが完了したので、プロジェクトの構造全体を通じてプロジェクトにすべてを実装してください。

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

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

@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(qrImageSrcForDisplay))
    {
        <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">
            <input type="text" value="@scannedText" readonly class="result-input" />
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

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

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

画像表示: 画像をアップロードすると、<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）を追加してユニークなファイル名を生成します。 これにより、アップロードされた各ファイルが一意に識別されるようになります。

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

表示用の画像の準備: ファイルが保存された後、それをユーザーに確認するために画像を表示する必要があります。 メソッドは、ファイルをバイト配列に読み込み、それをbase64文字列に変換します。これは<img>タグのsrc属性に直接埋め込み可能です。 この変換により、画像ファイルのためにサーバーへの別要求を必要とせずに画像を表示できます。

QRコードのスキャン

ScanQRCodeメソッドは、Blazorサーバーアプリケーションにおける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ブロック内に囲まれており、スキャン操作中に予期しないエラーが発生しないように保護されています。 これには、画像ファイル形式に関連する問題や読み取りプロセス中の予期しないエラーが含まれる場合があります。 例外が発生した場合、それはキャッチされ、エラーメッセージがフォーミュレートされ、ユーザーに表示されます。 このアプローチは、問題を追跡するのに役立ち、ユーザーに透明性を保つことで、アプリケーションの信頼性を向上させます。

結果のコピー

クリップボードにコピーする機能を有効にするために、JavaScript関数copyTextToClipboardが_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>

この関数はテキストパラメータを受け取り、コピーするテキストです。 クリップボードとやり取りするモダンなアプローチであるnavigator.clipboard.writeTextメソッドを使用します。 この方法はそのシンプルさとWeb標準への準拠性のために好まれています。 成功したら、コンソールに成功メッセージを記録して、デバッグを助け、順調な機能を確認します。 エラーが発生した場合、それに関するエラーメッセージがコンソールに記録され、操作中に遭遇した問題についての洞察を提供します。

@codeの一部にあるCopyToClipboardメソッドは、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

アプリケーションの実行

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

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

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