NET MAUIを使用してC#でバーコードを読み取り、スキャンする方法

.NET MAUI バーコードスキャナー

This article was translated from English: Does it need improvement?
Translated
View the article in English

はじめに

.NET MAUI (.NET マルチプラットフォーム アプリ UI) は、単一のコードベースでクロスプラットフォーム アプリケーションをシームレスに作成するためのクロスプラットフォーム フレームワークです。 たとえば、1 つのプロジェクトで Microsoft Windows、iOS、および Android アプリケーションを簡単に作成できます。 他のプラットフォーム、フレームワーク、ライブラリとは異なるのは、ネイティブ コントロールをプロジェクト内で使用できるようにし、追加のコンポーネントを提供する方法です。 その結果、開発者はこれらの事前作成されたコンポーネントとサービスを使用して、コードのすべてをゼロから書くことなく、より速くアプリケーションを構築できます。

この記事では、.NET MAUI Windows アプリに IronBarcode を統合してバーコードや QR コードをスキャンする方法を説明します。

IronBarcode: C# Barcode Library

アプリケーションでバーコード読み取りを行うために、IronBarcode .NETライブラリを使用します。堅牢でシンプルなAPIを提供しており、バーコードに関する専門知識がなくてもスムーズに開発できます。 NuGet パッケージマネージャーを使用して、簡単にインストールできます。

IronBarcode は、Code 39Code 128PDF417 を含む多くのバーコードフォーマットの読み取りに対応しています。 画像ファイルやメモリストリーム、PDF など、多様なデータフォーマットから読み取れます。

.NET MAUI アプリでのバーコード読み取り手順

次の手順に従って、.NET MAUI アプリでバーコードを読み取ります。

前提条件

  1. Visual Studio 2022
  2. Visual Studio の .NET MAUI プロジェクト

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

NuGet Package Manager Console を使用してIronBarcodeライブラリをインストールできます。 このコンソールを Visual Studio で開くには、Tools > NuGet Package Manager > Package Manager Console に移動します。 次に、コンソールに以下のコマンドを入力します。

Install-Package BarCode

このコンソールコマンドにより、MAUI プロジェクト内で最新バージョンの IronBarcode ライブラリがダウンロードされます。 また、NuGet ウェブサイトで最新バージョンのパッケージを検索することもできます。

フロントエンド

最初のステップはフロントエンドデザインを作成することです。 これには、2 つのボタン、1 つのテキストエリア、1 つの画像ボックスを含むレイアウトを作成します。 1 つのボタンはバーコードを選択するために使用され、もう 1 つはバーコードのテキストをコピーします。 画像ボックスは選択された画像を表示します。

MainPage.xaml ファイルのコンテンツを以下のように置き換えます。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MAUI_Barcode.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="ImageSelect"
                Text="Select Barcode"
                SemanticProperties.Hint="Select Image"
                Clicked="SelectBarcode"
                HorizontalOptions="Center" />
            <Image
                x:Name="barcodeImage"
                SemanticProperties.Description="Selected Barcode"
                HeightRequest="200"
                HorizontalOptions="Center" />
            <Editor
                x:Name="outputText"
                Placeholder="Output text"
                HeightRequest="100"
                WidthRequest="500" />
            <Button
                x:Name="copyText"
                Text="Copy"
                SemanticProperties.Hint="Copy Text"
                WidthRequest="150"
                Clicked="CopyEditorText"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MAUI_Barcode.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="ImageSelect"
                Text="Select Barcode"
                SemanticProperties.Hint="Select Image"
                Clicked="SelectBarcode"
                HorizontalOptions="Center" />
            <Image
                x:Name="barcodeImage"
                SemanticProperties.Description="Selected Barcode"
                HeightRequest="200"
                HorizontalOptions="Center" />
            <Editor
                x:Name="outputText"
                Placeholder="Output text"
                HeightRequest="100"
                WidthRequest="500" />
            <Button
                x:Name="copyText"
                Text="Copy"
                SemanticProperties.Hint="Copy Text"
                WidthRequest="150"
                Clicked="CopyEditorText"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>
