IRONBARCODEの使用

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

Name: IronBarcode
Brand: Iron Software
Availability: InStock
Rating: 4.67 (175 reviews)

ジョルディ・バルディア

2023年5月30日

共有:

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

.NET MAUIとは何ですか？

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

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

Download the C# library for generating QR codes
マウイユーザーインターフェースを構成する
CreateQrCode メソッドを使用して、文字列からQRコードを生成します
ToJpegBinaryData メソッドを使用して画像のバイナリデータにアクセスします
バイナリデータをMauiアプリに渡してQRコードを表示します

IronBarcodeの紹介

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

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

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

Visual Studio 2022を開きます。次に示す画面が表示されます。

.NET MAUIでQRコードを生成する方法：図1 - Visual Studio 2022 IDE

新規プロジェクトの作成をクリックし、以下に示すようにMAUIテンプレートを検索してください。

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

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

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

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

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

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

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

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

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

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

Windowsマシンで開発者モードが有効になっていない場合、Visual Studioから有効にするよう促されます。次の手順に従ってください:
Visual Studio に表示される「Enable Developer Mode for Windows」ダイアログボックスで、「settings for developers」リンクを見つけます。
「開発者向け設定」のリンクをクリックしてください。これにより、Windowsマシンの設定アプリが開きます。
以下に示すように、デベロッパーモードのトグルをオンにします。

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

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

IronBarcode のインストール

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

WindowsマシンでVisual Studioを起動してください。
作業したいプロジェクトを開くか、新しいプロジェクトを作成してください。
Visual Studioのメニューで、「ツール」に移動します。
ドロップダウンメニューから「NuGet パッケージマネージャー」をクリックします。
別のドロップダウンメニューが表示されるので、「Package Manager Console」を選択してください。

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

:PackageInstall

:PackageInstall

SHELL

これは、IronBarcodeライブラリをプロジェクトに追加し、使用できるようにします。

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

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>

XML

上記のXAMLコードは、QRコードを生成する.NET MAUIページを表しています。以下は、.NET MAUIコンポーネントの簡単な説明です：

<Label>: <Label>コンポーネントの目的は、画面にテキストを表示することです。このアプリケーションでは、ユーザーに情報と指示を提供するために、ウェルカムメッセージと見出しを表示するために使用されます。
<Entry>: <Entry>コンポーネントは、ユーザーにテキスト入力フィールドを提供するために使用されます。このアプリケーションでは、ユーザーがQRコードにエンコードしたい内容を入力することができます。
<Image>: <Image> コンポーネントは、画面に画像を表示するために使用されます。このアプリケーションでは、ユーザーが生成ボタンをクリックした後に生成されたQRコード画像を表示するために使用されます。
<Button>: <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)
    {
        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

$vbLabelText $csharpLabel

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

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

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

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

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

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

注釈と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

$vbLabelText $csharpLabel

qrCode.AddBarcodeValueTextBelowBarcode() は、生成されたバーコードの下にQRコードの値のテキストを追加します。
qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App") は、バーコードの上に注釈テキストを追加し、それが .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

$vbLabelText $csharpLabel

出力

.NET MAUIでQRコードを生成する方法: 図13 - バーコード生成器

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

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

IronBarcode は開発用に無料で、無料トライアルおよび商業目的に応じたさまざまな価格プランを提供しています。価格はライセンスオプションに基づいており、オンプレミス導入向けの永久ライセンスとクラウドベースの導入向けのサブスクリプション型ライセンスが含まれています。

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

結論

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

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

ジョルディ・バルディア

今すぐエンジニアリングチームとチャット

ソフトウェアエンジニア

ジョルディは、Iron Softwareでのスキルを活かしていないときには、ゲームプログラミングをしており、Python、C#、C++に最も堪能です。彼は製品テスト、製品開発、研究の責任を共有しており、継続的な製品改善に大きな価値をもたらしています。この多様な経験は彼を常に挑戦的で魅力的に保ち、彼はIron Softwareで働く一番好きな側面の一つだと言っています。ジョルディはフロリダ州マイアミで育ち、フロリダ大学でコンピューターサイエンスと統計学を学びました。

< 以前
BlazorでQRコードを生成する方法

次へ >
C# Windowsアプリケーションでバーコードを印刷する方法