下記の記述で任意URL(固定)のQRコード画像は表示できるんですが、ブラウザのアドレスバーに表示されているURLに応じてQRコードを自動生成したい場合、どう記述すればいいでしょうか?宜しくお願いいたします。
<img src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=※任意のURL※" />
下記の記述でテキストリンククリック時にアドレスバーのURLに応じたQRコード画像が表示されるのですが、別ウィンドウかポップアップ(サイズ指定したい)で開く方法もよければ教えていただけると助かります。
宜しくお願いいたします。
<a href="javascript:window.location='http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl='+escape(location.href);">※任意の文字列※</a>
Firefox ですけど、こんなアドオンがあります。
https://addons.mozilla.org/ja/firefox/addon/mobile-barcoder/
Google Chrome だと、こんな拡張が。
https://chrome.google.com/webstore/detail/qr-code-tag-extension/bcfddoencoiedfjgepnlhcpfikgaogdg
Firefox ですけど、こんなアドオンがあります。
https://addons.mozilla.org/ja/firefox/addon/mobile-barcoder/
Google Chrome だと、こんな拡張が。
https://chrome.google.com/webstore/detail/qr-code-tag-extension/bcfddoencoiedfjgepnlhcpfikgaogdg
ブログパーツを期待してた、ということで、回答に追記しました。
追記での回答ありがとうございます!
紹介していただいたらくあーる、中々よさげですねー。
以下のスクリプトをブックマークレットとして登録してください。
javascript:window.location='http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl='+escape(location.href);
ブックマークレットの作り方ですが、IEでしたら下記ページを参考にしてください。
http://d.hatena.ne.jp/replication/20090527/1243354576
回答ありがとうございます。
後ほど補足を書きますので宜しくお願いします。
macならアップル・スクリプトで簡単に作れるのですが、お使いのosはなんですか?
http://www.google.co.jp/
回答ありがとうございます。
後ほど補足を書きますので宜しくお願いします。
>別ウィンドウかポップアップ(サイズ指定したい)で開く方法
こんなのどうでしょう。
マウスオーバーでリンク先URLのQRコードを自動生成してツールチップで表示してくれるjQueryプラグイン「qrTip」 | BlackFlag
本家のデモページはなくなっちゃってますけど。
kovshenin/qrtip ? GitHub
例えばこんな感じとか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>QRcode_test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="qrtip-1.0-jquery.js"></script> <link rel="stylesheet" href="qrtip-1.0-jquery.css" type="text/css"> <script> jQuery(document).ready(function() { jQuery('a.qr').qr({size: 150}); }); url = escape(location.href); </script> <style type = "text/css"> p{text-align: center;} p.test{margin: 200px 10px 10px 10px;} </style> </head> <body> <!-- 通常URLのQRコード表示 --> <p class="test"><a class="qr" href="http://q.hatena.ne.jp/">人力検索</a></p> <!-- このページのQRコード表示 --> <p><a class="qr" href="">このページ</a></p> <!-- QRコードを表示しない --> <p><a href="http://www.hatena.ne.jp/">はてな</a></p> </body> </html>
回答ありがとうございます。
実ははてなブログで今回の件を実現したいのですが、
はてなブログだと<head>タグ内を自由にカスタマイズできないのです。
何かいい方法があればいいのですが。
回答者の皆さま
この度は様々なご回答ありがとうございます。
今回質問させていただいた件ですが、はてなブログ上で実装したいと考えております。
下記が私のはてなブログとなりますが、
ブログサイドバーの見出し「このページをシェアする」の中に、
ブラウザのアドレスバーに表示されているURLに応じたQRコードを表示したいと考えてます。
現在はテキストリンクで「≫ このページのQRコードを表示する」とし、
クリックすることで同じタブ内でQRコードが表示されるようになっておりますが、
これを新しいタブで開く、もしくはクリック等不要でQRコード画像を直接表示できればいいのですが。。。
お手数おかけいたしますが、引き続き回答いただけますと幸いです。
宜しくお願いいたします。
google apiで現在見ているurlのqrコードを表示する方法が以下にありますが、はてなブログで使えるかどうかは知りません。
http://www.devolen.com/blog/google/qrcode_auto_operation_generation/
はてなブログで使えるかどうかは知りません。
はてなID 持ってんだから、試してみてから回答したら?
回答ありがとうございました。
ブログパーツを期待してた、ということで、回答に追記しました。
2012/12/25 14:27:50追記での回答ありがとうございます!
2012/12/29 01:15:35紹介していただいたらくあーる、中々よさげですねー。