Mauiアプリでバーコードを読み取る

はじめに

Mauiアプリでバーコードを読み取る方法を紹介する

バーコードにはいくつかの種類があるのでまずはそちらを紹介する
多すぎるので代表的なものだけ記載する

名称	形式	桁数	特記事項	サンプル
EAN-13	1次元	13	日本では「JANコード」とも呼ばれる
UPC-A	1次元	12	北米で主に使用される
QRコード	2次元	可変	国際的に使用される。情報の量に応じて桁数が変わる
Code 128	1次元	可変	物流・輸送業界で広く使用される

環境

プロジェクトの作成

SampleBarcode という名前でプロジェクトを作成

必要なプラグインをインストール

NuGet から ZXing.Net.Maui.Controls をインストールする

カメラの使用を許可する

AndroidManifest.cs と Info.plist に下記を追加する

<uses-permission android:name="android.permission.CAMERA" />

<key>NSCameraUsageDescription</key>　　<!-- 追記 -->
<string>This app uses barcode scanning to enroll the device</string>　　<!-- 追記 -->

ファイル全体だと下記のようになる

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:supportsRtl="true"></application>
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.CAMERA" />　<!-- 追記 -->
	<uses-sdk />
</manifest>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>LSRequiresIPhoneOS</key>
	<true/>
	<key>UIDeviceFamily</key>
	<array>
		<integer>1</integer>
		<integer>2</integer>
	</array>
	<key>UIRequiredDeviceCapabilities</key>
	<array>
		<string>arm64</string>
	</array>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UISupportedInterfaceOrientations~ipad</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationPortraitUpsideDown</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>XSAppIconAssets</key>
	<string>Assets.xcassets/appicon.appiconset</string>
    <key>NSCameraUsageDescription</key>　　<!-- 追記 -->
    <string>This app uses barcode scanning to enroll the device</string>　　<!-- 追記 -->
</dict>
</plist>

MauiProgram.cs コード

MauiProgram.cs に下記を追記する

using Microsoft.Extensions.Logging;
using ZXing.Net.Maui.Controls;　// 追記

namespace SampleBarcode
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                })
                .UseBarcodeReader();　// 追記

#if DEBUG
    		builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }
}

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"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI.Controls"
             x:Class="SampleBarcode.MainPage">

    <zxing:CameraBarcodeReaderView
        x:Name="barcodeReader"
        BarcodesDetected="barcodeReader_BarcodesDetected"
		/>

</ContentPage>

MainPage.xaml.cs コード

namespace SampleBarcode
{
    public partial class MainPage : ContentPage
    {

        public MainPage()
        {
            InitializeComponent();
            
            barcodeReader.Options = new ZXing.Net.Maui.BarcodeReaderOptions { 
                Formats = ZXing.Net.Maui.BarcodeFormat.Ean13,
                AutoRotate = true,
                Multiple = true
            };
        }

        private void barcodeReader_BarcodesDetected(object sender, ZXing.Net.Maui.BarcodeDetectionEventArgs e) 
        {
            var first = e.Results?.FirstOrDefault();
            if (first is null)
                return;

            Dispatcher.DispatchAsync(async () => {
                await DisplayAlert("Barcode Detected", first.Value,"OK");
            });
        }
    }

}

これで Dispatcher.DispatchAsync のところにブレークポイントを入れると、first.Value に読み取ったものが確認できるはずだ
下記の部分で読み取るバーコードを指定している
様々なオプションを付けることができるので、このあたりのオプションは後日調べたら追加しようと思う
この場合、JANコード を読み取るように指定している
フォーマットは Ean13 となる

barcodeReader.Options = new ZXing.Net.Maui.BarcodeReaderOptions { 
    Formats = ZXing.Net.Maui.BarcodeFormat.Ean13,
    AutoRotate = true,
    Multiple = true
};

さいごに

これでバーコードを読み取ることができた
読み取り速度も申し分なく、すぐに読み取ることができた
しかしバーコードにこんなにも種類があるとは思わなかった