Monacaでバーコード等から読み取ったデータをLocalStorageに保存したい

前提・実現したいこと

Monaca で QRコードリーダを実装し、読み込んだデータをLocalStorageに保存したいのですが、うまくいきません。
Monacaなどアプリ開発は初心者レベルなのでご教授願います。
使用しているバーコードプラグインはPhoneGap Barcode Scanner　8.1.0 です。

該当のソースコード

javascript
1//バーコードを読み込み成功したらアラート表示
2function scanBarcode() {
3  console.log('startCodeScanning');
4  cordova.plugins.barcodeScanner.scan(
5    function (result) {
6      if(result.cancelled){
7        return;
8      }
9      //Result: result.text
10      //Format: result.format
11      //Cancelled: result.cancelled
12      alert("We got a barcode\n" +
13            "Result: " + result.text + "\n" +
14            "Format: " + result.format + "\n" +
15            "Cancelled: " + result.cancelled);
16      localStorage.setItem('qr_code',result);
17    },
18    function (error) {
19      alert("Scanning failed: " + error);
20    }
21  );
22  
23
24  if ('qr_code' in localStorage) {
25    alert('yes');
26  } else {
27      alert('no');
28  }
29
30}

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <link rel="stylesheet" href="components/loader.css">
8    <link href="css/html5reset-1.6.1.css" rel="stylesheet">
9    <link href="css/style.css" rel="stylesheet">
10    <link rel="stylesheet" href="components/loader.css">
11    <script src="js/lib/jquery-3.5.1.min.js"></script>
12    <script src="components/loader.js"></script>
13    <script>
14    function scanBarcode() {
15        cordova.plugins.barcodeScanner.scan( function(result) {
16                alert("We got a barcode\n" +
17                          "Result: " + result.text + "\n" +
18                          "Format: " + result.format + "\n" +
19                          "Cancelled: " + result.cancelled);
20            }, function(error) {
21                alert("Scanning failed: " + error);
22            }
23        );
24
25    }
26    </script>
27</head>
28<body>
29  <header>
30    <div class="header-bar">
31        <h1>QRコードリーダ</h1>
32        <a href="menu.html" class="btn-back"></a>
33    </div>
34  </header>
35  
36  <input type="button" onClick ="scanBarcode()" value ="Scan" />
37  
38  <footer>
39    <a href="javascript:scanBarcode();" class="big-btn blue">Code Read</a>
40 </footer>
41</body>
42</html>

該当の画面を開く（アプリを動かす）とヘッダに「QRコードリーダ」とひとつ前の画面に戻るボタン、フッタにコードリーダを呼び出すボタンが配置された画面が表示されます。
コードリーダを呼び出すボタンを押すとコードリーダが呼び出されます。その後QRコードなどにかざすと、画面下側に「コードが読み込まれました：<URL>」のような内容が表示されます。
しかし、戻った時にalertのポップアップが表示されるはずなのですが、これが出てきません。
LocalStorageにも変数が追加されていないため、おそらく成功した時の関数が実行されていません。
これをどうにかしたいのですが、似たような問題とそれの解決策がなかったため質問させていただきました。

試したこと

GPSなどでバックグラウンド処理を有効にしていると、ときどき動作しなくなるという旨の記事を見たため、それを回避するコードを入力しました。（上記にはありません）
必要なプラグインのインポートのし忘れやHTMLファイルでsrcの読み込み順番の間違えによるエラー等のチェックを行いましたが、解決には至りませんでした。

(2020/07/27　追記)
Promiseを用いた非同期処理を実践したところ、後述するような文がログに出力されました。以下に示すのはPromiseを用いたjsコードです。

javascript
1function scan(){
2  return new Promise((resolve,reject) =>{
3    document.addEventListener("deviceready",   cordova.plugins.barcodeScanner.scan(
4      function (result) {
5        resolve(result.text);
6      },
7      function (error) {
8        reject(error);
9      },
10      {
11        preferFrontCamera : false, // iOS and Android
12        showFlipCameraButton : true, // iOS and Android
13        showTorchButton : true, // iOS and Android
14        //torchOn: true, // Android, launch with the torch switched on (if available)
15        saveHistory: true, // Android, save scan history (default false)
16        prompt : "Place a barcode inside the scan area", // Android
17        resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
18        formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
19        //orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
20        disableAnimations : true, // iOS
21        disableSuccessBeep: true // iOS and Android
22      }
23    ), false);
24  });
25}
26
27function scanBarcode(){
28  scan().then(response => alert(`Scanning Success: ${response}`))
29        .catch(error => alert(`Scanning failed: ${error}`))
30        .finally(() => console.log('終了'));
31}
32}

上記コードを実行したところ、catch()の方が実行（失敗）されました。このエラーを修正すればバーコードスキャナーを使えるようになりそうですが、、、

text
1Scanning failed: TypeError: Cannnot read property 'handleEvent' of undefined

2020/07/28　追記
BarcodeScannerプラグインのみ有効にし、プログラムはサンプルのコードのままで動作させましたが、やはり成功時に呼び出されるalertが表示されませんでした。
また、Blankプロジェクトを作成し、BarcodeScannerのみ有効にし、サンプルコードのまま動かすと、こちらはうまくいきました。
このことから他のプラグインが邪魔をしているわけではなさそうです。

otak-lab

2020/07/25 07:01

