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

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

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

IronQRの紹介

IronQRは、QRコードを高精度で読み取り、解釈し、生成する能力で際立つ.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>タグはそれぞれページのタイトルとメインの見出しを定義し、ユーザーのコンテキストを設定します。

画像アップロードコントロール:<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}";
}

その機能の詳細な内訳は次のとおりです：

ファイルの選択と検証:ユーザーがファイルをアップロードすると、メソッドは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;
    }
}

まず、メソッドはアップロードされた画像のパスを保持する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);
}

アプリケーションの実行

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

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

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