今回は思いっきりプログラミングのことについて書こう。
と言っても内容は至って簡単なコードだけだ。
実現したのは「Javascript」を使って「QRコード」を発行するというシステムだ。
先日、あるクライアントさんから「簡単でいいから認証させたい」という問い合わせを頂いた。
ID発行などの複雑な認証は必要なく写真を撮影して本人がわかれば良いというレベルの認証だったのだが、写真を都度撮影するのはあまりにもアナログであり、また動作としても面倒という話だった。
そこで話し合った結果、「QRコード」の発行による認証システムを作ることにした。
「Javascript」を使ってサクッと作成できたのでその備忘録として残しておこう。
Javascriptを使ってQRコードを生成
まずは結論から述べてしまおう。
Javascriptを使ってQRコードを発行するには「jQuery」を使うと便利だ。
「jQuery」の詳細についてはまた別の機会で触れる事にして軽く説明書きだけ。
ウェブブラウザ用のJavaScriptで作られたライブラリである。jQueryライブラリ内で定義された関数を使用することが可能となり、本来記述する必要のあるコードを省略することができる。
今回はこのjQueryのライブラリを使用してQRコードの発行を行うことが可能だ。
jQueryライブラリの中に「jquery.qrcode.min.js」というJavascriptファイルが存在する。
そのライブラリを参照して「$().qrcode()」という関数が用意されているでそれを使ってQRコードの生成を行う。
QRコード生成の関数の書き方は次の通り。
$(関数名).qrcode({text:出力先URLもしくはファイル名})
HTMLファイルには以下の記述をする。
この結果画面に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日を。
