Power Appsでバーコード リーダー コントロールを使いこなそう！読書管理アプリ シリーズ

# はじめに
Power Appsで`バーコード リーダー`コントロールが存在します。
文字通り、`QR コード`を含む様々なバーコードを読み取ることができる機能です。

**Bingで「power apps バーコードリーダー」と検索すると驚いたことに私の以前の記事がでてきました。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/e3dfe09c-b38e-453a-1190-5cfd3de211cf.png)

https://qiita.com/DEmodoriGatsuO/items/29f7b3e145b1215e5bb8#:~:text=Power%20Apps%E3%81%A7Google%20Books%20API%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%90%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%201%20Power%20Apps%20Power,%E6%A4%9C%E8%A8%BC%20%E4%BB%8A%E5%9B%9E%E3%81%AE%E7%9B%AE%E7%9A%84%E3%81%AF%E3%80%8C%E6%9B%B8%E7%B1%8D%E6%83%85%E5%A0%B1%E3%80%8D%E3%81%AE%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%99%E3%80%82%20...%204%20Power%20Automate%E3%81%A7%E5%AE%9F%E8%B7%B5%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B%201.%20

:::note info
投稿から1年以上経過していますが、コネクタの部分の解説が有効であるので、
後ほど触れます。
:::

この記事を書いた時期と、`バーコード リーダー`の取り扱いが変わったところがあります。
今回はその解説をしたいと思います。

<details><summary>読書管理アプリを作ろう</summary>
この記事は「Power Appsで読書管理アプリを作ろう」の解説の一つです。

## 読書管理アプリ
 1. 【本の記録アプリ】キャンバスアプリでISBNコードから本をとうろくする
 1. 【読書管理アプリ】モデル駆動型アプリで読書の記録をするアプリ

このアプリケーションを作っていきます。
- キャンバスアプリ
- モデル駆動型アプリ
- Power Automate

上記の説明をテーマにしている内容です。

</details>

# バーコード リーダー コントロール

今回は**読書管理アプリ**のうち、本のバーコードから、本の情報を取得し、
**Dataverseに記録するアプリ**を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/69ba8c8a-7f4b-16de-36bc-7482916c1e92.png)

本に付属する**ISBNコードは一意の値ではありません。**
**一つのISBNコードに対し、複数の本の情報が紐づいています。**

上記のことを踏まえたうえで、Power Appsを作っていきましょう！

## バーコード スキャナーとリーダー
Power Appsのアップデートの変遷で、バーコード読み取り機能は、2024.01.14現在、
- [バーコード リーダー コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-barcodereader?source=recommendations)
- [バーコード スキャナー コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-barcodereader?source=recommendations)


2点存在します。
このうち、デフォルトになっている機能が
「[バーコード リーダー コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-barcodereader?source=recommendations)」です。

:::note warn
[バーコード スキャナー コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-barcodereader?source=recommendations)
こちらはレガシであり、廃止されます。
:::

[バーコード スキャナー コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-barcodereader?source=recommendations)との違いは、
**読み取った値の戻り値が、`配列`もとい`Table`型**ということです。

そのことからlearnの使用例も、`ギャラリーコントロール`に複数のバーコードを読み取った結果を返す方法を紹介しています。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/how-to/create-app-barcode-scanner

# 完成系

<iframe width="560" height="315" src="https://www.youtube.com/embed/X2tlm5nNAMs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy" allowfullscreen></iframe>

1. バーコード リーダーで複数のバーコードを読み取る
1. 結果を`OnScan`で`Collection`に格納
1. 同時に、`Collection`の先頭の値で`Google Books API`を実行
1. Google Books APIの結果を`ギャラリー コントロール`に反映する
1. ギャラリー コントロールで`選んだレコードをメインセクションに反映する`
1. ☑️ボタンで`Dataverseに格納する(Power Automate)`

## バーコード リーダー コントロール
`バーコード リーダー コントロール`は、スマートフォン・タブレットで機能します。

予め携帯電話でスキャンすることを想定し、
**アプリのレイアウトはレスポンシブ対応しているテンプレートのデザイン**を採用しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/ec673b54-dc87-208a-9ba5-5d269ac71ff3.png)


`バーコード リーダー コントロール`の特徴ですが、**読み取りに複数のモード**があります。

|English|モード|詳細|
|---|---|---|
|AutomaticallyScan|自動スキャン|バーコードは検出されるとすぐにスキャンされる
|SelectToScan|選択してスキャン|ユーザーは、検出されたバーコードのどれをスキャンするかを決定できる
|ScanMultiple|複数スキャン|ユーザーは、バーコード セッション中に複数のバーコードをスキャンできる

**ScanMultiple（複数スキャン）**
一度の起動で複数のバーコードが読み取れる機能。
結構わたしは気に入っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/665a6b54-93ee-9ae3-112c-a932f9f4ad26.png)

**スキャンした結果もすぐに確認できるところもGoodです。**

複数選択した結果は`List Box`に`コレクション`で格納します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/a35b65d4-0a00-1a8a-7f72-a5463d12e5ab.png)

```plaintext:バーコードリーダー OnScan
// スキャンされたバーコード一覧
ClearCollect(colScans,
    Self.Barcodes
);
// コレクションの最初の値を変数に格納します
Set(varIsbn,First(colScans).Value);
// APIの実行
Set(APIResult,GoogleBooksSearch.GetBookInformation(varIsbn).items);
```

```plaintext:リストボックス Items
colScans
```

```plaintext:リストボックス OnChange
// リストボックスの値を変数に格納します
Set(varIsbn,Self.Selected.Value);
// APIの実行
Set(APIResult,GoogleBooksSearch.GetBookInformation(varIsbn).items);
```

:::note info
コンボ ボックスの方が使いやすいかもしれません。
好みで選んでください。
:::

またスキャンしない場合の対応、電子書籍でISBNコードを直接入力する用に`TextInput`も予備で備えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/c7c296c2-5cd8-e122-0484-99284376afcf.png)

```plaintext:ボタン OnSelect
// テキストインプットの値を変数に格納します
Set(varIsbn,inpISBN.Value);
// APIの実行
Set(APIResult,GoogleBooksSearch.GetBookInformation(varIsbn).items);
```

### カスタム コネクタ
APIの呼び出しはカスタム コネクタで実装しています。
こちらは1年以上前に書いた記事ですが、作り方がそのまま書いてますので、こちらを参照してください！

https://qiita.com/DEmodoriGatsuO/items/29f7b3e145b1215e5bb8#:~:text=Power%20Apps%E3%81%A7Google%20Books%20API%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%90%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%201%20Power%20Apps%20Power,%E6%A4%9C%E8%A8%BC%20%E4%BB%8A%E5%9B%9E%E3%81%AE%E7%9B%AE%E7%9A%84%E3%81%AF%E3%80%8C%E6%9B%B8%E7%B1%8D%E6%83%85%E5%A0%B1%E3%80%8D%E3%81%AE%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%99%E3%80%82%20...%204%20Power%20Automate%E3%81%A7%E5%AE%9F%E8%B7%B5%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B%201.%20

## ギャラリー コントロール
APIの結果を変数に格納し、ギャラリーコントロールに反映します。
Table型の値なので、このまま機能します。

```plaintext:ギャラリー コントロール Items
APIResult
```

タイトルが非常に長い本にも対応させるため、空の伸縮可能なギャラリーを採用しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/29aab0f2-1300-8aa6-854f-6e936d922ceb.png)

Google Books APIの戻り値のJSONは、対象の本によって取得できる値が増減します。

