#95

#297

#297

#297

#297

#297

Merge remote-tracking branch 'origin/main' into feature/297

#297

#297

#297

#297

#297

#297

#297

#297

#297

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #299

backend/app/controllers/tags_controller.rb

@@ -2,8 +2,8 @@ class TagsController < ApplicationController
   def index
     post_id = params[:post]
 
-    name = params[:name].to_s.strip.presence
+    name = params[:name].presence
-    category = params[:category].to_s.strip.presence
+    category = params[:category].presence
     post_count_between = (params[:post_count_gte].presence || -1).to_i,
                          (params[:post_count_lte].presence || -1).to_i
     post_count_between[0] = nil if post_count_between[0] < 0
@@ -36,9 +36,7 @@ class TagsController < ApplicationController
         .includes(:tag_name, tag_name: :wiki_page)
     q = q.where(posts: { id: post_id }) if post_id.present?
 
-    if name
+    q = q.where('tag_names.name LIKE ?', "%#{ name }%") if name
-      q = q.where('tag_names.name LIKE ?', "%#{ ActiveRecord::Base.sanitize_sql_like(name) }%")
-    end
     q = q.where(category: category) if category
     q = q.where('tags.post_count >= ?', post_count_between[0]) if post_count_between[0]
     q = q.where('tags.post_count <= ?', post_count_between[1]) if post_count_between[1]
@@ -79,7 +77,7 @@ class TagsController < ApplicationController
 
     alias_rows =
         TagName
-        .where('name LIKE ?', "#{ ActiveRecord::Base.sanitize_sql_like(q) }%")
+        .where('name LIKE ?', "#{ q }%")
         .where.not(canonical_id: nil)
         .pluck(:canonical_id, :name)
 
@@ -99,8 +97,7 @@ class TagsController < ApplicationController
         base
         .where(((with_nico ? '(tags.category = ? AND tag_names.name LIKE ?) OR ' : '') +
                 'tag_names.name LIKE ?'),
-               *(with_nico ? ['nico', "nico:#{ ActiveRecord::Base.sanitise_sql_like(q) }%"] : []),
+               *(with_nico ? ['nico', "nico:#{ q }%"] : []), "#{ q }%")
-               "#{ ActiveRecord::Base.sanitise_sql_like(q) }%")
 
     tags =
         if canonical_ids.present?

backend/app/controllers/theatre_comments_controller.rb

@@ -0,0 +1,32 @@
+class TheatreCommentsController < ApplicationController
+  def index
+    no_gt = params[:no_gt].to_i
+    no_gt = 0 if no_gt.negative?
+
+    comments = TheatreComment
+               .where(theatre_id: params[:theatre_id])
+               .where('no > ?', no_gt)
+               .order(no: :desc)
+
+    render json: comments.as_json(include: { user: { only: [:id, :name] } })
+  end
+
+  def create
+    return head :unauthorized unless current_user
+
+    content = params[:content]
+    return head :unprocessable_entity if content.blank?
+
+    theatre = Theatre.find_by(id: params[:theatre_id])
+    return head :not_found unless theatre
+
+    comment = nil
+    theatre.with_lock do
+      no = theatre.next_comment_no
+      comment = TheatreComment.create!(theatre:, no:, user: current_user, content:)
+      theatre.update!(next_comment_no: no + 1)
+    end
+
+    render json: comment, status: :created
+  end
+end

backend/app/controllers/theatres_controller.rb

@@ -31,7 +31,9 @@ class TheatresController < ApplicationController
       post_started_at = theatre.current_post_started_at
     end
 
-    render json: { host_flg:, post_id:, post_started_at: }
+    render json: {
+        host_flg:, post_id:, post_started_at:,
+        watching_users: theatre.watching_users.as_json(only: [:id, :name]) }
   end
 
   def next_post

backend/app/models/theatre_comment.rb

@@ -1,8 +1,8 @@
 class TheatreComment < ApplicationRecord
-  include MyDiscard
+  include Discard::Model
 
   self.primary_key = :theatre_id, :no
 
   belongs_to :theatre
+  belongs_to :user
 end
-

backend/config/routes.rb

@@ -78,5 +78,7 @@ Rails.application.routes.draw do
       put :watching
       patch :next_post
     end
+
+    resources :comments, controller: :theatre_comments, only: [:index, :create]
   end
 end

backend/spec/factories/theatre_comments.rb

@@ -0,0 +1,8 @@
+FactoryBot.define do
+  factory :theatre_comment do
+    association :theatre
+    association :user
+    sequence (:no) { |n| n }
+    content { 'test comment' }
+  end
+end

backend/spec/factories/theatres.rb

@@ -0,0 +1,11 @@
+FactoryBot.define do
+  factory :theatre do
+    name { 'Test Theatre' }
+    kind { 1 }
+    opens_at { Time.current }
+    closes_at { 1.day.from_now }
+    next_comment_no { 1 }
+
+    association :created_by_user, factory: :user
+  end
+end

backend/spec/requests/theatre_comments_spec.rb

