スライドのセリフ編集機能を追加

locales/ja/translation.json

@@ -159,6 +159,8 @@
   "ShowCharacterPresetMenu": "キャラクタープリセットメニューボタンを表示する",
   "SlideMode": "スライドモード",
   "SelectedSlideDocs": "使用するスライド",
+  "EditSlideScripts": "セリフ編集",
+  "PleaseSelectSlide": "スライドを選択してください",
   "SlideModeDescription": "AIが自動でスライドを発表するモードです。選択しているAIサービスがOpenAI, Anthropic Claude, Google Geminiの場合のみ有効です。",
   "PdfConvertLabel": "PDFスライド変換",
   "PdfConvertDescription": "PDFをスライドモード用のデータに変換します。選択しているAIサービスがOpenAI, Anthropic Claude, Google Geminiの場合のみ利用可能です。",

src/components/settings/messageReceiver.tsx

@@ -1,8 +1,10 @@
 import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import Image from 'next/image'
 import settingsStore from '@/features/stores/settings'
 import { TextButton } from '../textButton'
 import { v4 as uuidv4 } from 'uuid'
+import Link from 'next/link'
 
 const MessageReceiverSetting = () => {
   const { t } = useTranslation()
@@ -45,14 +47,22 @@ const MessageReceiverSetting = () => {
             <div className="bg-gray-100 p-2 rounded">{clientId}</div>
           </div>
           <div className="mt-4">
-            <a
-              href="/send-message"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-black hover:text-gray-800 hover:underline transition-all duration-300 ease-in-out"
-            >
-              {t('OpenSendMessagePage')}
-            </a>
+            <Link href={`/send-message`} passHref legacyBehavior>
+              <a
+                target="_blank" // 新しいタブで開く
+                rel="noopener noreferrer"
+                className="inline-flex items-center px-3 py-2 text-sm bg-primary hover:bg-primary-hover rounded-3xl text-white font-bold transition-colors duration-200 whitespace-nowrap"
+              >
+                {t('OpenSendMessagePage')}
+                <Image
+                  src="/images/icons/external-link.svg"
+                  alt={t('OpenInNewTab')}
+                  width={16}
+                  height={16}
+                  className="ml-1"
+                />
+              </a>
+            </Link>
           </div>
         </>
       )}

src/components/settings/slide.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useState } from 'react'
 import Image from 'next/image'
+import Link from 'next/link' // Link をインポート
 import settingsStore, {
   multiModalAIServices,
   multiModalAIServiceKey,
@@ -30,13 +31,6 @@ const Slide = () => {
     }
   }, [slideMode, updateKey])
 
-  useEffect(() => {
-    // 初期値を 'demo' に設定
-    if (!selectedSlideDocs) {
-      slideStore.setState({ selectedSlideDocs: 'demo' })
-    }
-  }, [selectedSlideDocs])
-
   const handleFolderUpdate = () => {
     setUpdateKey((prevKey) => prevKey + 1) // 更新トリガー
   }
