WEBサービス - 長留裕平のブログ

Twitter風サイト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Twitter風サイト（高度拡張版）</title>
  <style>
    /* 全体設定 */
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background-color: #f5f8fa;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: #1da1f2;
      display: flex;
      align-items: center;
      padding: 0 20px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      box-sizing: border-box;
      z-index: 10;
    }

    /* レイアウト用コンテナ */
    .container {
      display: flex;
      width: 100%;
      max-width: 1200px;
      margin: 60px auto 0; /* ヘッダー分だけ下に余白をとる */
      box-sizing: border-box;
    }

    /* 左サイドバー（ナビゲーション） */
    .sidebar {
      width: 20%;
      max-width: 200px;
      padding: 10px;
      box-sizing: border-box;
    }

    .nav-item {
      margin: 10px 0;
      font-size: 18px;
    }

    .nav-item a {
      text-decoration: none;
      color: #1da1f2;
      cursor: pointer;
    }

    .profile-settings {
      margin-top: 20px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #e6ecf0;
      border-radius: 5px;
    }

    .profile-settings input {
      width: 100%;
      margin-bottom: 5px;
      font-size: 14px;
      padding: 5px;
      box-sizing: border-box;
    }

    .profile-settings button {
      border: none;
      background-color: #1da1f2;
      color: #fff;
      font-size: 14px;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
    }

    /* メインタイムライン部分 */
    .feed {
      width: 60%;
      padding: 10px;
      box-sizing: border-box;
    }

    .tweet-box {
      background-color: #fff;
      border: 1px solid #e6ecf0;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 20px;
    }

    .tweet-box textarea {
      width: 100%;
      border: none;
      resize: none;
      font-size: 16px;
      outline: none;
      box-sizing: border-box;
    }

    .tweet-stats {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      font-size: 14px;
    }

    .tweet-stats .char-count {
      color: #657786;
    }

    .tweet-stats .error {
      color: red;
    }

    .tweet-box .attach-label {
      display: inline-block;
      margin-top: 5px;
      font-size: 14px;
      color: #657786;
    }

    .tweet-box button {
      margin-top: 10px;
      padding: 8px 16px;
      border: none;
      background-color: #1da1f2;
      color: #fff;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    .tweet {
      background-color: #fff;
      border: 1px solid #e6ecf0;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 10px;
    }

    .tweet-header {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      flex-wrap: wrap;
    }

    .tweet-header img.user-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .tweet-header .name {
      font-weight: bold;
      margin-right: 5px;
    }

    .tweet-header .username {
      color: #657786;
      font-size: 14px;
      margin-right: 5px;
    }

    .tweet-time {
      font-size: 12px;
      color: #657786;
    }

    .tweet-content {
      font-size: 16px;
      margin: 10px 0;
      white-space: pre-wrap; /* 改行を保持 */
    }

    .tweet-content img.attached-image {
      max-width: 100%;
      display: block;
      margin-top: 5px;
      border: 1px solid #ccc;
    }

    .tweet-footer {
      display: flex;
      justify-content: flex-start;
      gap: 15px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .tweet-footer button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 14px;
      color: #657786;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .tweet .replies-container {
      margin-top: 10px;
      border-left: 2px solid #e6ecf0;
      padding-left: 10px;
    }

    /* リプライの更なる階層は少しずつ左にずらす */
    .nested-reply {
      margin-left: 20px;
    }

    /* 右サイドバー（ウィジェット） */
    .widgets {
      width: 20%;
      max-width: 250px;
      padding: 10px;
      box-sizing: border-box;
    }

    .search-box {
      background-color: #fff;
      border-radius: 20px;
      padding: 8px 15px;
      margin-bottom: 20px;
      border: 1px solid #e6ecf0;
      display: flex;
      align-items: center;
    }

    .search-box input {
      border: none;
      outline: none;
      width: 100%;
      font-size: 16px;
    }

    .trends {
      background-color: #fff;
      border: 1px solid #e6ecf0;
      border-radius: 5px;
      padding: 10px;
    }

    .trends h3 {
      margin-top: 0;
    }

    .trend-item {
      margin-bottom: 10px;
      font-size: 14px;
    }

    /* リンク風のテキストデザイン */
    .hashtag,
    .mention {
      color: #1da1f2;
      text-decoration: none;
      cursor: pointer;
    }

    .hashtag:hover,
    .mention:hover {
      text-decoration: underline;
    }

    /* 折りたたみ表示のボタン */
    .toggle-replies-btn {
      background: none;
      color: #1da1f2;
      border: none;
      cursor: pointer;
      font-size: 14px;
      margin-top: 5px;
      padding: 0;
    }
  </style>
