QRコードを作る

QRコードを作ろう!

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

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

QRコードを作る

Googleのライブラリのようなものを使っているのだと思います。
なので、ゴリゴリプログラムを書いているわけではありません!

Source:

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

ちゃんとセミコロンを付けないとかいったレベルで苦労はありました。
テストはいくつか試したので、これで動いていると思います。
コンソールにはエラーが吐き出されていて、気になってはいますが。。

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

HTML

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

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

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

JavaScript

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

function GenerateQRCode()
{
    var SourceText = document.getElementById('SourceText').value ;
    document.getElementById('QR-Code').innerHTML='<img class="alignnone" src="https://chart.googleapis.com/chart?cht=qr&chs=180x180&chco=000022&chl=' + SourceText + '" alt="QR Code" title="' + SourceText + '">' ;
};

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

当ページのQRコード

このページの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://chart.googleapis.com/chart?cht=qr&chs=157x157&chco=000022&chl=' + url + '" alt="' + title + '" title="' + title + '" />' ;
};

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

投稿

Cocoonにしてすぐのときには不調だった投稿ですが、2021年3月のタイミングでは、しっかり動いてくれています。

よかったです。
固定ページと個別投稿はJavaScriptの仕様が違うのかと思ったので。
個別の投稿はあるのですが、固定ページとしても作成しました。

執筆者プロフィール
Blog Master

ガジェットが大好きで、毎月何かしら買っております。
無駄遣い扱いされたくないのと、何かの役に立つかと思い、記録を書くことにしたのでした。

お出かけのときには、スマホを複数台とタブレットとパソコンと、Pocket WiFiを持ち歩きます。
両手首にはスマートウォッチです。
こんなスタイルで生活している中での備忘録を書いています。

「Blog Master」をフォローしてみる
「Blog Master」をフォローしてみる
wnkhs.net
タイトルとURLをコピーしました