jQueryを使ってQRコードを生成する[jquery.qrcode.js]

2018/03/06 サイト制作, 技術系 投稿者:竹内

先日、とあるプログラマーさんより
「このサーバー内だとなぜかQRコードが正常に読み込めないのです。他のサーバーだと読み込めるので環境によるものと思われます。」
と言われてしまいました。
Webシステムにて動的にQRコードを生成してPDF出力する必要があるのですが、QRコード生成プログラムがうまく動かないようです。
サーバーの環境が古いのが影響しているようでした。

私はフロントエンドエンジニアっぽい事をしていたのでプログラムやサーバー環境については詳しくはわかりません。
専門スタッフに調査を依頼すると同時に、自分の得意分野で勝負してみようと思いました。
『困ったときのjQuery』てなわけで調べてみると[jquery.qrcode.js]というものがみつかりました。
今回は、サーバーの環境に依存しにくいと思われるjQueryでQRコード生成を試してみたいと思います。

公式サイトから[jquery.qrcode.js]をダウンロード

公式サイト:http://jeromeetienne.github.io/jquery-qrcode/

公式サイトページ下部のConclusionのあたりからgithubへ飛べます。

jquery.qrcode.js ダウンロードリンク →https://github.com/jeromeetienne/jquery-qrcode

動作確認

圧縮ファイルを展開

ダウンロードしたファイルを展開し、ファイル内のREADMEをよく読みましょう。

デモページをみる

展開したファイル内の[examples]フォルダ内のdemo.htmlを開いてみます。
すでに生成されたQRコードが表示されています。公式サイトのURLのようです。

動作確認をする

demo.htmlのソースをみるとこんな感じです。
公式サイトのURLを今回のプログラムで使用する文字列に変換してQRコードリーダーで読み込めれば動作確認終了です。

読み込めました!

スマートフォンのQRコードアプリで読み込めましたので、ひとまず動作確認は終了です。
あとはWebシステムと連携させて、上記URLの部分を動的に生成出来るようにすればOKです。

試しに日本語を入れてみる → だめでした。

以下のように設定した後、QRコードリーダーで読み込んでみたところ、文字化けしました。
日本語(2バイト文字)はダメそうですね。

このスクリプトの気になる点

今回生成されるQRコードはPNG画像のようですが、特定のフォルダ内に保存され、それを表示しているわけではなく、jQueryで動的に生成されているもののようです。
この形式の画像を用いてWebシステムで活用出来るかどうか、さらに検証が必要そうです。

まとめ

2バイト文字(日本語)対応はしていませんでしたが、今回のWebシステムへ組み込む用途としては問題はありませんでした。
プログラマーやフロントエンドエンジニアがそれぞれ自分の得意分野を活かして開発が出来るWebシステムは良いものができそうですね。

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)