Google Chart API でQRコードを自動生成する方法

Google Chart APIはGoogleが提供しているグラフなどのイメージを作成してくれるAPIサービスです。URLに必要な値を与えるだけで、グラフなどのイメージを返してくれます。

主にグラフなどを作成することができるのですが、その機能のなかにQRコードを作成してくれるものがあります。

最近ではスマートフォンでWEBサイトを閲覧する機会が多くなり、スマートフォンでの閲覧を誘導するときはQRコードなどが便利です。

※QRコードは(株)デンソーウェーブの登録商標です。(使用に対するライセンスは不要で、自由に作成・活用できます。)

Google Chart API の活用例

活用方法は簡単です。Google Chart API の基本URLに値をつけて、img要素を使いウェブページに貼り付けるだけです。実際に「 Hello World 」を表示するQRコードは以下のように作ることができます。

/* Google Chart API */
https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world

/* 実際に画像として表示させる場合 */
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world" />

Google Chart API の利用方法

Google Chart API は以下の基本コードに対して値を指定することでイメージを生成することができます。

https://chart.googleapis.com/chart?
内容
chs 生成する画像サイズを指定します。「横幅x高さ」を数字で記述します。
cht 生成するイメージを指定します。QRコードを作成する場合は「qr」を記述します。
chl QRコードで生成するテキストや文字を記述します。

WordPressのテーマ内の活用例

WordPressで活用する場合、以下のようにQRコード生成することができます。

<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=<?php the_permalink() ?>" />

関連記事

【CSS】linear-gradient(グラデーション)を使ったボタン作成

CSSのlinear-gradient()関数を用いることで画像を使わずとも、グラデーション色のボタンを作成することができます。 ※矢印は、「Font Awesome」、文字はGoogle Fontsの「M PLUS Rounded 1c」を組み合わせております。 ボ...続きを読む

2021.02.19CSSHTMLコーディング

【HTML】Bootstrapの基本「マージン」と「パディング」

『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサイト制作が可能です。 『Boots...続きを読む

2018.08.09BootstrapHTMLコーディング

ロリポップの簡単インストールで「WordPress」のインストールに失敗した!?

WEBサイトを構築・公開するために必要となるレンタルサーバー。数あるレンタルサーバーの運営サービスで、価格も手ごろなロリポップを利用する方も多いと思います。ロリポップではWordPressを簡単にインストールすることができますが、簡単インストールの途中で「インストールできませんで...続きを読む

2017.09.17WordPressレンタルサーバロリポップ

【WP】ログインページをカスタマイズする方法

WordPressのログインページはプラグインなどを利用してカスタマイズすることができます。 今回は、プラグインを使わずにアクションフックを利用してWordPressのログインページで利用されるCSSをカスタマイズしてオリジナルのデザインに変更する方法をご紹介します。 ...続きを読む

2015.02.25WordPress

【JavaScript】各種ユーザーインターフェイスを実装するライブラリ『jQuery UI』

『jQuery UI 』は一般的なメニュー、アコーディオン、タブなどの多岐にわたるユーザーインターフェイスを実装することができるjQuery対応のJavaScriptライブラリです。 jQuery UI 『jQuery UI 』を用いることで「Interactions...続きを読む

2015.02.10HTMLコーディング