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() ?>" />

関連記事

【WP】WordPressのアーカイブリストの「年月」表示をカスタマイズする

WordPressでは投稿された記事に対して、年別や月別のアーカイブを生成できます。アーカイブのリスト表示は2014年1月というように掲載されますが、年や月の表示を変えて表示したいこともあります。 アーカイブの日付表示 投稿された記事の日付の形式はWordPr...続きを読む

2015.02.19WordPress

はぴねす歯科様WEBサイトのデザイン提案

大阪にある歯科クリニックのはぴねす歯科様のWEBサイトのリニューアルにおけるデザイン提案をいたしました。かわいらしいキャラクターのロゴにデザインを合わせて、親しみやすいかわいらしいデザインになるように心がけました。虫歯治療をはじめ、歯周病、予防歯科、矯正などイラストやイメージ...続きを読む

2019.04.17WEBデザイン歯科医院

【無料】商用利用OKシームレステクスチャ「岩石(花崗岩風)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。花崗岩のような灰色の岩の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.07シームレステクスチャ

【デザイン】ライセンスフリーのグラフィカルユーザインタフェーステンプレート

WEBサイトやパソコンの画面などに見られるメニューやボタンなどのグラフィカルユーザインタフェース(GUI)のテンプレートをまとめてみました。 Flat Style & iOS 7 Line Style UI Kit PSD フラットデザイン、iOS 7 イメー...続きを読む

2015.02.14インスピレーション

【WP】プラグイン『Photospace』の利用方法

以前に紹介をした『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。インストールと標準設定をご紹介しましたが、今回は...続きを読む

2015.06.29WordPress