XML

すべての要素が中央の位置で垂直スタックにあります。 お好みに応じて変更できます。

IronBarcode を使用したバーコードスキャン

このセクションでは、IronBarcode ライブラリを使用したバーコードスキャンのコードを説明します。 まず、FilePicker を使用してファイルを選択し、画像のファイル タイプを指定します。 その後、FullPath プロパティを使用して画像ファイルのパスを取得し、画像ボックスのソースを FullPath 値に設定します。 最後に、BarcodeReaderRead 関数で path の値を使用してテキストを取得します。

private async void SelectBarcode(object sender, EventArgs e)
{
    // Use FilePicker to allow the user to select an image file.
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image file.
    var imageSource = images.FullPath.ToString();

    // Set the source of the Image view to the selected image's path.
    barcodeImage.Source = imageSource;

    // Use IronBarcode to read the barcode from the image file and get the first result.
    var result = BarcodeReader.Read(imageSource).First().Text;

    // Display the read result in the Editor.
    outputText.Text = result;
}
private async void SelectBarcode(object sender, EventArgs e)
{
    // Use FilePicker to allow the user to select an image file.
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image file.
    var imageSource = images.FullPath.ToString();

    // Set the source of the Image view to the selected image's path.
    barcodeImage.Source = imageSource;

    // Use IronBarcode to read the barcode from the image file and get the first result.
    var result = BarcodeReader.Read(imageSource).First().Text;

    // Display the read result in the Editor.
    outputText.Text = result;
}
Private Async Sub SelectBarcode(ByVal sender As Object, ByVal e As EventArgs)
	' Use FilePicker to allow the user to select an image file.
	Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {
		.PickerTitle = "Pick image",
		.FileTypes = FilePickerFileType.Images
	})

	' Get the full path of the selected image file.
	Dim imageSource = images.FullPath.ToString()

	' Set the source of the Image view to the selected image's path.
	barcodeImage.Source = imageSource

	' Use IronBarcode to read the barcode from the image file and get the first result.
	Dim result = BarcodeReader.Read(imageSource).First().Text

	' Display the read result in the Editor.
	outputText.Text = result
End Sub
$vbLabelText   $csharpLabel

以下のコードは、テキストエディタのテキストをコピーし、テキストがコピーされたことをユーザーに通知するアラートメッセージを表示するために使用されます。

private async void CopyEditorText(object sender, EventArgs e)
{
    // Copy the text from the Editor to the clipboard.
    await Clipboard.SetTextAsync(outputText.Text);

    // Show a success message to the user.
    await DisplayAlert("Success", "Text is copied!", "OK");
}
private async void CopyEditorText(object sender, EventArgs e)
{
    // Copy the text from the Editor to the clipboard.
    await Clipboard.SetTextAsync(outputText.Text);

    // Show a success message to the user.
    await DisplayAlert("Success", "Text is copied!", "OK");
}
Private Async Sub CopyEditorText(ByVal sender As Object, ByVal e As EventArgs)
	' Copy the text from the Editor to the clipboard.
	Await Clipboard.SetTextAsync(outputText.Text)

	' Show a success message to the user.
	Await DisplayAlert("Success", "Text is copied!", "OK")
End Sub
$vbLabelText   $csharpLabel

You can find the project source code in this article on GitHub.

出力

プロジェクトを実行すると、以下の出力が表示されます。 画像はまだ選択されていないため、表示されていません。

.NET MAUI Barcode Scanner Tutorial Using IronBarcode - Figure 1: 画像が選択されていない場合の出力

画像が選択されていない場合の出力

バーコードが選択されると、以下のスクリーンショットのように表示され、QR コードの出力テキストがエディタに表示されます。

.NET MAUI Barcode Scanner Tutorial Using IronBarcode - Figure 2: 画像を選択した後の出力

