SMS・位置情報QRコードをブラウザだけで作る仕組み（SMSTO/geo URIとqrcode.js）

「QRコードを読み取ったらSMSの作成画面が宛先入りで開く」「読み取ったら地図アプリがその座標を開く」——こうした挙動は特別なアプリを作らなくても、QRに埋め込む文字列（URIスキーム）を正しく組み立てるだけで実現できる。QRコード自体はただの文字列エンコーダで、読み取り側のOS/アプリがその文字列を解釈して動く。

自分が運用しているツールサイト「ハシトシステム」では、この仕組みで動く単機能ツールを増やしている。今日は SMS 用の SMS QRコード生成 と、緯度経度用の 位置情報QRコード生成 を追加した。どちらも入力からQR生成・ダウンロードまで完全にブラウザ内（クライアント）で完結し、入力内容をサーバーに送らない。ここではその中核だけを取り出して解説する。

鍵は「どのURIスキームを埋め込むか」

QRに入れる文字列を、読み取り側が知っている書式にするのがすべてだ。代表的なものは次のとおり。

  • SMS: SMSTO:<番号>:<本文> — 多くの端末で「宛先と本文が入ったSMS作成画面」が開く。実際の送信はユーザー操作が必要で、勝手には送られない。
  • 位置情報: geo:<緯度>,<経度> — 対応する地図アプリがその地点を開く。ピン名を付けたいときは geo:<緯度>,<経度>?q=<緯度>,<経度>(ラベル) にする。
  • 参考: WiFiは WIFI:T:WPA;S:<SSID>;P:<パス>;;、電話は tel:<番号>、メールは mailto:<宛先>。

番号のサニタイズや座標の範囲チェックさえ入れれば、あとはこの文字列をQR化するだけだ。

実際に試す

前提: モダンブラウザ（Chrome/Firefox/Safari）と、QR生成ライブラリ qrcode（qrcode@1.5.1）をCDNから読むだけ。ビルド不要で、以下のHTMLをローカルに保存して開けば動く。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="qr"></canvas>
<pre id="out"></pre>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
<script>
  // --- SMS: SMSTO:番号:本文 ---
  function buildSms(number, body) {
    var num = String(number).trim().replace(/[^0-9+]/g, ''); // 数字と+以外を除去
    return 'SMSTO:' + num + ':' + (body || '');
  }

  // --- 位置情報: geo:lat,lng[?q=lat,lng(label)] ---
  function buildGeo(lat, lng, label) {
    lat = parseFloat(lat); lng = parseFloat(lng);
    if (isNaN(lat) || isNaN(lng)) throw new Error('緯度経度は数値で');
    if (lat < -90 || lat > 90) throw new Error('緯度は-90〜90');
    if (lng < -180 || lng > 180) throw new Error('経度は-180〜180');
    var base = 'geo:' + lat + ',' + lng;
    return label ? base + '?q=' + lat + ',' + lng + '(' + encodeURIComponent(label) + ')' : base;
  }

  var smsText = buildSms('090-1234-5678', 'お問い合わせします');
  var geoText = buildGeo(35.681236, 139.767125, '東京駅');
  document.getElementById('out').textContent = smsText + '\n' + geoText;

  // canvasへ描画（誤り訂正M・余白4）
  QRCode.toCanvas(document.getElementById('qr'), smsText,
    { errorCorrectionLevel: 'M', margin: 4, width: 320 },
    function (err) { if (err) console.error(err); });
</script>

保存して開くと、SMSTO:09012345678:お問い合わせします と geo:35.681236,139.767125?q=35.681236,139.767125(%E6%9D%B1%E4%BA%AC%E9%A7%85) が表示され、SMS用のQRが描画される。スマホのカメラでそのQRを読み取ると、宛先と本文が入ったSMS作成画面が開くはずだ（挙動は端末により差がある）。

SVGで欲しい場合は toCanvas の代わりに次を使う。印刷や大判掲示ではベクターのSVGが劣化しない。

1
2
QRCode.toString(geoText, { type: 'svg', errorCorrectionLevel: 'M', margin: 4 },
  function (err, svg) { console.log(svg); }); // svg文字列をBlobにしてダウンロードできる

ポイントは3つ

  1. 入力の正規化: 電話番号はハイフンや空白を除去し、座標は範囲を検証する。壊れた文字列をQRにしても読めない。
  2. 誤り訂正レベルと余白: 汚れ・印刷を想定するなら余白は4モジュール以上、誤り訂正はM〜Qが無難。
  3. 完全クライアント処理: 生成をブラウザ内で完結させれば、個人情報（番号・座標）をサーバーに送らずに済む。

同じ発想で WiFi・vCard・メール・SMS・位置情報のQRはすべて「URIを組み立ててエンコードするだけ」で作れる。実際に動くツールとして SMS QR・位置情報QR を公開しているので、挙動を確かめたいときに使ってほしい。

プログラミング
#JavaScript #QRコード #静的サイト #URIスキーム
SMS・位置情報QRコードをブラウザだけで作る仕組み（SMSTO/geo URIとqrcode.js）
https://blog.hashito.biz/2026/07/13/hashitosystem-sms-geo-qr-uri-qrcodejs/
著者
hashito
作成日
2026年7月13日
著作権