```json:example
{
  "kind": "books#volume",
  "id": "p-QqwQEACAAJ",
  "etag": "SR1p4bW36mw",
  "selfLink": "https://www.googleapis.com/books/v1/volumes/p-QqwQEACAAJ",
  "volumeInfo": {
    "title": "PowerPoint資料作成プロフェッショナルの大原則",
    "subtitle": "12のステップと154の原則で学ぶ外資系コンサルの仕事術",
    "authors": [
      "松上純一郎"
    ],
    "publishedDate": "2019-02-02",
    "description": "経営企画、マーケティング、コンサルタント、営業、エンジニア、作業療法士etc.1,500名を超える受講者を満足させた人気講座をまるごと書籍化。会社が教えてくれない「正しい資料」の作り方。",
    "industryIdentifiers": [
      {
        "type": "ISBN_10",
        "identifier": "4297103087"
      },
      {
        "type": "ISBN_13",
        "identifier": "9784297103088"
      }
    ],
    "readingModes": {
      "text": false,
      "image": false
    },
    "pageCount": 527,
    "printType": "BOOK",
    "maturityRating": "NOT_MATURE",
    "allowAnonLogging": false,
    "contentVersion": "preview-1.0.0",
    "panelizationSummary": {
      "containsEpubBubbles": false,
      "containsImageBubbles": false
    },
    "imageLinks": {
      "smallThumbnail": "http://books.google.com/books/content?id=p-QqwQEACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
      "thumbnail": "http://books.google.com/books/content?id=p-QqwQEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"
    },
    "language": "ja",
    "previewLink": "http://books.google.co.jp/books?id=p-QqwQEACAAJ&dq=9784297103088&hl=&cd=1&source=gbs_api",
    "infoLink": "http://books.google.co.jp/books?id=p-QqwQEACAAJ&dq=9784297103088&hl=&source=gbs_api",
    "canonicalVolumeLink": "https://books.google.com/books/about/PowerPoint%E8%B3%87%E6%96%99%E4%BD%9C%E6%88%90%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7.html?hl=&id=p-QqwQEACAAJ"
  },
  "saleInfo": {
    "country": "JP",
    "saleability": "NOT_FOR_SALE",
    "isEbook": false
  },
  "accessInfo": {
    "country": "JP",
    "viewability": "NO_PAGES",
    "embeddable": false,
    "publicDomain": false,
    "textToSpeechPermission": "ALLOWED",
    "epub": {
      "isAvailable": false
    },
    "pdf": {
      "isAvailable": false
    },
    "webReaderLink": "http://play.google.com/books/reader?id=p-QqwQEACAAJ&hl=&source=gbs_api",
    "accessViewStatus": "NONE",
    "quoteSharingAllowed": false
  },
  "searchInfo": {
    "textSnippet": "経営企画、マーケティング、コンサルタント、営業、エンジニア、作業療法士etc.1,500名を超える受講者を満足させた人気講座をまるごと書籍化。会社が教えてくれない「正しい資 ..."
  }
}
```

ギャラリー コントロールには、確実に取得できるか、定かではない、
`Subtitle`などの属性を利用しない形でレイアウトを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/5abb2ad9-3061-38da-1eb6-7803cb63e58f.png)

## メインセクション
今回は`Form コントロール`を使わずに使っています。
レスポンシブ対応を考えるのであれば、`Form`を使ったほうが楽です。

ただ今回は、`Datasource`を指定しないアプリのため、採用しませんでした。

`コンテナ`を積極的に使い、微調整していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/5693f77f-1d8f-1f0f-c9c1-a1d679af2874.png)

また、レスポンシブ対応は、こちらに加えて、テンプレートの変数や微調整が必要になります。
このとき、コントロールや変数を参照して、高さや幅、表示が決まっていたコントロールは、エラーを起こすので注意してください。

## Dataverseへのアップロード
`Power Automate`を使い、新規レコードとして登録します。

**フローはこちら！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/04c99105-b037-a109-3987-d32aebc52d6e.png)

**Power Apps** のフロー起動

```OnSelect
recordDataverseTable.Run(
    galAPIResult.Selected.volumeInfo.imageLinks.thumbnail,
    galAPIResult.Selected.volumeInfo.title,
    Concat(galAPIResult.Selected.volumeInfo.authors,Value & ";"),
    inpPublisher.Value,
    galAPIResult.Selected.volumeInfo.infoLink,
    varIsbn
)
```

サムネイルもアップロードしたいので、**Google Books APIのイメージリンクにGETリクエスト**を送ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/df9598a4-8339-3066-b3b6-71f661d6d534.png)

このアクションの戻り値を画像としてアップロードしてあげる必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/6e5b7bcf-7c91-173b-6bf8-d23d4f8144ca.png)

```plaintext:コンテンツをアップロード
base64ToBinary(body('HTTP')?['$content'])
```

## モデル駆動型アプリに無事記録！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/b181e190-7e3a-41e8-fd51-c99e306a55d2.png)

# おわりに

まずは、アプリケーションを作りたい性分から、バーコードリーダーコントロールを使ったアプリの例を紹介しました。

対応している規格も多く、便利ですね！
**是非、業務でも私生活でも活かしてみてください！**

**それでは、良いPower Lifeを！**

## おまけ

レイアウトの説明をかなり省いていますので、msappファイルを置いておきます。

https://github.com/DEmodoriGatsuO/PowerPlatform-Events-Sample/tree/main/99Qiita/20240115