Monaca の BarcodeScaner プラグインには読めない全角文字がある問題への対処

問題

• はしごだか、たつさき、に限らず漢字の一部で、また、ひらがなでも組み合わせによって QR コードが読めない。
• Monaca の iOS アプリで確認した。
  • Cordova バージョン: 4.1.2
    iOS プラットフォーム: 3.7.0
    Android プラットフォーム: 3.6.4
  • BarcodeScaner: v1.0.1

QRコード作成設定を変えたら解決できないか？→ダメだった

QR コードの作成は、「ラベル屋さん」で設定で行いました。

• ラベル屋さん.com：無料で使えるラベル・カード印刷ソフト「ラベル屋さん 9」と、名刺、お名前シール、ステッカーなどのテンプレート

デフォルト設定

• 誤り訂正: 15%
• バージョン: 1

次まで高精細なQRコードにすると、スキャンは反応いたしました。しかし、化けたり欠損したりと、正しく読み取れませんでしたの＞＜。

• 誤り訂正: 30%
• バージョン: 12

他の iOS アプリで試してみると、読めた。。。

どんな QR スキャナーでも読み込めない文字列なのかもしれないと考えました。

そこで適当なアプリを試しましたところ、簡単に読み込めましたわ。

Monaca で使用している QR コードプラグインのバージョンアップなどできるのではないか？→できなかった。

• GitHub – phonegap/phonegap-plugin-barcodescanner: cross-platform BarcodeScanner for Cordova / PhoneGap

が、BarcodeScaner の本家ページと存じます。ここではバージョン 4.1.0 ですの。

• BarcodeScanner プラグイン – Monaca Docs

一方で Monaca で使用できるバージョンは 1.0.1 で、変更することはできず固定でした。

文字列を URL エンコードして QR コードを作成してみた → 上手くいった！

• エンコードとデコード | 設定やツールねた

で文字列の URL エンコードを試しました。これで解決できましたわ♪

ラベル屋さんの設定はデフォルトの、誤り訂正: 15%、バージョン: 1、でオーケーでしたの！

そして Monaca 側のコードをデコードするように修正いたしました。

なお、今までエンコードしないでも読み込めた QR コードはそのまま継続して使用可能でしたわ！

data.barcode = result.text

↓

data.barcode = decodeURIComponent(result.text)

• decodeURIComponent() – JavaScript | MDN

おわりに

QR コードを扱うときは、エンコードしておいた方が無難、ということですわね＞＜。今回まんまと失敗してしまいました。

以前の失敗の変則パターン、そんな感じがいたします。

• QR コードが文字化け・末尾切れします→解決できました♪ – oki2a24

以上です。