Merge pull request #34 from nagomi-sugarheart/claude/add-comment-count-time-afn6i

CLAUDE.md

@@ -164,7 +164,7 @@
 | **contentRich** | 本文(リッチ) | リッチテキストエリア | microCMS 管理画面直接編集用 |
 | **contentBlocks** | ブロックデータ | テキストエリア | ブロック配列 JSON（編集用） |
 
-### 7.2 coment（リスト型・コメント）
+### 7.2 comments（リスト型・コメント）
 | フィールドID | 表示名 | データ型 | 用途 |
 | :--- | :--- | :--- | :--- |
 | **articleId** | 記事ID | テキストフィールド | 対象記事の ID |

main.py

@@ -166,14 +166,28 @@ def get_comments(article_id: str) -> list:
     except Exception:
         return []
 
-def post_comment_api(article_id: str, name: str, body: str) -> bool:
+def post_comment_api(article_id: str, name: str, body: str, parent_id: str = "") -> bool:
     try:
-        r = http_requests.post(cms_url("comments"), headers=CMS_HEADERS_POST(),
-                               json={"articleId": article_id, "name": name, "body": body})
+        payload = {"articleId": article_id, "name": name, "body": body}
+        if parent_id:
+            payload["parentId"] = parent_id
+        r = http_requests.post(cms_url("comments"), headers=CMS_HEADERS_POST(), json=payload)
         return r.status_code in [200, 201]
     except Exception:
         return False
 
