スマホサイトの実機確認をする時に、効率よくスマホでページを開くためのqriというライブラリを作りました。
似たようなことができるブックマークレットとか、ブラウザの拡張機能はありますが、ブックマークレットの登録や、拡張機能のインストールなど準備が必要でした。そのため、環境によっては使えないこともありましたので、何も準備せずに使えるものを作りました。
デモ
デモサイト
「このページのQRコードを表示」をクリックするとQRコードを表示します。
「QRコードを隠す」をクリックするとQRコードを非表示にします。
使いかた
QRコードを埋め込みたいページに、以下のコードを貼り付けてください。
あとは、自動的にページの最下部(bodyタグの閉じタグ直前)に、QRコードを挿入します。
<script src="https://toyamarinyon.github.io/qri/dest/qri.min.js"></script>
仕組み
QRコードを作成するためにGoogle Chart Toolsを使っています。
Google Chart Toolsは、QRコードにしたいURLや、QRコードのサイズをパラメータに含めてリクエストを送ると、QRコードを返します。
https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world&choe=UTF-8
// 150x150サイズの"hello world"を示すQRコード(画像)を返します。
qriでは、imgタグのsrcとして、APIのURL渡して、返却値を画像として表示します。
ご意見・要望はhttps://github.com/toyamarinyon/qri/issues/までどうぞ！