Power Apps で JANコードリーダー＆商品情報取得アプリを作成する

#>概要

Power Appsのバーコードスキャナ機能を利用し、JANコードを読み取ります。
読み取ったJANコードをもとに、YahooのAPIを利用し、商品情報を取得してみます。

#>**はじめに**

Power Appsにはバーコードスキャナ機能はこちらを参照してください
吉田の備忘録：https://memo.tyoshida.me/power-platform/powerapps/new-barcode-scanner-with-qr-code-capabilities/

Yahoo商品検索APIの詳細はこちら
https://developer.yahoo.co.jp/webapi/shopping/shopping/v3/itemsearch.html

Yahoo商品検索APIを利用するには、YahooディベロッパーネットワークにてアプリケーションID(Client ID)が必要です。
下記ページにて取得可能です。
https://e.developer.yahoo.co.jp/register
※サーバー/クライアントサイドの選択では**クライアントサイド**を選択します


##>**カスタムコネクタ作成**

現在（2020年11月時点）、Power AppsにはYahooAPIとのコネクタが用意されていないため、カスタムコネクタを作成します。

Power Appsのホームで、「データ」→「カスタムコネクタ」→「カスタムコネクタの新規作成」→「一から作成」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/e5580d18-1c64-ce70-9825-f7c3f28c6d87.png)

コネクタ名を入力し「続行」。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/f9288027-8ff0-f083-5198-eb083af67c45.png)

「1.全般」タブでは、「ホスト」と「ベース URL」に以下の値を入力してください。また、アイコンを設定すると後からわかりやすいです。
　　ホスト：shopping.yahooapis.jp
　　ベースURL：/ShoppingWebService/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/d9c42179-0409-fa46-f11a-6158477b21ff.png)


















「2.セキュリティ」タブは未入力です。（認証用のアプリケーションIDはリクエストパラメーターに設定します。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/7ecc4da8-7b41-1422-e343-ed0c918216ab.png)

「3.定義」でにて「新しいアクション」を選択し、全般の「概要 詳細情報」と「操作ID」を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/da863ca7-7de8-6680-c80a-31129a471661.png)

さらに「要求」の「＋サンプルからのインポート」選択し、下記の値で設定し、「インポート」します。
　　動詞：GET
　　URL：https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=&jan_code=
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/dd4f0f5f-0852-2fae-1ee1-504ba0903215.png)
パラメータとして、[appid]（アプリケーションID）と[jan_code]（JANコード）が定義されたことがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/974900b2-a832-62d7-280c-e34b10a592a4.png)

次に「応答」の「＋規定の応答を追加する」を選択し、本文に**以下URLに記載された「サンプルレスポンス」の値**
https://developer.yahoo.co.jp/webapi/shopping/shopping/v3/itemsearch.html
（*{"totalResultsAvailable":513766,"totalResultsReturned":1,"firstResultPosition":1,"requ ~中略~ "delivery":{"area":"","deadLine":null,"day":null}}]}*）
を入力し、「インポート」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/617612b7-e9e8-d56f-ea88-597e4c56255c.png)
応答の「default」を展開すると、複数のレスポンスフィールドが定義されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/5c80ce0c-e56e-6d1d-d0cf-adadebd8332c.png)

「コネクタの作成」をクリックし、コネクタを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/3e51ec4d-eb86-7f3c-d380-3f4f0a10252c.png)

「4.テスト」タブに移動し、「接続」の「＋新しい接続」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/86e76352-398d-0d32-3893-cb4ec9089e44.png)
「作成」をクリックし、接続を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/b7a8e9cb-8ef8-af9c-a82e-453389bd6113.png)

接続を作成後、再度、作成したカスタムコネクタを開き「4.テスト」タブに移動します。
「接続」で作成した接続を選択し、「GetCommodityInfo」の「appid」と「jan_code」にパラメータ値を設定し「テスト操作」します。
　　appid：Yahooディベロッパーネットワークにて取得したアプリケーションID(Client ID)
　　jan_code：Yahooショッピングで販売されてそうな製品のバーコードの数字
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/e1de2e67-71e7-361d-e16a-0e637b51bf38.png)

正しく設定されていれば、「jan_code」で指定した商品情報がレスポンスされます。
（この時は、ネスカフェドルチェグストカプセルのJANコードを入力しました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/8bde35f8-cf15-12e7-16d5-f25c9e06125d.png)

以上でカスタムコネクタの設定は完了です。


##>**Power Appsでバーコードリーダーの作成**

Power Appsでバーコードリーダーとカスタムコネクタを使って、JANコードアプリを作成します。

キャンパスアプリをスマホサイズで作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/e4efde1b-68f6-2eca-4e87-7b376f1df13d.png)

作成した接続を追加します。「データ」より「コネクタ」内の作成した接続を選択し、「接続の追加」します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/4dbc847a-95ba-21ce-4620-fed6cd71079e.png)

「メディア」の「バーコードスキャナー」をスクリーンに配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/113dd282-047c-04ca-3dc7-c586e9658514.png)

バーコードをスキャンしたらAPIを呼び出し商品検索を行いたいので、バーコードスキャナーの「OnScan」プロパティに、
Onscan：

```
ClearCollect(Commodity,<接続名>.<操作ID>({appid:"<アプリケーションID>",,jan_code:BarcodeScanner1.Value}))
```
を入力します。（バーコードスキャナーでスキャンした値は、自身のvalueに設定されます）
例

```
ClearCollect(Commodity,YahooCommoditySerch_201109.GetCommodityInfo({appid:"<アプリケーションID>",jan_code:BarcodeScanner1.Value}))
```

次に、商品名を表示するテキストラベルを配置し、「TEXT」プロパティに
TEXT：

```
LookUp(LookUp(Commodity,IsBlank(firstResultPosition)).hits,index=1).name
```
を入力します。
APIではJANコードによる商品検索を行い、結果の20件を返すようです。
よって、20件のうち最初の1件目を"index=1"で指定し、テーブルから最初の要素を抜き出しています。

そのほか、
商品説明

```
LookUp(LookUp(Commodity,IsBlank(firstResultPosition)).hits,index=1).description
```
商品価格

```
LookUp(LookUp(Commodity,IsBlank(firstResultPosition)).hits,index=1).priceLabel.defaultPrice
```

など、レスポンスフィールドの各項目から必要な情報を取得してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/0c14e056-dd3f-9b1a-7211-5000e8ea11ad.png)


#>**動作**

実際に動作させてみます。
バーコードスキャナーはiOSまたはAndroidのみで動くため、モバイル版PowerAppsで動作させます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">PowerAppsで、バーコード(JANコード)を読み取り、商品情報を読み取るアプリを作ってみた。<a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> <a href="https://twitter.com/hashtag/JPPUG?src=hash&amp;ref_src=twsrc%5Etfw">#JPPUG</a> <a href="https://t.co/twDJBpq47K">pic.twitter.com/twDJBpq47K</a></p>&mdash; MiTo (@MiTo60448639) <a href="https://twitter.com/MiTo60448639/status/1325720786653470720?ref_src=twsrc%5Etfw">November 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#>**まとめ**

Qiita初投稿のため、価値のある、伝わる情報が記載できたかわかりませんが、少しでもお役に立てたら幸いです。
今後、このアプリを含む、我が家の食品備品管理システムを構築する予定ですので、経過も含め発信できたら嬉しいです。