とりあえずボイボ寮ページが表示できるように

README.md

@@ -4,6 +4,7 @@ pnpm start
 
 ### TODO
 
+- [ ] FontAwesomeIcon の設定
 - [ ] favicon 等の設定
 - [ ] sitemap 確認
 - [ ] ニュースの RSS？

src/constants/characaterAsset.ts

@@ -8,12 +8,16 @@ import {
 
 /**
  * キャラクターごとに複数のアセットを分配する。
+ * 元のパスも返す。
  * １つもない場合は空配列を返す。
  */
-export function makeCharacterAssetsRecord<T>(
+export function makeCharacterAssetsRecordWithPath<T>(
   globRecord: Record<string, () => Promise<T>>,
-): Record<CharacterKey, Promise<T>[]> {
-  const record = {} as Record<CharacterKey, Promise<T>[]>;
+): Record<CharacterKey, { path: string; asset: Promise<T> }[]> {
+  const record = {} as Record<
+    CharacterKey,
+    { path: string; asset: Promise<T> }[]
+  >;
   for (const key of characterKeys) {
     record[key] = [];
   }
@@ -23,7 +27,25 @@ export function makeCharacterAssetsRecord<T>(
       path.includes(characterEntries[key].id),
     );
     if (key == undefined) throw new Error(`Unknown character: ${path}`);
-    record[key].push(globRecord[path]());
+    record[key].push({ path, asset: globRecord[path]() });
+  }
+  return record;
+}
+
+/**
+ * キャラクターごとに複数のアセットを分配する。
+ * １つもない場合は空配列を返す。
+ */
+export function makeCharacterAssetsRecord<T>(
+  globRecord: Record<string, () => Promise<T>>,
+): Record<CharacterKey, Promise<T>[]> {
+  const baseRecord = makeCharacterAssetsRecordWithPath(globRecord);
+  const record: Record<CharacterKey, Promise<T>[]> = {} as Record<
+    CharacterKey,
+    Promise<T>[]
+  >;
+  for (const key of characterKeys) {
+    record[key] = baseRecord[key].map(({ asset }) => asset);
   }
   return record;
 }
@@ -91,7 +113,17 @@ export const portraitImages = makeCharacterAssetsRecordSingle(
   import.meta.glob<AstroImage>("./portrait-images/*.png"),
 );
 
+/** トーク用音声とそのパス。１つもないときもある。 */
+export const talkAudiosAndPaths = makeCharacterAssetsRecordWithPath(
+  import.meta.glob<string>("./talk-audios/*.wav"),
+);
+
+/** ソング用音声とそのパス。１つもないときもある。 */
+export const songAudiosAndPaths = makeCharacterAssetsRecordWithPath(
+  import.meta.glob<string>("./song-audios/*.wav"),
+);
+
 /** ボイボ寮用音声。１つもないときもある。 */
-export const dormitoryAudioArrays = makeCharacterAssetsRecordOptional(
+export const dormitoryAudios = makeCharacterAssetsRecordOptional(
   import.meta.glob<string>("./dormitory-audios/*.wav"),
 );

src/constants/characterInfos/helper.ts

@@ -0,0 +1,31 @@
+import type { CharacterKey } from "@constants/characterEntry";
+import type { Styles } from "../type";
+import {
+  songAudiosAndPaths,
+  talkAudiosAndPaths,
+} from "@constants/characaterAsset";
+
+/** トーク用音声をスタイルごとに分ける */
+export function makeTalkVoiceUrls(styles: Styles, key: CharacterKey) {
+  return styles
+    .filter((v) => v.type == "talk")
+    .map((v) => ({
+      style: v.name,
+      urls: talkAudiosAndPaths[key]
+        .filter((obj) => obj.path.includes(v.id))
+        .map((obj) => obj.asset),
+    }));
+}
+
+/** ソング音声をスタイルごとに分ける */
+export function makeSongVoiceUrls(styles: Styles, key: CharacterKey) {
+  return styles
+    .filter((v) => ["song", "humming"].includes(v.type))
+    .map((v) => ({
+      style: v.name,
+      styleType: v.type as "song" | "humming",
+      urls: songAudiosAndPaths[key]
+        .filter((obj) => obj.path.includes(v.id))
+        .map((obj) => obj.asset),
+    }));
+}

src/constants/characterInfos/voidoll.ts

@@ -1,16 +1,17 @@
 import type { CharacterKey } from "@constants/characterEntry";
-import type { CharacterInfo, StyleNames } from "../type";
+import type { CharacterInfo, Styles } from "../type";
 import {
   bustupImages,
   portraitImages,
-  dormitoryAudioArrays,
+  dormitoryAudios,
 } from "@constants/characaterAsset";
+import { makeSongVoiceUrls, makeTalkVoiceUrls } from "./helper";
 
 const key = "Voidoll" satisfies CharacterKey;
 
 const styleNames = [
   { name: "ノーマル", id: "normal", type: "talk" },
-] as const satisfies StyleNames;
+] satisfies Styles;
 
 export default {
   key,
@@ -19,7 +20,6 @@ export default {
   rubyName: "<ruby>Voidoll<rp>(</rp><rt>ぼいどーる</rt><rp>)</rp></ruby>",
   voiceFeature: "慎ましやかで電子的な声",
   bustupImage: bustupImages[key],
-  // bustupImageSmall: AstroImage;
   portraitImage: portraitImages[key],
   // ogpImage: AstroImage;
   color: "#1D86AE",
@@ -28,16 +28,16 @@ export default {
     "「#コンパス」を管理するAIロボ<br />人間の戦い方を監視/分析している。",
   additionalProductDescription:
     "話速：0.90、音高：0.03、抑揚：0.90とすれば、「#コンパス 戦闘摂理解析システム」ゲーム内のボイスに近い仕上がりとなります。",
-  talkVoiceUrls: [], // TODO: あとで変える
-  songVoiceUrls: [], // TODO: あとで変える
+  talkVoiceUrls: makeTalkVoiceUrls(styleNames, key),
+  songVoiceUrls: makeSongVoiceUrls(styleNames, key),
   labelInfos: [
     { label: "CV", value: "丹下桜", size: 2 },
     { label: "アビリティ", value: "緊急回避プログラム", size: 2 },
     { label: "年齢", value: "？？？", size: 2 },
     { label: "身長", value: "？？？", size: 1 },
     { label: "誕生日", value: "？？？", size: 1 },
   ],
-  dormitoryVoiceUrls: dormitoryAudioArrays[key],
+  dormitoryVoiceUrls: dormitoryAudios[key],
   // infoImages: AstroImage[],
   policyUrl: "https://blog.nicovideo.jp/niconews/224589.html",
   detailUrl: "https://app.nhn-playart.com/compass/index.nhn",

src/constants/type.ts

@@ -1,7 +1,7 @@
 import type { CharacterKey } from "@constants/characterEntry";
 import type { AstroImage } from "@types";
 
-export type StyleNames = {
+export type Styles = {
   name: string;
   id: string;
   type: "talk" | "song" | "humming";
@@ -14,22 +14,21 @@ export type CharacterInfo = {
   rubyName: string;
   voiceFeature: string | undefined;
   bustupImage: Promise<AstroImage>;
-  // bustupImageSmall: Promise<AstroImage>;
   portraitImage: Promise<AstroImage>;
   // ogpImage: Promise<AstroImage>;
   color: string;
   lightColor: string;
   description: string; // ボイボ寮ページでの紹介文
   additionalProductDescription?: string; // 製品ページでの追加の紹介文
-  labelInfos: readonly { label: string; value: string; size: 1 | 2 }[];
-  talkVoiceUrls: { style: string; urls: readonly string[] }[];
+  labelInfos: { label: string; value: string; size: 1 | 2 }[];
+  talkVoiceUrls: { style: string; urls: Promise<string>[] }[];
   songVoiceUrls: {
     style: string;
     styleType: "song" | "humming";
-    urls: readonly string[];
+    urls: Promise<string>[];
   }[];
-  dormitoryVoiceUrls?: readonly Promise<string>[];
-  infoImages?: readonly Promise<AstroImage>[];
+  dormitoryVoiceUrls?: Promise<string>[];
+  infoImages?: Promise<AstroImage>[];
   detailUrl: string | undefined;
   policyUrl: string | undefined;
   releaseDate?: string;

src/helper.ts

@@ -4,3 +4,11 @@ export function sortedImportGlob<T>(record: Record<string, T>) {
     .sort(([key1], [key2]) => key1.localeCompare(key2))
     .map(([_, value]) => value);
 }
+
+/** 到達しないであろうコードに到達したことを示すエラー */
+export class UnreachableError extends Error {
+  constructor(message?: string) {
+    super(message || "Unreachable code was executed.");
+    this.name = "UnreachableError";
+  }
+}

src/pages/dormitory/[characterId]/[...descriptionType].astro

@@ -0,0 +1,233 @@
+---
+import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
+
+import { characterEntries, characterKeys } from "@constants/characterEntry";
+import { characterInfos } from "@constants/characterInfo";
+import { descriptionTypes } from "./constants";
+
+export const getStaticPaths = (async () => {
+  return characterKeys.flatMap((key) =>
+    descriptionTypes.map((d) => ({
+      params: {
+        characterId: characterEntries[key].id,
+        descriptionType: d == "profile" ? undefined : d, // NOTE: 以前に合わせるため、プロフィールページはURLをネストしない
+      },
+      props: { characterInfo: characterInfos[key], descriptionType: d },
+    })),
+  );
+}) satisfies GetStaticPaths;
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+import { Image } from "astro:assets";
+
+import Base from "@layouts/Base.astro";
+import CallBox from "./_CallBox.astro";
+import TypeButton from "./_TypeButton.astro";
+
+import { callNameInfos } from "@constants/characterInfos/callNameInfo";
+
+const { characterInfo, descriptionType } = Astro.props;
+const characterKey = characterInfo.key;
+---
+
+<Base
+  title={`${characterInfo.name} | ボイボ寮 | VOICEVOX`}
+  description={characterInfo.description}
+>
+  <!-- TODO: image={selectedCharacterInfo.ogpImage.images.fallback?.src} -->
+  <div class="dormitory-character">
+    <main class="section py-1">
+      <div class="container is-max-desktop">
+        <div class="box" style={{ borderColor: characterInfo.color }}>
+          <div class="columns m-0" style={{ height: "100%" }}>
+            <div
+              class="column is-4 portrait-column"
+              style={{ borderColor: characterInfo.color }}
+            >
+              <Image
+                src={characterInfo.portraitImage}
+                alt={characterInfo.name}
+                style={{ height: "100%", width: "100%" }}
+              />
+            </div>
+            <div class="column description-column">
+              <div class="section">
+                <div class="description-top">
+                  <h1 class="title" set:html={characterInfo.rubyName} />
+                  <a
+                    class="button description-top-button"
+                    style={{
+                      color: characterInfo.color,
+                      borderColor: characterInfo.color,
+                      visibility: characterInfo.detailUrl
+                        ? "visible"
+                        : "hidden",
+                    }}
+                    href={characterInfo.detailUrl}
+                    aria-label={`${characterInfo.name}の詳細ページ`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <!-- TODO: <FontAwesomeIcon icon={faHome} /> -->
+                  </a>
+                </div>
+                <div class="buttons has-addons">
+                  <TypeButton
+                    characterInfo={characterInfo}
+                    selectedType={descriptionType}
+                    targetType="profile"
+                  />
+                  <TypeButton
+                    characterInfo={characterInfo}
+                    selectedType={descriptionType}
+                    targetType="calls"
+                  />
+                </div>
+                {
+                  descriptionType === "profile" && (
+                    <>
+                      <div
+                        class="description-profile"
+                        set:html={characterInfo.description}
+                      />
+                      <div class="columns is-variable is-1 is-multiline">
+                        {characterInfo.labelInfos.map((labelInfo, index) => (
+                          <div
+                            key={index}
+                            class={`column ${
+                              labelInfo.size == 1 ? "is-6" : "is-12"
+                            } description-box`}
+                          >
+                            <span
+                              class="description-label"
+                              style={{ backgroundColor: characterInfo.color }}
+                            >
+                              {labelInfo.label}
+                            </span>
+                            <span
+                              class="description-text"
+                              set:html={labelInfo.value}
+                            />
+                          </div>
+                        ))}
+                        <div class="column is-12 description-box">
+                          <span
+                            class="description-label"
+                            style={{ backgroundColor: characterInfo.color }}
+                          >
+                            音声サンプル
+                          </span>
+                          {characterInfo.dormitoryVoiceUrls ? (
+                            <div class="description-samples">
+                              {characterInfo.dormitoryVoiceUrls.map(
+                                (url, index) => (
+                                  // <PlayButton
+                                  //   key={index}
+                                  //   url={url}
+                                  //   name={`${
+                                  //     characterInfo.name
+                                  //   }のサンプルボイス${index + 1}`}
+                                  //   color={characterInfo.color}
+                                  //   class="ml-1 mr-1"
+                                  // />
+                                  // TODO: PlayButton
+                                  <div>TODO</div>
+                                ),
+                              )}
+                            </div>
+                          ) : (
+                            <span class="description-text">準備中</span>
+                          )}
+                        </div>
+                      </div>
+                      {characterInfo.infoImages && (
+                        <div class="description-info-images">
+                          {characterInfo.infoImages.map((image, index) => (
+                            <Image
+                              src={image}
+                              alt={characterInfo.name}
+                              style={{
+                                maxHeight: "8rem",
+                                objectFit: "contain",
+                              }}
+                            />
+                          ))}
+                        </div>
+                      )}
+                    </>
+                  )
+                }
+                {
+                  descriptionType === "calls" && (
+                    <div class="columns description-call">
+                      <div class="column is-3 description-call-other-column">
+                        <div class="description-call-other-cell">
+                          <div>
+                            <span>一人称</span>
+                          </div>
+                          <div>
+                            {callNameInfos[characterKey].me.map((callName) => (
+                              <p>{callName}</p>
+                            ))}
+                          </div>
+                        </div>
+                        <div class="description-call-other-cell">
+                          <div>
+                            <span>二人称</span>
+                          </div>
+                          <div>
+                            {callNameInfos[characterKey].you.map((callName) => (
+                              <p>{callName}</p>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                      <div class="column is-9 description-call-character">
+                        {characterKeys
+                          .filter(
+                            (targetCharacterKey) =>
+                              targetCharacterKey !== characterKey,
+                          )
+                          .map((targetCharacterKey, index) => (
+                            <CallBox
+                              characterInfo={characterInfo}
+                              baseCharacterKey={characterKey}
+                              targetCharacterKey={targetCharacterKey}
+                            />
+                          ))}
+                      </div>
+                    </div>
+                  )
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="link-buttons has-text-weight-bold">
+          {
+            /*
+          TODO:
+          <Link
+            to={getProductPageUrl(characterInfo)}
+            class="button is-normal is-rounded character-list-button"
+            style={{ borderColor: characterInfo.color }}
+          >
+            ダウンロードページ
+          </Link>
+          <Link
+            to={// ボイボ寮ページから遷移した場合は前のキャラクターへ戻る
+            // 検索流入や共有されたページから直接飛んだ場合は先頭へ戻る
+            location.state?.fromDormitory
+              ? `/dormitory/#${characterInfo.id}`
+              : `/dormitory/`}
+            class="button is-normal is-rounded character-list-button"
+            style={{ borderColor: characterInfo.color }}
+          >
+            キャラクター一覧
+          </Link>*/
+          }
+        </div>
+      </div>
+    </main>
+  </div>
+</Base>

src/pages/dormitory/[characterId]/_CallBox.astro

@@ -0,0 +1,72 @@
+---
+import type { CharacterKey } from "@constants/characterEntry";
+import type { CharacterInfo } from "@constants/type";
+
+interface Props {
+  characterInfo: CharacterInfo;
+  baseCharacterKey: CharacterKey;
+  targetCharacterKey: CharacterKey;
+}
+
+import { Image } from "astro:assets";
+
+import { characterInfos } from "@constants/characterInfo";
+import { callNameInfos } from "@constants/characterInfos/callNameInfo";
+
+const { characterInfo, baseCharacterKey, targetCharacterKey } = Astro.props;
+
+const callTo: string | undefined =
+  // @ts-ignore UnreachableError
+  callNameInfos[baseCharacterKey][targetCharacterKey];
+const callFrom: string | undefined =
+  // @ts-ignore UnreachableError
+  callNameInfos[targetCharacterKey][baseCharacterKey];
+---
+
+<div
+  class="columns is-mobile is-vcentered is-variable is-1 description-call-box"
+>
+  <div class="column description-call-line">
+    <div class="description-call-one">
+      <span
+        class={`description-call-text ${callTo ? "" : "unknown"}`}
+        style={{ borderColor: characterInfo.color }}
+      >
+        {callTo || "？"}
+      </span>
+      <span
+        class="description-call-arrow"
+        style={{ color: characterInfo.color }}
+      >
+        →
+      </span>
+    </div>
+    <div class="description-call-one">
+      <span
+        class="description-call-arrow"
+        style={{ color: characterInfos[targetCharacterKey].color }}
+      >
+        ←
+      </span>
+      <span
+        class={`description-call-text ${callFrom ? "" : "unknown"}`}
+        style={{ borderColor: characterInfos[targetCharacterKey].color }}
+      >
+        {callFrom || "？"}
+      </span>
+    </div>
+  </div>
+  <div class="column is-narrow py-1" style={{ height: "100%" }}>
+    <Image
+      class="border-icon"
+      src={characterInfos[targetCharacterKey].bustupImage}
+      alt={characterInfos[targetCharacterKey].name}
+      style={{
+        borderColor: characterInfos[targetCharacterKey].color,
+        height: "100%",
+        aspectRatio: "1/1",
+        objectFit: "contain",
+      }}
+    />
+  </div>
+</div>

src/pages/dormitory/[characterId]/_TypeButton.astro

@@ -0,0 +1,30 @@
+---
+import type { CharacterInfo } from "@constants/type";
+import type { descriptionTypes } from "./constants";
+
+interface Props {
+  characterInfo: CharacterInfo;
+  selectedType: (typeof descriptionTypes)[number];
+  targetType: (typeof descriptionTypes)[number];
+}
+
+const { characterInfo, selectedType, targetType } = Astro.props;
+const selected = selectedType == targetType;
+---
+
+<a
+  class={`button is-rounded description-type-button ${
+    selected && "description-type-button-selected"
+  }`}
+  style={{
+    color: characterInfo.color,
+    borderColor: characterInfo.color,
+    backgroundColor: selected ? characterInfo.lightColor : undefined,
+  }}
+  href={`/dormitory/${characterInfo.id}/${
+    targetType == "profile" ? "" : targetType + "/"
+  }`}
+  type="button"
+>
+  <span>{targetType == "profile" ? "プロフィール" : "呼び方"}</span>
+</a>

src/pages/dormitory/[characterId]/constants.ts

@@ -0,0 +1 @@
+export const descriptionTypes = ["profile", "calls"] as const;

src/pages/dormitory/_CharacterCard.astro

@@ -1,19 +1,17 @@
 ---
-import type { CharacterKey } from "@constants/characterEntry";
+import type { CharacterInfo } from "@constants/type";
 
 interface Props {
-  characterKey: CharacterKey;
+  characterInfo: CharacterInfo;
   additionalClass?: string;
 }
 
 import { Image } from "astro:assets";
 
 import { getDormitoryCharacterPageUrl } from "@/constants/url";
-import { characterInfos } from "@constants/characterInfo";
 
-const { characterKey, additionalClass } = Astro.props;
+const { characterInfo, additionalClass } = Astro.props;
 
-const characterInfo = characterInfos[characterKey];
 const color = characterInfo.color || "black";
 const href = getDormitoryCharacterPageUrl(characterInfo);
 ---
@@ -32,11 +30,10 @@ const href = getDormitoryCharacterPageUrl(characterInfo);
         class="card-image"
         src={characterInfo.bustupImage}
         alt={characterInfo.name}
-        width={128}
-        height={128}
+        width={256}
+        height={256}
         style={{ objectFit: "contain" }}
       />
-      <!-- TODO: src={characterInfo.bustupImageSmall} -->
       <div
         class="card-content has-text-centered"
         style={{ borderColor: color }}

src/pages/dormitory/index.astro

@@ -4,6 +4,7 @@ import TopIllustContainer from "./_TopIllustContainer.astro";
 import CharacterCard from "./_CharacterCard.astro";
 
 import shareThumb from "./top-illusts/top-illust-009.png";
+import { characterInfos } from "@constants/characterInfo";
 ---
 
 <Base
@@ -42,7 +43,7 @@ import shareThumb from "./top-illusts/top-illust-009.png";
             </h2>
           </div>
 
-          <CharacterCard characterKey={"Voidoll"} />
+          <CharacterCard characterInfo={characterInfos.Voidoll} />
         </div>
 
         <!--