</head>
<body>
  <!-- ヘッダー -->
  <header>
    Twitter風サイト（高度拡張版）
  </header>

  <!-- メインコンテンツを左右に分けるコンテナ -->
  <div class="container">

    <!-- 左サイドバー -->
    <aside class="sidebar">
      <div class="nav-item"><a href="#">ホーム</a></div>
      <div class="nav-item"><a href="#">通知</a></div>
      <div class="nav-item"><a href="#">設定</a></div>

      <!-- 簡易プロフィール設定 -->
      <div class="profile-settings">
        <label for="displayName">名前</label>
        <input type="text" id="displayName" placeholder="あなたの表示名">
        <label for="userName">ユーザー名(@なしで)</label>
        <input type="text" id="userName" placeholder="myAccount">
        <button id="saveProfileBtn">保存</button>
      </div>
    </aside>

    <!-- タイムライン部分 -->
    <main class="feed">
      <!-- 新規ツイート入力フォーム -->
      <div class="tweet-box">
        <textarea rows="3" placeholder="いまどうしてる？ (140文字まで)"></textarea>
        <div class="tweet-stats">
          <span class="char-count">0 / 140</span>
          <span class="error"></span>
        </div>
        <label class="attach-label">
          画像を添付:
          <input type="file" class="attach-input" accept="image/*">
        </label>
        <button class="tweet-submit-btn">ツイート</button>
      </div>
    </main>

    <!-- 右サイドバー -->
    <aside class="widgets">
      <!-- 検索ボックス -->
      <div class="search-box">
        <input type="text" placeholder="キーワード検索">
      </div>

      <!-- トレンド表示 -->
      <div class="trends">
        <h3>今どうしてる？</h3>
        <div class="trend-item">#春の訪れ</div>
        <div class="trend-item">#お花見</div>
        <div class="trend-item">#新年度</div>
      </div>
    </aside>
  </div>

  <script>
    // =======================
    //      定数・変数設定
    // =======================
    const TWEET_MAX_LENGTH = 140;
    const feedContainer = document.querySelector('.feed');
    const tweetTextarea = document.querySelector('.tweet-box textarea');
    const tweetButton = document.querySelector('.tweet-submit-btn');
    const charCountEl = document.querySelector('.char-count');
    const errorEl = document.querySelector('.error');
    const attachInput = document.querySelector('.attach-input');

    const displayNameInput = document.getElementById('displayName');
    const userNameInput = document.getElementById('userName');
    const saveProfileBtn = document.getElementById('saveProfileBtn');

    // LocalStorageからツイート一覧を読み込み（なければ空配列）
    let tweets = JSON.parse(localStorage.getItem('tweets-advanced') || '[]');

    // ユーザープロフィール情報をLocalStorageから読み込み
    let userProfile = JSON.parse(localStorage.getItem('userProfile-advanced') || '{}');
    let currentName = userProfile.displayName || 'あなた';
    let currentUserName = userProfile.userName || 'myAccount';

    // フォームに反映
    displayNameInput.value = currentName;
    userNameInput.value = currentUserName;

    // =======================
    //   画像ファイル取得用
    // =======================
    let attachedImageBase64 = null;
    attachInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if(!file) {
        attachedImageBase64 = null;
        return;
      }
      const reader = new FileReader();
      reader.onload = () => {
        attachedImageBase64 = reader.result;  // base64データ
      };
      reader.readAsDataURL(file);
    });

    // =======================
    //   スレッド実装のためのツイート構造
    // =======================
    // tweet = {
    //   id: string (一意のID),
    //   name: string,
    //   userName: string,
    //   content: string,
    //   time: number (Date.now()),
    //   likes: number,
    //   retweets: number,
    //   image: string (base64) | null,
    //   replies: array of same structure
    // }

    // =======================
    //       ユーティリティ
    // =======================
    function escapeHtml(str) {
      return str
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#39;");
    }

    // ハッシュタグ/メンションのリンク化
    function linkify(text) {
      let escaped = escapeHtml(text);
      escaped = escaped.replace(/#(\w+)/g, `<a href="#" class="hashtag">#$1</a>`);
      escaped = escaped.replace(/@(\w+)/g, `<a href="#" class="mention">@$1</a>`);
      return escaped;
    }

    // ツイートをLocalStorageに保存
    function updateLocalStorage() {
      localStorage.setItem('tweets-advanced', JSON.stringify(tweets));
    }

    // 親ツイートまたはリプライ先を検索するための再帰関数
    function findTweetById(tweetArray, tweetId) {
      for (const tw of tweetArray) {
        if (tw.id === tweetId) {
          return tw;
        }
        const childFound = findTweetById(tw.replies, tweetId);
        if (childFound) {
          return childFound;
        }
      }
      return null;
    }

    // 新しいツイートを作成 & tweets配列に登録
    // parentIdが指定されたら、そのツイートのrepliesに追加する
    function createNewTweet(content, parentId = null, imageBase64 = null) {
      const newTweet = {
        id: 'tw-' + Date.now() + '-' + Math.floor(Math.random() * 10000),
        name: currentName,
        userName: currentUserName,
        content: content,
        time: Date.now(),
        likes: 0,
        retweets: 0,
        image: imageBase64,
        replies: []
      };
      if (parentId) {
        const parentTweet = findTweetById(tweets, parentId);
        if (parentTweet) {
          parentTweet.replies.unshift(newTweet);
        }
      } else {
        tweets.unshift(newTweet);
      }
      updateLocalStorage();
      renderTweets();
    }

    // =======================
    //      ツイート描画
    // =======================

    // ツイート1件を生成するDOM要素を返す（返信分も含め再帰的に生成）
    // depth: スレッドの深さに応じて左マージンなどを調整したいときに利用
    function createTweetElement(tweet, depth = 0) {
      const tweetDiv = document.createElement('div');
      tweetDiv.classList.add('tweet');
      if (depth >= 1) {
        // 2段目以降のリプライならclassで左にずらす
        tweetDiv.classList.add('nested-reply');
      }

      // 日付文字列
      const timeString = new Date(tweet.time).toLocaleString('ja-JP', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });

      // 本文のリンク化
      const contentHtml = linkify(tweet.content);

      // 画像がある場合
      const imageHtml = tweet.image
        ? `<img src="${tweet.image}" alt="Attached Image" class="attached-image" />`
        : '';

      // 自分のツイートなら削除ボタンを表示
      const isMyTweet = (tweet.name === currentName && tweet.userName === currentUserName);
      const deleteBtnHtml = isMyTweet
        ? `<button class="delete-btn">削除</button>`
        : '';

      tweetDiv.innerHTML = `
        <div class="tweet-header">
          <img src="https://via.placeholder.com/40" alt="User Icon" class="user-icon" />
          <span class="name">${escapeHtml(tweet.name)}</span>
          <span class="username">@${escapeHtml(tweet.userName)}</span>
          <span class="tweet-time">- ${timeString}</span>
        </div>
        <div class="tweet-content">
          ${contentHtml}
          ${imageHtml}
        </div>
        <div class="tweet-footer">
          <button class="like-btn">
            <span>いいね</span>
            <span class="like-count">${tweet.likes}</span>
          </button>
          <button class="retweet-btn">
            <span>リツイート</span>
            <span class="retweet-count">${tweet.retweets}</span>
          </button>
          <button class="reply-btn">返信</button>
          ${deleteBtnHtml}
        </div>
      `;

      // ---------- 返信フォーム & スレッド表示 ----------
      // 返信コンテナ(折りたたみ対象)
      const repliesContainer = document.createElement('div');
      repliesContainer.classList.add('replies-container');

      // 返信がある場合、表示/非表示を切り替えるボタンを設置
      if (tweet.replies && tweet.replies.length > 0) {
        const toggleRepliesBtn = document.createElement('button');
        toggleRepliesBtn.classList.add('toggle-replies-btn');
        toggleRepliesBtn.textContent = `返信を表示 (${tweet.replies.length})`;
        tweetDiv.appendChild(toggleRepliesBtn);

        // 折りたたみ状態管理
        let isRepliesOpen = false;
        toggleRepliesBtn.addEventListener('click', () => {
          isRepliesOpen = !isRepliesOpen;
          toggleRepliesBtn.textContent = isRepliesOpen
            ? `返信を非表示`
            : `返信を表示 (${tweet.replies.length})`;
          repliesContainer.style.display = isRepliesOpen ? 'block' : 'none';
        });
      }

      // 返信フォーム
      const replyForm = document.createElement('div');
      replyForm.style.marginTop = '5px';
      replyForm.innerHTML = `
        <textarea rows="2" placeholder="返信を入力..." style="width: 100%; font-size:14px;"></textarea>
        <button class="reply-submit-btn" style="margin-top:5px;">返信を投稿</button>
      `;
      replyForm.style.display = 'none'; // デフォルトは非表示
      tweetDiv.appendChild(replyForm);

      // スレッド（返信）の再帰描画
      tweet.replies.forEach(replyTweet => {
        const replyEl = createTweetElement(replyTweet, depth + 1);
        repliesContainer.appendChild(replyEl);
      });
      repliesContainer.style.display = 'none'; // 最初は折りたたみ
      tweetDiv.appendChild(repliesContainer);

      // ========== 各種ボタンイベント ==========
      // いいね
      const likeBtn = tweetDiv.querySelector('.like-btn');
      const likeCountEl = tweetDiv.querySelector('.like-count');
      likeBtn.addEventListener('click', () => {
        tweet.likes++;
        updateLocalStorage();
        likeCountEl.textContent = tweet.likes;
      });

      // リツイート
      const retweetBtn = tweetDiv.querySelector('.retweet-btn');
      const retweetCountEl = tweetDiv.querySelector('.retweet-count');
      retweetBtn.addEventListener('click', () => {
        tweet.retweets++;
        updateLocalStorage();
        retweetCountEl.textContent = tweet.retweets;
      });

      // 返信ボタン -> フォーム表示/非表示
      const replyBtn = tweetDiv.querySelector('.reply-btn');
      replyBtn.addEventListener('click', () => {
        replyForm.style.display = (replyForm.style.display === 'none') ? 'block' : 'none';
      });

      // 返信投稿
      const replySubmitBtn = replyForm.querySelector('.reply-submit-btn');
      const replyTextarea = replyForm.querySelector('textarea');
      replySubmitBtn.addEventListener('click', () => {
        const replyText = replyTextarea.value.trim();
        if (replyText === '' || replyText.length > TWEET_MAX_LENGTH) {
          return;
        }
        // 新規リプライ作成
        createNewTweet(replyText, tweet.id);
        replyTextarea.value = '';
      });

      // 削除
      if (isMyTweet) {
        const deleteBtn = tweetDiv.querySelector('.delete-btn');
        deleteBtn.addEventListener('click', () => {
          // 再帰的に探して削除
          removeTweetById(tweets, tweet.id);
          updateLocalStorage();
          renderTweets();
        });
      }

      return tweetDiv;
    }

    // ツイート削除（再帰）
    function removeTweetById(tweetArray, tweetId) {
      for (let i = 0; i < tweetArray.length; i++) {
        if (tweetArray[i].id === tweetId) {
          tweetArray.splice(i, 1);
          return true;
        }
        if (removeTweetById(tweetArray[i].replies, tweetId)) {
          return true;
        }
      }
      return false;
    }

    // 画面上のツイート一覧を再描画
    function renderTweets() {
      // まず既存ツイートを全削除
      const oldTweets = feedContainer.querySelectorAll('.tweet');
      oldTweets.forEach(t => t.remove());

      // 上から順にツイートを追加
      tweets.forEach(tweet => {
        const tweetEl = createTweetElement(tweet);
        feedContainer.appendChild(tweetEl);
      });
    }

    // ======================
    //   イベントリスナー
    // ======================
    window.addEventListener('DOMContentLoaded', () => {
      renderTweets();
      updateCharCount();
    });

    // ツイート文字数カウント
    tweetTextarea.addEventListener('input', updateCharCount);

    function updateCharCount() {
      const length = tweetTextarea.value.length;
      charCountEl.textContent = `${length} / ${TWEET_MAX_LENGTH}`;

      if (length > TWEET_MAX_LENGTH) {
        errorEl.textContent = '文字数オーバーです！';
        tweetButton.disabled = true;
      } else {
        errorEl.textContent = '';
        tweetButton.disabled = false;
      }
    }

    // ツイート投稿
    tweetButton.addEventListener('click', () => {
      const text = tweetTextarea.value.trim();
      if (text === '' || text.length > TWEET_MAX_LENGTH) {
        return;
      }
      createNewTweet(text, null, attachedImageBase64);
      tweetTextarea.value = '';
      attachedImageBase64 = null;
      attachInput.value = ''; // ファイル選択をクリア
      updateCharCount();
    });

    // プロフィール情報の保存
    saveProfileBtn.addEventListener('click', () => {
      currentName = displayNameInput.value.trim() || 'あなた';
      currentUserName = userNameInput.value.trim() || 'myAccount';

      userProfile = {
        displayName: currentName,
        userName: currentUserName
      };
      localStorage.setItem('userProfile-advanced', JSON.stringify(userProfile));

      alert('プロフィールを保存しました！\n' +
            `名前：${currentName}\nユーザー名：@${currentUserName}`);
      renderTweets(); // 表示名を変えて再描画
    });
  </script>
</body>
</html>

