広告 WordPress関連

ブログページにQRコードを簡単に設置する方法 - その2(QRコード用jQueryプラグインを利用)

スポンサーリンク

 

This Page QR

以前の記事で、「ブログページに現在ページのurlをQRコードで表示する方法」を紹介しました。 この方法は、「QR code generator」API を利用してNet経由でQRコードを描画するものでした。

GitHubで公開されているQRコードジェネレータ(jquery.qrcode.min.js)を利用して、canvasタグで現在ページのQRコードを描画する方法を紹介します。 

さらに、ページ速度の改善のために、必要に応じてQRコードを表示できるボタンを配置しました。

jquery.qrcode.min.jsのGitHub公開先URL
URL:https://github.com/jeromeetienne/jquery-qrcode

 

スポンサーリンク

 

 

QRコードジェネレータ jquery.qrcode.min.js について

以前の記事で紹介した様にWeb APIサービスを利用することで、簡単にQRコードを表示できますが、このサービスが終了してしまう恐れがあります。 ちなみに、Googleで以前行っていたQRコード作成サービス(Google Chart API)が終了してQRコードが表示出来なくなりました。

一方、QRコードジェネレータ jquery.qrcode.min.js をダウンロードして、自サイト内にアップロードしてこのジェネレータを利用すれば(APIサービスを使わないので)QRコードが表示出来なくなることはありません。 

QRコードジェネレータ jquery.qrcode.min.jsのセットアップ

  • QRコードジェネレータ:jquery.qrcode.min.jsファイルをダウンロード
    ここをクリックして、ページを開き、ページ中の ソースコード上部にある ダウンロードボタンを押して、 jquery.qrcode.min.jsファイルをダウンロードします。
  • ダウンロードしたjquery.qrcode.min.jsファイルをサイトのドメイン内の適当な場所にアップロード

 

Post Snippetsプラグインを利用して現在ページ(URL)のQRコードを表示させる方法

ブログページ内にQRコードを表示させるには、Post Snippetsプラグインでショートコードを作成し、このショートコードをブログ内に配置するのが、最も確実で簡単な方法です。

Post Snippetsプラグインのインストールや使い方は以下のブログカードを参考にしてください。

今回の事例紹介は、Post Snippetsの管理画面(下の画面)で、項目について説明します。
(下の画面は、Post Snippets Plugin はバージョン3.1.7です。)

 

Step
1
箇所にショートコード名を記述

の箇所(Untitled)にショートコードの名前を記入します。 今回は、[QR_code_js]にしました。

 

Step
2
箇所にQRコードを表示するコードを記述

箇所に以下のコードをコピペします。 2行目:先ほどセットアップした jquery.qrcode.min.js ファイルの保存先を絶対アドレスで記述します。

コードの説明

  • 2行目: qrcode.min.js を設置した絶対アドレスで読み込みます。
  • 4行〜12行:QRコードを表示するCSS
  • 15行:QRコードのタイトルを表示。 {text_color}を変数にしてタイトルの文字色を指定します。
  • 18行:<div id="{id}"></div>がQRコードの表示場所になります。 また、{id}を変数にしてdiv要素のセレクタを指定します。
  • 21行〜37行:現在表示しているページのURLをQRコード化して<div id="{id}"></div>にQRコードを表示するjQuery scriptです。
  • 25行:純粋な現在ページのURLを取得します。
  • 31行:renderオプションでcanvasかtableかを指定できます。 ここでは、canvasにしています。 

Step
3
③〜⑥ の記述

Variables:  id=page_qr,text_color=white 変数にデフォルト値をセット

Shortcode:レ点を入れます。 PHP:は無記入

Description: 適当な分かり易い文章を記述 ここでは「現在ページのURLをQRコード化して配置する。 ページ内に複数配置する時は変数id名を変えること❗」としました。

最後に【Save】ボタンを押して、[QR_code_js]ショートコードの完成です。

 

[QR_code_js]ショートコードの使い方とデモ

ビジュアルエディタで、QRコードを表示したい箇所にポインターを合わせた後、ビジュアルエディタ画面の右上のPost Snippetsボタンを押して、[QR_code_js]ショートコードを選ぶと、その箇所に以下のショートコードが挿入されます。

 shortcode
[QR_code_js id="page_qr" text_color="white"]

上のショートコード中にある、ダブルコーテーション" " で囲まれている部分がオプションになります。

注意:
このショートコードを複数配置する場合、配置毎に違うidオプション名(id="page_qr" )を変えなければいけません。 重複するとQRコードの表示が2重に表示されるなどの表示が不正になります。

 

QRコード表示・デモ

 shortcode
[QR_code_js id="page_qr_demo" text_color="brown"]

This Page QR

 

フッター部にQRコードの呼出しボタンを付けてみました。

画像:フッターにQRコード呼出しボタン配置

ページのフッターにQRコードの呼出しボタン(オレンジ色)設置して、QRコードを表示したい時にこのボタン押すと、このページのQRコードが表示される様にしてみました

前記のPost Snippetsプラグインで説明した、 箇所を以下のコードに変更(黄色・ハイライト行)すれば呼出しボタンを押すことでQRコードが表示できます。

通常はQRコードが表示されないので、ページ速度の改善に繋がる可能性があります。

Point
1
変更した 箇所のコード

前記のPost Snippetsプラグインで説明した、 箇所に以下の変更したコードを全コピペします。

変更箇所の説明(黄色・ハイライト行)

  • 11〜14行:
    QRコード呼出しボタンの要素になります。 ボタンは13行のショートコードで示すAffinger6のミニボタンを使い、更に以前紹介したonclick 属性を付与する囲みショートコードでサンドイッチしています。 「onclick 属性を付与する囲みショートコード」のオプションは、onclick 属性を使わないのでonclick=""に、id_name="btn"にしています。 更に、ボタンをセンタリング表示させるためにmystyle="margin:0 auto;" にしています。 "#btn"要素がクリックされるとQRコードを表示するfunctionが呼出され、16行の<div id="{id}"></div>の要素にQRコードが表示されます。
  • 21行:
    jQueryのone()メッソドを使い、#btn 要素がクリックされると、初回に限りQRコードを表示するfunctionが発動されます。 2回以降のクリックは無視されます。

Point
2
変更したショートコードをフッターへ配置

画像:フッターにQRコード呼出しボタン配置

当ブログでは、Wordpressテーマの「AFFINGER6」を使っています。

WordPress管理画面の外観 > ウィジェット から、「フッター右用ウィジェット(2列目)」にカスタムHTMLでショートコードを配置しました。

これにより、固定ページや投稿ページの全てのフッター部分にQRコードの呼出しボタンが付いて、このボタンを押すと夫々のページURLに対応したQRコードが表示されるようになります。

なお、「WP Fastest Cache」プラグインを使っている場合は、Don't cache this widget にレ点を入れて、キャッシュしない様にしておきます。

 

以上、GitHubで公開されているQRコードジェネレータの jquery.qrcode.min.js を使って現在ページ(URL)のQRコードを描画する方法の紹介でした。

 

スポンサーリンク

 

スポンサーリンク