2020.10.08

見ているページのQRコードを1クリックで表示させる

見ているページのQRコードが欲しい時って結構あると思います。

例えば

webページを友人と共有するため、

PCで見ているページをスマホで見るため。

などなど

そんなQRが簡単に作成できたらいいなって思いませんか？

今日は簡単に1クリックでQRを作成する方法を解説します。

具体的な完成図は

①ブラウザのお気に入りにプログラムを登録

②お気に入りバーのアイコンクリックするとQR表示

といった内容です。

※今回注意点として、お気に入りにjavascriptを登録できるブラウザ限定となります。

具体的には古いedgeだとできないです。

コーディングとか全くわからなくてもコピペだけで実装可能です。

ではやり方を解説

① 適当なページをお気に入り登録する

どこでもいいので適当なページをお気に入り登録します。

※画像ではedgeを使用しています。

②登録したお気に入りの名前とURLを変更する

名前とURLを変更します。

操作はブラウザによって異なりますがほとんどの場合

「右クリック」→「編集」で変更できると思います。

名前は「QR表示」にしましたがこれは好きな名前で問題ありません。

URLは以下をコピペして貼り付けましょう。

javascript:function f(){var d=document;try{if(!d.body)throw(0);window.location="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="+encodeURIComponent(d.location.href);}catch(e){alert("error");}}f();void(0)

1	javascript:function f(){var d=document;try{if(!d.body)throw(0);window.location="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="+encodeURIComponent(d.location.href);}catch(e){alert("error");}}f();void(0)

以上で完成です。

使い方もとっても簡単

QRコードを作成したいページでさっき作ったお気に入りをクリックするだけ

動作確認をしてみましょう。

QRコードを作成したページでクリック

QRが表示されれば成功です。

このQRは画像として生成されていますので右クリックから保存も可能です。

・補足

今回使用したコードの内容は以下になります。

function f(){
  var d=document;
  try{
    if(!d.body)throw(0);
    window.location="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="+encodeURIComponent(d.location.href);
  }catch(e){
    alert("error");
  }
}f();

function f(){

var d=document;

try{

if(!d.body)throw(0);

window.location="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="+encodeURIComponent(d.location.href);

}catch(e){

alert("error");

}

}f();

Google Chart APIを利用しQRを作成、

URL部分に現在のURLを入れるという作りです。

ブラウザ