connecting...
Google translation for articles :
3 NEMBER donated to you!!

プログラム初心者がNEMアプリを作ってみた。(13)

nem1.85xem (3) 276 2 1

最近、アポスティーユなど本来のプログラム作成の趣旨から脱線する記事が多かったので、今回はプログラムネタを書きます。

 

【前提】NEMを実店舗で販売する場合、QRコードを商品情報に貼って、スマホで読み込む方法が想定されます。商品情報には日本語を用いたいですよね。しかし、ネット上でアップロードされているQRコードリーダープログラムは、日本語対応していないものが多く、非常に悩まされました。今回は、解決方法が分かりましたので、記事にします。

 

【趣旨】NEMREGIでは下記の様な、商品に貼るQRコード作成機能が有ります。このQRコードには、「長ネギ」という商品名が日本語で格納されています。QRコードの作成・読込ソフトは多数ありますが、色々試した結果、日本語対応できるものはjsqrcodeしか見つからず、1か月間これで運用しておりました。androidでは動きましたが,ipadでは安定せず、遂に今月のアップデートで動かなくなりました。色々悩んだ結果、次のような運用方法で日本語対応できました。

 

 

 

【対応方法】以下の通りです。(3byteUTF8型に関しての説明はプログラム初心者がNEMアプリを作ってみた。(11)に書いています。)

 ①日本語を3byteUTF8型にエンコード

 ②①をQRコード化

 ③QRコード読込

 ④③を3byteUTF8型から日本語にデコード

 

②③のQRコードに関するプログラムは、16進数(0~f)で文字列になりますので、これですべてのgithubに公開されているQRプログラムで、日本語が使用可能になります。

 

===以上で完了です。下記には具体的に導入法を書きます。===

 

今回は、QR作成には「jquery-qrcode」、QR読込には「react-qr-reader」を使って、導入方法を以下に書きます。

 

プログラム初心者がNEMアプリを作ってみた。(8)のプログラムを準備してください。

 

①「jquery-qrcode」をindex .htmlフォルダに保存(https://github.com/jeromeetienne/jquery-qrcode)

 

②「jquery」をindex.htmlフォルダに保存(https://jquery.com/download/)

 

③ ①②の結果が下記の通りです。

 

 

④index.htmlを下記の通り書換(下線部のみ変更)

 

⑤QrShoot.jsを下記の通り書換(下線部のみ変更)

 

⑥npm run build2 でコンパイルし、実行。実行結果は,下記の通り(QR読込後、スマホカメラで読込)

 

無事、日本語「ネムレジ」が表示されています。QRコードに日本語を使う場合は、この方法を参考にしてください。

 

※デメリットとしては、16進数を文字列にしていますので、QRコードのデータ量(バイト数)が大きくなります。が現状ではこの方法しか思いつきません・・

 

今回作ったプログラムは ここ に置いておきます。

 

 

 

【今回のプログラム】(参考に使って下さい。)

 

<index.html>

 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <script src='./jquery-3.4.1.min.js'></script>  <!--追加箇所-->
  <script type="text/javascript" src="./jquery.qrcode.min.js"></script>  <!--追加箇所-->

	<script type="text/javascript">
    window.onload = function () {
      jQuery("#qrcode").qrcode(encodeURI("ネムレジ"));//追加箇所
    }
  </script>
</head>

<body>
  <div id="qrcode"></div><!--追加箇所-->
  <div id="app"></div>
  <script defer src="index.js"></script>
</body>

</html>

 

<QrShoot.js>

import React, { Component } from 'react'
import * as ReactDOM from 'react-dom';
import QrReader from 'react-qr-reader'


class QrShoot extends Component {
    constructor(props) {
        super(props);
        this.state = {
            result: 'No result',
        }
    }
  handleScan (data) {
    if (data) {
      this.setState({
        result: data
      })
      var s= location.searchsubstring(3);//nemlogでエラーになるため,serchの後に.をつけてください。
      window.opener.document.getElementById(s).value = decodeURI(data);//追加箇所
      window.close();
    }
  }
  handleError (err) {
    console.error(err)
  }
  render() {
    return (
      <div>
        <QrReader
          delay={500}
          onError={this.handleError}
          onScan={this.handleScan.bind(this)}
          style={{ width: '100%' }}
        />
        <p>{this.state.result}</p>
      </div>
    )
  }
}

ReactDOM.render(
	<QrShoot />,
	document.getElementById('QrApp')
);

 

<他ファイルは プログラム初心者がNEMアプリを作ってみた。(8)です>

 

///////////////////////////////////////////////////////

本記事はプログラム初心者がNEMアプリ「NEMREGI」を製作するまでの過程を記載しています。

自作プログラムNEMREGIは  https://www.nemregi.shop/ で公開しています。

(NEMショップやフリマなどを開く際にQRコードを用いて携帯一つで支払いできます)

(趣味程度に製作したソフトです。使用上のトラブルは一切保証いたしません。)

(使用した方がいましたらコメントいただけると嬉しいです。要望・使用感などありましたらご指摘をお願いします)

 

//////////////////////////////////////////////////////

これまでの記事:

プログラム初心者がNEMアプリを作ってみた。(12)

プログラム初心者がNEMアプリを作ってみた。(11)

プログラム初心者がNEMアプリを作ってみた。(10)

プログラム初心者がNEMアプリを作ってみた。(9)

プログラム初心者がNEMアプリを作ってみた。(8)

プログラム初心者がNEMアプリを作ってみた。(7)

プログラム初心者がNEMアプリを作ってみた。(6

プログラム初心者がNEMアプリを作ってみた。(4)(5)番外編

プログラム初心者がNEMアプリを作ってみた。(5)

プログラム初心者がNEMアプリを作ってみた。(4)

プログラム初心者がNEMアプリを作ってみた。(3)(番外編)

プログラム初心者がNEMアプリを作ってみた。(3)

プログラム初心者がNEMアプリを作ってみた。(2)

プログラム初心者がNEMアプリを作ってみた。(1)

 

 

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register
Comments from NEMber
NEMREGI
2019-05-02 17:46:56ID:112472

>>目指せ北海道::さん
QRコードを認識するには、画像認識とデバイス処理をしなくてはなりません。画像認識はZXingというプログラムがメジャーで、これを使えば自作できますが、デバイス処理を自作しなければなりません。デバイス関係の知識があまりないため、これもgithubのフリー素材を利用するのですが、ほとんどが英語圏のもので、日本語対応されておりません。今回はこれを無理やり日本語にエンコードして使っています。

QRはデンソーが開発したものらしく、本来はShift-JISを想定しており、js-qrcodeではShift-jisで作成しましたが、対応しきれなく、UTF8に変更しています。

目指せ北海道
2019-05-02 16:20:27ID:112443

QRコードに日本語を書き込むのって結構大変なんですね。参考になります。

NEMber who posted this article

2017年から仮想通貨を購入しましたが、その後の暴落で損額をくらいました。その後は2018年10月から本格的に仮想通貨NEMのプログラム作成を開始。2019年3月にNEMREGI(NEMレジ)(β版)を作りました。サラリーマンなので空き時間に趣味程度のプログラムを作成しております。
22536
0

Why don't you read following articles?

11.05 XEM
277 5 0



3.4 XEM
265 9 0



1.7 XEM
89 0 0

4.25 XEM
108 5 1