【ネットサーバーを持ってる人向け】QRコードに紐ついているURLの飛び先を編集できるWebアプリ

筆者は独立して自主制作や起業活動を始めてから、イベントやセミナーに参加するたびに、自己紹介用の名刺が必要になりました。そこで当時は、Notion（有料プラン）で作った自分のプロフィールサイトをQRコード化して名刺に載せていたのですが、有料プランをやめた途端、そのドメインが使えなくなり、プロフィールサイトのURLごと変わってしまいました。手元には、まだ100枚以上残っている名刺。

「じゃあ、また新しいURLでQRコードを作って刷り直せばいいじゃないか」とも思うけれど、冷静に考えると、今後だって「やっぱりYouTubeチャンネルに飛ばしたい」「会社のコーポレートサイトに変えたい」といったニーズは必ず出てきます。そのたびに名刺を刷り直すのは、どう考えても合理的ではありません。

そこで今回は、QRコードに紐づくURLそのものは固定したまま、「飛び先だけ」を後から自由に差し替えられる Webアプリを自作してみました。

要件定義

使用する技術

• HTML/CSS
• JavaScript
• JSON
• PHP
• ネットサーバー（開発ではさくらのレンタルサーバーを使用）

「可変QRコード（動的QRコード）」の仕組み

• QRコード自体には中継用のURLが埋め込まれている
  • 例：http://example.com/qrkanri/
• ユーザーがQRコードをスキャンすると、中継サーバーにアクセス
• 中継サーバー側で、管理画面から設定した「最終的な飛び先URL」にリダイレクト
• 管理者は管理画面から、リンク先URLをいつでも変更可能
• QRコードの画像は一切変えずに、URLだけ差し替えられるため、印刷物の差し替えは不要になる

可変QRコードのメリット

• 印刷物の再作成コスト削減と運用の柔軟性向上
• キャンペーンやイベント情報のリアルタイムに更新可能
• 将来的に、A/Bテストや複数URLの切り替えにも応用可能

なぜ外部サービスを使わず自分で作るのか

• サービス提供元の存続や料金体系の変更に依存したくない
• 余計な機能を削ぎ落として、最低限のわかりやすい操作にしたい
• QRコードに紐つくURLのドメインは、なるべく自分／自社のドメインにしたい
  • そのURLをどこかに貼ったときに、見た目としても恥ずかしくない

実装の流れ

ChatGPTに次のプロンプトを渡す

では、これから「ユーザーが指定したURLの飛び先を自由にコントロールできるWebアプリ」の開発をお願いします。
- UIの雰囲気やフォント、配色は添付の画像を参照。
- 使用技術はHTML/CSS、JavaScript、JSON、PHPに限定。
- ユーザーは自分のサーバーを持っている（ドメインの有無は問わない）
- ユーザーはコーディングがほとんどできない人（サーバーにファイルをあげるのはOK、コードファイルの編集はファイル名と何行目の何をどう修正するかをマニュアルで細かく指定すればできるくらい）
- ログインしなくても使えるようにしてください（データベースを構築しない）

【画面構成（最低限）】
タイトル：QR管理
説明文：QRコードに紐ついているURLの飛び先を自由にコントロールできるWebアプリ

入力項目1：固定URL
入力項目1の説明文：QRコード発行で使用する／外部に提示するURLを入力してください。

入力項目2：飛び先のURL
入力項目2の説明文：そのQRコードを読み取り／URLをクリックする際にアクセスしてほしいURLを入力してください。

入力項目3：管理パスワード
入力項目3の説明文：飛び先のURLを変更する際に使用するパスワードを設定してください。

footer（コピーライト）：©CDism.FlowersKnives 2025

その他必要なものは自由に追加してください。

（添付したUIの参考画像は他で作ったWebアプリのこちらのログイン画面）

※今回の実装では、データベースもユーザー登録も行わず、config.jsonに設定を書き込むだけのシンプルな構成にしています。
管理画面へのアクセスは「1パスワード＋セッション」で守る形です。

コード作成

ChatGPTからは次のような構成を提案してもらいました。

qrkanri/
  index.php      ← QRコードからアクセスされる入口（リダイレクト担当）
  admin.php      ← 管理画面（設定フォーム）
  config.json    ← 設定ファイル（初回は空 or なくてもOK）

この構成どおりにフォルダ・ファイルを用意し、生成してもらったコードをVS Codeで実装。
コードを読みながらローカル環境で動作確認を行い、UIや文言を微修正しました。

その後、FileZilla経由で自分のさくらレンタルサーバーにアップロード。
wwwの直下にqrkanriフォルダを丸ごと配置し、

• https://私のドメイン.jp/qrkanri/　※QRコードから来る入口
• https://私のドメイン.jp/qrkanri/admin.php　※管理画面
  という形で本番テストを行いました。

機能追加

チェックしたのち、以下2点の要件を追加。

1. 一度設定した後は、再度URLを確認・変更する際に、まず管理パスワードの入力を求める
2. 管理画面から設定をリセットし、config.jsonを削除して初期状態に戻せるようにする

使用方法

Step1. 次のGitHubリポジトリから「qrkanri」フォルダをダウンロード

• 「Code」→「Download ZIP」で取得
  
  • index.php　QRコードに紐付ける「中継用URL」の入口
  • admin.php　飛び先URLを設定・編集する管理ページ
  • config.json　中継URL・飛び先URL・管理用パスワードの保存場所
    • 設定後自動的に書き込まれるので、最初は空で良い
      

Step2. ご自身のサーバーwwwの直下に、「qrkanri」のフォルダを丸ごとアップロードする

• 「qrkanri」のフォルダ（その中身を含めて）のみアップしてください
• ドメインがexample.comの場合
  • QRコードに紐付けるURL：http://example.com/qrkanri/
  • 管理ページのURL：http://example.com/qrkanri/admin.php

Step3. 管理ページhttp://example.com/qrkanri/admin.phpにアクセスし、次の3点を設定

• 固定URL（QRコードに紐付けるURL　※例：http://example.com/qrkanri/）
• 飛び先のURL（任意のURL）
• 今後の確認・変更で使用する管理パスワード
  

Step4. 固定URLにアクセスしてみる

QRコードを通して固定URL（例：https://example.com/qrkanri/）にアクセスすると、中継サーバーから「Step3. で設定した飛び先URL」へ自動的にリダイレクトされる。

Step5. 飛び先のURLを管理画面で変更する

管理者は管理ページにアクセスし、1回目に設定したパスワードを入力することで、現在の飛び先URLを確認・変更できる。必要に応じて、リセット機能で設定を初期化することも可能。

おまけ：複数のQRコードを管理したい場合

複数のQRコードを別々に管理したい場合は、「qrkanri」フォルダを複製して、
フォルダ名をmeishiqr、event20251223qrなどに変更してください。

• 例：
  • 名刺用QR：https://example.com/meishiqr/
  • 特定イベント用QR：https://example.com/event20251223qr/

それぞれのadmin.php内のタイトル表示部分を、用途に合わせて編集しておくと、管理画面を開いたときにどのQRか判別しやすくなります。

見映えをさらに良くしたい場合は、最初からフォルダ名を「qrkanri」ではなく、「profile」「event01」などに変更してOKです。（固定URLもそれに合わせて修正してください。）

---

最後に

コードの編集やカスタマイズはご自由にどうぞ。
バグ報告や改善案などありましたら、https://github.com/MzkRi9 まで気軽に投げてください。