出会い系サイト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>出会い広場 - マッチング</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background: #f2f2f2;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #ff4d6d;
      color: white;
      padding: 20px;
      text-align: center;
      font-size: 24px;
    }
    .container {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    label {
      display: block;
      margin-top: 10px;
    }
    input, textarea, select {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }
    button {
      margin-top: 15px;
      background: #ff4d6d;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
    .user-card {
      background: #fff0f3;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
    }
    .user-card img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 15px;
      object-fit: cover;
    }
    @media (max-width: 600px) {
      .user-card {
        flex-direction: column;
        align-items: flex-start;
      }
      .user-card img {
        margin-bottom: 10px;
      }
    }
  </style>
</head>
<body>

<header>出会い広場</header>

<div class="container">
  <h2>プロフィール登録</h2>
  <form id="profileForm">
    <label>ニックネーム</label>
    <input type="text" id="nickname" required>

    <label>プロフィール画像URL</label>
    <input type="url" id="avatar" placeholder="https://example.com/avatar.jpg">

    <label>年齢</label>
    <input type="number" id="age" required>

    <label>性別</label>
    <select id="gender">
      <option value="男性">男性</option>
      <option value="女性">女性</option>
      <option value="その他">その他</option>
    </select>

    <label>自己紹介</label>
    <textarea id="bio" rows="3" required></textarea>

    <button type="submit">登録する</button>
  </form>
</div>

<div class="container">
  <h2>ユーザー一覧</h2>

  <label>性別で絞り込む:</label>
  <select id="filterGender">
    <option value="すべて">すべて</option>
    <option value="男性">男性</option>
    <option value="女性">女性</option>
    <option value="その他">その他</option>
  </select>

  <div id="userList" style="margin-top:20px;"></div>
</div>

<script>
  const form = document.getElementById('profileForm');
  const userList = document.getElementById('userList');
  const filterGender = document.getElementById('filterGender');
  let users = [];

  form.addEventListener('submit', function(e) {
    e.preventDefault();

    const user = {
      nickname: document.getElementById('nickname').value,
      age: document.getElementById('age').value,
      gender: document.getElementById('gender').value,
      bio: document.getElementById('bio').value,
      avatar: document.getElementById('avatar').value || 'https://via.placeholder.com/80'
    };

    users.push(user);
    form.reset();
    renderUsers();
  });

  filterGender.addEventListener('change', renderUsers);

  function renderUsers() {
    const filter = filterGender.value;
    userList.innerHTML = '';

    users
      .filter(user => filter === 'すべて' || user.gender === filter)
      .forEach(user => {
        const card = document.createElement('div');
        card.className = 'user-card';
        card.innerHTML = `
          <img src="${user.avatar}" alt="avatar">
          <div>
            <strong>${user.nickname}</strong>（${user.age}歳・${user.gender}）<br>
            <p>${user.bio}</p>
          </div>
        `;
        userList.appendChild(card);
      });
  }
</script>

</body>
</html>

SNS

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>究極SNS</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background-color: #f0f2f5;
            color: #1c1e21;
            line-height: 1.5;
            transition: background-color 0.3s, color 0.3s;
        }
        body.dark-mode {
            background-color: #18191a;
            color: #e4e6eb;
        }
        .header {
            background-color: #1877f2;
            color: white;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .header input {
            padding: 10px 15px;
            border: none;
            border-radius: 25px;
            width: 350px;
            font-size: 14px;
            background-color: #ffffff;
        }
        .nav {
            display: flex;
            align-items: center;
        }
        .nav a, .nav button {
            color: white;
            margin-left: 25px;
            text-decoration: none;
            font-weight: 500;
            background: none;
            border: none;
            cursor: pointer;
            position: relative;
        }
        .nav a:hover::after, .nav button:hover::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 2px;
            background-color: white;
            bottom: -5px;
            left: 25%;
        }
        .container {
            display: flex;
            max-width: 1400px;
            margin: 20px auto;
            gap: 25px;
        }
        .sidebar-left {
            width: 25%;
            padding: 15px;
            position: sticky;
            top: 70px;
            height: fit-content;
        }
        .sidebar-card {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        body.dark-mode .sidebar-card {
            background-color: #242526;
        }
        .profile-pic {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #ddd;
            margin: 0 auto 15px;
        }
        .badge {
            display: inline-block;
            background-color: #1877f2;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 5px;
        }
        .sidebar-left a {
            display: block;
            color: #1877f2;
            text-decoration: none;
            margin: 12px 0;
            font-size: 15px;
        }
        .main-content {
            width: 50%;
        }
        .sidebar-right {
            width: 25%;
            padding: 15px;
            position: sticky;
            top: 70px;
            height: fit-content;
        }
        .post-box {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            margin-bottom: 25px;
        }
        body.dark-mode .post-box {
            background-color: #242526;
        }
        .post-input {
            width: 100%;
            padding: 12px 15px;
            border: none;
            border-radius: 25px;
            background-color: #f0f2f5;
            resize: none;
            font-size: 16px;
            outline: none;
        }
        body.dark-mode .post-input {
            background-color: #3a3b3c;
            color: #e4e6eb;
        }
        .post-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .post-actions button {
            background-color: #e4e6eb;
            color: #050505;
            border: none;
            padding: 8px 15px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        body.dark-mode .post-actions button {
            background-color: #3a3b3c;
            color: #e4e6eb;
        }
        .post-actions button:hover {
            background-color: #d8dade;
        }
        body.dark-mode .post-actions button:hover {
            background-color: #4a4b4c;
        }
        .post-actions .submit-btn {
            background-color: #1877f2;
            color: white;
        }
        .post {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            position: relative;
        }
        body.dark-mode .post {
            background-color: #242526;
        }
        .post-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .post-header .profile-pic {
            width: 40px;
            height: 40px;
            margin-right: 12px;
        }
        .post-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }
        .post-header small {
            color: #65676b;
            font-size: 12px;
        }
        body.dark-mode .post-header small {
            color: #b0b3b8;
        }
        .post-options {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            color: #65676b;
        }
        .post-options:hover .options-menu {
            display: block;
        }
        .options-menu {
            display: none;
            position: absolute;
            top: 20px;
            right: 0;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 10px;
            z-index: 10;
        }
        body.dark-mode .options-menu {
            background-color: #3a3b3c;
        }
        .options-menu a {
            display: block;
            color: #050505;
            text-decoration: none;
            padding: 5px 10px;
        }
        body.dark-mode .options-menu a {
            color: #e4e6eb;
        }
        .post-image {
            width: 100%;
            height: 300px;
            background-color: #ddd;
            border-radius: 8px;
            margin: 15px 0;
        }
        .reactions {
            position: relative;
            display: inline-block;
        }
        .reactions:hover .reaction-menu {
            display: flex;
        }
        .reaction-menu {
            display: none;
            position: absolute;
            top: -45px;
            left: 0;
            background-color: white;
            padding: 8px;
            border-radius: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            gap: 8px;
            z-index: 10;
        }
        body.dark-mode .reaction-menu {
            background-color: #3a3b3c;
        }
        .reaction {
            font-size: 22px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .reaction:hover {
            transform: scale(1.2);
        }
        .reaction-stats {
            margin-top: 5px;
            font-size: 14px;
            color: #65676b;
        }
        body.dark-mode .reaction-stats {
            color: #b0b3b8;
        }
        .post-actions-bar {
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            border-top: 1px solid #e4e6eb;
            border-bottom: 1px solid #e4e6eb;
            color: #65676b;
            font-size: 14px;
        }
        body.dark-mode .post-actions-bar {
            border-color: #3a3b3c;
            color: #b0b3b8;
        }
        .post-actions-bar span {
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 5px;
        }
        .post-actions-bar span:hover {
            background-color: #f2f3f5;
        }
        body.dark-mode .post-actions-bar span:hover {
            background-color: #3a3b3c;
        }
        .comment-section {
            margin-top: 15px;
        }
        .comment {
            display: flex;
            align-items: flex-start;
            margin-top: 12px;
        }
        .comment .profile-pic {
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }
        .comment-text {
            background-color: #f2f3f5;
            padding: 8px 12px;
            border-radius: 18px;
            font-size: 14px;
        }
        body.dark-mode .comment-text {
            background-color: #3a3b3c;
            color: #e4e6eb;
        }
        .comment-input {
            width: 100%;
            padding: 10px 15px;
            border: none;
            border-radius: 25px;
            background-color: #f0f2f5;
            font-size: 14px;
            margin-top: 10px;
        }
        body.dark-mode .comment-input {
            background-color: #3a3b3c;
            color: #e4e6eb;
        }
        .chat-window {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }
        body.dark-mode .chat-window {
            background-color: #242526;
        }
        .chat-message {
            margin: 10px 0;
        }
        .chat-message.sent .comment-text {
            background-color: #1877f2;
            color: white;
            margin-left: auto;
        }
        .notification-popup {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 200;
        }
        body.dark-mode .notification-popup {
            background-color: #242526;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
            z-index: 200;
        }
        .modal-content {
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        body.dark-mode .modal-content {
            background-color: #242526;
        }
        .footer {
            background-color: white;
            padding: 20px;
            text-align: center;
            color: #65676b;
            border-top: 1px solid #e4e6eb;
            font-size: 13px;
        }
        body.dark-mode .footer {
            background-color: #18191a;
            color: #b0b3b8;
            border-color: #3a3b3c;
        }
        .footer a {
            color: #65676b;
            text-decoration: none;
            margin: 0 10px;
        }
        body.dark-mode .footer a {
            color: #b0b3b8;
        }
        .mobile-menu {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
            width: 100%;
            background-color: #1877f2;
            padding: 15px;
            z-index: 99;
        }
        .mobile-menu a {
            color: white;
            display: block;
            margin: 10px 0;
            text-decoration: none;
        }
        @media (max-width: 900px) {
            .container {
                flex-direction: column;
                margin: 10px;
            }
            .sidebar-left, .main-content, .sidebar-right {
                width: 100%;
                position: static;
            }
            .header input {
                width: 150px;
            }
            .nav {
                display: none;
            }
            .mobile-menu {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- ヘッダー -->
    <div class="header">
        <h1>究極SNS</h1>
        <input type="text" placeholder="友達、投稿、グループを検索">
        <div class="nav">
            <a href="#">ホーム</a>
            <a href="#">友達</a>
            <a href="#">メッセージ</a>
            <a href="#">通知</a>
            <a href="#">プロフィール</a>
            <button onclick="document.body.classList.toggle('dark-mode')">ダークモード</button>
        </div>
    </div>
    <div class="mobile-menu">
        <a href="#">ホーム</a>
        <a href="#">友達</a>
        <a href="#">メッセージ</a>
        <a href="#">通知</a>
        <a href="#">プロフィール</a>
        <a href="#" onclick="document.body.classList.toggle('dark-mode')">ダークモード</a>
    </div>

    <!-- メインコンテンツ -->
    <div class="container">
        <!-- 左サイドバー -->
        <div class="sidebar-left">
            <div class="sidebar-card">
                <div class="profile-pic"></div>
                <h3>ユーザー名 <span class="badge">認証済み</span></h3>
                <a href="#">プロフィールを見る</a>
                <a href="#">友達 (128)</a>
                <a href="#">フォロワー (350)</a>
            </div>
            <div class="sidebar-card">
                <h4>メニュー</h4>
                <a href="#">グループ</a>
                <a href="#">イベント</a>
                <a href="#">マーケットプレイス</a>
                <a href="#">設定</a>
            </div>
        </div>

        <!-- 中央（投稿エリア） -->
        <div class="main-content">
            <!-- 投稿入力エリア -->
            <div class="post-box">
                <textarea class="post-input" rows="3" placeholder="何を思ってる？"></textarea>
                <div class="post-actions">
                    <button>写真/動画</button>
                    <button>タグ友達</button>
                    <button>ライブ配信</button>
                    <button>イベント作成</button>
                    <button class="submit-btn" onclick="document.getElementById('postModal').style.display='flex'">投稿</button>
                </div>
            </div>

            <!-- 投稿1 -->
            <div class="post">
                <div class="post-header">
                    <div class="profile-pic"></div>
                    <div>
                        <h3>山田太郎 <span class="badge">管理者</span></h3>
                        <small>2025年3月29日 10:30 ・ 公開</small>
                    </div>
                    <div class="post-options">⋯
                        <div class="options-menu">
                            <a href="#">編集</a>
                            <a href="#">削除</a>
                            <a href="#">非表示</a>
                        </div>
                    </div>
                </div>
                <p>新しいプロジェクトの進捗報告！チームで頑張ってます。</p>
                <div class="post-image"></div>
                <div class="reactions">
                    <div class="reaction-stats"> 12  5  3  2</div>
                    <div class="reaction-menu">
                        <span class="reaction"></span>
                        <span class="reaction"></span>
                        <span class="reaction"></span>
                        <span class="reaction">Grav</span>
                        <span class="reaction"></span>
                    </div>
                </div>
                <div class="post-actions-bar">
                    <span>リアクション</span>
                    <span>コメント</span>
                    <span>シェア</span>
                </div>
                <div class="comment-section">
                    <div class="comment">
                        <div class="profile-pic"></div>
                        <div class="comment-text"><strong>佐藤花子</strong>: すごい進捗だね！</div>
                    </div>
                    <div class="comment">
                        <div class="profile-pic"></div>
                        <div class="comment-text"><strong>鈴木次郎</strong>: お疲れ様！</div>
                    </div>
                    <input type="text" class="comment-input" placeholder="コメントを入力...">
                </div>
            </div>

            <!-- 投稿2 -->
            <div class="post">
                <div class="post-header">
                    <div class="profile-pic"></div>
                    <div>
                        <h3>田中優子</h3>
                        <small>2025年3月29日 09:15 ・ 友達のみ</small>
                    </div>
                    <div class="post-options">⋯
                        <div class="options-menu">
                            <a href="#">編集</a>
                            <a href="#">削除</a>
                            <a href="#">非表示</a>
                        </div>
                    </div>
                </div>
                <p>週末の温泉旅行が楽しみすぎる！</p>
                <div class="reactions">
                    <div class="reaction-stats"> 8  6  1</div>
                    <div class="reaction-menu">
                        <span class="reaction"></span>
                        <span class="reaction"></span>
                        <span class="reaction"></span>
                        <span class="reaction"></span>
                        <span class="reaction"></span>
                    </div>
                </div>
                <div class="post-actions-bar">
                    <span>リアクション</span>
                    <span>コメント</span>
                    <span>シェア</span>
                </div>
            </div>
        </div>

        <!-- 右サイドバー -->
        <div class="sidebar-right">
            <div class="sidebar-card">
                <h4>友達リスト</h4>
                <p><strong>佐藤花子</strong> - オンライン</p>
                <p><strong>鈴木次郎</strong> - 5分前</p>
                <p><strong>高橋健太</strong> - オフライン</p>
            </div>
            <div class="sidebar-card">
                <h4>グループ</h4>
                <p><a href="#">プロジェクトチーム</a> - 15人</p>
                <p><a href="#">温泉旅行クラブ</a> - 32人</p>
            </div>
            <div class="chat-window">
                <h4>チャット - 佐藤花子</h4>
                <div class="chat-message">
                    <div class="comment-text">おはよう！週末の予定は？</div>
                </div>
                <div class="chat-message sent">
                    <div class="comment-text">おはよう！温泉行くよ！</div>
                </div>
                <input type="text" class="comment-input" placeholder="メッセージを入力...">
            </div>
        </div>
    </div>

    <!-- 投稿モーダル -->
    <div id="postModal" class="modal">
        <div class="modal-content">
            <h3>投稿を作成</h3>
            <textarea rows="6" placeholder="詳細を書いてね" style="width: 100%; padding: 10px;"></textarea>
            <div style="margin: 15px 0;">
                <label>公開範囲: </label>
                <select style="padding: 5px;">
                    <option>公開</option>
                    <option>友達のみ</option>
                    <option>自分のみ</option>
                </select>
            </div>
            <div class="post-actions">
                <button onclick="document.getElementById('postModal').style.display='none'">キャンセル</button>
                <button class="submit-btn">投稿</button>
            </div>
        </div>
    </div>

    <!-- 通知ポップアップ -->
    <div class="notification-popup">
        <p><strong>佐藤花子</strong>があなたの投稿にリアクションしました。</p>
    </div>

    <!-- フッター -->
    <div class="footer">
        <p>© 2025 究極SNS. All rights reserved.</p>
        <p><a href="#">プライバシー</a> | <a href="#">利用規約</a> | <a href="#">サポート</a> | <a href="#">言語</a></p>
    </div>

    <script>
        // 簡易的な通知ポップアップの表示制御（サンプル）
        setTimeout(() => {
            document.querySelector('.notification-popup').style.display = 'block';
            setTimeout(() => {
                document.querySelector('.notification-popup').style.display = 'none';
            }, 3000);
        }, 2000);
    </script>
</body>
</html>

QuestifyInfinity.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Questify Advanced Battle</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- レトロゲーム風フォント -->
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

  <style>
    /* ========== 全体 ========== */
    body {
      background-color: #1a1a1a;
      color: #fff;
      font-family: 'Press Start 2P', cursive;
      margin: 0; padding: 0;
    }
    header, footer {
      background: #333; text-align: center; padding: 15px; border-bottom: 2px solid #555;
    }
    header h1 { font-size: 1.3rem; margin: 0; }
    main { max-width: 1200px; margin: 10px auto; padding-bottom: 80px; }

    .box {
      background: #2b2b2b; margin-bottom: 20px;
      border: 2px solid #555; padding: 20px; position: relative;
    }
    .section-title { font-size: 1.2rem; margin-bottom: 10px; }
    button {
      font-family: 'Press Start 2P', cursive;
      border: none; cursor: pointer; padding: 6px 10px; margin-right: 5px;
    }
    button:hover { opacity: 0.8; }
    .btn-primary { background: #006699; color: #fff; }
    .btn-delete { background: #bb3333; color: #fff; }

    /* ステータス表示 */
    .hero-info p { margin: 5px 0; }
    .xp-bar {
      background: #555; width: 100%; height: 20px; margin: 5px 0;
      position: relative; overflow: hidden;
    }
    .xp-fill {
      background: #00aa00; width: 0%; height: 100%;
      transition: width 0.3s ease;
    }

    /* パーティ */
    .party-member {
      background: #333; border: 2px solid #555;
      padding: 10px; margin-bottom: 10px;
    }

    /* スキルツリー */
    .skill-tree .skill {
      background: #333; border: 2px solid #555;
      padding: 10px; margin-bottom: 10px;
    }

    /* 装備・素材 */
    .equipment-info p { margin: 3px 0; }
    .craft-recipe {
      border: 1px dashed #999;
      margin-bottom: 10px; padding: 5px;
    }

    /* クエスト */
    .quest-list .quest {
      background: #333; border: 2px solid #555;
      padding: 10px; margin-bottom: 10px;
    }

    /* 実績 */
    .achievements .achievement {
      background: #333; border: 2px solid #555;
      padding: 10px; margin-bottom: 10px; position: relative;
    }
    .achievement.locked { opacity: 0.5; }
    .locked-label {
      position: absolute; top: 5px; right: 5px;
      background: #cc0000; padding: 3px 5px; font-size: 0.7rem;
    }

    /* バトルモーダル */
    .modal-bg {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.8);
      display: none; justify-content: center; align-items: center;
    }
    .modal {
      background: #2b2b2b; border: 2px solid #555;
      padding: 20px; max-width: 600px; width: 90%;
      position: relative;
    }
    .close-btn {
      position: absolute; top: 10px; right: 10px;
      background: #dd3333; color: #fff; padding: 5px 8px; border: none;
    }
    .battle-enemy-info, .battle-hero-info {
      margin-bottom: 10px;
    }
    #battleLog {
      border: 1px solid #555;
      min-height: 60px; padding: 5px;
      margin: 10px 0; max-height: 200px; overflow-y: auto;
    }
    .battle-action-buttons { margin-top: 10px; }
    .battle-action-buttons button { margin: 5px 5px 0 0; }
  </style>
</head>

<body>
<header>
  <h1>Questify Advanced Battle</h1>
</header>

<main>

  <!-- ===================== ヒーロー & パーティステータス ===================== -->
  <section class="box">
    <h2 class="section-title">冒険者ステータス</h2>
    <div class="hero-info">
      <p>勇者: <span id="heroNameDisplay">No Name</span></p>
      <p>職業: <span id="heroJobDisplay">未設定</span></p>
      <p>
        Lv.<span id="heroLevel">1</span>
        HP:<span id="heroHp">?</span>/<span id="heroMaxHp">?</span>
      </p>
      <div class="xp-bar">
        <div class="xp-fill" id="xpFill"></div>
      </div>
      <p>EXP: <span id="heroXp">0</span> / <span id="xpToNextLevel">100</span></p>
      <p>Gold: <span id="heroGold">0</span></p>
      <p>Skill Pts: <span id="heroSkillPts">0</span></p>
      <label>勇者名: <input type="text" id="heroNameInput" placeholder="アルス" /></label>
      <button onclick="changeHeroName()">変更</button>
    </div>
  </section>

  <section class="box">
    <h2 class="section-title">パーティメンバー</h2>
    <div id="partyList"></div>
    <button class="btn-primary" onclick="addPartyMember()">仲間を雇う (最大2人)</button>
  </section>

  <!-- ===================== スキルツリー ===================== -->
  <section class="box">
    <h2 class="section-title">職業 & スキルツリー</h2>
    <p>
      <button onclick="setJob('戦士')">戦士</button>
      <button onclick="setJob('魔法使い')">魔法使い</button>
      <button onclick="setJob('盗賊')">盗賊</button>
    </p>
    <div class="skill-tree" id="skillTree"></div>
  </section>

  <!-- ===================== 装備 & クラフト ===================== -->
  <section class="box">
    <h2 class="section-title">装備 & クラフト</h2>
    <div class="equipment-info" id="heroEquipment"></div>

    <h3>クラフトレシピ</h3>
    <div id="craftContainer"></div>
  </section>

  <!-- ===================== クエスト (デイリー/通常/ウィークリー) ===================== -->
  <section class="box">
    <h2 class="section-title">クエスト</h2>
    <div style="margin-bottom:10px;">
      <button class="btn-primary" onclick="switchQuestTab('daily')">デイリー</button>
      <button class="btn-primary" onclick="switchQuestTab('normal')">通常</button>
      <button class="btn-primary" onclick="switchQuestTab('weekly')">ウィークリー</button>
    </div>
    <div id="dailyQuests" class="quest-list"></div>
    <div id="normalQuests" class="quest-list" style="display:none;"></div>
    <div id="weeklyQuests" class="quest-list" style="display:none;"></div>
  </section>

  <!-- ===================== マップ & ボス戦 ===================== -->
  <section class="box">
    <h2 class="section-title">ワールドマップ</h2>
    <div id="mapAreaContainer"></div>
  </section>

  <!-- ===================== ランダムエンカウント ===================== -->
  <section class="box">
    <h2 class="section-title">ダンジョン潜入 (複数敵ランダムエンカウント)</h2>
    <p>ボタンを押すと **複数の敵** が出る場合も！</p>
    <button class="btn-primary" onclick="startRandomEncounter()">ダンジョンに潜る</button>
  </section>

  <!-- ===================== 実績 & ストーリー ===================== -->
  <section class="box achievements">
    <h2 class="section-title">実績(Achievements)</h2>
    <div id="achievementList"></div>
  </section>

  <section class="box">
    <h2 class="section-title">ストーリー進行</h2>
    <div id="storyProgress"></div>
  </section>

</main>

<footer>
  <p>© 2025 Questify Advanced Battle</p>
</footer>

<!-- ========== 個別ターン制バトルモーダル ========== -->
<div class="modal-bg" id="battleModalBg">
  <div class="modal" id="battleModal">
    <button class="close-btn" onclick="closeBattleModal()">×</button>
    <h2 id="battleTitle">バトル</h2>
    <p id="battleDesc"></p>

    <!-- 敵一覧表示 -->
    <div class="battle-enemy-info" id="battleEnemyInfo"></div>
    <!-- 味方一覧表示 -->
    <div class="battle-hero-info" id="battleHeroInfo"></div>

    <!-- 行動ログ -->
    <div id="battleLog"></div>

    <!-- プレイヤー操作ボタン (アクション選択) -->
    <div class="battle-action-buttons" id="battleActionButtons">
      <button onclick="chooseAttack()">攻撃</button>
      <button onclick="chooseSkill()">スキル</button>
      <button onclick="chooseItem()">アイテム</button>
      <button onclick="chooseDefend()">防御</button>
      <button onclick="chooseFlee()">逃げる</button>
    </div>
  </div>
</div>

<script>
/* =========================================
   1) データ構造 & ローカルストレージ
========================================= */
const STORAGE_KEY = "questify_battle_data";

let gameData = {
  hero: {
    name: "No Name",
    job: "未設定",
    level: 1,
    xp: 0,
    gold: 0,
    skillPts: 0,
    hp: 50,
    maxHp: 50,
    speed: 8,  // 追加: 素早さ
    equipment: { weapon: null, armor: null, accessory: null },
    materials: { wood: 0, ore: 0, magicCrystal: 0 },
    consumables: { potion: 2 },
    // アクティブスキル(例): 攻撃スキル
    activeSkills: [
      { id: "slash", name: "パワースラッシュ", baseDamage: 15 },
      // ここに追加スキルを増やす
    ]
  },
  party: [
    // 仲間も speed を持つ、activeSkills を持つなど拡張可能
    // { id, name, level, xp, hp, maxHp, speed, attack, equipment, activeSkills, ... }
  ],
  // 職業ごとのパッシブスキル
  skills: {
    warrior: [
      { id: 1, name: "剣術熟練", level: 0, maxLevel: 5, desc: "攻撃力+2/Lv" },
      { id: 2, name: "体力増強", level: 0, maxLevel: 5, desc: "HP+10/Lv" }
    ],
    mage: [
      { id: 1, name: "魔力増強", level: 0, maxLevel: 5, desc: "魔法攻撃力+3/Lv" },
      { id: 2, name: "精神集中", level: 0, maxLevel: 5, desc: "ボス戦追加ダメージ+5/Lv" }
    ],
    thief: [
      { id: 1, name: "素早さ強化", level: 0, maxLevel: 5, desc: "攻撃力+2/Lv" },
      { id: 2, name: "ゴールド盗み", level: 0, maxLevel: 5, desc: "討伐時Gold+5/Lv" }
    ]
  },
  // クラフトレシピ & クエスト & マップ & 実績 等は前回コードと同じ
  // …（省略なし、全て記載）…
  craftingRecipes: [
    {
      id: 1,
      result: { name: "回復薬", type: "consumable", itemKey: "potion", amount: 1, hpRestore: 30 },
      materialsRequired: { wood: 1, magicCrystal: 1 },
      desc: "木材1 & 魔力結晶1 で回復薬を1つ生成"
    }
  ],
  dailyQuests: [
    { id: 1, title: "【デイリー】部屋掃除", exp: 10, gold: 5, completed: false },
    { id: 2, title: "【デイリー】筋トレ15分", exp: 15, gold: 5, completed: false }
  ],
  normalQuests: [
    { id: 1, title: "HTML/CSSの学習", exp: 20, gold: 10, completed: false },
    { id: 2, title: "ランニング30分", exp: 25, gold: 10, completed: false }
  ],
  weeklyQuests: [
    { id: 1, title: "【ウィークリー】5日連続早起き", exp: 50, gold: 30, completed: false },
    { id: 2, title: "【ウィークリー】合計5時間の学習", exp: 60, gold: 40, completed: false }
  ],
  mapAreas: [
    { id: 1, name: "街", levelReq: 1, desc: "安全な街", boss: null },
    { id: 2, name: "森", levelReq: 3, desc: "木材が手に入るかも", boss: { name: "森の主", hp: 60, maxHp: 60, speed: 6, atk: 12, rewardExp: 50, rewardGold: 30 } },
    { id: 3, name: "洞窟", levelReq: 5, desc: "鉱石が眠る", boss: { name: "ゴーレム", hp: 100, maxHp: 100, speed: 4, atk: 20, rewardExp: 100, rewardGold: 80 } },
    { id: 4, name: "魔王城", levelReq: 10, desc: "魔王が支配する城", boss: { name: "魔王", hp: 200, maxHp: 200, speed: 10, atk: 35, rewardExp: 300, rewardGold: 200 } }
  ],
  achievements: [
    { id: 1, title: "初クエスト達成", desc: "クエストを1回完了", type: "questCount", target: 1, unlocked: false },
    { id: 2, title: "レベル10到達", desc: "Lv.10になる", type: "level", target: 10, unlocked: false },
    { id: 3, title: "森の主撃破", desc: "森の主を倒す", type: "bossKill", bossName: "森の主", unlocked: false },
    { id: 4, title: "魔王撃破", desc: "魔王を倒す", type: "bossKill", bossName: "魔王", unlocked: false },
    { id: 5, title: "金持ち", desc: "ゴールドが100を超える", type: "gold", target: 100, unlocked: false }
  ],
  story: [
    { bossName: "森の主", text: "森の主を倒し、森に平穏が戻った…！" },
    { bossName: "ゴーレム", text: "洞窟のゴーレムを粉砕し、鉱山への道が開けた。" },
    { bossName: "魔王", text: "魔王を倒し、世界に平和が訪れた。あなたは真の勇者！" }
  ],
  enemies: [
    { name: "森の狼", hp: 30, maxHp: 30, speed: 7, atk: 8, exp: 15, gold: 5, dropMat: { wood: 1 } },
    { name: "洞窟コウモリ", hp: 35, maxHp: 35, speed: 9, atk: 10, exp: 20, gold: 8, dropMat: { ore: 1 } },
    { name: "ゴブリン", hp: 40, maxHp: 40, speed: 5, atk: 12, exp: 25, gold: 10, dropMat: { wood: 1, ore: 1 } }
  ],
  lastDailyReset: null,
  lastWeeklyReset: null
};

function loadData() {
  const saved = localStorage.getItem(STORAGE_KEY);
  if (saved) {
    gameData = JSON.parse(saved);
  }
}
function saveData() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(gameData));
}

/* =========================================
   2) 初期化処理
========================================= */
window.addEventListener("load", () => {
  loadData();
  dailyQuestResetCheck();
  weeklyQuestResetCheck();
  applySkillPassive();
  updateAllUI();
});

/* =========================================
   3) ユーティリティ & ステータス系
========================================= */
function xpNeededForLevel(level) {
  return level * 100;
}
function checkLevelUp() {
  while (gameData.hero.xp >= xpNeededForLevel(gameData.hero.level)) {
    gameData.hero.xp -= xpNeededForLevel(gameData.hero.level);
    gameData.hero.level++;
    gameData.hero.skillPts++;
    applySkillPassive();
    alert(`レベルアップ！Lv.${gameData.hero.level} になった。スキルポイント+1`);
  }
}
function gainExp(amount) {
  gameData.hero.xp += amount;
  checkLevelUp();
  saveData();
  updateHeroUI();
  checkAchievements();
}
function gainGold(amount) {
  gameData.hero.gold += amount;
  saveData();
  updateHeroUI();
  checkAchievements();
}
function updateHeroUI() {
  const h = gameData.hero;
  document.getElementById("heroNameDisplay").textContent = h.name;
  document.getElementById("heroJobDisplay").textContent = h.job;
  document.getElementById("heroLevel").textContent = h.level;
  document.getElementById("heroHp").textContent = h.hp;
  document.getElementById("heroMaxHp").textContent = h.maxHp;
  document.getElementById("heroXp").textContent = h.xp;
  document.getElementById("xpToNextLevel").textContent = xpNeededForLevel(h.level);
  document.getElementById("heroGold").textContent = h.gold;
  document.getElementById("heroSkillPts").textContent = h.skillPts;

  const ratio = (h.xp / xpNeededForLevel(h.level)) * 100;
  document.getElementById("xpFill").style.width = ratio + "%";

  updateHeroEquipmentUI();
}
function changeHeroName() {
  const input = document.getElementById("heroNameInput");
  const newName = input.value.trim();
  if (!newName) return;
  gameData.hero.name = newName;
  input.value = "";
  saveData();
  updateHeroUI();
}
function applySkillPassive() {
  const hero = gameData.hero;
  hero.maxHp = 50 + (hero.level - 1) * 5;
  let skillList = [];
  if (hero.job === "戦士") skillList = gameData.skills.warrior;
  if (hero.job === "魔法使い") skillList = gameData.skills.mage;
  if (hero.job === "盗賊") skillList = gameData.skills.thief;
  skillList.forEach(s => {
    if (s.name === "体力増強") {
      hero.maxHp += (s.level * 10);
    }
  });
  if (hero.hp > hero.maxHp) hero.hp = hero.maxHp;
}

/* =========================================
   4) パーティ管理
========================================= */
function addPartyMember() {
  if (gameData.party.length >= 2) {
    alert("仲間は最大2人までです。");
    return;
  }
  const newMem = {
    id: Date.now(),
    name: `仲間${gameData.party.length + 1}`,
    level: 1,
    xp: 0,
    hp: 40,
    maxHp: 40,
    speed: 5,
    attack: 5,
    equipment: { weapon: null, armor: null, accessory: null },
    activeSkills: [
      // 例: 仲間専用スキルを入れたければここに
    ]
  };
  gameData.party.push(newMem);
  alert(`${newMem.name} を雇いました！`);
  saveData();
  updateAllUI();
}

function updatePartyUI() {
  const container = document.getElementById("partyList");
  container.innerHTML = "";
  if (gameData.party.length === 0) {
    container.innerHTML = "<p>仲間はいません</p>";
    return;
  }
  gameData.party.forEach(m => {
    const div = document.createElement("div");
    div.className = "party-member";
    div.innerHTML = `<p>${m.name} (Lv.${m.level}) HP:${m.hp}/${m.maxHp} 攻:${m.attack}</p>`;
    const leaveBtn = document.createElement("button");
    leaveBtn.className = "btn-delete";
    leaveBtn.textContent = "離脱";
    leaveBtn.onclick = () => {
      if (confirm(`${m.name}を外しますか？`)) {
        gameData.party = gameData.party.filter(x => x.id !== m.id);
        saveData();
        updateAllUI();
      }
    };
    div.appendChild(leaveBtn);
    container.appendChild(div);
  });
}

function distributePartyExp(amount) {
  gameData.party.forEach(m => {
    m.xp += amount;
    while (m.xp >= m.level * 50) {
      m.xp -= m.level * 50;
      m.level++;
      m.attack += 2;
      m.maxHp += 5;
      m.hp += 5;
    }
  });
}

/* =========================================
   5) 職業 & スキルツリー
========================================= */
function setJob(job) {
  gameData.hero.job = job;
  alert(`職業を「${job}」に変更しました。`);
  saveData();
  applySkillPassive();
  updateAllUI();
}
function updateSkillTreeUI() {
  const container = document.getElementById("skillTree");
  container.innerHTML = "";
  const job = gameData.hero.job;
  if (job === "未設定") {
    container.innerHTML = "<p>職業を選択してください</p>";
    return;
  }
  let skillList = [];
  if (job === "戦士") skillList = gameData.skills.warrior;
  if (job === "魔法使い") skillList = gameData.skills.mage;
  if (job === "盗賊") skillList = gameData.skills.thief;

  skillList.forEach(s => {
    const skillDiv = document.createElement("div");
    skillDiv.className = "skill";
    skillDiv.innerHTML = `
      <h4>${s.name} (Lv.${s.level}/${s.maxLevel})</h4>
      <p>${s.desc}</p>
    `;
    const btn = document.createElement("button");
    btn.className = "btn-primary";
    if (s.level >= s.maxLevel) {
      btn.textContent = "MAX";
      btn.disabled = true;
    } else {
      btn.textContent = "強化";
      btn.onclick = () => {
        if (gameData.hero.skillPts <= 0) {
          alert("スキルポイントが足りません");
          return;
        }
        s.level++;
        gameData.hero.skillPts--;
        saveData();
        applySkillPassive();
        updateAllUI();
      };
    }
    skillDiv.appendChild(btn);
    container.appendChild(skillDiv);
  });
}

/* =========================================
   6) 装備 & クラフト(簡易化)
========================================= */
function updateHeroEquipmentUI() {
  const eqDiv = document.getElementById("heroEquipment");
  const h = gameData.hero;
  eqDiv.innerHTML = `
    <p>武器: ${h.equipment.weapon ? h.equipment.weapon.name : "なし"}</p>
    <p>防具: ${h.equipment.armor ? h.equipment.armor.name : "なし"}</p>
    <p>アクセ: ${h.equipment.accessory ? h.equipment.accessory.name : "なし"}</p>
    <p>素材: 木材(${h.materials.wood}), 鉱石(${h.materials.ore}), 結晶(${h.materials.magicCrystal})</p>
    <p>回復薬: ${h.consumables.potion || 0}個</p>
  `;
}
function updateCraftUI() {
  const cDiv = document.getElementById("craftContainer");
  cDiv.innerHTML = "";
  gameData.craftingRecipes.forEach(r => {
    const div = document.createElement("div");
    div.className = "craft-recipe";
    let matText = Object.keys(r.materialsRequired).map(m => {
      return `${m}:${r.materialsRequired[m]}`;
    }).join(", ");
    div.innerHTML = `
      <strong>${r.result.name}</strong> → 必要素材 ${matText}<br>
      ${r.desc}
    `;
    const btn = document.createElement("button");
    btn.textContent = "クラフト";
    btn.onclick = () => craftItem(r);
    div.appendChild(btn);
    cDiv.appendChild(div);
  });
}
function craftItem(recipe) {
  for (let mat in recipe.materialsRequired) {
    if ((gameData.hero.materials[mat] || 0) < recipe.materialsRequired[mat]) {
      alert("素材が足りません！");
      return;
    }
  }
  for (let mat in recipe.materialsRequired) {
    gameData.hero.materials[mat] -= recipe.materialsRequired[mat];
  }
  if (recipe.result.type === "consumable") {
    const key = recipe.result.itemKey;
    gameData.hero.consumables[key] = (gameData.hero.consumables[key] || 0) + recipe.result.amount;
    alert(`${recipe.result.name} を${recipe.result.amount}個、作成しました！`);
  }
  saveData();
  updateAllUI();
}

/* =========================================
   7) クエスト関連 (デイリー/通常/ウィークリー)
========================================= */
function switchQuestTab(tab) {
  document.getElementById("dailyQuests").style.display = (tab === "daily") ? "" : "none";
  document.getElementById("normalQuests").style.display = (tab === "normal") ? "" : "none";
  document.getElementById("weeklyQuests").style.display = (tab === "weekly") ? "" : "none";
}
function updateQuestsUI() {
  renderQuestList("dailyQuests", gameData.dailyQuests, completeDailyQuest);
  renderQuestList("normalQuests", gameData.normalQuests, completeNormalQuest);
  renderQuestList("weeklyQuests", gameData.weeklyQuests, completeWeeklyQuest);
}
function renderQuestList(containerId, questArr, completeFn) {
  const container = document.getElementById(containerId);
  container.innerHTML = "";
  questArr.forEach(q => {
    const div = document.createElement("div");
    div.className = "quest";
    const h4 = document.createElement("h4");
    h4.textContent = q.completed ? `【達成済】${q.title}` : q.title;
    const p = document.createElement("p");
    p.textContent = `EXP:${q.exp} Gold:${q.gold}`;
    const btn = document.createElement("button");
    btn.className = "btn-primary";
    if (q.completed) {
      btn.textContent = "完了済";
      btn.disabled = true;
    } else {
      btn.textContent = "達成";
      btn.onclick = () => completeFn(q.id);
    }
    div.appendChild(h4);
    div.appendChild(p);
    div.appendChild(btn);
    container.appendChild(div);
  });
}
function completeDailyQuest(id) {
  const q = gameData.dailyQuests.find(x => x.id === id);
  if (!q || q.completed) return;
  q.completed = true;
  alert(`${q.title} を達成！\nEXP+${q.exp}, Gold+${q.gold}`);
  gainExp(q.exp);
  gainGold(q.gold);
  saveData();
  updateAllUI();
}
function completeNormalQuest(id) {
  const q = gameData.normalQuests.find(x => x.id === id);
  if (!q || q.completed) return;
  q.completed = true;
  alert(`${q.title} を達成！\nEXP+${q.exp}, Gold+${q.gold}`);
  gainExp(q.exp);
  gainGold(q.gold);
  saveData();
  updateAllUI();
}
function completeWeeklyQuest(id) {
  const q = gameData.weeklyQuests.find(x => x.id === id);
  if (!q || q.completed) return;
  q.completed = true;
  alert(`${q.title} を達成！\nEXP+${q.exp}, Gold+${q.gold}`);
  gainExp(q.exp);
  gainGold(q.gold);
  saveData();
  updateAllUI();
}
function dailyQuestResetCheck() {
  const now = new Date();
  const todayStr = now.toDateString();
  if (gameData.lastDailyReset !== todayStr) {
    gameData.dailyQuests.forEach(q => q.completed = false);
    gameData.lastDailyReset = todayStr;
    alert("デイリークエストをリセットしました！");
    saveData();
  }
}
function weeklyQuestResetCheck() {
  const now = new Date();
  const year = now.getFullYear();
  const weekNum = Math.floor((now.getDate() - now.getDay() + 10) / 7);
  const currentWeekKey = `${year}-W${weekNum}`;
  if (gameData.lastWeeklyReset !== currentWeekKey) {
    gameData.weeklyQuests.forEach(q => q.completed = false);
    gameData.lastWeeklyReset = currentWeekKey;
    alert("ウィークリークエストをリセットしました！");
    saveData();
  }
}

/* =========================================
   8) ワールドマップ & ボス(複数ターン制)
========================================= */
function updateMapUI() {
  const container = document.getElementById("mapAreaContainer");
  container.innerHTML = "";
  const heroLevel = gameData.hero.level;
  gameData.mapAreas.forEach(area => {
    const areaDiv = document.createElement("div");
    areaDiv.className = "map-area";
    if (heroLevel < area.levelReq) {
      areaDiv.classList.add("locked-area");
    }
    areaDiv.innerHTML = `<h3>${area.name} (Lv.${area.levelReq}～)</h3><p>${area.desc}</p>`;
    if (area.boss && heroLevel >= area.levelReq) {
      const btn = document.createElement("button");
      btn.className = "btn-primary";
      btn.textContent = `${area.boss.name} と戦う`;
      btn.onclick = () => {
        // ボスも enemies配列扱い
        const boss = JSON.parse(JSON.stringify(area.boss));
        startBattle([boss], `ボス戦: ${boss.name}`, true);
      };
      areaDiv.appendChild(btn);
    }
    container.appendChild(areaDiv);
  });
}

/* =========================================
   9) ランダムエンカウント (複数敵対応)
========================================= */
function startRandomEncounter() {
  // ランダムに1～2体の敵を出す
  const n = Math.random() < 0.5 ? 1 : 2;
  let chosenEnemies = [];
  for (let i = 0; i < n; i++) {
    const e = gameData.enemies[Math.floor(Math.random() * gameData.enemies.length)];
    chosenEnemies.push(JSON.parse(JSON.stringify(e)));
  }
  startBattle(chosenEnemies, "ダンジョン潜入 - 複数敵が出現！");
}

/* =========================================
   10) 個別ターン制バトルロジック
========================================= */
let battleState = {
  combatants: [], // 全ユニット(勇者/仲間/敵)
  turnIndex: 0,
  log: [],
  battleOver: false,
  isBossFight: false
};

function startBattle(enemyList, title, isBoss=false) {
  battleState.combatants = [];
  battleState.turnIndex = 0;
  battleState.log = [];
  battleState.battleOver = false;
  battleState.isBossFight = isBoss;

  // 味方(勇者)
  const hero = gameData.hero;
  battleState.combatants.push({
    unitType: "hero",
    name: hero.name,
    hp: hero.hp,
    maxHp: hero.maxHp,
    speed: hero.speed,
    isDown: false,
    ref: hero,
    activeSkills: hero.activeSkills || []
  });
  // 仲間
  gameData.party.forEach(m => {
    battleState.combatants.push({
      unitType: "party",
      name: m.name,
      hp: m.hp,
      maxHp: m.maxHp,
      speed: m.speed || 5,
      isDown: false,
      ref: m,
      activeSkills: m.activeSkills || []
    });
  });
  // 敵
  enemyList.forEach(e => {
    battleState.combatants.push({
      unitType: "enemy",
      name: e.name,
      hp: e.hp,
      maxHp: e.maxHp,
      speed: e.speed || 5,
      atk: e.atk || 5,
      exp: e.exp || 0,
      gold: e.gold || 0,
      dropMat: e.dropMat || null,
      rewardExp: e.rewardExp,
      rewardGold: e.rewardGold,
      isDown: false
    });
  });

  // ソート(速度降順)
  battleState.combatants.sort((a,b) => b.speed - a.speed);

  document.getElementById("battleTitle").textContent = title;
  document.getElementById("battleDesc").textContent = isBoss ? "ボス戦だ！" : "敵が現れた！";
  openBattleModal();
  updateBattleUI();
  battleState.log.push("バトル開始！");
  // 行動者チェック
  checkCurrentTurn();
}

function openBattleModal() {
  document.getElementById("battleModalBg").style.display = "flex";
}
function closeBattleModal() {
  document.getElementById("battleModalBg").style.display = "none";
  updateAllUI();
}
function updateBattleUI() {
  // 敵一覧
  let enemyText = "<h3>敵ユニット</h3>";
  battleState.combatants
    .filter(c => c.unitType === "enemy")
    .forEach(c => {
      if (!c.isDown) {
        enemyText += `<p>${c.name} HP:${c.hp}/${c.maxHp}</p>`;
      } else {
        enemyText += `<p>${c.name} (撃破)</p>`;
      }
    });
  document.getElementById("battleEnemyInfo").innerHTML = enemyText;

  // 味方一覧
  let allyText = "<h3>味方ユニット</h3>";
  battleState.combatants
    .filter(c => c.unitType==="hero" || c.unitType==="party")
    .forEach(c => {
      if (!c.isDown) {
        allyText += `<p>${c.name} HP:${c.hp}/${c.maxHp}</p>`;
      } else {
        allyText += `<p>${c.name} (戦闘不能)</p>`;
      }
    });
  document.getElementById("battleHeroInfo").innerHTML = allyText;

  // ログ
  document.getElementById("battleLog").innerHTML = battleState.log.join("<br>");
}

/* 行動者確認 */
function checkCurrentTurn() {
  if (battleState.battleOver) return;
  if (battleState.turnIndex >= battleState.combatants.length) {
    battleState.turnIndex = 0;
  }
  let currentUnit = battleState.combatants[battleState.turnIndex];
  if (currentUnit.isDown) {
    // 次へ
    battleState.turnIndex++;
    checkBattleEnd();
    checkCurrentTurn();
    return;
  }

  if (currentUnit.unitType === "hero" || currentUnit.unitType === "party") {
    // プレイヤー(味方)行動
    battleState.log.push(`[${currentUnit.name} のターン]`);
    updateBattleUI();
    // ボタン操作で行動を待つ
  } else {
    // 敵行動
    battleState.log.push(`[${currentUnit.name} のターン(敵)]`);
    updateBattleUI();
    setTimeout(() => {
      enemyAction(currentUnit);
    }, 600);
  }
}

/* プレイヤー行動系 */
// 今どのキャラが行動中か
function getCurrentUnit() {
  if (battleState.turnIndex < battleState.combatants.length) {
    return battleState.combatants[battleState.turnIndex];
  }
  return null;
}

// 攻撃
function chooseAttack() {
  const currentUnit = getCurrentUnit();
  if (!currentUnit) return;
  if (currentUnit.unitType==="enemy") return; // 敵は自動行動

  // ターゲット: 生存している敵
  const aliveEnemies = battleState.combatants.filter(c => c.unitType==="enemy" && !c.isDown);
  if (aliveEnemies.length === 0) return; // 敵がいない
  const target = aliveEnemies[0]; // 仮に先頭を攻撃(本当は選択UIを用意してもOK)

  doAttack(currentUnit, target);
}
function doAttack(attacker, defender) {
  battleState.log.push(`${attacker.name}の攻撃！`);
  const dmg = calcDamage(attacker, defender, false);
  defender.hp -= dmg;
  battleState.log.push(`→ ${defender.name} に ${dmg} ダメージ！`);
  if (defender.hp<=0) {
    defender.hp=0;
    defender.isDown=true;
    battleState.log.push(`${defender.name}は倒れた！`);
  }
  endPlayerAction();
}

// スキル
function chooseSkill() {
  const currentUnit = getCurrentUnit();
  if (!currentUnit) return;
  if (currentUnit.activeSkills.length === 0) {
    alert("スキルがありません！");
    return;
  }
  // 例: 1つだけスキルがあるなら即使用 or promptで選択
  const skill = currentUnit.activeSkills[0];
  // ターゲット選択(敵)
  const aliveEnemies = battleState.combatants.filter(c => c.unitType==="enemy" && !c.isDown);
  if (aliveEnemies.length === 0) {
    alert("敵がいません");
    return;
  }
  const target = aliveEnemies[0]; // 簡易: 先頭
  battleState.log.push(`${currentUnit.name}は${skill.name}を発動！`);
  const dmg = skill.baseDamage + Math.floor(Math.random()*3);
  target.hp -= dmg;
  battleState.log.push(`→ ${target.name} に ${dmg} ダメージ！`);
  if (target.hp<=0) {
    target.hp=0;
    target.isDown=true;
    battleState.log.push(`${target.name}は倒れた！`);
  }
  endPlayerAction();
}

// アイテム
function chooseItem() {
  const currentUnit = getCurrentUnit();
  if (!currentUnit) return;
  if (currentUnit.unitType!=="hero") {
    alert("このキャラはアイテムを使えません。");
    return;
  }
  const hero = currentUnit.ref;
  if ((hero.consumables.potion || 0) <1) {
    alert("回復薬がありません。");
    return;
  }
  // 対象を自分に限定(簡易)
  hero.consumables.potion--;
  const heal=30;
  currentUnit.hp += heal;
  if(currentUnit.hp>currentUnit.maxHp) currentUnit.hp=currentUnit.maxHp;
  battleState.log.push(`${currentUnit.name}は回復薬を使用 → HP+${heal}`);
  endPlayerAction();
}

// 防御
function chooseDefend() {
  const currentUnit = getCurrentUnit();
  if (!currentUnit) return;
  currentUnit.isDefending=true; // 被ダメ半減など
  battleState.log.push(`${currentUnit.name}は身を守っている！(被ダメ軽減)`);
  endPlayerAction();
}

// 逃げる
function chooseFlee() {
  battleState.log.push("逃げ出した！");
  endBattle(false);
}

// プレイヤー行動終了
function endPlayerAction() {
  battleState.turnIndex++;
  checkBattleEnd();
  setTimeout(() => {
    checkCurrentTurn();
    updateBattleUI();
  }, 400);
}

// 敵行動
function enemyAction(enemyUnit) {
  // ターゲット: 生存している味方( hero/party )
  const aliveAllies = battleState.combatants.filter(c => (c.unitType==="hero"||c.unitType==="party") && !c.isDown);
  if (aliveAllies.length===0) {
    checkBattleEnd();
    return;
  }
  const target = aliveAllies[Math.floor(Math.random()*aliveAllies.length)];
  battleState.log.push(`${enemyUnit.name}の攻撃 → ${target.name}`);
  const dmg = calcDamage(enemyUnit, target, target.isDefending);
  target.hp -= dmg;
  if (target.isDefending) {
    battleState.log.push("(防御中で被ダメ軽減)");
  }
  battleState.log.push(`→ ${target.name}に${dmg}ダメージ！`);
  target.isDefending=false; // 防御は1ターンのみ

  if (target.hp<=0) {
    target.hp=0;
    target.isDown=true;
    battleState.log.push(`${target.name}は倒れた…`);
  }

  battleState.turnIndex++;
  checkBattleEnd();
  setTimeout(() => {
    checkCurrentTurn();
    updateBattleUI();
  }, 400);
}

/* ダメージ計算 */
function calcDamage(attacker, defender, defenderIsDefending) {
  let baseAtk=0;
  if (attacker.unitType==="hero"||attacker.unitType==="party") {
    // 味方の攻撃力
    // (装備や職業スキルなどは未細分化。下のcalcPlayerTotalAttackを簡易流用でもOK)
    baseAtk=10;
    if(attacker.ref && attacker.ref.job==="戦士") {
      const wSkills=gameData.skills.warrior;
      wSkills.forEach(s => {
        if(s.name==="剣術熟練") baseAtk+=(s.level*2);
      });
    }
    if(attacker.ref && attacker.ref.job==="魔法使い") {
      const mSkills=gameData.skills.mage;
      mSkills.forEach(s => {
        if(s.name==="魔力増強") baseAtk+=(s.level*3);
        if(s.name==="精神集中" && battleState.isBossFight) baseAtk+=(s.level*5);
      });
    }
    if(attacker.ref && attacker.ref.job==="盗賊") {
      const tSkills=gameData.skills.thief;
      tSkills.forEach(s=>{
        if(s.name==="素早さ強化") baseAtk+=(s.level*2);
      });
    }
    // 装備
    if(attacker.ref && attacker.ref.equipment.weapon) {
      baseAtk += (attacker.ref.equipment.weapon.attack||0);
    }
    if(attacker.ref && attacker.ref.equipment.armor) {
      baseAtk += (attacker.ref.equipment.armor.attack||0);
    }
    if(attacker.ref && attacker.ref.equipment.accessory) {
      baseAtk += (attacker.ref.equipment.accessory.attack||0);
    }
    // さらに仲間の場合はattackプロパティ？
    if(attacker.unitType==="party") {
      baseAtk += attacker.ref.attack; // m.attack
    }
  } else {
    // 敵
    baseAtk=attacker.atk||5;
  }
  // 防御中なら半減
  let finalDmg = baseAtk + Math.floor(Math.random()*3);
  if(defenderIsDefending) {
    finalDmg = Math.floor(finalDmg/2);
  }
  return finalDmg;
}

/* 勝利/敗北判定 */
function checkBattleEnd() {
  // 味方生存
  const aliveAllies = battleState.combatants.filter(c => (c.unitType==="hero"||c.unitType==="party") && !c.isDown);
  if(aliveAllies.length===0) {
    // 敗北
    battleState.log.push("味方は全滅した…");
    doLoseBattle();
    return true;
  }
  // 敵生存
  const aliveEnemies= battleState.combatants.filter(c => c.unitType==="enemy" && !c.isDown);
  if(aliveEnemies.length===0) {
    // 勝利
    battleState.log.push("敵を全て倒した！ 勝利！");
    doWinBattle();
    return true;
  }
  return false;
}

function doWinBattle() {
  battleState.battleOver=true;
  // ボス or 雑魚敵全体のEXP/Gold
  let totalExp=0, totalGold=0;
  battleState.combatants.forEach(c=>{
    if(c.unitType==="enemy") {
      if(c.rewardExp) totalExp += c.rewardExp; else totalExp += (c.exp||0);
      if(c.rewardGold) totalGold += c.rewardGold; else totalGold += (c.gold||0);
    }
  });
  // 盗賊スキルでGoldボーナス
  if(gameData.hero.job==="盗賊"){
    const tSkills=gameData.skills.thief;
    tSkills.forEach(s=>{
      if(s.name==="ゴールド盗み") {
        totalGold+=(s.level*5);
      }
    });
  }
  gainExp(totalExp);
  gainGold(totalGold);
  battleState.log.push(`報酬 → EXP:${totalExp}, Gold:${totalGold}`);

  // 倒れた味方をHP1で復帰
  battleState.combatants.forEach(c=>{
    if((c.unitType==="hero"||c.unitType==="party") && c.isDown){
      c.isDown=false; c.hp=1;
      if(c.ref) c.ref.hp=1;
    } else {
      if(c.ref) c.ref.hp=c.hp; // HPを反映
    }
  });
  setTimeout(()=>{
    endBattle(true);
  },800);
}

function doLoseBattle() {
  battleState.battleOver=true;
  // ゴールド半減
  gameData.hero.gold = Math.floor(gameData.hero.gold/2);
  battleState.log.push("所持Goldが半分になった…");
  // 全員HP1で復帰
  battleState.combatants.forEach(c=>{
    if(c.unitType==="hero"||c.unitType==="party"){
      c.isDown=false;
      c.hp=1;
      if(c.ref) c.ref.hp=1;
    }
  });
  setTimeout(()=>{
    endBattle(false);
  },800);
}

function endBattle(win) {
  battleState.log.push(win ? "(勝利) バトル終了" : "(終了) バトル終了");
  updateBattleUI();
  setTimeout(()=>{
    closeBattleModal();
  },1000);
}

function calcPlayerTotalAttack(){
  // ※ 旧の一斉攻撃計算用は使わなくなったが、参考に残しておく
  return 10;
}

/* ボス撃破時の実績 & ストーリー */
function onBossDefeated(bossName) {
  gameData.achievements.forEach(a => {
    if(a.type==="bossKill" && a.bossName===bossName && !a.unlocked){
      unlockAchievement(a);
    }
  });
  const st= gameData.story.find(x=>x.bossName===bossName);
  if(st){
    battleState.log.push(st.text);
  }
  saveData();
}

/* =========================================
   11) 実績 & ストーリー
========================================= */
function updateAchievementsUI() {
  const listEl = document.getElementById("achievementList");
  listEl.innerHTML = "";
  gameData.achievements.forEach(a => {
    const div = document.createElement("div");
    div.className = "achievement";
    if(!a.unlocked) div.classList.add("locked");
    const h4 = document.createElement("h4");
    h4.textContent = a.title;
    const p = document.createElement("p");
    p.textContent = a.desc;
    if(!a.unlocked){
      const lockedLabel=document.createElement("div");
      lockedLabel.className="locked-label";
      lockedLabel.textContent="Locked";
      div.appendChild(lockedLabel);
    }
    div.appendChild(h4);
    div.appendChild(p);
    listEl.appendChild(div);
  });
}
function checkAchievements() {
  const hero=gameData.hero;
  const totalQuestCompleted= gameData.dailyQuests.filter(q=>q.completed).length
    + gameData.normalQuests.filter(q=>q.completed).length
    + gameData.weeklyQuests.filter(q=>q.completed).length;
  gameData.achievements.forEach(a=>{
    if(a.unlocked) return;
    switch(a.type){
      case "questCount":
        if(totalQuestCompleted>=a.target){
          unlockAchievement(a);
        }
        break;
      case "level":
        if(hero.level>=a.target){
          unlockAchievement(a);
        }
        break;
      case "bossKill":
        // boss討伐時に individually check
        break;
      case "gold":
        if(hero.gold>=a.target){
          unlockAchievement(a);
        }
        break;
    }
  });
}
function unlockAchievement(a) {
  a.unlocked=true;
  alert(`実績解除！「${a.title}」`);
  saveData();
  updateAchievementsUI();
}
function updateStoryProgress(){
  let text="";
  const bossKills= gameData.achievements.filter(a=>a.type==="bossKill"&&a.unlocked).map(a=>a.bossName);
  bossKills.forEach(bn=>{
    const st=gameData.story.find(x=>x.bossName===bn);
    if(st){
      text+=`<p>【${bn}】<br>${st.text}</p>`;
    }
  });
  if(!text) text="<p>まだ大きなストーリーは進んでいません。</p>";
  document.getElementById("storyProgress").innerHTML=text;
}

/* =========================================
   12) UIの一括更新
========================================= */
function updateAllUI(){
  updateHeroUI();
  updatePartyUI();
  updateSkillTreeUI();
  updateCraftUI();
  updateQuestsUI();
  updateMapUI();
  updateAchievementsUI();
  updateStoryProgress();
}
</script>
</body>
</html>

WEBサービスのアイディア

ここにいくつかのWEBサービスアイデアを提案します：
タスク自動化サービス：
各種のタスク（例：ファイル管理、データバックアップ、レポート作成など）を自動化するクラウドサービス。ユーザーが日常的な作業を簡単にスクリプトやAIを使って自動化できる。
AI学習サポートプラットフォーム：
受験生や学習者向けに、個別の学習プランを作成し、進捗を自動的に管理するサービス。AIがユーザーの理解度に応じた問題を提案したり、弱点克服のためのアドバイスを提供する。
ローカルコミュニティSNS：
地域ごとのローカルなコミュニティSNS。近所でのイベントやニュース、フリーマーケット情報など、地域に特化した情報を交換できる。
オンラインスキルシェアプラットフォーム：
ユーザーが自身の専門知識やスキルを他のユーザーに教えたり、学んだりできるプラットフォーム。講師として登録でき、動画コンテンツやライブ講義を提供できる。
デジタルライフオーガナイザー：
ユーザーのオンラインアカウント、サブスクリプション、パスワードなどを一括で管理し、期限が近づいたら通知を送るサービス。セキュリティに配慮したデータ管理機能も持つ。
趣味特化型Q&Aサイト：
趣味（例：写真撮影、DIY、園芸、料理など）に特化したQ&Aサイト。ユーザーが同じ趣味を持つ仲間と意見交換や質問ができる。
AIパーソナルトレーナー：
フィットネスや食事管理をAIがサポートするサービス。日々の運動プランや食事の提案、進捗管理を行い、目標に合わせて調整。
ライティング支援ツール：
小説、ブログ、エッセイなど、文章作成に特化したAI支援ツール。文法チェックやアイデア生成、構成アドバイスなどを提供。
クラウドベースのプロジェクト管理ツール：
チームでのプロジェクト管理を効率化するため、タスクの進捗管理、ファイル共有、コミュニケーションを一元化するツール。特にリモートワーク向けの機能が充実。
キャリアアドバイス＆マッチングプラットフォーム：
AIが個人のスキルや経験に基づいてキャリアアドバイスを提供し、適切な企業やプロジェクトとマッチングしてくれるプラットフォーム。

AIのWEBサービスの作り方

AIを用いたWEBサービスを作るためには、以下のような手順があります。

AIモデルの作成
まず、AIモデルを作成する必要があります。このモデルは、学習済みのものを使用する場合もありますが、独自のモデルを作成する場合もあります。

APIの作成
次に、作成したAIモデルをWEBサービスとして公開するためのAPIを作成します。APIは、リクエストを受け取り、AIモデルに処理を依頼して結果を返すためのものです。APIは、RESTful APIやGraphQL APIなどの種類があります。

フロントエンドの開発
APIとのやりとりを行うフロントエンドを開発します。フロントエンドは、ユーザーがWEBサービスを利用するための画面を提供するもので、HTML、CSS、JavaScriptを使用して開発されます。

サーバーの設定
APIを公開するためのサーバーを設定します。この際、クラウドサービスを使用することが一般的で、Amazon Web ServicesやMicrosoft Azureなどが利用されます。

セキュリティの確保
WEBサービスには、様々なセキュリティ上の脅威が存在します。そのため、セキュリティを確保するために、SSL証明書の導入やファイアウォールの設定などが必要です。

テストとデプロイ
WEBサービスを本番環境にデプロイする前に、テストを行います。テストでは、APIの動作確認や負荷テストなどを行います。テストが完了したら、WEBサービスを本番環境にデプロイします。

以上が、AIを用いたWEBサービスを作るための一般的な手順です。ただし、WEBサービスの作り方は、使用する技術やフレームワークによって異なる場合があるため、詳細は使用する技術やフレームワークに合わせて学習する必要があります。