IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

プログラミング

【簡単】Javascriptを使ってサクッとQRコードを作成!

投稿日:

【簡単】Javascriptを使ってサクッとQRコードを発行する!

今回は思いっきりプログラミングのことについて書こう。

と言っても内容は至って簡単なコードだけだ。

実現したのは「Javascript」を使って「QRコード」を発行するというシステムだ。

先日、あるクライアントさんから「簡単でいいから認証させたい」という問い合わせを頂いた。

ID発行などの複雑な認証は必要なく写真を撮影して本人がわかれば良いというレベルの認証だったのだが、写真を都度撮影するのはあまりにもアナログであり、また動作としても面倒という話だった。

そこで話し合った結果、「QRコード」の発行による認証システムを作ることにした。

「Javascript」を使ってサクッと作成できたのでその備忘録として残しておこう。

Javascriptを使ってQRコードを生成

まずは結論から述べてしまおう。

Javascriptを使ってQRコードを発行するには「jQuery」を使うと便利だ。

「jQuery」の詳細についてはまた別の機会で触れる事にして軽く説明書きだけ。

jQueryとは
ウェブブラウザ用のJavaScriptで作られたライブラリである。jQueryライブラリ内で定義された関数を使用することが可能となり、本来記述する必要のあるコードを省略することができる。

今回はこのjQueryのライブラリを使用してQRコードの発行を行うことが可能だ。

jQueryライブラリの中に「jquery.qrcode.min.js」というJavascriptファイルが存在する。

そのライブラリを参照して「$().qrcode()」という関数が用意されているでそれを使ってQRコードの生成を行う。

QRコード生成の関数の書き方は次の通り。

$(関数名).qrcode({text:出力先URLもしくはファイル名})

HTMLファイルには以下の記述をする。

この結果画面にQRコードが生成される。

QRコード生成メゾットで作ったQRコード

QRコードの仕上がり具合。

javascriptでテキストボックスの値を取得する

ではQRコードの作成が完了したので次はQRコードに持たせる認証情報の入力機能を追加する。

これもJavascriptでサクッと作成することが可能だ。

テキスト情報の入出力をJavascriptでコーディングして「head」タグに入れる。

「body」タグには「テキストボックス」と「ボタン」を設置して完了。

HTMLファイルには以下の様に記述した。

これで「テキストボックス」へ入力した情報を「ボタン」を押したタイミングで出力する仕組みが完成。

これも簡単なJavascriptのコーディングだけだ。

入力情報をQRコードに紐付けるも文字化け

最後に「テキストボックス」へ入力した情報を「QRコード」へ紐づける処理を行う。

これまでの2つのステップの複合技とカッコつけたいところだが、大きな問題が発生した。

Javascriptのコーディングを以下の様に変更した。

ただこの結果はうまくいかず、指定したURL(この場合ファイル名)にQRコードが生成されないのである。

そこで「qrcode」関数の部分に修正を加えた。

$(“qrmaker”).qrcode(“日本語名称”, SJIS)

この場合だと日本語の文字化けが発生してしまう。

試したのは「SJIS」「EUC」「UTF-8」など行ったがいづれも文字化けしてしまうのだ。

日本語の不便さはIT業界では有名である。

誰か日本語の世界的地位を上昇させてくれ。

そんな嘆きなど無用の世界がIT業界である。

そこで新しい提案として認証情報を含んだHTMLファイルを生成してそのURLを「QRコード」で表示する様に対応した。

新しくファイルを生成して認証する

入力したテキスト情報を元に新たなHTMLファイルを生成して「QRコード」の認証を行う。

まずはファイル生成をJavascriptでコーディングする。

そこで生成されたファイルに「QRコード」を紐付けて認証させる。

という方法を取ったのだが、Javascriptの性質上、ファイルの「読み込み」はできるが「書き出し」は出来ない。

ファイルの生成を行うのであれば「Blob」などの「FileAPI」を使用することになる。

これでは本来のやり方と変わってしまうので、こちらとしてはよろしくない。

次回予告は「FileAPI」について。

君は生き延びることができるか。

勝手にナレーションを使って終わらせたが「FileAPI」についてはどこか別の機会で共有する。

そして本来の目的である「QRコード」の生成はJavascriptと「jQuery」を使用して簡単に生成することが可能だとわかった。

コーディングのステップ数も多くないことからフロントエンジニアとして活躍するのであればJavascriptの学習はオススメである。

今日も良い1日を。

      

-プログラミング

執筆者:

関連記事

【Javascript】デジタル時計とアナログ時計の作り方!

【Javascript】デジタル時計とアナログ時計の作り方!

今回はJavascriptで時計を作ってみた。 Javascriptは動的なオープンソースプログラミング言語で汎用性が高い。 ウェブ屋としてはHTMLと親和性も高いことから必然的に習得した技術の賜物で …

【jQuery】Javascriptで横スクロールのスライドショー!

【jQuery】Javascriptで横スクロールのスライドショー!

今回はJavascriptを使ったプログラミング作品の一例。 よくある横スクロール型のスライドショーをウェブサイトに組み込んでみる。 横スクロールはJavascriptの定番機能だが基礎的な作り方が学 …

【CSS/Javascript】ナビゲーションバーをトップに固定!

【CSS/Javascript】ナビゲーションバーをトップに固定!

ナビゲーションバーをウェブサイトのトップに固定する手順。 ひと昔であればjQueryなど使って対応していたが、今はCSSだけでも十分に対応できる時代になった。 今回はJavascriptの知識もかねて …

VBA開発でよくあるエラーまとめ!エラー出現ランキング!

【解決策あり】VBAのエラーまとめ!エラーランキング5!

仕事でVBA案件をもらうことがある。 わたしは元々VBAが最も得意だった。 VBAとはマクロの事だ。 プログラミング言語の中ではシンプルな言語でわかりやすい。 今回、数多くのVBA案件をこなしていく中 …

ITエンジニアになるならHTMLから始める事をオススメ!

ITエンジニアになるならHTMLから始める事をオススメ!

わたしは現在ITエンジニアとしてフリーランスをやらせてもらっている。 最初からフリーランスエンジニアを目指して活動をしていたわけでないが、自然と始めたことがある。 それがウェブ系のプログラミング言語H …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール