.NET MAUIでQRコードを生成する方法

.NET MAUIとは？

.NET MAUI（マルチプラットフォーム アプリ UI）は、Xamarin Formsフレームワークの進化版で、単一のコードベースを使用して複数のプラットフォーム向けにネイティブユーザーインターフェイスを構築することを可能にします。 .NET MAUIを使用すると、Android、iOS、macOS、Windows、その他のアプリを作成でき、開発時間と労力を削減できます。

IronBarcodeの紹介

IronBarcodeは.NETアプリケーション向けの強力なバーコードおよびQRコード生成ライブラリです。 それは、サイズ、エラー修正、エンコーディングオプションなどのカスタマイズ可能な設定を使用して、QRコードを含むさまざまなタイプのバーコードを作成するための使いやすいAPIを提供します。

.NET MAUIプロジェクトのセットアップ

始めるには、Microsoft Visual Studio 2022で新しい.NET MAUIプロジェクトを作成する必要があります。Microsoft Visual Studio Codeを使用することもできますが、手順は異なります。 しかし、Visual Studioを使用することが推奨されます。 以下の手順に従ってプロジェクトを作成してください。

Visual Studio 2022を開きます。以下に示すような画面が表示されます。

新しいプロジェクトを作成し、以下に示すようにMAUIテンプレートを検索します。

.NET MAUIアプリテンプレートを選択し、次へボタンをクリックします。 次のウィンドウが表示されます。

プロジェクトに名前を付け、場所を選択して次へボタンをクリックします。以下に示すようなウィンドウが表示されます。

.NET Frameworkを選択します。 私は.NET 7を選択しましたが、.NET 6.0を選択することもできます。プロジェクトは以下に示すように作成されます。

このチュートリアルは、主に.NET MAUIアプリケーションをローカルのWindowsマシンに初めてデプロイすることに焦点を当てています。同じコードベースで、必要に応じてAndroidまたはiOSシミュレータ上で構成することができます。

ローカルのWindowsマシンに.NET MAUIアプリケーションをデプロイするには、Visual Studioを使用してこれらの手順に従うことができます:

1. デバッグターゲットが"Windows Machine"に設定されていることを確認してください。設定されていない場合は、ツールバーのドロップダウンから"Windows Machine"を選択してください。
2. "デバッグ開始"ボタンをクリックするか、F5キーを押して、Windowsマシン上でアプリケーションをビルドして実行します。

開発者モードがWindowsマシンで有効になっていない場合、Visual Studioは有効にするよう促します。 これを行うには、次の手順に従ってください:

1. Visual Studioが表示する"Windowsの開発者モードを有効にする"ダイアログボックスで、"開発者の設定"ラベルのリンクを見つけます。

2. "開発者の設定"リンクをクリックします。 これにより、Windowsマシンの設定アプリが開きます。
3. 以下に示すように開発者モードのトグルをオンにします。

開発者モードがオンになったらプロジェクトを実行します。 次のウィンドウが表示されます：

これは、プロジェクトを作成したときにVisual Studio 2022によって自動的に作成されるテンプレートアプリケーションです。 次に、IronBarcodeをインストールし、必要に応じてコードを変更します。

IronBarcodeのインストール

IronBarcodeをインストールするには、NuGetパッケージマネージャーコンソールを開きます。 Visual Studioでパッケージマネージャーコンソールを開くには、次の手順に従います。

1. WindowsマシンでVisual Studioを起動します。
2. 作業したいプロジェクトを開くか、新しいプロジェクトを作成します。
3. Visual Studioメニューの"Tools"に移動します。
4. ドロップダウンメニューで"NuGet パッケージマネージャー"をクリックします。
5. もう一つのドロップダウンメニューが表示され、"パッケージ マネージャー コンソール"を選択します。

これにより、プロジェクトのNuGetパッケージを管理するためのコマンドラインインターフェースを持つパッケージマネージャーコンソールウィンドウが開きます。 パッケージマネージャーコンソールに次のコマンドを入力してIronBarcodeをインストールします。

Install-Package BarCode

これにより、IronBarcodeライブラリがプロジェクトに追加され、利用可能になります。

IronBarcodeを使用した.NET MAUI QRコードジェネレータ

それでは、独自のQRコードジェネレータモバイルアプリケーションを作成するためのコードを書きましょう。 画面に生成されたQRコードを表示するには、.NET MAUIの機能を活用します。 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="QrCodeGeneratorMAUI.MainPage">

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

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                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="QrCodeGeneratorMAUI.MainPage">

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

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

