ブラウザのアドレスバーに表示されているURLに応じたQRコードを自動生成したい場合、どう記述すればいいでしょうか?


下記の記述で任意URL(固定)のQRコード画像は表示できるんですが、ブラウザのアドレスバーに表示されているURLに応じてQRコードを自動生成したい場合、どう記述すればいいでしょうか?宜しくお願いいたします。

<img src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=※任意のURL※" />

回答の条件
  • URL必須
  • 1人5回まで
  • 登録:
  • 終了:2012/12/29 02:00:09
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:thyself2005

下記の記述でテキストリンククリック時にアドレスバーのURLに応じたQRコード画像が表示されるのですが、別ウィンドウかポップアップ(サイズ指定したい)で開く方法もよければ教えていただけると助かります。

宜しくお願いいたします。

<a href="javascript:window.location='http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl='+escape(location.href);">※任意の文字列※</a>

ベストアンサー

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154

ポイント80pt

Firefox ですけど、こんなアドオンがあります。

Mobile Barcoder

https://addons.mozilla.org/ja/firefox/addon/mobile-barcoder/


Google Chrome だと、こんな拡張が。

QR-Code Tag Extension

https://chrome.google.com/webstore/detail/qr-code-tag-extension/bcfddoencoiedfjgepnlhcpfikgaogdg



追記です。

ブログパーツってことですね。
探せば色々あるんでしょうけど、とりあえず、ここのは期待通りなんじゃないか、と。
http://syde.jp/qr/

そのパーツを貼ってみた、ぼくのはてなブログ。
http://a-kuma3.hatenablog.com/

他1件のコメントを見る
id:a-kuma3

ブログパーツを期待してた、ということで、回答に追記しました。

2012/12/25 14:27:50
id:thyself2005

追記での回答ありがとうございます!
紹介していただいたらくあーる、中々よさげですねー。

2012/12/29 01:15:35

その他の回答4件)

id:thyself2005

質問文を編集しました。詳細はこちら

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154ここでベストアンサー

ポイント80pt

Firefox ですけど、こんなアドオンがあります。

Mobile Barcoder

https://addons.mozilla.org/ja/firefox/addon/mobile-barcoder/


Google Chrome だと、こんな拡張が。

QR-Code Tag Extension

https://chrome.google.com/webstore/detail/qr-code-tag-extension/bcfddoencoiedfjgepnlhcpfikgaogdg



追記です。

ブログパーツってことですね。
探せば色々あるんでしょうけど、とりあえず、ここのは期待通りなんじゃないか、と。
http://syde.jp/qr/

そのパーツを貼ってみた、ぼくのはてなブログ。
http://a-kuma3.hatenablog.com/

他1件のコメントを見る
id:a-kuma3

ブログパーツを期待してた、ということで、回答に追記しました。

2012/12/25 14:27:50
id:thyself2005

追記での回答ありがとうございます!
紹介していただいたらくあーる、中々よさげですねー。

2012/12/29 01:15:35
id:oil999 No.2

回答回数1728ベストアンサー獲得回数320

ポイント5pt

以下のスクリプトをブックマークレットとして登録してください。

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

id:thyself2005

回答ありがとうございます。
後ほど補足を書きますので宜しくお願いします。

2012/12/25 13:46:26
id:pigmon88 No.3

回答回数501ベストアンサー獲得回数25

macならアップル・スクリプトで簡単に作れるのですが、お使いのosはなんですか?
http://www.google.co.jp/

id:thyself2005

回答ありがとうございます。
後ほど補足を書きますので宜しくお願いします。

2012/12/25 13:46:33
id:fiwa No.4

回答回数1200ベストアンサー獲得回数253

ポイント10pt

>別ウィンドウかポップアップ(サイズ指定したい)で開く方法

こんなのどうでしょう。
マウスオーバーでリンク先URLのQRコードを自動生成してツールチップで表示してくれるjQueryプラグイン「qrTip」 | BlackFlag

本家のデモページはなくなっちゃってますけど。

kovshenin/qrtip ? GitHub

id:fiwa

例えばこんな感じとか。

<!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>
2012/12/25 09:47:11
id:thyself2005

回答ありがとうございます。
実ははてなブログで今回の件を実現したいのですが、
はてなブログだと<head>タグ内を自由にカスタマイズできないのです。
何かいい方法があればいいのですが。

2012/12/25 13:48:54
id:thyself2005

回答者の皆さま

この度は様々なご回答ありがとうございます。

今回質問させていただいた件ですが、はてなブログ上で実装したいと考えております。

下記が私のはてなブログとなりますが、

ブログサイドバーの見出し「このページをシェアする」の中に、

ブラウザのアドレスバーに表示されているURLに応じたQRコードを表示したいと考えてます。

現在はテキストリンクで「≫ このページのQRコードを表示する」とし、

クリックすることで同じタブ内でQRコードが表示されるようになっておりますが、

これを新しいタブで開く、もしくはクリック等不要でQRコード画像を直接表示できればいいのですが。。。

http://www.masaemon.jp/


お手数おかけいたしますが、引き続き回答いただけますと幸いです。

宜しくお願いいたします。

id:pigmon88 No.5

回答回数501ベストアンサー獲得回数25

ポイント5pt

google apiで現在見ているurlのqrコードを表示する方法が以下にありますが、はてなブログで使えるかどうかは知りません。

http://www.devolen.com/blog/google/qrcode_auto_operation_generation/

id:a-kuma3

はてなブログで使えるかどうかは知りません。

はてなID 持ってんだから、試してみてから回答したら?

2012/12/26 01:56:22
id:thyself2005

回答ありがとうございました。

2012/12/29 01:16:17

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません