🔗 URLを発行するサイトの作成方法について
こんにちは、エンジニア仲間の皆さん!
今回は、ユーザーが値を入力して、その入力値を反映した動的なページを作成し、パーマリンク形式のURLを発行する仕組みについて解説します。この記事では、PHPを使ったバックエンド処理と、URLリライト(.htaccess
)の設定例、さらにフロントエンドのサンプルコードを交えて、初心者にも分かりやすく説明します。💻✨
🎯 基本的な流れ
この仕組みでは、以下のステップが必要になります。
-
ユーザー入力フォームの作成
ユーザーが値を入力するためのHTMLフォームを用意します。 -
バックエンドでのデータ保存
入力されたデータを受け取り、データベースに保存します。保存時に一意な識別子(例:ランダム文字列や自動採番のID)を生成します。 -
パーマリンクURLの生成
生成した識別子を使い、www.example.com/view/123
のようなURLを作成します。
※このために、Apacheの.htaccess
によるURLリライトが必要になります。 -
動的ページの表示
リクエストされたURL内の識別子を取得し、データベースから該当データを読み出して表示します。
以下のMermaid図で、流れを視覚的に示しています。
🛠️ 実装例
1. ユーザー入力フォーム(index.php)
以下のコードはシンプルなHTMLフォームの例です。
ユーザーが入力し、「送信」ボタンを押すと、submit.php
にデータをPOSTします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>データ入力ページ</title>
</head>
<body>
<h1>情報を入力してください ✏️</h1>
<form action="submit.php" method="post">
<label for="data">あなたのメッセージ:</label>
<input id="data" name="data" type="text" required>
<button type="submit">送信</button>
</form>
</body>
</html>
2. バックエンド処理(submit.php)
受け取ったデータをデータベースに保存し、一意なIDを生成します。ここでは例として、簡単なPHPコードを示します。
<?php
// データベース接続設定 (PDOの例)
$dsn = 'mysql:host=localhost;dbname=yourDB;charset=utf8mb4';
$user = 'dbuser';
$password = 'dbpassword';
$options = [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION];
try {
$pdo = new PDO($dsn, $user, $password, $options);
} catch(PDOException $e) {
die("DB接続エラー: " . $e->getMessage());
}
// フォームからのデータ受信
$data = trim($_POST['data']);
// 一意の識別子を生成(例:ランダムな10文字の文字列)
$identifier = substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyz"), 0, 10);
// DBにデータ挿入
$stmt = $pdo->prepare("INSERT INTO data_table (identifier, data) VALUES (:identifier, :data)");
$stmt->execute(['identifier' => $identifier, 'data' => $data]);
// 発行するURLを作成(.htaccessでリライト設定済み)
$url = "https://www.example.com/view/" . $identifier;
// ユーザーにURLを表示
echo "あなたのデータは保存されました!シェア用URL: <a href='{$url}'>{$url}</a>";
?>
3. .htaccessによるURLリライト設定
Apacheを使っている場合、.htaccess
に以下のような設定を行うことで、www.example.com/view/識別子
の形式のURLを内部的にview.php
にリダイレクトできます。
RewriteEngine On
RewriteRule ^view/([0-9a-zA-Z]+)$ view.php?id=$1 [L,QSA]
4. 動的ページ表示(view.php)
リライトされたURLで受け取った識別子を元に、保存されたデータをデータベースから取得して表示します。
<?php
// データベース接続設定 (submit.phpと同様)
$dsn = 'mysql:host=localhost;dbname=yourDB;charset=utf8mb4';
$user = 'dbuser';
$password = 'dbpassword';
$options = [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION];
try {
$pdo = new PDO($dsn, $user, $password, $options);
} catch(PDOException $e) {
die("DB接続エラー: " . $e->getMessage());
}
$identifier = $_GET['id'] ?? '';
if ($identifier) {
$stmt = $pdo->prepare("SELECT data FROM data_table WHERE identifier = :identifier");
$stmt->execute(['identifier' => $identifier]);
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if ($row) {
echo "<h1>あなたが入力した情報</h1>";
echo "<p>" . htmlspecialchars($row['data'], ENT_QUOTES, 'UTF-8') . "</p>";
} else {
echo "データが見つかりませんでした。";
}
} else {
echo "無効なリクエストです。";
}
?>
💡 まとめ
- ユーザー入力フォームからデータを受け取り、
- PHPでデータを保存し一意な識別子を生成、
-
.htaccessのリライト機能で綺麗なURL(例:
/view/識別子
)を実現、 - リライト先のPHPファイルで該当データを表示するという流れになります。
この仕組みを実装することで、PastebinやStack Overflowのように、ユーザー入力に基づいた動的なページを生成し、簡単にURLをシェアできるサイトを作成できます。ぜひ、自身のプロジェクトに取り入れて、ユーザーエクスペリエンスの向上を目指してください!🚀
Happy Coding! 👩💻👨💻
💖 ご支援いただけませんか?
このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです!
暗号資産による寄付
以下のウォレットアドレスをご利用ください。重要:Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます! 送金時には、絶対に使用するネットワーク(例: ERC-20、BEP-20、Polygon、Avalanche C-Chain)を必ず正しく選択してください。
-
Ethereum (ETH)
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
(ネットワーク: ERC-20) -
BNB Chain (BNB)
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
(ネットワーク: BEP-20) -
Polygon (MATIC)
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
(ネットワーク: Polygon) -
Avalanche (AVAX)
0x5CDA2F68f59F641B00aD172475c3d5fC10321174
(ネットワーク: Avalanche C-Chain) -
Solana (SOL)
EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f
-
Stellar (XLM)
アドレス:GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
メモ: 必要に応じて入力してください。 -
Ripple (XRP)
アドレス:r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
タグ: 必要に応じて入力してください。 -
Cardano (ADA)
addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7
-
Dogecoin (DOGE)
DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H
資金用途
寄付金は以下の目的で活用させていただきます:
- サーバー維持費やデザインツール購入
- 学習活動(オンラインコース受講・書籍購入)
- 読者向け無料コンテンツ制作
ご協力いただいた皆さまには心より感謝申し上げます! 🙏
補足情報
-
Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
上記4つのネットワークは同じウォレットアドレス(0x5CDA2F68f59F641B00aD172475c3d5fC10321174
)を使用します。ただし、送金時には、絶対に使用するネットワーク(例: ERC-20、BEP-20、Polygon、Avalanche C-Chain)を必ず正しく選択してください。 -
USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。
-
初回送金時には少額でテスト送金することをおすすめします。