#14 ぼちぼち

backend/app/controllers/posts_controller.rb

@@ -32,12 +32,30 @@ class PostsController < ApplicationController
 
   # POST /posts
   def create
-    @post = Post.new(post_params)
+    # TODO: current_user.role が 'admin' もしくは 'member' でなければ 403
 
-    if @post.save
-      render json: @post, status: :created, location: @post
+    title = params[:title]
+    unless title.present?
+      # TODO:
+      # 既知サイトなら決まったフォーマットで，
+      # 未知サイトならページ名をセットする．
+    end
+    post = Post.new(title: title, url: params[:url], thumbnail_base: '', uploaded_user: current_user)
+    if params[:thumbnail].present?
+      post.thumbnail.attach(params[:thumbnail])
     else
-      render json: @post.errors, status: :unprocessable_entity
+      # TODO:
+      # 既知ドメインであれば，指定のアドレスからサムネール取得，
+      # それ以外なら URL のスクショ・イメージをサムネールに登録．
+    end
+    if post.save
+      if params[:tags].present?
+        tag_ids = JSON.parse(params[:tags])
+        post.tags = Tag.where(id: tag_ids)
+      end
+      render json: post, status: :created
+    else
+      render json: { errors: post.errors.full_messages }, status: :unprocessable_entity
     end
   end
 

backend/db/migrate/20250602162353_add_title_to_posts.rb

@@ -0,0 +1,5 @@
+class AddTitleToPosts < ActiveRecord::Migration[8.0]
+  def change
+    add_column :posts, :title, :string, after: :id, null: false
+  end
+end

frontend/src/App.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom'
 import HomePage from './pages/HomePage'
 import TagPage from './pages/TagPage'
 import TopNav from './components/TopNav'
 import TagSidebar from './components/TagSidebar'
 import PostPage from './pages/PostPage'
+import PostNewPage from './pages/PostNewPage'
 import PostDetailPage from './pages/PostDetailPage'
 import { API_BASE_URL } from './config'
 import axios from 'axios'
