目次
はじめに
WebページURLのQRコード生成はブラウザで目的のページ内で右クリックして生成できるが，細かい点で表示されており縮小した画像では読み込みできないことがある。
この「点の集合体」のほうが一般的に読み取り精度が良いらしいが，縮小印刷した際に読み取れないことがあった。QRコードを印刷したプリンターや読み取りに使用したスマホカメラに問題があるのかもしれないが・・・。
よって今回は従来のQRコードのモデル2で生成させるべくJavaScriptの生成ツールをWordPressに埋め込んでみた。
ところでQRコードのプラグイン「WP Shortcodes Plugin — Shortcodes Ultimate」もあるようだが，あまりプラグイン追加ばかりして不安定要素を増やすのもどうかと思うので，今回は記事にJavaScriptで埋め込む方法で試してみた。
ブラウザ生成のQRコード
ブラウザ(Microsoft Edge)で右クリックで[このページのQRコードを作成]をクリックで生成したQRコードで，細かな「点の集合体」で構成されている。
縮小すると読み取り精度が落ちる。（私見）
url : https://na-3.com/wp_na-blog/
ツール生成のQRコード
上記の同じurlをツールで生成したQRコードで，モザイク模様で構成されている。
縮小した場合でも読み取りに問題ない。
url : https://na-3.com/wp_na-blog/
埋め込みコード
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>Tips 2023年10月</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="icon.png">
<script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" defer ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- css framework -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta name="format-detection" content="telephone=no">
</head>
<body data-body="true">
<form method="post">
<header class="navbar">
</header>
<section class="hero is-small is-info">
<div class="hero-body">
<div class="columns is-flex" >
<div class="column">
<h3 class="title is-4">
<i class="fa fa-id-card"></i> <span> --JavaScriptでQRコード生成-- </span>
</h3>
</div>
</div>
</div>
</section>
<main class="container" style="margin-top:10px">
<div class="columns">
<div class="column">
<div class="box pb-6" >
<section style="border-bottom:solid 2px #3e8ed0">
<h4 class="subtitle is-4 mb-2">入力</h4>
</section>
<section class="level-center mb-10 mt-0">
<div class="columns is-desktop">
<div class="column ">
<div class="field ">
<div class="field-label is-normal level-left">
<label class="label">URL：</label>
</div>
<div class="field-body">
<div class="field">
<p class="control is-expanded">
<input type="url" class="input" value="" id="INP01" placeholder="URLを入力してください。" >
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<hr style="margin:1rem">
<div class="is-flex is-justify-content-left">
<a class="button is-info load-b" id="CRTQR" ><i class="fas fa-qrcode mr-2"></i>QRコード生成</a>
</div>
</div>
</div>
<div class="column">
<div class="box">
<section style="border-bottom:solid 2px #3e8ed0">
<h4 class="subtitle is-4 mb-2">結果</h4>
</section>
<section class="level-center mb-10 mt-0">
<div class="columns is-desktop">
<div class="column mb-3">
<div id="QR" class="container m-4 is-justify-content-center is-flex">
</div>
</div>
</div>
</section>
</div><!-- /box -->
</div><!-- /column -->
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
// 読込後
window.addEventListener('load',function() {
// 入力欄の要素を取得
var inp01 = document.getElementById('INP01');
// ボタンの要素を取得
var bnt01 = document.getElementById('CRTQR');
// ボタン クリック時の処理を追加
bnt01.onclick = function(){
// QRコードの出力先をクリア
document.getElementById('QR').textContent = '';
// QRコード作成
var qrcode = new QRCode('QR', {
text: inp01.value,
width: 128,
height: 128,
correctLevel : QRCode.CorrectLevel.H
});
}
});
</script>
</body>
</html>WordPressに埋め込み
上記コードをカスタムHTMLを選択してWprdPressの記事ページに登録する。
下記は参考サイトからダウンロードしたコードを最低限の修正のみで登録してみた。m(__)m