Skip to content

Commit

Permalink
とりあえず完成
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hiroshiba
Hiroshiba committed Apr 25, 2024
1 parent 03bc6a4 commit 3c00cd8
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 29 deletions.
54 changes: 44 additions & 10 deletions src/components/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -699,7 +699,8 @@ $dropdown-item-active-background-color: $primary;
.song {
color: white;

.title {
.title,
.subtitle {
color: white !important;
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
64 changes: 45 additions & 19 deletions src/pages/song/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand All @@ -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
? {
Expand Down Expand Up @@ -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ワードいれる */}
Expand All @@ -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"
Expand All @@ -213,30 +228,41 @@ 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}
/>
))}
</div>
</div>

<div className="container explain-humming-container">
<h2 className="title">ハミングとは？</h2>
<p>
喋り声のデータを用いて音声ライブラリを作成し、
歌えるキャラクターに歌い方を倣うことで、
キャラクターの喋り声に近い声で歌える技術で実現された機能です。
</p>
<p>キャラクターによっていろんなスタイルで歌うことができます。</p>
</div>
</section>
</main>
</Page>
Expand Down

0 comments on commit 3c00cd8

Please sign in to comment.