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

関連記事

Windows 10からWindows 11へのアップデート時に気をつけるべきポイント

Windows 10のサポート終了が近づいており、これをきっかけに多くの方がWindows 11へのアップデートを検討しているかと思います。Windows 10は2025年10月14日でサポートが終了し、その後はセキュリティ更新やサポートが提供されなくなります。そのため、今のうち...続きを読む

2025.07.25Windows10

AI導入で失敗する地方中小企業の共通点|始める前に確認すべきこと

「AIを導入すれば、人手不足の悩みが一気に解決するはず…」 そんな期待を胸に動き出したものの、思ったような成果が出なかった──。 地方都市の中小企業から、こうした声をよく耳にします。 実際、総務省の調査では地方の生産年齢人口はここ10...続きを読む

2025.11.20AI活用作業効率化生成AI

業務支援・統合型AIとは何か|日常業務にAIが溶け込む時代へ

前回の記事では、検索型AIとChatGPTの使い分けを整理しました。 ここまで学ぶと、 「生成AIには、それぞれ得意な役割がある」 という感覚が少しずつ身についてきたと思います。 では...続きを読む

2026.01.04生成AIパスポート

【CSS】CSSカウンター入門|番号を自動で付与する基本と活用例

CSSカウンターとは?初心者でもできる番号自動付与の基本 Webサイトを作っていると、リストや段落に番号を振りたい場面が多々あります。 HTMLの<ol>タグを使えば自動的に番号が付与されますが、「思った通りにデザインできない」...続きを読む

2025.10.02CSSHTMLコーディング

Bootstrap5実装環境でmt-5を足しても余白が変わらない原因

Bootstrap 5 の実装環境でmt-5を足したのに、「あれ? 余白、変わってない?」と首をかしげたことはありませんか? 講座やレビューの場でも、この違和感は本当によく出てきます。コードは正しそうに見えるし、Bootstrapのクラス指定も間違っていない。それでも、...続きを読む

2026.01.22BootstrapCSSHTMLコーディング