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> タグは、それぞれページのタイトルとメインの見出しを定義し、ユーザーにコンテキストを設定します。

画像アップロード制御: 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}";
}

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

ファイルの選択と検証:ユーザーがファイルをアップロードすると、メソッドは InputFileChangeEventArgs e を使用してファイルの詳細を取得します。 次に、変数 selectedFile がこのファイルに割り当てられ、ブール値 fileSelected が true に設定され、入力データ/ファイルが処理準備完了であることを示します。

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

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

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

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

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

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

結果のコピー

クリップボードへのコピー機能を有効にするには、copyTextToClipboard という名前 for 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>

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

index.razor の @codeRazorは、 BlazorアプリとJavaScript関数の間の橋渡しとして機能します。 ボタンはユーザーインターフェイス内でこのメソッドのクリックをトリガーします。 有効化されると、Blazor for JavaScript InterOp 機能を使用して、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コードリーダーでスキャンした際にユーザーがアクセスするURLを示しています。 結果の隣にはコピーのボタンが表示されており、ユーザーはこのテキストをクリップボードに簡単にコピーできます。