From 3c00cd851c538d5f13293ac83d04394425c3db42 Mon Sep 17 00:00:00 2001
From: Hiroshiba <hihokaruta@gmail.com>
Date: Fri, 26 Apr 2024 04:07:19 +0900
Subject: [PATCH] =?UTF-8?q?=E3=81=A8=E3=82=8A=E3=81=82=E3=81=88=E3=81=9A?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout.scss | 54 ++++++++++++++++++++++++++------
 src/pages/song/index.tsx   | 64 +++++++++++++++++++++++++++-----------
 2 files changed, 89 insertions(+), 29 deletions(-)

diff --git a/src/components/layout.scss b/src/components/layout.scss
index 8712eecf..c59407b5 100644
--- a/src/components/layout.scss
+++ b/src/components/layout.scss
@@ -699,7 +699,8 @@ $dropdown-item-active-background-color: $primary;
 .song {
   color: white;
 
-  .title {
+  .title,
+  .subtitle {
     color: white !important;
   }
 
@@ -731,14 +732,44 @@ $dropdown-item-active-background-color: $primary;
       // filter: blur(1px) brightness(50%);
     }
 
-    h1 {
-      color: rgba($primary, 0.75) !important;
-      // @extend .is-size-3-touch;
-      // @extend .is-size-2-desktop;
-      // @extend .is-size-1-widescreen;
-      // @extend .is-size-1;
-      font-size: 7.5rem;
-      text-shadow: 0 0 10px rgba(mix($link, black, 90%), 0.75);
+    .titles {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      text-align: center;
+
+      h1 {
+        color: rgba($primary, 0.75) !important;
+        font-size: 7.5rem;
+        text-shadow: 0 0 10px rgba(mix($link, black, 90%), 0.75);
+      }
+
+      .subtitle {
+        @extend .is-4;
+        @extend .has-text-weight-bold;
+        text-shadow: 0 0 10px rgba(black, 0.75);
+
+        // <wbr>で良い感じに改行するようにする
+        word-break: keep-all;
+        overflow-wrap: break-word;
+      }
+
+      @include touch {
+        h1 {
+          font-size: 6rem;
+        }
+      }
+
+      @include mobile {
+        gap: 0.5rem;
+        margin-bottom: 5rem;
+
+        h1 {
+          font-size: 3rem;
+        }
+      }
     }
 
     .buttons {
@@ -806,12 +837,15 @@ $dropdown-item-active-background-color: $primary;
 
           .style-name {
             @extend .is-size-7;
-            // @extend .has-text-weight-light;
           }
         }
       }
     }
   }
+
+  .explain-humming-container {
+    @extend .is-max-widescreen;
+  }
 }
 
 .markdown {
diff --git a/src/pages/song/index.tsx b/src/pages/song/index.tsx
index d7735e1a..0be10711 100644
--- a/src/pages/song/index.tsx
+++ b/src/pages/song/index.tsx
@@ -12,14 +12,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Link } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
 import PlayButton from "../../components/playButton"
-import { CharacterContext } from "../../contexts/context"
+import { CharacterContext, GlobalContext } from "../../contexts/context"
 import { useDetailedCharacterInfo } from "../../hooks/useDetailedCharacterInfo"
 import shareThumb from "../../images/nemo/share-thumbnail.png"
 import { CharacterInfo, CharacterKey } from "../../types/dormitoryCharacter"
 import { getProductPageUrl } from "../../urls"
 
-// 音声カード表示
-const VoiceCard = React.memo(
+// キャラクターごとのカード表示
+const CharacterCard = React.memo(
   ({
     characterInfo,
     characterKey,
@@ -30,8 +30,6 @@ const VoiceCard = React.memo(
     if (!characterInfo)
       throw new Error(`characterInfo is undefined. (${characterKey})`)
 
-    const index = 0
-
     const color = characterInfo.color
     const coloredStyle = useMemo(() => {
       return {
@@ -46,13 +44,12 @@ const VoiceCard = React.memo(
       [characterInfo]
     )
 
-    // スタイルがまだ時を考慮している
     const [styleState, setStyleState] = useState<
       | {
           styles: { name: string; type: string }[]
           selectedStyleIndex: number
         }
-      | undefined
+      | undefined // スタイルが未発表な場合はundefined
     >(
       audioSamples.length > 0
         ? {
@@ -181,12 +178,23 @@ const VoiceCard = React.memo(
 )
 
 export default () => {
-  // const query = useStaticQuery(graphql``)
-
   const { characterInfos } = useDetailedCharacterInfo()
 
+  const context = useContext(GlobalContext)
   const { characterKeys } = useContext(CharacterContext)
 
+  // ソングを持つキャラクターを前に表示する
+  const orderedCharacterKeys = useMemo(() => {
+    return characterKeys.toSorted((a, b) => {
+      const hasSong = (songVoiceUrls: { styleType: "song" | "humming" }[]) =>
+        songVoiceUrls.some(({ styleType }) => styleType === "song")
+      return hasSong(characterInfos[a].songVoiceUrls) &&
+        !hasSong(characterInfos[b].songVoiceUrls)
+        ? -1
+        : 1
+    })
+  }, [characterKeys, characterInfos])
+
   return (
     <Page showingHeader={true} isDark={true}>
       {/* TODO: SEOワードいれる */}
@@ -195,14 +203,21 @@ export default () => {
       <main className="song">
         <section className="section px-0 py-0">
           <div className="top">
-            <h1 className="title">VOICEVOX Song</h1>
+            <div className="titles">
+              <h1 className="title">VOICEVOX Song</h1>
+              <span className="subtitle">
+                無料で使える中品質な
+                <wbr />
+                テキスト読み上げ・歌声合成ソフトウェア
+              </span>
+            </div>
 
             <div className="buttons">
               <a
                 className="button is-primary is-large is-rounded"
                 onClick={() => {
-                  // context.nemoGuidanceModal.show()
-                  // context.sendEvent("download", "nemo")
+                  context.downloadModal.show()
+                  context.sendEvent("download", "software")
                 }}
                 target="_blank"
                 rel="noreferrer"
@@ -213,23 +228,24 @@ export default () => {
                 </span>
                 <span className="has-text-weight-semibold">ダウンロード</span>
               </a>
-              <button
-                // onClick={showNemoReadmeModal}
+              <Link
+                to="/term/"
                 className="button is-normal is-rounded"
                 type="button"
+                role="button"
               >
-                <span>利用規約</span>
-              </button>
+                利用規約
+              </Link>
             </div>
           </div>
         </section>
 
         <section className="section">
-          <div className="voices-container container">
+          <div className="container voices-container">
             <h2 className="title">音声ライブラリ一覧</h2>
             <div className="voice-cards">
-              {characterKeys.map(characterKey => (
-                <VoiceCard
+              {orderedCharacterKeys.map(characterKey => (
+                <CharacterCard
                   key={characterKey}
                   characterInfo={characterInfos[characterKey]}
                   characterKey={characterKey}
@@ -237,6 +253,16 @@ export default () => {
               ))}
             </div>
           </div>
+
+          <div className="container explain-humming-container">
+            <h2 className="title">ハミングとは？</h2>
+            <p>
+              喋り声のデータを用いて音声ライブラリを作成し、
+              歌えるキャラクターに歌い方を倣うことで、
+              キャラクターの喋り声に近い声で歌える技術で実現された機能です。
+            </p>
+            <p>キャラクターによっていろんなスタイルで歌うことができます。</p>
+          </div>
         </section>
       </main>
     </Page>