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

この記事では、クロスプラットフォームアプリケーションを構築するための最新フレームワークである.NET MAUIを使用して、QRコードジェネレーターを作成する方法について探ります。 IronBarcodeライブラリを利用してQRコードを生成し、画面に表示します。

.NET MAUIとは何ですか？

.NET MAUI(マルチプラットフォームアプリUI)Xamarin Formsフレームワークの進化形であり、単一のコードベースを使用して複数のプラットフォームのネイティブユーザーインターフェイスを構築できるようにするものです。 .NET MAUIを使用すると、Android、iOS、macOS、Windowsなどのアプリを作成でき、開発時間と労力を削減できます。

IronBarcodeの紹介

IronBarcodeは、.NETアプリケーション向けの強力なバーコードおよび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シミュレーターに設定することもできます。

.NET MAUIアプリケーションをローカルのWindowsマシンにデプロイするには、Visual Studioを使用して次の手順に従います:

1. デバッグターゲットが「Windows Machine」に設定されていることを確認してください。設定されていない場合は、ツールバーのドロップダウンから「Windows Machine」を選択してください。

2. Windowsマシンでアプリケーションをビルドして実行するには、「Start Debugging」ボタンをクリックするか、F5キーを押してください。

   

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

3. Visual Studio に表示される「Enable Developer Mode for Windows」ダイアログ ボックスで、「settings for developers」リンクを見つけます。

   

4. 「開発者向け設定」のリンクをクリックしてください。 これにより、Windowsマシンの設定アプリが開きます。

5. 以下に示すように、デベロッパーモードのトグルをオンにします。

   

   デベロッパーモードがオンになったらプロジェクトを実行します。 次のウィンドウが表示されます:

   

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

IronBarcode のインストール

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

1. WindowsマシンでVisual Studioを起動してください。

2. 作業したいプロジェクトを開くか、新しいプロジェクトを作成してください。

3. Visual Studioのメニューで、「ツール」に移動します。

4. ドロップダウンメニューから「NuGet パッケージマネージャー」をクリックします。

5. 別のドロップダウンメニューが表示されるので、「Package Manager Console」を選択してください。

   パッケージ マネージャー コンソールのウィンドウが開き、プロジェクト内でNuGetパッケージを管理するためのコマンドライン インターフェイスが提供されます。 次のコマンドをパッケージ マネージャー コンソールに入力してください。

:PackageInstall

これは、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コンポーネントの簡単な説明です：

• もちろん、英語のテキストを教えていただけますでしょうか？もちろん、英語のテキストを教えていただけますでしょうか？目的:もちろん、英語のテキストを教えていただけますでしょうか？もちろん、英語のテキストを教えていただけますでしょうか？ component is to display text on the screen. このアプリケーションでは、ユーザーに情報と指示を提供するために、ウェルカムメッセージと見出しを表示するために使用されます。
• もちろん、英語のテキストを教えていただけますでしょうか？: もちろん、英語のテキストを教えていただけますでしょうか？もちろん、英語のテキストを教えていただけますでしょうか？ component is used to provide a text input field for the user. このアプリケーションでは、ユーザーがQRコードにエンコードしたい内容を入力することができます。
• もちろん、英語のテキストを教えていただけますでしょうか？: もちろん、英語のテキストを教えていただけますでしょうか？もちろん、英語のテキストを教えていただけますでしょうか？ component is used to display an image on the screen. このアプリケーションでは、ユーザーが生成ボタンをクリックした後に生成されたQRコード画像を表示するために使用されます。

• もちろん、英語のテキストを教えていただけますでしょうか？: もちろん、英語のテキストを教えていただけますでしょうか？もちろん、英語のテキストを教えていただけますでしょうか？ component represents a clickable button. クリック時にアクションをトリガーすることができます。 このアプリケーションでは、ボタンを使用して、ユーザーが入力した内容に基づいて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)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        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)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        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)
			Dim text As String = qrCodeText.Text
			Dim qrCode = QRCodeWriter.CreateQrCode(text)
			Dim qrCodeBytes = qrCode.ToJpegBinaryData()
			qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
		End Sub
	End Class