@@ -0,0 +1,150 @@
+require 'rails_helper'
+
+RSpec.describe 'TheatreComments', type: :request do
+  def sign_in_as(user)
+    allow_any_instance_of(ApplicationController).to receive(:current_user).and_return(user)
+  end
+
+  describe 'GET /theatres/:theatre_id/comments' do
+    let(:theatre) { create(:theatre) }
+    let(:other_theatre) { create(:theatre) }
+    let(:alice) { create(:user, name: 'Alice') }
+    let(:bob) { create(:user, name: 'Bob') }
+
+    let!(:comment_3) do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 3,
+        user: alice,
+        content: 'third comment'
+      )
+    end
+
+    let!(:comment_1) do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 1,
+        user: alice,
+        content: 'first comment'
+      )
+    end
+
+    let!(:comment_2) do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 2,
+        user: bob,
+        content: 'second comment'
+      )
+    end
+
+    let!(:other_comment) do
+      create(
+        :theatre_comment,
+        theatre: other_theatre,
+        no: 1,
+        user: bob,
+        content: 'other theatre comment'
+      )
+    end
+
+    it 'theatre_id で絞り込み、no_gt より大きいものを no 降順で返す' do
+      get "/theatres/#{theatre.id}/comments", params: { no_gt: 1 }
+
+      expect(response).to have_http_status(:ok)
+      expect(response.parsed_body.map { |row| row['no'] }).to eq([3, 2])
+      expect(response.parsed_body.map { |row| row['content'] }).to eq([
+        'third comment',
+        'second comment'
+      ])
+    end
+
+    it 'user は id と name だけを含む' do
+      get "/theatres/#{theatre.id}/comments", params: { no_gt: 1 }
+
+      expect(response).to have_http_status(:ok)
+
+      expect(response.parsed_body.first['user']).to eq({
+        'id' => alice.id,
+        'name' => 'Alice'
+      })
+      expect(response.parsed_body.first['user'].keys).to contain_exactly('id', 'name')
+    end
+
+    it 'no_gt が負数なら 0 として扱う' do
+      get "/theatres/#{theatre.id}/comments", params: { no_gt: -100 }
+
+      expect(response).to have_http_status(:ok)
+      expect(response.parsed_body.map { |row| row['no'] }).to eq([3, 2, 1])
+    end
+  end
+
+  describe 'POST /theatres/:theatre_id/comments' do
+    let(:user) { create(:user, name: 'Alice') }
+    let(:theatre) { create(:theatre, next_comment_no: 2) }
+
+    before do
+      create(
+        :theatre_comment,
+        theatre: theatre,
+        no: 1,
+        user: user,
+        content: 'existing comment'
+      )
+    end
+
+    it '未ログインなら 401 を返す' do
+      expect {
+        post "/theatres/#{theatre.id}/comments", params: { content: 'hello' }
+      }.not_to change(TheatreComment, :count)
+
+      expect(response).to have_http_status(:unauthorized)
+    end
+
+    it 'content が blank なら 422 を返す' do
+      sign_in_as(user)
+
+      expect {
+        post "/theatres/#{theatre.id}/comments", params: { content: '   ' }
+      }.not_to change(TheatreComment, :count)
+
+      expect(response).to have_http_status(:unprocessable_entity)
+    end
+
+    it 'theatre が存在しなければ 404 を返す' do
+      sign_in_as(user)
+
+      expect {
+        post '/theatres/999999/comments', params: { content: 'hello' }
+      }.not_to change(TheatreComment, :count)
+
+      expect(response).to have_http_status(:not_found)
+    end
+
+    it 'コメントを作成し、user を紐づけ、next_comment_no を進める' do
+      sign_in_as(user)
+
+      expect {
+        post "/theatres/#{theatre.id}/comments", params: { content: 'new comment' }
+      }.to change(TheatreComment, :count).by(1)
+
+      expect(response).to have_http_status(:created)
+
+      comment = TheatreComment.find_by!(theatre: theatre, no: 2)
+
+      expect(comment.user).to eq(user)
+      expect(comment.content).to eq('new comment')
+      expect(theatre.reload.next_comment_no).to eq(3)
+
+      expect(response.parsed_body.slice('theatre_id', 'no', 'user_id', 'content')).to eq({
+        'theatre_id' => theatre.id,
+        'no' => 2,
+        'user_id' => user.id,
+        'content' => 'new comment'
+      })
+    end
+  end
+end

backend/spec/requests/theatres_spec.rb

@@ -117,11 +117,18 @@ RSpec.describe 'Theatres API', type: :request do
         expect(theatre.host_user_id).to eq(member.id)
         expect(watch.expires_at).to be_within(1.second).of(30.seconds.from_now)
 
