QRコード画像を作成し、その画像URLをSSL(https)で表示してくれるGoogleの無料WEBサービスが便利

2016.05.10
この記事は約3分で読めます。

QRコード画像を作成してくれてSSL表示してくれるWEBサービス昨日から当サイト「tohdamikio.com」は常時SSL表示になった。しかし、httpsで表示されるアドレスバーに鍵マークがつかない。原因を調べてみると、QRコード画像を作成しているWEBサービスの画像パスがSSLでなかったことがわかった。http://で始まる画像パスでなくhttps://で始まる画像パスに変更できないかぎりこの問題は解決しない。そこで、QRコード画像を作成し、その画像URLをSSL表示（https://）で表示してくれるWEBサービスを探し、そのWEBサービスに変更した。これで、QRコードを表示する個別記事も
sslkabimark.jpg
というように鍵マークがつくようになった。

QRコード画像を作成

当ブログはMT6（MovableType）で構築されている。QRコード作成のウィジェットを以下のように変更するだけで実装できた。

<!– QRコード生成 –>
<p style=”clear: left”>
この記事のURL「<$mt:EntryPermalink$>」をQRコードで表示<br />
<img src=”https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=<$mt:EntryPermalink$>?qrcode” width=”150″ height=”150″ alt=”この記事のURL「<$mt:EntryPermalink$>」をQRコードで表示「<$mt:EntryPermalink$>」” title=”この記事のURL「<$mt:EntryPermalink$>」をQRコードで表示「<$mt:EntryPermalink$>」” /><br />
パソコンで表示されたページをスマフォでも見たい場合は、このQRコードをリーダーで読むと表示されます。
</p>

上記のQRコード作成はGoogleのサービスを使っている。
MTの<$mt:EntryPermalink$>という個別記事のURLを表す変数とこのWEBサービスは非常に相性がよい。上記の表示で、すべての個別ページに個別のURLを表したQRコード画像が表示されるようになった。

英語版のページだが、
https://developers.google.com/chart/infographics/docs/qr_codes
にてWEBサービスの使い方が公開されており、誰でも使うことができる。

要点だけいうと

https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=https://tohdamikio.com

という部分だけを使えばいいので便利である。
上記の「https://tohdamikio.com」という部分を自分が表示したい文字やメールアドレスやURL名などにすれば画像を表示してくれる。

上記の例では
<img src=”https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=https://tohdamikio.com” />
というhtml文で表示すると

のように画像が表示される。