@@ -92,19 +86,46 @@ const Slide = () => {
           <div className="mt-6 mb-4 text-xl font-bold">
             {t('SelectedSlideDocs')}
           </div>
-          <select
-            id="folder-select"
-            className="px-4 py-2 bg-white hover:bg-white-hover rounded-lg w-full md:w-1/2"
-            value={selectedSlideDocs}
-            onChange={handleFolderChange}
-            key={updateKey}
-          >
-            {slideFolders.map((folder) => (
-              <option key={folder} value={folder}>
-                {folder}
-              </option>
-            ))}
-          </select>
+          {/* プルダウンと編集ボタンを横並びにする */}
+          <div className="flex items-center gap-2">
+            <select
+              id="folder-select"
+              className="px-4 py-2 bg-white hover:bg-white-hover rounded-lg w-full md:w-1/2"
+              value={selectedSlideDocs || ''}
+              onChange={handleFolderChange}
+              key={updateKey}
+            >
+              <option value="">{t('PleaseSelectSlide')}</option>
+              {slideFolders.map((folder) => (
+                <option key={folder} value={folder}>
+                  {folder}
+                </option>
+              ))}
+            </select>
+            {/* 編集ページへのリンクボタン */}
+            {selectedSlideDocs && ( // スライドが選択されている場合のみ表示
+              <Link
+                href={`/slide-editor/${selectedSlideDocs}`}
+                passHref
+                legacyBehavior
+              >
+                <a
+                  target="_blank" // 新しいタブで開く
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center px-3 py-2 text-sm bg-primary hover:bg-primary-hover rounded-3xl text-white font-bold transition-colors duration-200 whitespace-nowrap"
+                >
+                  {t('EditSlideScripts')}
+                  <Image
+                    src="/images/icons/external-link.svg"
+                    alt={t('OpenInNewTab')}
+                    width={16}
+                    height={16}
+                    className="ml-1"
+                  />
+                </a>
+              </Link>
+            )}
+          </div>
           {multiModalAIServices.includes(
             selectAIService as multiModalAIServiceKey
           ) && <SlideConvert onFolderUpdate={handleFolderUpdate} />}

src/components/slideControls.tsx

@@ -8,6 +8,7 @@ interface SlideControlsProps {
   prevSlide: () => void
   nextSlide: () => void
   toggleIsPlaying: () => void
+  showPlayButton?: boolean // 中央ボタン表示制御用プロパティ (オプショナル)
 }
 
 const SlideControls: React.FC<SlideControlsProps> = ({
@@ -17,37 +18,37 @@ const SlideControls: React.FC<SlideControlsProps> = ({
   prevSlide,
   nextSlide,
   toggleIsPlaying,
+  showPlayButton = true, // デフォルトは表示する
 }) => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        marginTop: '20px',
-      }}
-    >
-      <div>
-        <IconButton
-          iconName="24/Prev"
-          disabled={currentSlide === 0 || isPlaying}
-          onClick={prevSlide}
-          isProcessing={false}
-          className="bg-primary hover:bg-primary-hover disabled:bg-primary-disabled text-white rounded-2xl py-2 px-4 text-center mx-16"
-        />
+    <div className="flex justify-center items-center mt-5 gap-8">
+      {' '}
+      {/* Tailwindを使って中央揃えと間隔調整 */}
+      {/* 各ボタンから mx-16 を削除し、親要素の gap で間隔を制御 */}
+      <IconButton
+        iconName="24/Prev"
+        disabled={currentSlide === 0 || (showPlayButton && isPlaying)} // isPlayingの無効化はshowPlayButtonがtrueの時のみ考慮
+        onClick={prevSlide}
+        isProcessing={false}
+        className="bg-primary hover:bg-primary-hover disabled:bg-primary-disabled text-white rounded-2xl py-2 px-4 text-center" // mx-16削除
+      />
+      {showPlayButton && (
         <IconButton
           iconName={isPlaying ? '24/PauseAlt' : '24/Play'}
           onClick={toggleIsPlaying}
           isProcessing={false}
-          className="bg-primary hover:bg-primary-hover disabled:bg-primary-disabled text-white rounded-2xl py-2 px-4 text-center mx-16"
-        />
-        <IconButton
-          iconName="24/Next"
-          disabled={currentSlide === slideCount - 1 || isPlaying}
-          onClick={nextSlide}
-          isProcessing={false}
-          className="bg-primary hover:bg-primary-hover disabled:bg-primary-disabled text-white rounded-2xl py-2 px-4 text-center mx-16"
+          className="bg-primary hover:bg-primary-hover disabled:bg-primary-disabled text-white rounded-2xl py-2 px-4 text-center" // mx-16削除
         />
-      </div>
+      )}
+      <IconButton
+        iconName="24/Next"
+        disabled={
+          currentSlide === slideCount - 1 || (showPlayButton && isPlaying)
+        } // isPlayingの無効化はshowPlayButtonがtrueの時のみ考慮
+        onClick={nextSlide}
+        isProcessing={false}
+        className="bg-primary hover:bg-primary-hover disabled:bg-primary-disabled text-white rounded-2xl py-2 px-4 text-center" // mx-16削除
+      />
     </div>
   )
 }