jquery.qrcode.jsで簡単QRコード作成完全ガイド｜DAD UNION

今回は非常に便利なツール、「jquery.qrcode.js」を使って、簡単にQRコードを生成する方法についてご紹介します。
この記事を読めば、あなたもQRコード生成のプロになれるかもしれませんよ！

Contents

はじめに
jquery.qrcode.jsとは
QRコード生成の準備
CSSの記述
HTMLの記述
JavaScriptの記述
jquery.qrcode.jsを使ってQRコードを生成するデモページ
ソース元：jquery-qrcode
まとめ

はじめに

QRコードは、今や私たちの生活に欠かせないものとなりました。店舗の情報、ウェブサイトへのリンク、あるいは個人間での情報共有など、多岐にわたる用途で利用されています。そんなQRコードを自分で生成できたら便利ですよね。今回は、Web開発で広く使われるjQueryのプラグイン「jquery.qrcode.js」を使って、誰でも簡単にQRコードを生成できる方法をご紹介します。

jquery.qrcode.jsとは

「jquery.qrcode.js」は、jQueryを使用してQRコードを簡単に生成できるプラグインです。このプラグインを使えば、複雑なコーディング知識がなくても、ウェブページ上で手軽にQRコードを生成し表示することが可能になります。

QRコード生成の準備

まずはじめに、QRコードを生成するための基本的なセットアップを行います。これには、CSSの設定、HTMLの構造、そしてJavaScriptを使ったコードの記述が含まれます。

CSSの記述

まずは、QRコードを表示するページのスタイルを定義します。以下は、基本的なCSSの設定例です。

<style>
body {
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 1.6em;
  padding-top: 20px;
}
</style>

　
このCSSは、ページのボディと見出しに基本的なスタイリングを適用します。文字のサイズや配置など、必要に応じて自由に変更してください。

HTMLの記述

次に、QRコードを表示するためのHTML構造を設定します。以下のコードをご覧ください。

<h1>jquery.qrcode.jsを使って以下にQRコードを生成表示してます。<br>URLが https://dad-union.com のQRコードを生成してます。</h1>

<div id="output"></div>

　
id=”output”に生成したQRコードを出力します。

JavaScriptの記述

最後に、QRコードを生成するためのJavaScriptを記述します。ここが最も重要な部分です。
jquery-1.11.0.min.js、jquery.qrcode.min.jsファイルを読み込みます。jQuery(‘QRコード出力先タグ要素’).qrcode(“QRコード生成するURL”)を記述します。

<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script>
jQuery(function(){
  jQuery('#output').qrcode("https://dad-union.com");
})
</script>

　
#output要素内に指定したURLのQRコードを生成します。