QRコードを作成する簡単なJavaScript（GoogleのAPIが提供されなくなったので）

Googleが提供していた「Google Chart API」を使ってQRコードを作るJavaScriptを書いていました。
このほど、APIの提供が終わっていることが判明しました。
QR code API というAPIを使って、同様の結果を得ることができております。

GoogleのAPIでできていたことは、QR code API でもできています。

投稿表示時にURLをQRコード化

投稿を表示するときにJavaScriptを動かして、自分のURLをQRコードに変換して表示しようということです。
もう少しシステムぽい表現をすると、ページをロードするタイミングでURLを取得してQRコードを生成し、指定位置に表示するということです。

実際にやってみると以下です。

JavaScriptが動く環境なら、QRコードが表示されるはずです。
少し遅れてくるかもしれません。

QRコードを表示できればひとまずは成功です。

自分でプログラムを書いたというわけでなく、APIにパラメーターを渡して、QRコードを作ってもらっています。
外部リソースは効率よく活用させてもらいますよ。
少しだけのJavaScriptの知識と、APIの仕様書を読む読解力があれば大丈夫です。

同じものでよろしければ、この投稿のコードをコピペして使ってください。（諸々の責任は負いかねます。）

実際に書いたコード

この投稿に書いているコードのご紹介です。
実装環境は以下です。

• サーバー： Xserver（スタンダード）
• CMS： WordPress
• テーマ： Cocoon

特別なことはしていないつもりです。

HTMLとJavaScript

HTMLとJavaScriptを記述しました。
JavaScriptでHTMLを書き替える感じです。

HTML

本文中に以下を記述してあります。

<div id="QRCode">JavaScriptが実行可能な場合は、このページのQRコードを表示します。</div>

WordPressの実装では「カスタムHTML」に書くことになります。
「段落」に書いてしまうと、意図した動きにならないはずです。

JavaScript

今回の肝の部分です。
上のHTMLより下に書きます。
投稿編集画面に「カスタムJavaScript」などの専用フィールドがあれば、そこに書きます。

window.onload = function reWrite()
{
    var url = location.href ;
    var title = document.title ;
    document.getElementById('QRCode').innerHTML='<img class="alignnone" src="https://api.qrserver.com/v1/create-qr-code/?data=' + url + '&size=200x200&color=000022&ecc=M&margin=10" alt="' + title + ' のQRコード" title="「' + title + '」へのリンク" />' ;
}

「カスタムHTML」として本文中への設置も可能です。
その際には、以下のようにscriptタグで囲ってください。

<script type="text/javascript">
/* ここに上記のコードを記述 */
</script>

「段落」に書かないことと、上のHTMLより下に書くことは確実に。

書いたコードの説明

既述したコードの内容に関してです。
自分で整理するためという理由もありまして。
備忘録です。

やっていることの概要は以下です。

• HTMLパートでdiv要素にidを付けておき器を用意
• 画面ロードと同時にQRコードをAPIで生成
• 生成したQRコードのimgで器を書き換え

HTML部分

div要素に「QRCode」というidを割り当てておきます。

また、あらかじめテキストを書いておきます。
このテキストは、JavaScriptが動けばQRコードの画像で上書きされますが、JavaScriptが無効な場合には、そのまま表示されることになります。

URLとタイトル

表示している記事のURLとタイトルをあらかじめ取得します。
それぞれ変数に格納しておいて、後で使います。

タイトルがhead内にtitleタグで定義されていることを前提としています。

innerHTML

HTMLを書き換えます。
id（「QRCode」という名称で指定済み）で対象要素を指定して、イコールの右側を直接代入します。

当たり前ですが、HTMLでダブルクォーテーションを使うので、JavaScriptではシングルクォーテーションを使いましょう。

QR code API のパラメーター

今回記述したコードで使っているAPI用パラメーターは以下です。
URL変数として設定するものです。

• data： コード化する文字列（必須）
• size： 全体サイズ（ピクセル値）
• color： ドットの色（RGB指定）
• ecc： エラー回復レベル（L、M、Q、Hから選択）
• margin： 余白

これら以外にもパラメーターがあります。
文字コードを指定できたり、背景色を指定できたり、画像形式を指定で着たりします。

APIの仕様など

QR code API では、QRコードの作成とQR画像の読み取りが可能です。
今回はコードの生成のAPIのみを利用しています。
公式文書は以下です。

便利なAPIを提供してくれていてありがたいです。

---

当サイトのページにも反映済みです。