1クリックで見てるサイトのQRコードを生成するブックマークレット

背景

スマートフォンページを作っていると割とPCで開いているページを、
手元のスマートフォンでさっと開きたいシチュエーションは割とある。
こういう時、端末で打つのは面倒くさいのでQRコードにしてスマートフォンでスキャンすることが多い。

だいたいQRコードを作成するとき、QRコード生成サイトなんかを利用するのだが、
どこかのサイトのフォームにおおっぴらにしてないページのURLを貼り付けるのはなんとなく抵抗があったので、それよりも精神衛生上は良さそうなGoogle Chartを使ってQRをつくっていた。

この記事はその実際に使っているブックマークレットの紹介である。

Google Chart Toolsについて

Google Chart Tools: InfographicsのQRコードの機能を拝借する。
https://developers.google.com/chart/infographics/docs/qr_codes

が、Infographicsは2012年にはDeprecatedとなっており、メンテする気はないらしい。
他にも数式やグラフ的なAPIがあってなんか面白そうだ。

基本的には

http://chart.googleapis.com/chart?

に色々パラメータを付けてアクセスすると画像データが帰ってくる仕組み。

パラメータは大きさとか、エラーの誤り訂正レベルとか。
そのままimgタグで貼れる便利。

ブックマークレットの内容

ベースとなる内容

var string=prompt("input text", document.URL);
if(string == null || string == ""){
    alert("canceled");
}else{
    window.open("http://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chl="+encodeURIComponent(string)); 
}

とりあえず、下記をコピペしてブックマークのURL欄にでもいれておいて、QR化したいページで押せば
そのURLが予めセットされたプロントが出てきて、OKを押せばささっとそのページのQRコードを作れるという感じ。

あれ、、、厳密には1クリックじゃなかった。。。
今見てるページ以外もQR化したい時もあるので、プロントで一度対象の値を入力するようにしてる。
キャンセルダイアログとかもいらないかな。。
まぁ、このあたりは好みで変更したら良いと思います。

サンプル

javascript:(function(){var string=prompt("input text",document.URL);if(string!=null&&string!=""){window.open("http://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chl="+encodeURIComponent(string));}})()