GoogleのAPIを活用してQRコードをJavaScriptで作成

QRコードを作ろう！

QRコードが便利なので！
よく使っています。自分でも手軽に作れたらよいかと思ったので。

コード壊そうとかされると困るのでやめてください。

ちゃんとセミコロンを付けないとかいったレベルで苦労はありました。。ｗ

QRコードを作る
- HTML
- JavaScript
当ページのQRコード
- HTML
- JavaScript
投稿

QRコードを作る

GoogleのAPIを使っていましたが、提供がなくなったので、QR code API を使っています。
なので、ゴリゴリプログラムを書いているわけではありません！

Source：

JavaScriptが実行可能な場合は、ここにQRコードを生成します。

テストは数パターンか試したので、基本的にはこれで動いてくれると思います。
コンソールにはエラーが吐き出されているので気になってはいますが。。

書いてあるコードは次項のとおりです。

HTML

以下のコードを書いています。

<p id="QR-CodeA">JavaScriptが実行可能な場合は、ここにQRコードを生成します。</p>

ここに、次のJavaScriptでQRコードを書き込んでいます。
id属性が必須です。

JavaScript

上のQRコードを表示させるために、以下のコードを書いています。

function GenerateQRCode()
{
    var SourceText = document.getElementById('SourceText').value ;
    document.getElementById('QR-CodeA').innerHTML='<img class="alignnone" src="https://api.qrserver.com/v1/create-qr-code/?data=' + SourceTextA + '&size=300x300&color=000022&ecc=M&margin=10" alt="QR Code" title="' + SourceTextA + '" />' ;
};

上記を、カスタムJavaScriptに書いています。
WordPressのテーマ次第だとは思っていますが。
書く場所は正しいと思っています。

当ページのQRコード

同じAPIを使って、このページのQRコードを自動生成してくれるようにしています。

JavaScriptが実行可能な場合は、このページのQRコードを生成します。

JavaScriptが実行可能な環境であれば、上にはQRコードが表示されていることでしょう。
HTMLとJavaScriptの組合せです。

HTML

以下のコードを書いています。

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

ここに、次のJavaScriptでQRコードを書き込んでいます。
id属性が必須です。

JavaScript

以下のコードを書いています。
ロードされたら動くようにしています。
Cocoonテーマでは、JavaScriptの読み込みが遅れて来るようなので、divタグ内の書き換えにタイムラグがあります。

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 + '」へのリンク" />' ;
};

上記を、カスタムJavaScriptに書いています。
書く場所は正しいと思っています。