ブラウザから記事投稿できるツールを自作しました！

格安サーバー！手軽にホームページ作り!

✨ブラウザから記事投稿できるツールを自作しました！

ホームページの記事を、ファイルマネージャーやFTPを使わずにブラウザから投稿・更新できるようにしたくて、PHPとHTMLを使って簡単なツールを作成しました！

この記事では、実際に私が使っているコードを紹介しながら、どんな仕組みで動いているのかを解説していきます。ぜひ真似してみてください😊

🧱 作成したファイル

ファイル名	内容
`post.php`	記事投稿フォーム
`get_subcategories.php`	主カテゴリを選んだ際、サブカテゴリを動的に取得
`submit.php`	投稿データを処理してサーバーに保存

📄 post.php（投稿フォーム）

ユーザーがアクセスする投稿フォームのコードです。主カテゴリを選ぶと、JavaScriptを通してサブカテゴリが自動で変わる仕組みになっています。

<form action="submit.php" method="post" enctype="multipart/form-data">
  <label>パスワード：<input type="password" name="password"></label><br><br>
  <label>タイトル：<input type="text" name="title" required></label><br><br>
  <label>主カテゴリ：
    <select name="main_category" id="main-category" required>
      <option value="">選択してください</option>
      <option value="news">ニュース</option>
      <option value="blog">ブログ</option>
    </select>
  </label><br><br>
  <label>サブカテゴリ：
    <select name="sub_category" id="sub-category" required>
      <option value="">主カテゴリを選んでください</option>
    </select>
  </label><br><br>
  <label>トップ画像：<input type="file" name="top_image" accept="image/*"></label><br><br>
  <label>本文画像（最大10枚）：<input type="file" name="images[]" accept="image/*" multiple></label><br><br>
  <label>記事本文：<br>
    <textarea name="content" rows="10" cols="50" required></textarea>
  </label><br><br>
  <input type="submit" value="記事を投稿">
</form>
<script>
  document.getElementById("main-category").addEventListener("change", function () {
    const mainCategory = this.value;
    const subCategorySelect = document.getElementById("sub-category");
    fetch("get_subcategories.php", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: "main_category=" + encodeURIComponent(mainCategory)
    })
    .then(response => response.json())
    .then(data => {
      subCategorySelect.innerHTML = "";
      data.forEach(function (item) {
        const option = document.createElement("option");
        option.value = item;
        option.textContent = item;
        subCategorySelect.appendChild(option);
      });
    });
  });
</script>

🔍 get_subcategories.php（サブカテゴリ取得）

<?php
$mainCategory = $_POST['main_category'];
$path = "category_path/" . $mainCategory;
$subcategories = array_diff(scandir($path), array('.', '..'));
echo json_encode(array_values($subcategories));
?>

📨 submit.php（記事の保存処理）

<?php
if ($_POST['password'] !== 'kosuke48') {
  exit("パスワードが違います。");
}
$title = $_POST['title'];
$mainCategory = $_POST['main_category'];
$subCategory = $_POST['sub_category'];
$content = $_POST['content'];
$folderName = preg_replace('/[^\w\-]/u', '_', $title);
$targetDir = "some_path/" . $folderName;
mkdir($targetDir);
copy("template/index.php", $targetDir . "/index.php");
file_put_contents($targetDir . "/content.html", $content);
file_put_contents($targetDir . "/category.txt", $mainCategory . "\n" . $subCategory);
if ($_FILES['top_image']['tmp_name']) {
  move_uploaded_file($_FILES['top_image']['tmp_name'], $targetDir . "/top.jpg");
}
for ($i = 0; $i < count($_FILES['images']['name']); $i++) {
  if ($_FILES['images']['tmp_name'][$i]) {
    $filename = "image" . ($i + 1) . ".jpg";
    move_uploaded_file($_FILES['images']['tmp_name'][$i], $targetDir . "/" . $filename);
  }
}
echo "記事が正常に投稿されました！";
?>

ホームページスキルで副業へ！

🧑‍💻 おわりに

このシンプルな仕組みで、記事投稿の手間が一気に軽くなりました！
投稿画面にアクセスして内容を入力し、画像をアップロードするだけで、サーバー側に記事が追加される仕組みは本当に便利です。

自分用にカスタマイズすることで、もっと高機能にすることもできますよ。