画像を選択した後の出力

コピー ボタンをクリックすると、前述のアラート ウィンドウが表示されます。

.NET MAUI Barcode Scanner Tutorial Using IronBarcode - Figure 3: コピーアラート

コピーアラート

結論

この記事では、IronBarcode を使用して .NET MAUI アプリケーションでバーコードを読み取る方法を説明しました。 QR コードリーダーとして、IronBarcode は期待通りの正確な出力を提供します。 さらに、読み取りが難しいバーコードも読み取ることができます。 さまざまなフォントを使用してバーコードを作成およびカスタマイズすることもできます。 このリンクから IronBarcode に関するチュートリアル投稿をさらに入手できます。

IronBarcode は、開発および商業使用にライセンスされる必要があります。 ここでライセンスに関する詳細情報を見つけることができます。

よくある質問

.NET MAUIアプリケーションでQRコードをどのようにスキャンできますか?

IronBarcodeライブラリを使用して.NET MAUIアプリケーションでQRコードをスキャンできます。Visual StudioでNuGetパッケージマネージャーを介してライブラリをインストールし、選択した画像ファイルからテキストを抽出するためのBarcodeReader.Readメソッドを使用します。

.NET MAUIプロジェクトにIronBarcodeをインストールするプロセスは何ですか?

.NET MAUIプロジェクトにIronBarcodeをインストールするには、Visual StudioのNuGetパッケージマネージャーコンソールを開き、Install-Package Barcodeコマンドを実行してライブラリをダウンロードおよびインストールします。

IronBarcodeライブラリを使用して読み取れるバーコード形式は何ですか?

IronBarcodeは、QRコード、Code 39、Code 128、PDF417など、さまざまなバーコード形式をサポートしており、アプリケーションでの多用途なバーコード読み取りを可能にします。

.NET MAUIでバーコードスキャナーアプリのインターフェースをどのように設計しますか?

.NET MAUIでは、バーコードスキャナーアプリのインターフェースをXAMLを使用して設計できます。通常、MainPage.xamlファイルで定義できるボタン、テキストエリア、および画像ボックスを含むレイアウトが含まれます。

.NET MAUIアプリでスキャンしたバーコードテキストをクリップボードにコピーするにはどうすればよいですか?

.NET MAUIアプリでスキャンしたバーコードテキストをクリップボードにコピーするには、Clipboard.SetTextAsyncメソッドを使用します。このメソッドは、操作を確認するアラートを表示するボタンのクリックによってトリガーされる場合があります。

.NET MAUIでIronBarcodeを使用してバーコードの外観をカスタマイズすることは可能ですか?

はい、IronBarcodeはフォント、色、スタイルを変更するオプションを提供し、視覚的にカスタマイズされたバーコードを作成することができます。

IronBarcodeを商用アプリケーションで使用するにはライセンスが必要ですか?

はい、開発および商用目的でIronBarcodeを使用するにはライセンスが必要です。ライセンスの詳細とオプションはIronBarcodeのウェブサイトで確認できます。

.NET MAUIバーコードスキャナーチュートリアルのソースコードはどこで入手できますか?

.NET MAUIバーコードスキャナーチュートリアルのソースコードはGitHubで入手できます。記事には、リポジトリへのリンクが提供されています。

IronBarcodeは.NET MAUIアプリでのバーコードスキャンをどのように強化しますか?

IronBarcodeは、複数のバーコード形式をサポートし、.NET MAUIプロジェクトとのシームレスな統合を提供する堅牢なAPIを提供することで、.NET MAUIアプリでのバーコードスキャンを強化します。

カーティス・チャウ
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT(Internet of Things)への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか?
Nuget ダウンロード 2,169,908 | バージョン: 2026.4 リリース
Still Scrolling Icon

まだスクロールしていますか?

すぐに証拠が欲しいですか? PM > Install-Package BarCode
サンプルを実行する 文字列が BarCode になるのを見る。