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

作ったQR コードがなんか変です。途中で途切れたり、一部の文字が化けたりです。ナンデ?QR コードナンデ?

解決方法まとめ

  • QR  コード化する文字列の半角記号は、URL エンコードする。

症状です。困ったです。

「http:」の「:」が「\」に変換されたり、URL にパラメータを含めても「&」の前で切れていたりと、うまくいきません。

たとえば、次の URL を QR コードにして読み取ると、こうなってしまいました。

http://sample.com/?id=1&name=yu&fruit=haskap&origin=hokkaido
↓
http://sample.com/?id=1

そこで、「QRコード iphone 読めない」とかで検索してみました。でもさっぱりです。解決できません。「Google Chart Tools \」とかで検索しても基本的な使い方しか引っかかりません。

そうじゃなくて、もっとマニアックな、重箱の隅をつつくような困った問題を解決してくれるトラブルシューティングを求めているのですよ、わたくしはっ!

QR コード生成サービスは Google を使うことにして、ドキュメントを読みます。

落ち着きましょう。まず、QR コード生成サービスを見直しましょう。ポイントを考えました。それは、文字化けするんですから、文字コードが指定できるQR コード生成サービスがいい、ということです。となると、Google の次のサービスがよさそうです。

この中で、気になる言葉がありました。Syntax の表の chl=<data> の Description、つまり QR コードにする文字列についての詳細説明です。

The data to encode. Data can be digits (0-9), alphanumeric characters, binary bytes of data, or Kanji. You cannot mix data types within a QR code. The data must be UTF-8 URL-encoded.

つまり、こういうことだと思います。

  • QR コード化対象文字列は 数字(0-9)、英数字、データのバイナリバイト、または漢字であること。
  • また、UTF-8 で URL エンコードされている必要がある。

ここで書かれていないことに注目します。書かれていないこと、それは、そう、、、記号です。冒頭で起きた問題はすべて記号でした。また、いままでほかのサービスでも QR コードが作れなかったのは、同じ原因だったのでしょう。

記号を URL エンコードして QR コードを作ってみます。

このサイトを参考にして、記号を URL エンコードしてみます。

  • 「:」→「%3A」
  • 「?」→「%3F」
  • 「&」→「%26」

このように置換すると、QR コードにしたい URL はこうなります。

http://sample.com/%3Fid=1%26name=yu%26fruit=haskap%26origin=hokkaido

これで Google Chart Tools で QR コードを生成する URL を書くと、次のようになります。

https://chart.googleapis.com/chart?cht=qr&choe=UTF-8&chs=150x150&chl=http%3A//sample.com/%3Fid=1%26name=yu%26fruit=haskap%26origin=hokkaido

表示された QR コードを読んでみました。QR コードにしたい文字列が期待通り、出てきました!成功です!

おわりに

「:」「?」「&」以外の文字が化けたり切れたりしたら、その文字も URL エンコードすれば、期待通りの QR コードが作れると思います。

また、URL エンコードとは何ぞや?と思いました。UTF-8 エンコードとごっちゃになっていました。これらは別物!次のページが参考になりました。ありがとうございます♪

ディスカッションに参加

1件のコメント

コメントを残す

コメントを残す