End Namespace

ここにコードの説明があります。

1. OnButtonClicked メソッドは、ボタンのクリックイベントに対するイベントハンドラーです。 ボタンがクリックされると、このメソッドが実行されます。

2. OnButtonClicked メソッド内で、qrCodeText エントリフィールドに含まれているテキストが text 変数に割り当てられます。

3. QRCodeWriter.CreateQrCode(テキスト) は、入力されたテキストに基づいてQRコードを作成するために使用されます。

4. qrCode.ToJpegBinaryData()QRコードをバイナリJPEGデータに変換します。

5. qrCodeImage.Source = ImageSource.FromStream(()=> 新しいMemoryStream(qrCodeBytes))qrCodeImage コントロールのソースを設定して生成されたQRコード画像を表示します。

.NET MAUIアプリケーションを実行する

プロジェクトを実行して機能をテストしましょう。 Windows マシンでアプリケーションを実行するには F5 を押します。プロジェクトを実行すると次の画面が表示されます。

テキストファイルにエンコードしたいテキストを入力し、「QRコード生成」ボタンを押してください。 QRコードは以下のように生成されて画面に表示されます。

注釈とQRコードの値を追加

次に、基本的な機能を備えたQRコード生成器を開発しました。 QRコードに注釈とQRコード値を追加して、より機能的にしましょう。 以下のソースコードのように OnButtonClicked メソッドを変更してください。

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	Dim text As String = qrCodeText.Text
	Dim qrCode = QRCodeWriter.CreateQrCode(text)
	qrCode.AddBarcodeValueTextBelowBarcode()
	qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
	Dim qrCodeBytes = qrCode.ToJpegBinaryData()
	qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

• `qrCode.AddBarcodeValueTextBelowBarcode()生成されたバーコードの下にQRコード値のテキストを追加します。

  qrCode.AddAnnotationTextAboveBarcode(「.NET MAUIアプリによって生成された私のQRコード」)次のテキストをバーコードの上に注釈として追加し、.NET MAUIアプリによって生成されたことを示します。

  Visual Studio 2022は、.NET MAUI アプリ向けにホットリロードオプションを提供しています。OnButtonClickedを変更した後にホットリロードをクリックすると、変更が反映されます。アプリケーションを閉じて再構築する必要はないかもしれません。

  エンコードしたいテキストを入力し、「QRコードを生成」ボタンを押してください。 QRコードは以下に示すように生成されます。

  

  IronBarcodeは、画像の追加、QRコードの着色およびサイズ変更などの他の便利な機能も提供します。詳細についてはチュートリアル以下のコンテンツを日本語に翻訳してください：コード例、次をご参照ください公式ドキュメント.

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

IronBarcodeライブラリを使用して、.NET MAUIのバーコードジェネレーターを作成することもできます。 以下のコードサンプルに示すように、コードを少し変更するだけで、準備が整います。

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
		Dim text As String = barCodeText.Text
		Dim barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128)
		barCode.AddBarcodeValueTextBelowBarcode()
		barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
		Dim qrCodeBytes = barCode.ToJpegBinaryData()
		barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

出力

以下は、日本語への翻訳です：

また、.NET MAUIとIronBarcodeライブラリを使用してQRコードジェネレーターを作成する方法を学ぶことに加えて、IronBarcodeの価格面についても言及する価値があります。

IronBarcode開発には無料でご利用いただけ、無料試用そして、商業目的のさまざまなニーズに対応するための異なる料金プラン。 価格設定はライセンスオプション, には、オンプレミス展開に対する永久ライセンスとクラウド展開に対するサブスクリプションベースのライセンスが含まれます。

結論

この記事では、どのようにして作成するかを学びました。QRコードジェネレーター.NET MAUI と IronBarcode ライブラリを使用したバーコード生成器。 私たちは、IronBarcodeをインストールし、QRコードを作成し、.NET MAUIの画像コントロールを使用してそれらを画面に表示する手順を探りました。

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