Help us understand the problem. What is going on with this article?

Google Chart API を使用したQRコード生成

More than 1 year has passed since last update.

そもそも Google Chart は何者なのだろうか?

 簡単にまとめれば、無料で使えるグラフィックツール。

 棒グラフ、折れ線グラフなどの基本的なグラフに加えて、地理グラフのようなリッチなコンテンツも提供されており、パラメータを指定するだけで簡単に作成できる。

 詳しくは下記公式サイト参照
公式サイト

Google Chart API の Image APIを使用してQRコードを生成する

 現在非推奨のため、サービスが停止される可能性もあり、そのあたりは注意。

基本のフレーム

 http://chart.apis.google.com/chart?

 上記Root URIにパラメータを指定していく

セットするもの

パラメータ        必須/オプション           内容 
cht 必須 Chart Typeを指定する。QRコードの場合はcht=qrと指定。
chs 必須 Chart Sizeを指定する。幅x高さ。
chl 必須 エンコードするデータを指定する。
choe オプション Chart Output Encodingを指定する。日本語対応の場合はShift_JISを指定。
chld オプション エラー訂正のレベルを指定。

公式リファレンス

試しにQiitaに飛ばすQRコードを生成してみる

https://chart.apis.google.com/chart?cht=qr&chs=300x300&choe=Shift_JIS&chl=https://qiita.com

プログラム内での動的な生成

chl= に値を渡すように組めばできる

jQueryによるサンプルコード

qiita.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>QRコード生成</title>
    </head>
    <body>
        <h1>QRコード生成</h1>
        <p>
            <!-- データ入力 -->
            <input type="text" id="msg">

            <!-- エンコード処理イベントボタン -->
            <input type="button" id="button" value="変換">
        </p>
        <div id="barCode"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script>
           $(function(){
            // 変換ボタン押下時の処理
            $('#button').click(function(){
                // データ取得 日本語対応のためencodeURIComponentで処理
                var msg = encodeURIComponent($('#msg').val());
                // QRコードを置くためのimgタグ生成
                var img = $('<img>').attr('src','https://chart.apis.google.com/chart?cht=qr&chs=150x150&choe=Shift_JIS&chl='+msg);
                // 生成したimgタグの挿入
                $('#barCode').html(img);
             });
           });
        </script>
    </body>
</html>
su8
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした