【1秒でスマホへ】ブラウザが激変するQRコード一発表示ボタンの作り方

「パソコンで読んでいたおもしろい記事、移動中にスマホの画面で続きを読みたいな……」「今パソコンで開いているこの地図、今すぐスマホのGoogleマップに飛ばしたい！」

そんな風に思ったこと、ありませんか？いちいちURLをコピーして、自分宛てにメールやチャットで送るのって、ちょっと面倒ですよね。

実は、ブラウザに「1本の小さな魔法（JavaScript）」を登録しておくだけで、ボタンをポチッと押した瞬間に、今開いているページのQRコードを画面にポンッと表示できるようになるんです！

今回は、そんな毎日のネットサーフィンが劇的に快適になる「QRコード一発表示ボタン（ブックマークレット）」の作り方と使い方をご紹介します！

そもそも「ブックマークレット」ってなに？

一言でいうと、「ブラウザのお気に入り（ブックマーク）に保存できる、1行だけの小さなプログラム」のことです。

普段、よく行くサイトをブックマークに登録しますよね。それと同じ感覚で、URLの代わりに「特定の命令（JavaScriptのコード）」を登録しておきます。すると、そのボタンを押したときに、ブラウザがその命令をサッと実行してくれるんです。

今回は「いま開いているページのURLを読み取って、その場でQRコードにして画面に表示して！」という命令をボタンにしちゃいます！

【超簡単】魔法のボタンを作ってみよう！

設定は3分もあれば完了します。パソコンのブラウザ（ChromeやEdge、Safariなど）を開いて、一緒にやってみましょう！

ステップ1：適当なページをブックマークする

まずは、このページでもどこでも構いません。ブラウザの「★マーク」などを押して、一度普通にブックマークを登録してください。

ステップ2：ブックマークを編集する

登録したブックマークの編集画面を開きます（右クリックして「編集」を選ぶとスムーズです）。

ステップ3：名前と「アドレス」を書き換える

ここがポイントです！設定を以下のように書き換えてください。

URL（アドレス）の欄：もともと入っているURLをすべて消して、以下のコードをそのままコピーして貼り付けます。

名前：自分がわかりやすい名前（例：「QRコード変換」や「スマホに送る！」など）

javascript:(function(){var u=encodeURIComponent(location.href);var d=document.createElement('div');d.style.position='fixed';d.style.top='50%';d.style.left='50%';d.style.transform='translate(-50%,-50%)';d.style.zIndex='99999';d.style.background='#fff';d.style.padding='20px';d.style.boxShadow='0 0 20px rgba(0,0,0,0.3)';d.style.borderRadius='10px';d.style.textAlign='center';var i=document.createElement('img');i.src='https://api.qrserver.com/v1/create-qr-code/?size=200x200&data='+u;d.appendChild(i);var p1=document.createElement('p');p1.innerText='スマホで読み取ってね！';p1.style.margin='10px 0 0';p1.style.fontSize='14px';p1.style.color='#333';d.appendChild(p1);var p2=document.createElement('p');p2.innerText='ＱＲコードはデンソーウェーブの登録商標です';p2.style.margin='2px 0 0';p2.style.fontSize='11px';p2.style.color='#666';d.appendChild(p2);var c=document.createElement('div');c.innerText='× 閉じる';c.style.marginTop='10px';c.style.cursor='pointer';c.style.color='#999';c.style.fontSize='12px';c.addEventListener('click',function(){document.body.removeChild(d);});d.appendChild(c);document.body.appendChild(d);})();

保存したら準備完了です！ブラウザの「ブックマークバー（常に上に表示されている帯のところ）」に置いておくと、いつでも使えてとっても便利ですよ。