バーコードリーダーコントロールの活用とQRコード作成方法

# 動画でも解説しました
動画【PowerApps】バーコードリーダーコントロール②活用例とQRコード作成方法
<iframe width="560" height="400" src="https://www.youtube.com/embed/vm2IBspilEw?si=hKV8sTG8QfnVH7QC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# 活用例
こちらがHOME画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/b5f5505f-befb-40b2-9bb4-1cf9975b26b4.png)
こんな感じで備品管理アプリなんてどうでしょう？
大抵の商品は購入するとバーコードが貼られているので、そのままスキャンして登録できたら便利ではないでしょうか？

↑のぎゃらりーｎQRコードボタンの上の英数字がバーコードの文字列になります。
データソース上ではuser_idにしています。

HOME画面の右上の＋ボタンのOnSelectプロパティに以下
```java:＋ボタンのOnSelectプロパティ
Navigate(ScreenForm);//フォーム画面に移動
NewForm(EditForm)//フォームを新規登録モードに変更
```

# アイテムの新規登録フォームを準備
画面の追加で、フォーム画面を追加してScreenFormに名前を変更
HOME画面のギャラリーと同じデータソースに接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/0493ad84-1f1b-4f5a-994b-35508ec2e8bc.png)
フィールドの編集で必要な項目に絞ります。
ここではアイテム名のuser_nameとバーコードの文字列であるuser_id
アイテムの写真であるuser_imageを残しました。

user_idにバーコードの文字列を入れるため、左メニューの＋アイコン➤メディア➤バーコードリーダーコントロールを追加します。

画像のように、バーコードリーダーコントロールは透明にして、カメラアイコンを背面に配置するのがおすすめです。

画面ScreenFormのOnVisibleプロパティに以下
```java:バーコードリーダーコントロールのOnScanプロパティ
//バーコードリーダーのデータ形式に合わせてコレクションを作成
ClearCollect(col_code2,{Type:"",Value:""});

//コレクションをクリア
Clear(col_code2);
```
▲バーコードをスキャンした際に作成するデータ形式に合わせてコレクションを準備します。
編集する際にエラーが出るので、入れておくと安心です。

# バーコードリーダーコントロールの設定

バーコードリーダーコントロールのOnScanプロパティに以下
```java:バーコードリーダーコントロールのOnScanプロパティ
ClearCollect(col_code2,Self.Barcodes)
```

複数スキャンする必要がないので、バーコードリーダーコントロールのスキャンモードは、```Automatically scan```か```Select to scan```にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/df5077ad-0dbe-4e7a-884c-d8de3989f9c1.png)
▲こちらのDataCardValueにバーコードの文字列を入れたいのでDefaultプロパティに以下
```java:DataCardValueのDefaultプロパティ
//バーコードをスキャンしていないときは、Parent.Default
//スキャンした時はコレクションの最後のレコードのValueを取得
If(
    IsBlank(col_code2),
    Parent.Default,
    Last(col_code2).Value
)
```

モバイルアプリを起動して、バーコードをスキャンしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/1e40ba1d-5192-4c92-a246-cfd2f46d0f2c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/abd7c87e-e601-4092-87fe-66d0139b64f5.png)
きちんとバーコードのデータが反映されました。

# APIを利用してQRコードを作成
既存のバーコードを利用しない場合は、QRコードを作成してアイテムに貼るのがおすすめです。
任意のIDをQRコードにするために、APIを利用してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/262ee9b0-8d2d-4ad6-b92a-32f46e704b9f.png)
QRコードボタンの上のテキストラベルの文字列をQRコードにしてみます。

QR cod APIについてはこちら↓
https://goqr.me/api/doc/create-qr-code/

リンク先の赤線の部分のサンプルURLを利用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/7d6820cd-9217-4235-b383-79d83c1cf05f.png)

QRコードボタンのOnSelectプロパティに以下
```java:QRコードボタンのOnSelectプロパティ
Launch("http://api.qrserver.com/v1/create-qr-code/?size=300x300&data=" & "ここにQRコードにしたい文字列")
```
"ここにQRコードにしたい文字列"の部分を変更して使用してください。

これで任意の文字列をQRコードにしてブラウザに表示出来ます。

試しにうさぎ工房のyoutubeチャンネルをQRコード化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/c88e910f-951f-41bc-93d0-98d9d7b9b8af.png)

アプリ上で表示したいなら画像のimageプロパティに変数を設定し
```
Set(変数名,"http://api.qrserver.com/v1/create-qr-code/?size=300x300&data=" & "ここにQRコードにしたい文字列")
```
とすることで画像コントロールにQRコードを表示することができます。

QR cod APIについてはこちら↓
https://goqr.me/api/doc/create-qr-code/