入力済みフォームの短縮URLシステムを開発した話

こんにちは。tampopo256です。

はじめに

入力済みのGoogleフォームURLをQRコードにして紙に印字していたところ...

「QRコードが細かすぎて、スマホで読めない……！」

そう、長すぎるGoogleフォームURLをそのままQR化したことで、
印刷されたコードが小さすぎて読み取りに失敗する人が続出。
しかも紙が汚れたり曲がったりすると、もはや完全に詰み。

😇 そこで作ったシステム

「QRコードは短く、かんたんに」が正義。

ということで、Cloudflare Workers × Googleフォームで
「超短縮URLができる仕組み」を作りました！

🎯 解決したかった課題

課題	解決法
QRコードが細かすぎて読めない	gf.example.com/<formId>/<value> の超短縮URLを生成
フォームのパラメーター付きURLが長すぎる	Cloudflare Workersで自動展開
フォームが複数ある	formId をキーにして複数フォームに対応可能

---

🔗 仕組み概要

📄 アクセス元：

https://gf.example.com/abc123/admin1234

🔁 Cloudflare Workerが展開して…

https://docs.google.com/forms/d/e/1FAIpQLSfjs.../viewform?entry.2026599680=admin1234

✅ 結果：

• 印刷できるほど シンプルなURL
• フォームごとに formId（abc123）で分離
• admin1234 が entry.2026599680 に入る！

---

🧑‍💻 Worker側のコード抜粋（TypeScript）

export default {
  async fetch(request: Request, env: any): Promise<Response> {
    const url = new URL(request.url);
    const [_, formId, value] = url.pathname.split("/");

    if (!formId || !value) {
      return new Response("形式: /<formId>/<value> を使ってください", { status: 400 });
    }

    const configRaw = await env.GFLINK.get(`gf:${formId}`);
    if (!configRaw) {
      return new Response("フォームが見つかりません", { status: 404 });
    }

    const config = JSON.parse(configRaw);
    const redirectUrl = `${config.base_url}&${config.param_key}=${encodeURIComponent(value)}`;
    return Response.redirect(redirectUrl, 302);
  }
};

---

🧠 Cloudflare KV の構造

• キー: gf:abc123
• 値:

{
  "base_url": "https://docs.google.com/forms/d/e/1FAIpQLSfjs.../viewform?usp=pp_url",
  "param_key": "entry.2026599680"
}

これを複数登録すれば、いろんなフォームに対応できます！

🤝 Googleフォーム側の構成

項目	形式
entry.2026599680	テキスト（氏名やID）
ほか任意	コメント、チェックボックスなど自由に追加OK

---

✅ こう変わった！

Before	After
細かすぎて読めないQRコード	短くて読みやすいQRコード
紙ごときでエラーが出る	汚れても読める大きさに
URL変更が手間	フォームIDだけ登録すればOK

🏗 仕組みを真似したい人へ

• Cloudflare Workers アカウント（無料枠あり）
• KV ストアを使えるように設定
• wrangler.toml を整備（コード付き）
• QR生成：好きなサイト or GASでもOK！

おわりに

このシステムを活用して作ったのが、これ↓です。