-        expect(json).to eq(
+        expect(json).to include(
           'host_flg' => true,
           'post_id' => nil,
           'post_started_at' => nil
         )
+
+        expect(json.fetch('watching_users')).to contain_exactly(
+          {
+            'id' => member.id,
+            'name' => 'member user'
+          }
+        )
       end
     end
 
@@ -167,11 +174,22 @@ RSpec.describe 'Theatres API', type: :request do
         expect(response).to have_http_status(:ok)
         expect(theatre.reload.host_user_id).to eq(other_user.id)
 
-        expect(json).to eq(
+        expect(json).to include(
           'host_flg' => false,
           'post_id' => nil,
           'post_started_at' => nil
         )
+
+        expect(json.fetch('watching_users')).to contain_exactly(
+          {
+            'id' => member.id,
+            'name' => 'member user'
+          },
+          {
+            'id' => other_user.id,
+            'name' => 'other user'
+          }
+        )
       end
     end
 

frontend/package.json

@@ -15,6 +15,8 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/noto-sans-jp": "^5.2.9",
+    "@mdx-js/react": "^3.1.1",
+    "@mdx-js/rollup": "^3.1.1",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-toast": "^1.2.14",
@@ -37,13 +39,14 @@
     "react-youtube": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.0",
-    "zustand": "^5.0.8",
+    "unist-util-visit-parents": "^6.0.1",
-    "unist-util-visit-parents": "^6.0.1"
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@types/axios": "^0.14.4",
     "@types/markdown-it": "^14.1.2",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^24.0.13",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",

frontend/src/App.tsx

@@ -12,6 +12,7 @@ import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
 import NicoTagListPage from '@/pages/tags/NicoTagListPage'
 import NotFound from '@/pages/NotFound'
+import TOSPage from '@/pages/TOSPage.mdx'
 import PostDetailPage from '@/pages/posts/PostDetailPage'
 import PostHistoryPage from '@/pages/posts/PostHistoryPage'
 import PostListPage from '@/pages/posts/PostListPage'
@@ -59,6 +60,7 @@ const RouteTransitionWrapper = ({ user, setUser }: {
 	    <Route path="/wiki/changes" element={<WikiHistoryPage/>}/>
 	    <Route path="/users/settings" element={<SettingPage user={user} setUser={setUser}/>}/>
 	    <Route path="/settings" element={<Navigate to="/users/settings" replace/>}/>
+	    <Route path="/tos" element={<TOSPage/>}/>
 	    <Route path="*" element={<NotFound/>}/>
 	  </Routes>
 	</AnimatePresence>

frontend/src/components/PrefetchLink.tsx

@@ -71,7 +71,8 @@ export default forwardRef<HTMLAnchorElement, Props> (({
 	  || ev.metaKey
 	  || ev.ctrlKey
 	  || ev.shiftKey
-	  || ev.altKey)
+	  || ev.altKey
+	  || (rest.target && rest.target !== '_self'))
 	return
 
       ev.preventDefault ()

frontend/src/components/TopNav.tsx

@@ -28,19 +28,23 @@ export default (({ user }: Props) => {
 
   const measure = () => {
     const nav = navRef.current
-    const el = itemsRef.current[activeIdx]
+    const el = itemsRef.current[activeIdx < 0 ? menu.length : activeIdx]
-    if (!(nav) || !(el) || activeIdx < 0)
+
+    if (!(nav) || !(el))
+      {
+	setHL ({ left: 0, width: 0, visible: true })
 	return
+      }
 
     const navRect = nav.getBoundingClientRect ()
     const elRect = el.getBoundingClientRect ()
 
-    setHl ({ left:    elRect.left - navRect.left,
+    setHL ({ left:    elRect.left - navRect.left,
 	     width:   elRect.width,
 	     visible: true })
   }
 
-  const [hl, setHl] = useState<{ left: number; width: number; visible: boolean }> ({
+  const [hl, setHL] = useState<{ left: number; width: number; visible: boolean }> ({
       left:     0,
       width:    0,
       visible:  false })
@@ -79,9 +83,11 @@ export default (({ user }: Props) => {
 	  { name: '上位タグ', to: '/tags/implications', visible: false },
 	  { name: 'ニコニコ連携', to: '/tags/nico' },
 	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' }] },
-      // TODO: 本実装時に消す．
+      { name: '上映会', to: '/theatres/1', base: '/theatres', subMenu: [
-      // { name: '上映会', to: '/theatres/1', base: '/theatres', subMenu: [
+          { name: <>第&thinsp;1&thinsp;会場</>, to: '/theatres/1' },
-      //     { name: '一覧', to: '/theatres' }] },
+          { name: 'CyTube', to: '//cytube.mm428.net/r/deernijika' },
+	  { name: <>ニジカ放送局第&thinsp;1&thinsp;チャンネル</>,
+	    to: '//www.youtube.com/watch?v=DCU3hL4Uu6A' }] },
       { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
 	  { name: '検索', to: '/wiki' },
 	  { name: '新規', to: '/wiki/new' },
@@ -92,7 +98,7 @@ export default (({ user }: Props) => {
 	    visible: wikiPageFlg },
 	  { name: '履歴', to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
 	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`, visible: wikiPageFlg }] },
-      { name: 'ユーザ', to: '/users', subMenu: [
+      { name: 'ユーザ', to: '/users/settings', subMenu: [
 	  { name: '一覧', to: '/users', visible: false },
 	  { name: 'お前', to: `/users/${ user?.id }`, visible: false },
 	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] }]
@@ -110,9 +116,6 @@ export default (({ user }: Props) => {
   const dir = dirRef.current
 
   useLayoutEffect (() => {
-    if (activeIdx < 0)
-      return
-
     const raf = requestAnimationFrame (measure)
     const onResize = () => requestAnimationFrame (measure)
 
@@ -169,6 +172,15 @@ export default (({ user }: Props) => {
 				     (i === openItemIdx) && 'font-bold')}>
 		    {item.name}
 		  </PrefetchLink>))}
+	      <PrefetchLink
+		  to="#"
+		  ref={(el: (HTMLAnchorElement | null)) => {
+		    itemsRef.current[menu.length] = el
+		  }}
+		  className={cn ('relative z-10 flex h-full items-center px-5',
+				 (openItemIdx < 0) && 'font-bold')}>
+		その他 &raquo;
+	      </PrefetchLink>
 	    </div>
 	  </div>
 
@@ -186,8 +198,17 @@ export default (({ user }: Props) => {
 	  </a>
 	</nav>
 
-	<div className="relative hidden md:flex bg-yellow-200 dark:bg-red-950
+	<AnimatePresence initial={false}>
-			items-center w-full min-h-[40px] overflow-hidden">
+	  {(menu[activeIdx]?.subMenu ?? []).length > 0 && (
+	      <motion.div
+		  key="submenu-shell"
+		  className="relative hidden md:block overflow-hidden
+			     bg-yellow-200 dark:bg-red-950"
+		  initial={{ height: 0 }}
+		  animate={{ height: 40 }}
+		  exit={{ height: 0 }}
+		  transition={{ duration: .2, ease: 'easeOut' }}>
+		<div className="relative h-[40px]">
 		  <AnimatePresence initial={false} custom={dir}>
 		    <motion.div
 			key={activeIdx}
@@ -209,12 +230,15 @@ export default (({ user }: Props) => {
 			      <PrefetchLink
 				  key={`l-${ i }`}
 				  to={item.to}
+				  target={item.to.slice (0, 2) === '//' ? '_blank' : undefined}
 				  className="h-full flex items-center px-3">
 				{item.name}
 			      </PrefetchLink>)))}
 		    </motion.div>
 		  </AnimatePresence>
 		</div>
+	      </motion.div>)}
+	</AnimatePresence>
 
 	<AnimatePresence initial={false}>
 	  {menuOpen && (
@@ -275,6 +299,9 @@ export default (({ user }: Props) => {
 				      <PrefetchLink
 					  key={`sp-l-${ i }-${ j }`}
 					  to={subItem.to}
+					  target={subItem.to.slice (0, 2) === '//'
+						  ? '_blank'
+						  : undefined}
 					  className="w-full min-h-[36px] flex items-center pl-12">
 					{subItem.name}
 				      </PrefetchLink>)))}

frontend/src/mdx-components.tsx

@@ -0,0 +1,9 @@
+import type { MDXComponents } from 'mdx/types'
+
+import PageTitle from '@/components/common/PageTitle'
+import SectionTitle from '@/components/common/SectionTitle'
+
+
+export const useMDXComponents = (): MDXComponents => ({
+    h1: props => <PageTitle {...props}/>,
+    h2: props => <SectionTitle {...props}/> })

frontend/src/pages/TOSPage.mdx

@@ -0,0 +1,136 @@
+import { Helmet } from 'react-helmet-async'
+import MainArea from '@/components/layout/MainArea'
+import { SITE_TITLE } from '@/config'
+import { dateString } from '@/lib/utils'
+
+
+<MainArea>
+  <Helmet>
+    <title>{`利用規約 | ${ SITE_TITLE }`}</title>
+  </Helmet>
+
+  <article className="prose mx-auto p-4">
+    # 利用規約
+
+    最終更新日: {dateString ('2026-03-27', 'hour')}
+
+    この利用規約（以下「本規約」）は、ぼざクリ タグ広場（以下「本サービス」）の利用条件を定めるものです。利用者は、本サービスを利用した時点で、本規約に同意したものとみなされます。
+
+    ## 第 1 条 本サービスの位置づけ
+
+    1. 本サービスは、タグ・Wiki・外部リンクの整理を中心とする知識共有基盤です。
+    2. 本サービスの中心価値は、コンテンツそのものの再配布ではなく、タグを軸にした整理、検索、再発見、および周辺知識の蓄積にあります。
+    3. 本サービスは、運営上の必要に応じて、機能、公開範囲、名称、URL、表示内容その他の仕様を変更することがあります。
+
+    ## 第 2 条 公開方針と利用者区分
+
+    1. 本サービスは、初回一般公開時点では、**誰でも閲覧できる一方で、投稿・編輯は申請制** とします。
+    2. 初回一般公開時点では、通常の農奴は閲覧のみを行えます。
+    3. 投稿、タグ編輯、Wiki 編輯その他の耕作行為は、運営が承認した利用者（以下「耕作員」）に限って認めます。
+    4. 独裁者は、耕作員に加えて、差し戻し、削除、利用制限、その他の管理操作を行えます。
+    5. 運営は、履歴管理、差し戻し、BAN 運用、監査導線その他の運営装備がじゅうぶんに整ったと判断した場合、農奴に一部の編輯権限を開放することがあります。
+    6. 利用者区分、権限範囲、申請条件、承認基準、承認後の取扱いは、運営が必要に応じて定め、変更できます。
+
+    ## 第 3 条 利用開始と引継ぎコード
+
+    1. 本サービスでは、一般的な Id. / パスワード方式ではなく、運営が別途定める認証情報または引継ぎコードを用いる場合があります。
+    2. 利用者は、自身に割り当てられた引継ぎコード、認証情報、端末上の保存情報を自己の責任で管理するものとします。
+    3. 利用者は、自己の引継ぎコードまたは認証情報を第 3 者に譲渡、貸与、共有、漏洩してはなりません。
+    4. 引継ぎコードの漏洩、第 3 者利用、紛失、盗用その他の事故によって利用者または第 3 者に生じた損害について、運営は責任を負いません。
+    5. 運営は、本人確認、濫用対策、監査対応または保守のため、利用情報とアクセス元情報を関聯づけて扱うことがあります。
+
+    ## 第 4 条 申請制編輯の基本ルール
+
+    1. 耕作員は、タグ整理基盤の品質維持を最優先し、個人的な所有主張ではなく、検索性、再利用性、可読性、整合性を重視して編輯しなければなりません。
+    2. 耕作員は、主観的な好悪、内輪ネタ、報復、私怨、対立誘導のためにタグや Wiki を操作してはなりません。
+    3. 耕作員は、誤りの修正、体系の整理、リンクの保守、知識の補足を目的として編輯を行うものとします。
+    4. 運営は、申請内容、過去の行動、編輯品質、聯絡可能性、運営負荷その他の事情を考慮して、承認、保留、拒否、取消しを行えます。
+    5. 耕作員資格は権利ではなく、運営が本サービスの維持のために付与する可撤回の権限です。
+
+    ## 第 5 条 禁止事項
+
+    利用者は、以下の行為をしてはなりません。
+
+    1. 法令または公序良俗に違反する行為。
+    2. 犯罪を助長し、またはこれに結びつく行為。
+    3. 著作権、著作者人格権、商標権、肖像権、パブリシティ権、プライバシー権その他第 3 者の権利を侵害する行為。
+    4. 無断転載、違法アップロード、違法複製物、海賊版、権限のない転載先への誘導、またはそれらを正当化、拡散、補助する行為。
+    5. 実在人物に関する名誉毀損、侮辱、差別、脅迫、晒し、つきまとい、嫌がらせ、私刑の扇動その他の加害行為。
+    6. 個人情報、非公開情報、秘匿されるべき情報を本人の承諾なく掲載、送信、共有、推測可能な形で開示する行為。
+    7. 虚偽の情報、誤解を招く情報、出典を偽装した情報、意図的なミスリード、荒らし目的のタグづけ、関係のないタグの大量付与、分類妨碍、検索妨碍その他の品質破壊行為。
+    {/* 8. 自動化ツール、スクリプト、Bot その他の手段を用いて、運営の許可なく大量投稿、大量編集、大量アクセス、過剰なスクレイピング、過負荷送信を行う行為。 */}
+    {/* 9. 脆弱性の探索、過度な負荷試験、リバースエンジニアリング、認可回避、BAN 回避、なりすまし、セッション奪取その他の不正アクセスに類する行為。 */}
+    10. マルウェア、フィッシング、詐欺、誘導広告、悪質なリダイレクト、危険な外部リンクその他利用者または運営に危害を与える行為。
+    11. 本サービスの趣旨に照らして不相当な政治的扇動、宗教勧誘、商業宣伝、連鎖的勧誘、スパム、同一内容の反復送信。
+    12. 未成年の安全に反する行為、児童性的搾取、違法または著しく不適切な性的表現、過度に露骨な性表現や残虐表現を、一般公開導線に無警告で流し込む行為。
+    13. 運営、他の利用者、外部サービスまたは第 3 者に著しい負担、不利益、混乱を生じさせる行為。
+    14. 前各号のいずれかを試みる行為、教唆する行為、容易にする行為。
+    15. その他、運営が本サービスの目的または安全な運営に照らして不適切と判断する行為。
+
+    ## 第 6 条 投稿、タグ、Wiki 等の取扱い
+
+    1. 利用者は、自らが投稿、編輯、登録、送信または変更する情報について、必要な権利を有し、または適法に利用できる状態でなければなりません。
+    2. 利用者は、自らが行った投稿、タグづけ、Wiki 編輯、説明文、コメント、関聯づけその他の行為について責任を負います。
+    3. 利用者は、運営に対し、本サービスの運営、表示、複製、保存、配信、整形、引用、履歴表示、差し戻し、バックアップ、障碍対応および弘報のために必要な範囲で、当該利用者生成情報を無償で利用する非独占的な権利を許諾するものとします。
+    4. 前項の許諾は、本サービスの運営上必要な範囲に限られ、利用者の権利帰属自体を運営へ移転するものではありません。
+    5. 運営は、分類整合性、表記統一、誤記修正、別名統合、差し戻しその他の理由により、投稿、タグ、Wiki その他の内容を編輯、非表示化、削除、統合、分割または凍結できます。
+
+    ## 第 7 条 外部リンクと埋め込み
+
+    1. 本サービスは、外部サイトへのリンク、外部コンテンツの埋め込みまたはそれらに関するメタデータを表示する場合があります。
+    2. 外部リンク先または埋め込み先の権利、利用条件、公開範囲、削除方針、広告、追跡、Cookie その他の取扱いは、当該外部サービスの定めに従います。
+    3. 運営は、外部リンク先の適法性、安全性、継続性、正確性、品質、可用性、または内容の完全性を保証しません。
+    4. 外部権利者からの申立て、運営判断、法令対応または安全性確保のため、運営は外部リンク、埋め込み、サムネイル、説明文その他の表示を制限、差替え、非表示または削除できます。
+
+    ## 第 8 条 履歴、差し戻し、削除
+
+    1. 本サービスでは、保守、監査、荒らし対策、説明責任その他の目的で、投稿、タグ、Wiki その他の変更履歴を保持し、表示し、または内部的に参照することがあります。
+    2. 利用者は、一度行った編輯が、後に差し戻し、修正、非表示化または削除されることがあることをあらかじめ承諾するものとします。
+    3. 利用者が削除を希望した場合でも、法令上、保守上、監査上、紛争対応上またはバックアップ上の必要により、直ちに完全消去できないことがあります。
+    4. 運営は、本サービス全体の健全性を維持するため、説明の有無を問わず、履歴の表示範囲、保存期間、差し戻し方針、削除方針を定め、変更できます。
+
+    ## 第 9 条 利用制限、資格取消し、BAN
+
+    1. 運営は、利用者が次のいずれかに該当すると判断した場合、事前の通知なく、または通知後に、投稿・編輯の制限、耕作員資格の取消し、コンテンツの非表示または削除、引継ぎコードの失効、ユーザ BAN、IP BAN その他必要な措置を行えます。
+      - 本規約に違反した場合
+      - 本サービスの趣旨に反する運用妨害、荒らし、品質破壊行為を行った場合
+      - 運営からの確認、修正要請、停止要請に合理的理由なく応じない場合
+      - 登録情報、申請内容または説明に虚偽がある場合
+      - 安全性、法令順守、運営継続の観点から措置が必要と判断された場合
+    2. 運営は、前項の措置について、その理由、基準、証拠または内部判断過程を常に開示する義務を負いません。
+    3. 利用制限または資格取消し後も、運営は、必要に応じて履歴、ログ、申請記録、通報記録その他のデータを保持できます。
+
+    ## 第 10 条 未成年の利用
+
+    {/* 1. 未成年者は、法定代理人の同意を得たうえで本サービスを利用しなければなりません。 */}
+    2. 運営は、未成年の安全確保の観点から、年齢に応じた表示制限、導線制御、非表示化、削除、申請拒否その他の措置を行えます。
+    3. 利用者は、未成年が閲覧しうる一般公開面において、未成年に不適切な内容を無警告で流し込まないものとします。
+
+    ## 第 11 条 お問い合わせ、通報、御意見番
+
+    1. 利用者は、本サービスが別途案内する問い合わせ、通報または御意見板の導線を通じて、バグ報告、問題報告、削除要請その他の聯絡を行えます。
+    {/* 2. 運営は、再現、調査、保守または安全確保のため、操作ログ、画面情報、環境情報その他の関連情報の提出または自動添付を求めることがあります。 */}
+    3. 運営は、すべての問い合わせに回答する義務を負わず、回答期限、対応結果または対応方法を保証しません。
+
+    ## 第 12 条 免責
+
+    1. 運営は、本サービスについて、特定目的適合性、完全性、正確性、継続性、安全性、無瑕疵性、または利用者の期待への適合を保証しません。
+    2. 運営は、外部リンク先、外部埋め込み先、第 3 者投稿、利用者同士の紛争、通信障碍、データ消失、誤分類、誤リンク、誤記、差し戻し、機能停止または仕様変更によって生じた損害について、責任を負いません。
+    3. 本サービスは、予告なく停止、終了、変更または縮小されることがあります。
+
+    ## 第 13 条 規約の変更
+
+    1. 運営は、法令改正、機能追加、運用方針の変更、安全対策、表現調整その他の理由により、本規約を変更できます。
+    2. 変更後の本規約は、本サービス上に掲載された時点または運営が別途定める時点から効力を生じます。
+    3. 変更後に利用を継続した利用者は、変更後の本規約に同意したものとみなされます。
+
+    ## 第 14 条 準拠法および管轄
+
+    1. 本規約および本サービスの利用には、日本法を準拠法とします。
+    2. 本規約または本サービスに関して生じた一切の紛争については、運営の所在地を管轄する裁判所を第 1 審の専属的合意管轄裁判所とします。ただし、法令に別段の定めがある場合はこの限りではありません。
+
+    ## 附則
+
+    本規約は、{dateString ('2026-03-27', 'hour')} から適用します。
+  </article>
+</MainArea>

frontend/src/pages/theatres/TheatreDetailPage.tsx

@@ -2,85 +2,225 @@ import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 
+import ErrorScreen from '@/components/ErrorScreen'
 import PostEmbed from '@/components/PostEmbed'
+import PrefetchLink from '@/components/PrefetchLink'
+import TagDetailSidebar from '@/components/TagDetailSidebar'
 import MainArea from '@/components/layout/MainArea'
+import SidebarComponent from '@/components/layout/SidebarComponent'
 import { SITE_TITLE } from '@/config'
-import { apiGet, apiPatch, apiPut } from '@/lib/api'
+import { apiGet, apiPatch, apiPost, apiPut } from '@/lib/api'
 import { fetchPost } from '@/lib/posts'
+import { dateString } from '@/lib/utils'
 
 import type { FC } from 'react'
 
-import type { NiconicoMetadata, NiconicoViewerHandle, Post, Theatre } from '@/types'
+import type { NiconicoMetadata,
+	      NiconicoViewerHandle,
+	      Post,
+	      Theatre,
+	      TheatreComment } from '@/types'
 
 type TheatreInfo = {
     hostFlg:        boolean
     postId:         number | null
-    postStartedAt:  string | null }
+    postStartedAt:  string | null
+    watchingUsers:  { id: number; name: string }[] }
+
+const INITIAL_THEATRE_INFO =
+    { hostFlg: false,
+      postId: null,
+      postStartedAt: null,
+      watchingUsers: [] as { id: number; name: string }[] } as const
 
 
 export default (() => {
   const { id } = useParams ()
 
+  const commentsRef = useRef<HTMLDivElement> (null)
   const embedRef = useRef<NiconicoViewerHandle> (null)
+  const theatreInfoRef = useRef<TheatreInfo> (INITIAL_THEATRE_INFO)
+  const videoLengthRef = useRef (0)
+  const lastCommentNoRef = useRef (0)
 
+  const [comments, setComments] = useState<TheatreComment[]> ([])
+  const [content, setContent] = useState ('')
   const [loading, setLoading] = useState (false)
+  const [sending, setSending] = useState (false)
+  const [status, setStatus] = useState (200)
   const [theatre, setTheatre] = useState<Theatre | null> (null)
-  const [theatreInfo, setTheatreInfo] =
+  const [theatreInfo, setTheatreInfo] = useState<TheatreInfo> (INITIAL_THEATRE_INFO)
-      useState<TheatreInfo> ({ hostFlg: false, postId: null, postStartedAt: null })
   const [post, setPost] = useState<Post | null> (null)
-  const [videoLength, setVideoLength] = useState (9_999_999_999)
+  const [videoLength, setVideoLength] = useState (0)
+
+  useEffect (() => {
+    theatreInfoRef.current = theatreInfo
+  }, [theatreInfo])
+
+  useEffect (() => {
+    videoLengthRef.current = videoLength
+  }, [videoLength])
+
+  useEffect (() => {
+    lastCommentNoRef.current = comments[0]?.no ?? 0
+  }, [comments])
 
   useEffect (() => {
     if (!(id))
       return
 
+    let cancelled = false
+
+    setComments ([])
+    setTheatre (null)
+    setPost (null)
+    setTheatreInfo (INITIAL_THEATRE_INFO)
+    setVideoLength (0)
+    lastCommentNoRef.current = 0
+
     void (async () => {
-      setTheatre (await apiGet<Theatre> (`/theatres/${ id }`))
+      try
+      {
+	const data = await apiGet<Theatre> (`/theatres/${ id }`)
+	if (!(cancelled))
+	  setTheatre (data)
+      }
+      catch (error)
+      {
+	setStatus ((error as any)?.response.status ?? 200)
+      }
     }) ()
 
-    const interval = setInterval (async () => {
+    return () => {
-      if (theatreInfo.hostFlg
+      cancelled = true
-	  && theatreInfo.postStartedAt
+    }
-	  && ((new Date).getTime () - (new Date (theatreInfo.postStartedAt)).getTime ()
+  }, [id])
-	      > videoLength))
-	setTheatreInfo ({ hostFlg: true, postId: null, postStartedAt: null })
-      else
-	setTheatreInfo (await apiPut<TheatreInfo> (`/theatres/${ id }/watching`))
-    }, 1_000)
-
-    return () => clearInterval (interval)
-  }, [id, theatreInfo.hostFlg, theatreInfo.postStartedAt, videoLength])
 
   useEffect (() => {
-    if (!(theatreInfo.hostFlg) || loading)
+    if (!(id))
       return
 
-    if (theatreInfo.postId == null)
+    let cancelled = false
+    let running = false
+
+    const tick = async () => {
+      if (running)
+	return
+
+      running = true
+
+      try
       {
-	void (async () => {
+	const newComments = await apiGet<TheatreComment[]> (
-	  setLoading (true)
+	    `/theatres/${ id }/comments`,
-	  await apiPatch<void> (`/theatres/${ id }/next_post`)
+	    { params: { no_gt: lastCommentNoRef.current } })
-	  setLoading (false)
+
-	}) ()
+	if (!(cancelled) && newComments.length > 0)
+	  {
+	    lastCommentNoRef.current = newComments[newComments.length - 1].no
+	    setComments (prev => [...newComments, ...prev])
+	  }
+
+	const currentInfo = theatreInfoRef.current
+	const ended =
+	    currentInfo.hostFlg
+	    && currentInfo.postStartedAt
+	    && ((Date.now () - (new Date (currentInfo.postStartedAt)).getTime ())
+	        > videoLengthRef.current + 3_000)
+
+	if (ended)
+	  {
+	    if (!(cancelled))
+	      setTheatreInfo (prev => ({ ...prev, postId: null, postStartedAt: null }))
+
 	    return
 	  }
-  }, [id, loading, theatreInfo.hostFlg, theatreInfo.postId])
+
+	const nextInfo = await apiPut<TheatreInfo> (`/theatres/${ id }/watching`)
+	if (!(cancelled))
+	  setTheatreInfo (nextInfo)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
+      finally
+      {
+	running = false
+      }
+    }
+
+    tick ()
+    const interval = setInterval (() => tick (), 1_500)
+
+    return () => {
+      cancelled = true
+      clearInterval (interval)
+    }
+  }, [id])
 
   useEffect (() => {
+    if (!(id) || !(theatreInfo.hostFlg) || loading || theatreInfo.postId != null)
+      return
+
+    let cancelled = false
+
+    void (async () => {
+      setLoading (true)
+
+      try
+      {
+	await apiPatch<void> (`/theatres/${ id }/next_post`)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
+      finally
+      {
+	if (!(cancelled))
+	  setLoading (false)
+      }
+    }) ()
+
+    return () => {
+      cancelled = true
+    }
+  }, [id, theatreInfo.hostFlg, theatreInfo.postId])
+
+  useEffect (() => {
+    setVideoLength (0)
+
     if (theatreInfo.postId == null)
       return
 
+    let cancelled = false
+
     void (async () => {
-      setPost (await fetchPost (String (theatreInfo.postId)))
+      try
+      {
+	const nextPost = await fetchPost (String (theatreInfo.postId))
+	if (!(cancelled))
+	  setPost (nextPost)
+      }
+      catch (error)
+      {
+	console.error (error)
+      }
     }) ()
-  }, [theatreInfo.postId, theatreInfo.postStartedAt])
+
+    return () => {
+      cancelled = true
+    }
+  }, [theatreInfo.postId])
 
   const syncPlayback = (meta: NiconicoMetadata) => {
     if (!(theatreInfo.postStartedAt))
       return
 
-    const targetTime =
+    const targetTime = Math.min (
-	((new Date).getTime () - (new Date (theatreInfo.postStartedAt)).getTime ())
+	Math.max (0, Date.now () - (new Date (theatreInfo.postStartedAt)).getTime ()),
+	videoLength)
 
     const drift = Math.abs (meta.currentTime - targetTime)
 
@@ -88,8 +228,11 @@ export default (() => {
       embedRef.current?.seek (targetTime)
   }
 
+  if (status >= 400)
+    return <ErrorScreen status={status}/>
+
   return (
-      <MainArea>
+      <div className="md:flex md:flex-1">
 	<Helmet>
 	  {theatre && (
 	      <title>
@@ -99,16 +242,100 @@ export default (() => {
 	      </title>)}
 	</Helmet>
 
-	{post && (
+	<div className="hidden md:block">
+	  {post && <TagDetailSidebar post={post}/>}
+	</div>
+
+	<MainArea>
+	  {post ? (
+	      <>
 		<PostEmbed
+		    key={post.id}
 		    ref={embedRef}
 		    post={post}
 		    onLoadComplete={info => {
 		      embedRef.current?.play ()
 		      setVideoLength (info.lengthInSeconds * 1_000)
 		    }}
-		onMetadataChange={meta => {
+		    onMetadataChange={syncPlayback}/>
-		  syncPlayback (meta)
+		<div className="m-2">
-		}}/>)}
+		  <>再生中：</>
-      </MainArea>)
+		  <PrefetchLink to={`/posts/${ post.id }`} className="font-bold">
+		    {post.title || post.url}
+		  </PrefetchLink>
+		</div>
+	      </>) : 'Loading...'}
+	</MainArea>
+
+	<SidebarComponent>
+	  <form
+	      className="w-auto h-auto border border-black dark:border-white rounded mx-2"
+	      onSubmit={async e => {
+		e.preventDefault ()
+
+		if (!(content))
+		  return
+
+		try
+		{
+		  setSending (true)
+		  await apiPost (`/theatres/${ id }/comments`, { content })
+		  setContent ('')
+		  commentsRef.current?.scrollTo ({ top: 0, behavior: 'smooth' })
+		}
+		finally
+		{
+		  setSending (false)
+		}
+	      }}>
+	    <input
+		className="w-full p-2 border rounded"
+		type="text"
+		placeholder="ここにコメントを入力"
+		value={content}
+		onChange={e => setContent (e.target.value)}
+		disabled={sending}/>
+
+	    <div
+		ref={commentsRef}
+		className="overflow-x-hidden overflow-y-scroll text-wrap w-full
+			   h-[32vh] md:h-[64vh] border rounded">
+	      {comments.map (comment => (
+		  <div key={comment.no} className="p-2">
+		    <div className="w-full">
+		      {comment.content}
+		    </div>
+		    <div className="w-full text-sm text-right">
+		      by {comment.user
+			  ? (comment.user.name || `名もなきニジラー（#${ comment.user.id }）`)
+			  : '運営'}
+		    </div>
+		    <div className="w-full text-sm text-right">
+		      {dateString (comment.createdAt)}
+		    </div>
+		  </div>))}
+	    </div>
+	  </form>
+
+	  <div className="w-auto h-auto border border-black dark:border-white rounded mx-2 mt-4">
+	    <div className="p-2">
+		現在の同接数：{theatreInfo.watchingUsers.length}
+	    </div>
+
+	    <div className="overflow-x-hidden overflow-y-scroll text-wrap w-full h-32
+			    border rounded">
+	      <ul className="list-inside list-disc">
+		{theatreInfo.watchingUsers.map (user => (
+		    <li key={user.id} className="px-4 py-1 text-sm">
+		      {user.name || `名もなきニジラー（#${ user.id }）`}
+		    </li>))}
+	      </ul>
+	    </div>
+	  </div>
+	</SidebarComponent>
+
+	<div className="md:hidden">
+	  {post && <TagDetailSidebar post={post} sp/>}
+	</div>
+      </div>)
 }) satisfies FC

frontend/src/types.ts

@@ -52,7 +52,7 @@ export type FetchTagsParams = {
 export type Menu = MenuItem[]
 
 export type MenuItem = {
-    name:     string
+    name:     ReactNode
     to:       string
     base?:    string
     subMenu:  SubMenuItem[] }
@@ -117,7 +117,7 @@ export type PostTagChange = {
 export type SubMenuItem =
     | { component:  ReactNode
 	visible:    boolean }
-    | { name:     string
+    | { name:     ReactNode
 	to:       string
 	visible?: boolean }
 
@@ -141,6 +141,13 @@ export type Theatre = {
     createdAt:      string
     updatedAt:      string }
 
+export type TheatreComment = {
+    theatreId:  number,
+    no:         number,
+    user:       { id: number, name: string } | null
+    content:    string
+    createdAt:  string }
+
 export type User = {
     id:               number
     name:             string | null

frontend/vite.config.ts

@@ -1,11 +1,12 @@
-import { defineConfig } from 'vite'
+import mdx from '@mdx-js/rollup'
 import react from '@vitejs/plugin-react'
 import path from 'path'
+import { defineConfig } from 'vite'
 
 
 // https://vite.dev/config/
 export default defineConfig ({
-    plugins:  [react()],
+    plugins:  [mdx ({ providerImportSource: '@/mdx-components' }), react ()],
     resolve:  { alias: { '@': path.resolve (__dirname, './src') } },
     server:   { host:         true,
 		port:         5173,