+def build_comment_tree(comments: list) -> list:
+    by_id = {c["id"]: {**c, "replies": []} for c in comments}
+    roots = []
+    for c in comments:
+        node = by_id[c["id"]]
+        pid = c.get("parentId", "")
+        if pid and pid in by_id:
+            by_id[pid]["replies"].append(node)
+        else:
+            roots.append(node)
+    return roots
+
 def migrate_comments(old_id: str, new_id: str) -> int:
     try:
         r = http_requests.get(cms_url("comments"), headers=CMS_HEADERS_GET(),
@@ -304,17 +318,17 @@ async def index(request: Request, id: str = None, page: int = 0,
         if not article:
             return templates.TemplateResponse(request, "blog_detail.html",
                 {"article": None, "comments": []})
-        comments = get_comments(id)
+        flat_comments = get_comments(id)
+        comment_tree  = build_comment_tree(flat_comments)
         base_url = SPACE_URL or str(request.base_url).rstrip("/")
-        # contentBlocks が存在する場合はブロックから直接レンダリングし
-        # microCMS の contentRich フィールドによるスタイル除去を回避する
         if article.get("contentBlocks"):
             rendered_content = render_blocks_to_html(blocks_from_article(article))
         else:
             rendered_content = clean_html(get_content(article))
         return templates.TemplateResponse(request, "blog_detail.html", {
             "article": article,
-            "comments": comments,
+            "comments": comment_tree,
+            "comment_count": len(flat_comments),
             "content": rendered_content,
             "tags": get_tags(article),
             "space_url": base_url,
@@ -462,6 +476,9 @@ async def api_save(request: Request):
                 was_draft = existing.get("title", "").startswith("【下書き】")
 
             if was_draft and becomes_public:
+                likes_count = int(existing.get("likes", 0) or 0)
+                if likes_count:
+                    post_data["likes"] = likes_count
                 http_requests.delete(f"{base_url}/{article_id}", headers=CMS_HEADERS_GET())
                 r = http_requests.post(base_url, headers=CMS_HEADERS_POST(), json=post_data)
                 if r.status_code in [200, 201]:
@@ -638,7 +655,19 @@ async def api_comment(request: Request):
     article_id = data.get("article_id", "")
     name       = data.get("name", "わせます太郎").strip() or "わせます太郎"
     body       = data.get("body", "").strip()
+    parent_id  = data.get("parent_id", "")
     if not body:
         return JSONResponse({"success": False, "error": "コメントを入力してください"})
-    ok = post_comment_api(article_id, name, body)
+    ok = post_comment_api(article_id, name, body, parent_id)
     return JSONResponse({"success": ok})
+
+@app.post("/api/like/{article_id}")
+async def api_like(article_id: str):
+    article = get_article(article_id)
+    if not article:
+        return JSONResponse({"success": False, "likes": 0})
+    current = int(article.get("likes", 0) or 0)
+    new_count = current + 1
+    r = http_requests.patch(cms_url(f"blog/{article_id}"), headers=CMS_HEADERS_POST(),
+                            json={"likes": new_count})
+    return JSONResponse({"success": r.status_code in [200, 201], "likes": new_count})

templates/blog_detail.html

@@ -20,6 +20,43 @@
 <meta name="twitter:title"      content="{{ og_title }}">
 {% endif %}
 {% endblock %}
+
+{% macro render_comment(c, article_id, depth) %}
+<div class="{% if depth > 0 %}ml-5 pl-3 border-l-2 border-pink-100 dark:border-gray-600{% endif %} mb-3">
+  <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl p-4">
+    <div class="flex justify-between items-center mb-1">
+      <span class="font-bold text-sm text-gray-700 dark:text-gray-200">{{ c.get("name","名無し") }}</span>
+      <span class="text-xs text-gray-400 dark:text-gray-500">{{ c.get("createdAt","") | to_jst }}</span>
+    </div>
+    <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">{{ c.get("body","") }}</p>
+    <button onclick="toggleReplyForm('{{ c.id }}')"
+            class="text-xs text-gray-400 dark:text-gray-500 mt-2 hover:text-[#bf283a] dark:hover:text-[#f08090] transition">
+      ↩ 返信する
+    </button>
+    <div id="reply-{{ c.id }}" class="hidden mt-3 space-y-2">
+      <input id="reply-name-{{ c.id }}" type="text" placeholder="名前（省略可）" maxlength="50"
+             class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099]">
+      <textarea id="reply-body-{{ c.id }}" placeholder="返信を入力..." maxlength="500" rows="2"
+                class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099] resize-none"></textarea>
+      <p id="reply-msg-{{ c.id }}" class="text-sm hidden"></p>
+      <div class="flex gap-2">
+        <button onclick="submitComment('{{ article_id }}', '{{ c.id }}')"
+                class="flex-1 bg-[#bf283a] text-white py-1.5 rounded-lg text-sm font-bold hover:bg-[#a01f2f] transition">
+          返信する
+        </button>
+        <button onclick="toggleReplyForm('{{ c.id }}')"
+                class="px-3 border dark:border-gray-600 text-gray-500 dark:text-gray-400 py-1.5 rounded-lg text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition">
+          キャンセル
+        </button>
+      </div>
+    </div>
+  </div>
+  {% for reply in c.replies %}
+    {{ render_comment(reply, article_id, depth + 1) }}
+  {% endfor %}
+</div>
+{% endmacro %}
+
 {% block body %}
 <div class="max-w-2xl mx-auto px-4 py-6">
   <a href="/" class="inline-block mb-4 text-sm text-gray-500 dark:text-gray-400 hover:text-[#bf283a] dark:hover:text-[#f08090] transition">← 一覧に戻る</a>
@@ -29,12 +66,13 @@
   {% else %}
     {% set ec = article.get("eyecatch") %}
     {% set ec_url = ec.get("url","") if ec is mapping else (ec or "") %}
+    {% set article_id = article.get("id","") %}
     {% if ec_url %}
       <img src="{{ ec_url }}" alt="" class="w-full h-64 object-cover rounded-xl mb-6">
     {% endif %}
 
     <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">{{ article.get("title","無題") }}</h1>
-    <p class="text-sm text-gray-400 dark:text-gray-500 mb-3">👤 {{ article.get("author","") }} ｜ 📅 {{ article.get("publishedAt","")[:10] }} ｜ <a href="#comments" class="hover:text-[#bf283a] dark:hover:text-[#f08090] transition">💬 {{ comments | length }}件</a></p>
+    <p class="text-sm text-gray-400 dark:text-gray-500 mb-3">👤 {{ article.get("author","") }} ｜ 📅 {{ article.get("publishedAt","")[:10] }} ｜ <a href="#comments" class="hover:text-[#bf283a] dark:hover:text-[#f08090] transition">💬 {{ comment_count }}件</a></p>
     <div class="mb-4">
       {% for t in tags %}<span class="tag-badge">#{{ t }}</span>{% endfor %}
     </div>
@@ -43,9 +81,18 @@
     <div class="blog-content text-gray-800 dark:text-gray-200">{{ content | safe }}</div>
     <hr class="my-6 border-gray-200 dark:border-gray-700">
 
+    <!-- いいね -->
+    <div class="flex justify-center mb-8">
+      <button id="like-btn" onclick="likeArticle('{{ article_id }}')"
+              class="flex flex-col items-center gap-1 px-8 py-4 rounded-2xl border-2 border-[#e09099] dark:border-[#c07080] hover:bg-[#fdf0f2] dark:hover:bg-[#3d1a20] transition group">
+        <span id="like-icon" class="text-3xl transition-transform group-hover:scale-110">♡</span>
+        <span id="like-count" class="text-sm font-bold text-[#bf283a] dark:text-[#f08090]">{{ article.get("likes", 0) or 0 }}</span>
+      </button>
+    </div>
+
     <!-- シェア -->
     {% if space_url %}
-    {% set share_link = space_url ~ "?id=" ~ article.get("id","") %}
+    {% set share_link = space_url ~ "?id=" ~ article_id %}
     {% set share_text = article.get("title","") ~ " | わせます9期ブログ\n" ~ share_link %}
     <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 mb-6 border dark:border-gray-700">
       <p class="text-sm font-bold text-gray-600 dark:text-gray-300 mb-3">🔗 この記事をシェア���る</p>
@@ -73,25 +120,19 @@
       <h2 class="text-lg font-bold text-gray-700 dark:text-gray-200 mb-4">💬 コメント</h2>
       {% if comments %}
         {% for c in comments %}
-          <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl p-4 mb-3">
-            <div class="flex justify-between items-center mb-1">
-              <span class="font-bold text-sm text-gray-700 dark:text-gray-200">{{ c.get("name","名無し") }}</span>
-              <span class="text-xs text-gray-400 dark:text-gray-500">{{ c.get("createdAt","") | to_jst }}</span>
-            </div>
-            <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">{{ c.get("body","") }}</p>
-          </div>
+          {{ render_comment(c, article_id, 0) }}
         {% endfor %}
       {% else %}
         <p class="text-sm text-gray-400 dark:text-gray-500 mb-4">まだコメントはありません。</p>
       {% endif %}
 
-      <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl p-4">
+      <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-xl p-4 mt-4">
         <h3 class="font-bold text-sm text-gray-700 dark:text-gray-200 mb-3">コメントを投稿</h3>
         <input id="comment-name" type="text" placeholder="名前（省略可）" maxlength="50"
                class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 text-sm mb-2 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099]">
         <textarea id="comment-body" placeholder="コメントを入力..." maxlength="500" rows="3"
                   class="w-full border dark:border-gray-600 rounded-lg px-3 py-2 text-sm mb-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#e09099] resize-none"></textarea>
-        <button onclick="submitComment('{{ article.get("id","") }}')"
+        <button onclick="submitComment('{{ article_id }}')"
                 class="w-full bg-[#bf283a] text-white py-2 rounded-lg text-sm font-bold hover:bg-[#a01f2f] transition">投稿する</button>
         <p id="comment-msg" class="text-sm text-center mt-2 hidden"></p>
       </div>
@@ -99,22 +140,59 @@
   {% endif %}
 </div>
 <script>
-async function submitComment(articleId) {
-  const name = document.getElementById('comment-name').value.trim();
-  const body = document.getElementById('comment-body').value.trim();
-  const msg  = document.getElementById('comment-msg');
-  if (!body) { showMsg(msg, 'コメントを入力してください', 'text-red-500'); return; }
+async function submitComment(articleId, parentId = '') {
+  const nameEl = parentId ? document.getElementById(`reply-name-${parentId}`) : document.getElementById('comment-name');
+  const bodyEl = parentId ? document.getElementById(`reply-body-${parentId}`) : document.getElementById('comment-body');
+  const msgEl  = parentId ? document.getElementById(`reply-msg-${parentId}`) : document.getElementById('comment-msg');
+  const name = nameEl.value.trim();
+  const body = bodyEl.value.trim();
+  if (!body) { showMsg(msgEl, 'コメントを入力してください', 'text-red-500'); return; }
   const res = await fetch('/api/comment', {
     method: 'POST', headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({article_id: articleId, name, body})
+    body: JSON.stringify({article_id: articleId, name, body, parent_id: parentId})
   });
   const data = await res.json();
   if (data.success) { location.reload(); }
-  else { showMsg(msg, '投稿に失敗しました', 'text-red-500'); }
+  else { showMsg(msgEl, '投稿に失敗しました', 'text-red-500'); }
+}
+
+function toggleReplyForm(commentId) {
+  const el = document.getElementById(`reply-${commentId}`);
+  el.classList.toggle('hidden');
+  if (!el.classList.contains('hidden')) {
+    el.querySelector('textarea').focus();
+  }
+}
+
+async function likeArticle(articleId) {
+  const key = `liked_${articleId}`;
+  if (localStorage.getItem(key)) return;
+  const btn = document.getElementById('like-btn');
+  btn.disabled = true;
+  const res = await fetch(`/api/like/${articleId}`, { method: 'POST' });
+  const data = await res.json();
+  if (data.success) {
+    localStorage.setItem(key, '1');
+    document.getElementById('like-icon').textContent = '❤️';
+    document.getElementById('like-count').textContent = data.likes;
+    btn.classList.add('bg-[#fdf0f2]', 'dark:bg-[#3d1a20]');
+  }
+  btn.disabled = false;
 }
+
 function showMsg(el, text, cls) {
   el.textContent = text; el.className = `text-sm text-center mt-2 ${cls}`; el.classList.remove('hidden');
 }
+
+// ページ読み込み時：すでにいいね済みなら見た目を反映
+(function() {
+  const articleId = '{{ article.get("id","") if article else "" }}';
+  if (articleId && localStorage.getItem(`liked_${articleId}`)) {
+    document.getElementById('like-icon').textContent = '❤️';
+    const btn = document.getElementById('like-btn');
+    if (btn) btn.classList.add('bg-[#fdf0f2]', 'dark:bg-[#3d1a20]');
+  }
+})();
 </script>
 {% if article and 'twitter-tweet' in content %}
 <script async src="https://platform.twitter.com/widgets.js"></script>