Chromebookで作るPWAアプリ日記11

こんにちは、junkawaです。

バーコード商品検索アプリが完成しました。

バーコードから商品検索【インストール不要】

今後は、カメラから直接バーコードを読み込む機能の追加を考えています。

使用したライブラリ

serratus/quaggaJS

バーコード解析ライブラリとして、quaggaJSを使うことにしました。

dist/quagga.min.js をダウンロードして使う。npm install quagga は使わない。

const Quagga = require('quagga.min').default;

npm installした時のやり方だと、上手く動かない。

ドキュメントにしたがって、index.htmlの方に <script src="js/quagga.min.js"></script> と書くことで解決。

webpackで生成した bundle.js で Quagga.xxx を呼び出すのですが、bundle.jsより先に quagga.min.js を呼び出す必要があります。

 <script src="js/quagga.min.js" defer></script>
 <script src="js/bundle.js" defer></script>

タグに async / defer を付けた場合のタイミング - Qiita</strong><em class="external-article-widget-description">Google Analytics などのサイト解析系サービスでは、サイトにそれらのサービスの JavaScript を埋め</em><em class="external-article-widget-url">qiita.com</em></a><a class="external-article-widget-image" href="https://qiita.com/phanect/items/82c85ea4b8f9c373d684" style="background-image: url('https://cdn.qiita.com/assets/qiita-fb-2887e7b4aad86fd8c25cea84846f2236.png');" target="_blank"></a></div></div></div>

今までは async としていたのですが、quagga.min.js と bundle.js の呼び出し順序を決めたいので、deferを使って解決。

JANコードから商品名を検索するWeb APIサービスに、楽天を追加

楽天ウェブサービス: 楽天商品検索API(version:2017-07-06) | API一覧

const appId = '<アプリケーションID>';
const url = 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&applicationId='+appId+'&keyword='+jan;
const response = UrlFetchApp.fetch(url);

Google Apps Scriptで上記のようにしてJANから商品情報を取得しています。

const searchData = JSON.parse(response.getContentText());
searchData.Items[i].Item.itemName;

商品名を取り出します。

str.replace(/　/g,' ').replace(/【.*?】/g,'').trim().split(/ /);

商品名 str をスペースで区切ってキーワードに分けます。

最初のreplaceで全角スペースを半角スペースに変換しています。
次のreplaceで【】で区切られた文字(例：【送料無料】)を削除しています。
最後のtrimで先頭と末尾のスペースを削除しています。

ヒットした商品名のキーワードを数え上げ、しきい値以上出現したキーワードを返しています。

取得できたキーワードの例です。