テスト端末はAndroidですか？別端末で再確認するか、プラグインをVer.8.0.1で試してみてください。それからJavaScriptのコードですが、非同期なので結果を取得する前に下のif文が実行されます。

JagdFeind

2020/07/25 11:26

Android で行っています。バーコードのプラグインはMonacaのものを使っていてダウングレードができません。

otak-lab

2020/07/26 03:51

Monacaの有償サポートを利用した方がよろしいかと思います。

otak-lab

2020/07/27 07:18

プラグインが正常に動作していない可能性が高いです。テスト端末のAndroidのバージョンと、プラグインのConfigでパラメータを指定しているか（ANDROID_SUPPORT_V4_VERSION=27.+）など必要な情報がないと解決は難しいです。以下のURLのような事象もあるので、端末を変えてみるなど試してください。https://github.com/phonegap/phonegap-plugin-barcodescanner/issues/691

JagdFeind

2020/07/28 01:11

BarcodeScannerプラグインのダウングレードができましたので実行しましたが、できませんでした。テスト環境： barcodeScannerプラグインバージョン:8.0.1 モデル: ASUS_X00RD Androidバージョン:8.0.0 ソフトウェア情報（ベースバンドバージョン、カーネルバージョン、ビルド番号) JP_ZA550KI_15.07.2005.55_20200423 バーコードリーダ自体は起動します。qrコードにかざすと画面下に「URLがヒットしました。- <URL>」と出てきます。しかし、アプリに戻った時にalert表示されるはずですが、やはり表示されません。

JagdFeind

2020/07/28 01:17 編集

プラグインのコンフィグには特にパラメータを指定していません。また、上記テストのときはすでに構築されたアプリにコードリーダを追加する形で作っているため、他にも多くのソースやプラグインがあります。＜他プラグインとバージョン＞ BackgroudMode - 0.7.3 BLE - 1.2.4 Camera - 4.0.3 Custom Config - 5.1.0 Device - 2.0.2 File - 6.0.2 Geilocation - 4.0.1 Monaca Plugin - 3.3.0 Network Information - 2.0.1 Splashscreen - 5.0.2 Vibration - 3.1.0 Whitelist - 1.3.3 試しに「はじめてのMonacaアプリ」にBarcodeScannerプラグインを導入し、動作試験しました。使った端末は上記の端末と同じで、ソースはMonaca Docsのサンプルコードをそのまま使いました。結果はコードリーダで読み込んだあと、読み取ったデータの内容をアラート表示しました。つまり正常動作しました。このことから端末との相性の悪さというより導入しているプラグインとの相性の問題のように思えます。

otak-lab

2020/07/28 01:47

となると、一つずつ順番にプラグインを適用して確認するしか方法はなさそうですね。後付けですが、v8.0.1は私が開発した検品アプリで実際に動作しているものだったので、それを推奨しました。お手数をおかけしまして申し訳ありません。

JagdFeind

2020/07/28 01:58

いえいえ、こちらこそ長々と質問に答えていただきありがとうございます。今後はBarcodeScannerとの相性の悪いプラグインのチェックします。また何かあるときはここに質問すると思いますが、その時は何卒よろしくお願いします。

行動規範の内容に同意します

回答2件

自己解決

はじめに、本アプリのhtmlやソースの関係は以下のようになっていました。
index.html----common_functions.js <-ハードウェア機能（カメラなど）を扱うプログラムの集まり
| --- loader.js
|
|----menu.html
|
|---reader.html---reader.js <- QRコードのプログラムを実装したソース
|---他html

いままでreader.jsに書き込んでいましたが、common_funcitons.jsに内容をコピーし、reader.jsにはparentで対象の関数を呼び出す形にしたところ、動作しました。
考えられる原因は、QRコードリーダなどのハードウェア機能を使うためにはdevicereadyイベントが正常に終了する必要がある（Cordovapプラグインが正常に読み込まれた)らしいのですが、devicereadyイベントを受けとれるのは起動後に読み込まれたjsだけのようで、今回のようにindexの子要素に連なるjsなどに書き込んでもdevicereadyイベントが正常に終了したかが判断できず、正常な動作ができなかったのではないかと考えています。

ここまで体験に基づく自分なりの考えを書きましたが、的外れ感があるので詳しい方がいらっしゃればご教授をお願いします。

投稿2020/07/29 02:02

JagdFeind

総合スコア8

Monacaは特にわかりませんが、localStorageは文字列しか格納できません。

【localStorageで複数のデータを保存する｜ Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

【Storage.setItem() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Storage/setItem

投稿2020/07/28 05:21

kei344

総合スコア69606

JagdFeind

2020/07/28 11:13

BarcodeScannerプラグインで成功時コールバックとして引数に渡されるresultは.textなどがあり取得したURLを文字列として扱えます。

otak-lab

2020/07/28 12:17

kei344さんの回答は、掲載したコードのlocalStorage.setItem('qr_code',result);のresultはオブジェクトですよね？ってことです。

JagdFeind

2020/07/29 02:12

resultはオブジェクトですね。この中にtext, format, cancelledがあります。 function (result) { alert("We got a barcode\n" + "Result: " + result.text + "\n" + "Format: " + result.format + "\n" + "Cancelled: " + result.cancelled); } 以下のサンプルコードを参考にしました。【Monaca Docs - PhoneGap BarcodeScanner プラグイン】 https://docs.monaca.io/ja/reference/third_party_phonegap/phonegap_plugin_barcodescanner/

行動規範の内容に同意します

あなたの回答