@@ -70,9 +71,11 @@ const App = () => {
               <TagSidebar posts={posts} setPosts={setPosts} />
               <main className="flex-1 overflow-y-auto p-4">
                 <Routes>
+                  <Route path="/" element={<Navigate to="/posts" replace />} />
+                  <Route path="/posts" element={<PostPage posts={posts} setPosts={setPosts} />} />
+                  <Route path="/posts/new" element={<PostNewPage />} />
                   <Route path="/posts/:id" element={<PostDetailPage posts={posts} setPosts={setPosts} />} />
                   <Route path="/tags/:tag" element={<TagPage />} />
-                  <Route path="*" element={<PostPage posts={posts} setPosts={setPosts} />} />
                 </Routes>
               </main>
             </div>

frontend/src/components/TopNav.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from "react"
-import { Link } from 'react-router-dom'
+import React, { useState, useEffect } from "react"
+import { Link, useLocation } from 'react-router-dom'
 import SettingsDialogue from './SettingsDialogue'
 import { Button } from './ui/button'
+import clsx from 'clsx'
 
 type User = { id:               number
               name:             string | null
@@ -11,27 +12,72 @@ type User = { id:               number
 type Props = { user:    User
                setUser: (user: User) => void }
 
+const enum Menu { None,
+                  Post,
+                  Deerjikist,
+                  Tag,
+                  Wiki }
+
 
 const TopNav: React.FC = ({ user, setUser }: Props) => {
+  const location = useLocation ()
+
   const [settingsVisible, setSettingsVisible] = useState (false)
+  const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
+
+  const MyLink = ({ to, title, menu }: { to: string; title: string; menu?: Menu }) => (
+      <Link to={to} className={clsx ('hover:text-orange-500 h-full flex items-center',
+                                     (location.pathname.startsWith (to)
+                                      ? 'bg-gray-700 px-4 font-bold'
+                                      : 'px-2'))}>
+        {title}
+      </Link>)
+
+  useEffect (() => {
+    if (location.pathname.startsWith ('/posts'))
+      setSelectedMenu (Menu.Post)
+    else if (location.pathname.startsWith ('/deerjikists'))
+      setSelectedMenu (Menu.Deerjikist)
+    else if (location.pathname.startsWith ('/tags'))
+      setSelectedMenu (Menu.Tag)
+    else if (location.pathname.startsWith ('/wiki'))
+      setSelectedMenu (Menu.Wiki)
+    else
+      setSelectedMenu (Menu.None)
+  }, [location])
 
   return (
-      <nav className="bg-gray-800 text-white p-3 flex justify-between items-center w-full">
-        <div className="flex items-center gap-4">
-          <Link to="/" className="text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
-          <Link to="/posts" className="hover:text-orange-500">広場</Link>
-          <Link to="/deerjikists" className="hover:text-orange-500">ニジラー</Link>
-          <Link to="/tags" className="hover:text-orange-500">タグ</Link>
-          <Link to="/wiki" className="hover:text-orange-500">Wiki</Link>
-        </div>
-        <div className="ml-auto pr-4">
-          <Button onClick={() => setSettingsVisible (true)}>{user?.name || '名もなきニジラー'}</Button>
-          <SettingsDialogue visible={settingsVisible}
-                            onVisibleChange={setSettingsVisible}
-                            user={user}
-                            setUser={setUser} />
-        </div>
-      </nav>)
+      <>
+        <nav className="bg-gray-800 text-white px-3 flex justify-between items-center w-full min-h-[48px]">
+          <div className="flex items-center gap-2 h-full">
+            <Link to="/posts" className="mr-4 text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
+            <MyLink to="/posts" title="広場" />
+            <MyLink to="/deerjikists" title="ニジラー" />
+            <MyLink to="/tags" title="タグ" />
+            <MyLink to="/wiki" title="Wiki" />
+          </div>
+          <div className="ml-auto pr-4">
+            <Button onClick={() => setSettingsVisible (true)}>{user?.name || '名もなきニジラー'}</Button>
+            <SettingsDialogue visible={settingsVisible}
+                              onVisibleChange={setSettingsVisible}
+                              user={user}
+                              setUser={setUser} />
+          </div>
+        </nav>
+        {(() => {
+          const className = 'bg-gray-700 text-white px-3 flex items-center w-full min-h-[40px]'
+          const subClass = 'hover:text-orange-500 h-full flex items-center px-4'
+          switch (selectedMenu)
+          {
+          case Menu.Post:
+            return (
+                <div className={className}>
+                  <Link to="/posts" className={subClass}>一覧</Link>
+                  <Link to="/posts/new" className={subClass}>投稿</Link>
+                </div>)
+          }
+        }) ()}
+      </>)
 }
 
 

frontend/src/pages/PostNewPage.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react'
+import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
+import axios from 'axios'
+import { API_BASE_URL, SITE_TITLE } from '../config'
+import NicoViewer from '../components/NicoViewer'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import { cn } from '@/lib/utils'
+
+type Tag = { id:        number
+             name:      string
+             category:  string }
+
+type Post = { id:         number
+              url:        string
+              title:      string
+              thumbnail:  string
+              tags:       Tag[]
+              viewed:     boolean }
+
+type Props = { posts:     Post[]
+               setPosts:  (posts: Post[]) => void }
+
+
+const PostNewPage = () => {
+  const location = useLocation ()
+  const navigate = useNavigate ()
+
+  const [title, setTitle] = useState ('')
+  const [titleAutoFlg, setTitleAutoFlg] = useState (true)
+  const [url, setURL] = useState ('')
+  const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
+  const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
+  const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
+  const [tags, setTags] = useState<Tag[]> ([])
+  const [tagIds, setTagIds] = useState<number[]> ([])
+
+  const handleSubmit = () => {
+    const formData = new FormData ()
+    formData.append ('title', title || null)
+    formData.append ('url', url)
+    formData.append ('tags', JSON.stringify (tagIds))
+    formData.append ('thumbnail', thumbnailAutoFlg ? null : thumbnailFile)
+
+    void (axios.post (`${ API_BASE_URL }/posts`, formData, { headers: {
+              'Content-Type':     'multipart/form-data',
+              'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
+          .then (() => {
+            toast ({ title: '投稿成功!' })
+            navigate ('/posts')
+          })
+          .catch (e => toast ({ title:        '投稿失敗',
+                                description:  '入力を確認してください。' })))
+  }
+
+  document.title = `広場に投稿を追加 | ${ SITE_TITLE }`
+
+  useEffect (() => {
+    void (axios.get ('/api/tags')
+          .then (res => setTags (res.data))
+          .catch (() => toast ({ title: 'タグ一覧の取得失敗' })))
+  }, [])
+
+  return (
+      <div className="max-w-xl mx-auto p-4 space-y-4">
+        <h1 className="text-2xl font-bold mb-2">広場に投稿を追加する</h1>
+
+        {/* URL */}
+        <div>
+          <label className="block font-semibold mb-1">URL</label>
+          <input type="text"
+                 placeholder="例：https://www.nicovideo.jp/watch/..."
+                 value={url}
+                 onChange={e => setURL (e.target.value)}
+                 className="w-full border p-2 rounded" />
+        </div>
+
+        {/* タイトル */}
+        <div>
+          <div className="flex gap-2 mb-1">
+            <label className="flex-1 block font-semibold">タイトル</label>
+            <label className="flex items-center block gap-1">
+              <input type="checkbox"
+                     checked={titleAutoFlg}
+                     onChange={e => setTitleAutoFlg (e.target.checked)} />
+              自動
+            </label>
+          </div>
+          <input type="text"
+                 className="w-full border rounded p-2"
+                 value={title}
+                 onChange={e => setTitle (e.target.value)}
+                 disabled={titleAutoFlg} />
+        </div>
+
+        {/* サムネール */}
+        <div>
+          <div className="flex gap-2 mb-1">
+            <label className="block font-semibold flex-1">サムネール</label>
+            <label className="flex items-center gap-1">
+              <input type="checkbox"
+                     checked={thumbnailAutoFlg}
+                     onChange={e => setThumbnailAutoFlg (e.target.checked)} />
+              自動
+            </label>
+          </div>
+          {thumbnailAutoFlg
+           ? (
+              <p className="text-gray-500 text-sm">
+                URL から自動取得されます。
+              </p>)
+           : (
+              <>
+                <input type="file"
+                       accept="image/*"
+                       onChange={e => {
+                         const file = e.target.files?.[0]
+                         if (file)
+                           {
+                             setThumbnailFile (file)
+                             setThumbnailPreview (URL.createObjectURL (file))
+                           }
+                       }} />
+                {thumbnailPreview && (
+                    <img src={thumbnailPreview}
+                         alt="preview"
+                         className="mt-2 max-h-48 rounded border" />)}
+              </>)}
+        </div>
+
+        {/* タグ */}
+        <div>
+          <label className="block font-semibold">タグ</label>
+          <select multiple
+                  value={tagIds.map (String)}
+                  onChange={e => {
+                    const values = Array.from (e.target.selectedOptions).map (o => Number (o.value))
+                    setTagIds (values)
+                  }}
+                  className="w-full p-2 border rounded h-32">
+            {tags.map ((tag: Tag) => (
+                <option key={tag.id} value={tag.id}>
+                  {tag.name}
+                </option>))}
+          </select>
+        </div>
+
+        {/* 送信 */}
+        <button onClick={handleSubmit}
+                className="px-4 py-2 bg-blue-600 text-white rounded">
+          追加
+        </button>
+      </div>)
+}
+
+
+export default PostNewPage