「Google Chart API」を使ってのQRコード表示に変更してみた

[`yahoo` not found]
このエントリーを Google ブックマーク に追加
[`twib` not found]
[`evernote` not found]
GREE にシェア
email this



モバイルへのアクセス支援にPCサイトにQRコードを表示させるのが増えてきている。
このサイトもPCサイトとモバイルサイトが共通URLで表示されるので、サイドバーにQRコードを表示している。
今まで、その表示のためにWP-QRcodeという、素晴らしいプラグインを使用してきたのだが、「Google Chart API」を使えば、プラグインなしでQRコードが生成されるということで、さっそく使ってみた。

参考にした記事
[Google]QRコードを誰でも簡単に自動生成、表示する方法

ちなみに自分はサイドバーに表示させたいので、テーマのウィジェット機能を使って表示させています。
で、そのままウィジェットにPHPコードを書いても反映されないのでExecutable PHP widgetというプラグインでPHP Code Widgetとして使っています。

そしてこの記事どうり表示させると問題が発生。

まずトップページでもQRコードを表示させたいのだが、パーマリンク取得だとトップ記事のQRコードが表示されてしまう。
そして、このサイトの各記事のURLは日本語を含んでいるのでQRコードはURLエンコードされて正しく表示されているようだが、携帯で読み取ると正しくデコードされない!!!

さてどうしたものか。。。
最終的になったコードがこれ!

<?php if(is_home()||is_front_page()):?>
<div align="center"><img src="http://chart.apis.google.com/chart?chs=120x120&choe=UTF-8&cht=qr&chl=<?php bloginfo('siteurl'); ?>&chld=M|1" alt="このページのQRコード" width="120" height="120" /></div>
<?php else: ?>
<div align="center"><img src="http://chart.apis.google.com/chart?chs=90x90&choe=UTF-8&cht=qr&chl=<?php echo wp_get_shortlink(); ?>&chld=M|2" alt="このページのQRコード" width="90" height="90" /></div>
<?php endif;?>

一つ目はPHPの条件分岐でトップページとそうでない場合とで、吐き出すコードを変えることで対応。

二つ目はショートリンクを出力させて回避しました。
そもそも自分のサイトなんですが、ここはアドレスが長い。
さらにURLエンコードしてるもんだから、さらに長い。
それをショートリンクという便利な機能が、WordPressのバージョン3から実装されたということで、それを使わない手はないかなと。

これだけでも十分よくなったのですが、さらにショートリンクをもっと短くできるプラグインがあったので、それを使った。
その名も「Goo.gl
名前から分かるとおり、あのGoogleの短縮URLサービスを使えるプラグインである。
これを有効にすると、一瞬にして過去の記事のGoogle短縮URLが生成され、テンプレとかでショートリンクを取得するコードは、これ以降goo.glの短縮URLになる!

今まで
http://www.alessandromcbee.com/?p=219
これから
http://goo.gl/tFbnO

なんと、URLの長さ37文字がたった19文字!約半分に!!
しかも簡単なアクセス解析も出来るという。

素晴らしいサービスを提供してくれるGoogleと、素晴らしいプラグインを作ってくれた作者に拍手を送ります。

ただドコモの場合、1回リダイレクトが起こります。
「サイトが移動しました」みたいな警告が出る感じ。
まあOK押せば問題ないので。

あと、このプラグインを入れたおかげで、モバイル版のツィート機能も短縮URLが表示されるようになりました。
PCだと自動的にツィッターが短縮URLを使ってくれるんだけど、モバイル版にはその機能がなかったからね。


ひとつプラグインに頼らなくなり、代わりに新たなプラグインのお世話になる。
なんだかな~~


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">