MAIL
プリザンターでURLのQRコードを作成するスクリプト
プリザンター上でQRコードを作成といっても、実際の作成するロジックは、世の中に出回っている「qrcode.min.js」を使用します。
さて、手順です。
- プリザンター上にQRコード表示用のフォルダを作成します。
- メニューから、「管理」→「フォルダの管理」を選択し、「スクリプト」を開き、[新規作成]ボタンをクリックします。
- タイトルには「QRコード作成」などを入力します。
- スクリプトは下記のように入力します。
- [追加]をクリックし、[更新]をクリックしたら完了です。
早速試してみましょう。
下記のような画面が表示されますので、URLを記載してある部分に実際に存在するURLを入力して、QRコードを表示させてみてください。その後、スマートフォンなどでQRコードを読み取って、指定したURLにアクセスできるかを確認してください。
＜QRコード作成するスクリプト>
const html = `<div style="width:800px; height:600px; margin:100px auto;text-align: center;">
<input id="text" type="text" value="https://www.ceccs.co.jp/blog?c=cssblog" style="width:80%" /><br />
<div id="qrcode" style="width:200px; height:200px; margin-top:15px;margin-left:300px"></div>
</div<
`;
$("#SiteMenu").hide();
$("#Warnings").after(html);
$.getScript("https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js", function () {
const qrcode = new QRCode(document.getElementById("qrcode"), {
//QRcode画像の大きさを設定します。大きさを変更する場合、上記のの後ろのwidthとheightも同じ値に変更する必要があります。
width: 200,
height: 200
});
function makeCode() {
const elText = document.getElementById("text");
if (!elText.value) {
// alert("Input a text");
$p.clearMessage();
//処理結果を画面上に表示
$p.setMessage('#Message', JSON.stringify({
Css: 'alert-warning',
Text: "Input a text"
}));
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
}) 
QRコードについて
こんにちは、プリザンターのスクリプトの開発を担当しておりますCCSの徐（ジョ）です。
今回は、少し変わったプリザンターの使い方を説明します。
最近、パソコンがなくてもスマートフォンやタブレットだけで用が足りてしまう時代になってきました。インターネットの閲覧でもいちいちURLを入力しなくてもQRコード（二次元バーコード）を使ってアクセスさせる方法なども普及しています。
QRコードを各種媒体に掲載すると、スマホなどでアクセスしやすくなりアクセスも増えそうですね。
ということで、今回はプリザンター上でQRコードを作成する方法を紹介します。
詳細は次で紹介いたします。
なおブラウザは最新のChromeで確認をしていますので、その他のブラウザやバージョンでの動作は未確認ですのでご了承ください。
※QRコードはデンソーウェーブの登録商標です。