質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
バックグラウンド処理

バックグラウンド処理とは、マルチタスク環境において、ユーザーに対して前面に表示させている処理の裏側で実行させる処理のことを呼びます。バックグラウンド処理を行う事によって、ユーザーが他の作業に携わることが可能となります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

4081閲覧

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

JagdFeind

総合スコア8

バックグラウンド処理

バックグラウンド処理とは、マルチタスク環境において、ユーザーに対して前面に表示させている処理の裏側で実行させる処理のことを呼びます。バックグラウンド処理を行う事によって、ユーザーが他の作業に携わることが可能となります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/07/13 05:27

編集2020/07/28 05:11

前提・実現したいこと

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のみ有効にし、サンプルコードのまま動かすと、こちらはうまくいきました。
このことから他のプラグインが邪魔をしているわけではなさそうです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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との相性の悪いプラグインのチェックします。また何かあるときはここに質問すると思いますが、その時は何卒よろしくお願いします。
guest

回答2

0

自己解決

はじめに、本アプリの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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

JagdFeind

2020/07/28 11:13

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

2020/07/28 12:17

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問