上記のXAMLコードはQRコードを生成する.NET MAUIページを表しています。 ここに.NET MAUIコンポーネントの簡単な説明があります:

• <Label>: 画面にテキストを表示します。 このアプリケーションでは、挨拶メッセージと見出しを表示し、ユーザーに情報と指示を提供します。
• <Entry>: ユーザーにテキスト入力フィールドを提供します。 このアプリケーションでは、ユーザーがQRコードにエンコードしたいコンテンツを入力できます。
• <Image>: 画面に画像を表示します。 このアプリケーションでは、ユーザーが生成ボタンをクリックした後に生成されたQRコード画像を表示します。
• <Button>: クリック可能なボタンを表します。 クリックされるとアクションをトリガーします。 このアプリケーションでは、ユーザーが<Entry>フィールドに入力したコンテンツに基づいてQRコードの生成を開始します。

これらのコンポーネントが連携して、ユーザーがテキストを入力し、ボタンをクリックし、対応するQRコードを画面に表示するインターフェースを作成します。

では、QRコードを生成するためのバックエンドコードを書きましょう。 MainPage.xaml.csファイルを開き、コードビハインドクラスを次のように更新します。

using IronBarCode;

namespace QrCodeGeneratorMAUI
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

using IronBarCode;

namespace QrCodeGeneratorMAUI
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

Imports IronBarCode

Namespace QrCodeGeneratorMAUI
	Partial Public Class MainPage
		Inherits ContentPage

		Public Sub New()
			InitializeComponent()
		End Sub

		Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
			' Get the text from the entry field
			Dim text As String = qrCodeText.Text

			' Generate the QR code using the IronBarcode library
			Dim qrCode = QRCodeWriter.CreateQrCode(text)

			' Convert the QR code to binary JPEG data
			Dim qrCodeBytes = qrCode.ToJpegBinaryData()

			' Set the QR code image source to display the generated QR code on the UI
			qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
		End Sub
	End Class
End Namespace

コードの説明です。

1. OnButtonClickedメソッドは、ボタンのクリックイベントのイベントハンドラーです。 ボタンがクリックされると、このメソッドが実行されます。
2. OnButtonClickedメソッドの内部で、qrCodeTextエントリーフィールドに含まれるテキストはtext変数に割り当てられます。
3. QRCodeWriter.CreateQrCode(text)は、入力されたテキストに基づいてQRコードを作成します。
4. qrCode.ToJpegBinaryData()は、QRコードをバイナリJPEGデータに変換します。
5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes))は、生成されたQRコード画像を表示するためにqrCodeImageコントロールのソースを設定します。

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	' Get the text from the entry field
	Dim text As String = qrCodeText.Text

	' Generate the QR code using the IronBarcode library
	Dim qrCode = QRCodeWriter.CreateQrCode(text)

	' Add the text of the QR code value below the generated barcode
	qrCode.AddBarcodeValueTextBelowBarcode()

	' Add an annotation text above the barcode
	qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")

	' Convert the QR code to binary JPEG data
	Dim qrCodeBytes = qrCode.ToJpegBinaryData()

	' Set the QR code image source to display the generated QR code on the UI
	qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

.NET MAUIバーコードジェネレータ

IronBarcodeライブラリを使用して.NET MAUIバーコードジェネレータを作成することもできます。 コードを少し変更するだけで、以下のコード例に示すように問題なく動作させることができます。

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	' Get the text from the entry field
	Dim text As String = barCodeText.Text

	' Generate the barcode using the IronBarcode library with Code128 encoding
	Dim barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128)

	' Add the text of the barcode value below the generated barcode
	barCode.AddBarcodeValueTextBelowBarcode()

	' Add an annotation text above the barcode
	barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App")

	' Convert the barcode to binary JPEG data
	Dim qrCodeBytes = barCode.ToJpegBinaryData()

	' Set the barcode image source to display the generated barcode on the UI
	barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

結論

[30] この記事では、.NET MAUIとIronBarcodeライブラリを使用してQRコードジェネレーターとバーコードジェネレーターを作成する方法を学びました。 IronBarcodeをインストールし、QRコードを作成し、.NET MAUIのイメージコントロールを使用して画面に表示する手順を探りました。

.NET MAUIはクロスプラットフォームアプリケーションを構築するための強力なフレームワークを提供し、IronBarcodeはバーコードとQRコードの生成を簡素化します。 これらの技術を組み合わせることで、現代のデバイスの能力を活用した柔軟かつ効率的なアプリケーションを作成することができます。