ブログ誘導用QRコードの設置

業務外

めったにない事ですが、井戸掘りブログを紹介した際にURLを教えてと頼まれることがあります。
おじさん同士なので、『井戸掘り　硬実』で検索してと言っても検索エンジンがまちまちで、まとめサイトや日本ブログ村が先にヒットして中々ブログに到達しない。じゃあメアドの交換やLINEで友達登録と言っても、更に難易度が上がるばかり。笑
ということで、誘導用のQRコードをサイドバーに設置することにしました。モバイルバージョンは画面末尾ね。
相手のスマホにQRコードリーダーがインストールされていれば一発で読めるし、最近のスマホのカメラにはQRコードリーダーが標準で搭載されているらしい。

QRコードを設置しました

最初はガジェットに井戸掘りブログのサイトURLを設置してみました。
使ったのはGoogle Chart Toolsです。

ガジェットのソースコードです。

<ul>
<li>https://nsfarmer.blogspot.com/</li>
</ul>
<center>
<img alt="QRコード" src="https://chart.apis.google.com/chart?chs=150x150&amp;cht=qr&amp;chl=https://nsfarmer.blogspot.com/" />
</center>

当然ながらこのQRコードだと、ブログのホームページに固定で誘導されます。井戸掘りブログの紹介の要には立ちますが、個別の記事に興味がある場合はブログ内で検索が必要です。これがまたおじさんには辛い。笑
そこで、ガジェットは説明３行を残して切り捨て。QRコード自体はブログテンプレートに実装しました。各記事の個別のURLをQRコード化しているので、今見ている記事にダイレクトに誘導できます。

ガジェットのソースコードです。サイドバーに表示する説明のみです。

<ul>
<li>この記事のURL</li>
</ul>

ブログテンプレートのソースコードです。6～8行目はクイック編集の抑止です。

<!--2020/1/28誘導用QRコード設置-->
<data:blog.url/>
<center>
  <img alt='QRコード' expr:src='&quot;https://chart.apis.google.com/chart?chs=150x150&amp;cht=qr&amp;chl=&quot; + data:blog.url'/>
</center>
<b:if cond='!data:blog.isMobileRequest or data:blog.locale == &quot;ja&quot;'>
  <b:include name='quickedit'/>
</b:if>
<!--2020/1/28誘導用QRコード設置ここまで-->

感想と構想

Google Chart Toolsとはグーグルが提供しているグラフ作成サービスです。簡単なコードを記述するだけで色々なグラフを生成することができます。また生成したグラフはサイトに埋め込むことができます。

QRコードの設置には以下の記事を参考にさせていただきました。

Blogger:QRコードをつけてみた
https://cointreau-15ml.blogspot.com/2011/03/bloggerqr.html

Google Chart Toolsは以下の記事を参考にさせていただきました。

データのビジュアル化を最少の労力で
http://www.showa-corp.jp/special/graphtools/gct.html