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"テンプレートを見つけて選択します。 次へをクリックします。

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

希望 for .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 という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標準への準拠性のために好まれています。 成功したコピー時にコンソールに成功メッセージをログするように設計されており、デバッグを支援し、スムーズな機能を保証します。 エラーが発生した場合、それに関するエラーメッセージがコンソールに記録され、操作中に遭遇した問題についての洞察を提供します。

インデックスの @code 部分の CopyToClipboard メソッド。razorは、 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 リーダーでスキャンしたときに QR コードがユーザーを誘導する場所を示す URL です。 結果の隣にはコピーのボタンが表示されており、ユーザーはこのテキストをクリップボードに簡単にコピーできます。