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

はじめに

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

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

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

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

読書管理アプリを作ろう

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

読書管理アプリ

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

このアプリケーションを作っていきます。

• キャンバスアプリ
• モデル駆動型アプリ
• Power Automate

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

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

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

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

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

バーコード スキャナーとリーダー

Power Appsのアップデートの変遷で、バーコード読み取り機能は、2024.01.14現在、

• バーコード リーダー コントロール
• バーコード スキャナー コントロール

2点存在します。
このうち、デフォルトになっている機能が
「バーコード リーダー コントロール」です。

バーコード スキャナー コントロール
こちらはレガシであり、廃止されます。

バーコード スキャナー コントロールとの違いは、
読み取った値の戻り値が、配列もといTable型ということです。

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

完成系

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

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

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

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

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

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

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

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

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

バーコードリーダー OnScan

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

リストボックス Items

colScans

リストボックス OnChange

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

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

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

ボタン OnSelect

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

カスタム コネクタ

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

ギャラリー コントロール

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

ギャラリー コントロール Items

APIResult

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

Google Books APIの戻り値の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などの属性を利用しない形でレイアウトを作ります。

メインセクション

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

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

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

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

Dataverseへのアップロード

Power Automateを使い、新規レコードとして登録します。

フローはこちら！

Power Apps のフロー起動

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リクエストを送ります。

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

コンテンツをアップロード

base64ToBinary(body('HTTP')?['$content'])

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

おわりに

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

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

それでは、良いPower Lifeを！

おまけ

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