Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add: ボイボ寮キャラクターの呼称表 #163

Merged
merged 17 commits into from
Sep 24, 2023

Conversation

wappon28dev
Copy link
Contributor

内容

お久しぶりです

ボイボ寮キャラクターの呼称表 (呼び方一覧表) を追加します.

関連 Issue

continuation: #162
close: #134

スクリーンショット・動画など

1.mp4

その他

ブランチ名の変更により, PR が close されちゃいました!!! この PR は, #162 の続きです.

@wappon28dev
Copy link
Contributor Author

Re: #162 (comment)

うーん。。。s付けてdormitory/call-namesで!!

なるほどです たぶん全部変えました!!!


あ、全員(二人称)はめたんちゃん(1人目のキャラ)の左が良いかなと思いました。
基本一番左がラベルなので、「ずんだもんの二人称はおまえ」ではなく「おまえの誰がはずんだもん」という形になっちゃってるので!

(おそらく, めたんちゃん(1人目のキャラ)の左ではなく右のことを言っていると思うのでそう考えます. )

キャラの二人称をキャラクター名の右の列においてしまうと, 1 つずつズレてしまい, 同じキャラが対角線上に来なくなっちゃうので一番後ろ (一番右の列) に入れるのはどうかと思いましたが, ユーザーに気づいてもらえないかもしれません.
2 人称のところはどこに入れるのが良いでしょうか?


クリックしたら文字が全体選択されるのを予想可能にしたい

一応枠を付けてみました!
( tsx のほうで動的にキャラクターの色を入れているので, layout.scss 以外でもスタイルが当たっている感じです.)


一旦ボイボ寮ページの「1期生」の下に、利用規約ボタンのようなボタンを置いて、「キャラクター呼称表」とかで飛ばすとかどうでしょう!

クリック → クリップボードへコピー機能は付けるか

需要に比べてちょっとリッチすぎる気もしますが、ありだとおもいます!

了解です! (後にコミット積みます)


(そういう意味ではキャラ個別ページの「呼び方」内の相手キャラをクリックしたら飛べるようにしたい早くしたほうが良さそう。。。)

ついでにやっておきましょうか. (ちなみに, “飛べるようにしたい” の遷移先は /dormitory/{キャラクターid}/ で良いでしょうか?)


  1. CSV 書き出し機能を付けるか

うーーーーーん。ま~~~なくてもいいかなと!!
たぶん世界で数人くらいの需要なのと、代替案でテーブルは全部選択してexcelに貼り付ければまあまあ良い感じになるかなと!

たしかにそうですね! (気づかなかった……!)

@Hiroshiba
Copy link
Member

キャラの二人称をキャラクター名の右の列においてしまうと, 1 つずつズレてしまい, 同じキャラが対角線上に来なくなっちゃうので一番後ろ (一番右の列) に入れるのはどうかと思いましたが, ユーザーに気づいてもらえないかもしれません.
2 人称のところはどこに入れるのが良いでしょうか?

なるほどです!
対角線上に斜線を引く場合は斜めを意識したいですが、今はそうでもないので別に良いのかなとかちょっと思いました!
まあでもここに置くのが微妙だったら、最後に書き足すのもいいですし、あるいはなくてもいいのかなとか思いました。

ついでにやっておきましょうか. (ちなみに, “飛べるようにしたい” の遷移先は /dormitory/{キャラクターid}/ で良いでしょうか?)

ありがとうございます!!!
遷移先はそちらが良さそうに思いました。
もし可能なら別プルリクエストの方が嬉しかったりはします・・・!が、どちらでも・・・!!

クリップボード

結構変更でかくなっちゃうので別プルリクエストだった方が進めやすかったりされたりしますかね?
こちらは本当にどちらでもという感じです!
もしどちらでもいいのであれば綺麗に分けられそうなので分けていただけると嬉しいかも、くらいです!


東北ずん子設定資料集をちょっと見てみた感じ、対角のところを色変えてあげるとさらに見やすいかも?
(参考までに!)

@Hiroshiba
Copy link
Member

起動して実行してみました!枠つくのめっちゃいいですね!!

ちょっと呼び方のラベル表示がずれてそうでした(まだ調整中だったらすみません 🙇 )
image

@wappon28dev
Copy link
Contributor Author

wappon28dev commented Sep 21, 2023

ちょっと呼び方のラベル表示がずれてそうでした

……! それはすみませんでした. 直しておきました.

東北ずん子設定資料集をちょっと見てみた感じ、対角のところを色変えてあげるとさらに見やすいかも?

参考になる資料をありがとうございます!!! 良いアイディアですね!
今回の呼称表は既に色が横方向についているので, 逆に色を付けない (= 背景と同じ白) にしてみました!

image

対角線上に斜線を引く場合は斜めを意識したいですが、……

ということで 2 人称は最後の列に入れてみました. 

image

もし可能なら別プルリクエストの方が嬉しかったりはします・・・!が、どちらでも・・・!!

そうですねー!

今回は枠付け → 選択される まで実装して,

  • ボイボ寮の各キャラクターページの呼び名からキャラクターに飛べるように
  • 呼称表のセルクリックでクリップボードにコピー

は別 PR にします!

<td className="you">
<div>
{callNameInfo.you.map(part => (
<p style={outlineStyle}>{part}</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここkeyがなくてエラーが出てるかもです!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

おっと忘れてました……! ありがとうございます!

ところでですが, 私のプロジェクトの ESLint では map 内で, key props が無いときに Error になるルールセットにしている (Airbnb - GitHub) のですが, 自然に気づけるような仕組みがあると良いかもしれないですね.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

おーなるほどです!入れたいですね。。

src/components/layout.scss Outdated Show resolved Hide resolved
Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!!!! めちゃくちゃ見やすくていいですね!!!

色々コメントしましたが、コメントを追加していただければ的なコメント以外はそのままスルーで一旦マージする感じでもいいのかなと思っています!
もし気が向いたりしたらコード変更とかお願いできると。

良さそうな感じになったらコメントいただければマージしたいと思います!!

src/components/layout.scss Outdated Show resolved Hide resolved
src/components/layout.scss Show resolved Hide resolved
src/components/layout.scss Show resolved Hide resolved
src/components/layout.scss Outdated Show resolved Hide resolved
src/pages/dormitory/call-names/index.tsx Outdated Show resolved Hide resolved
src/components/layout.scss Outdated Show resolved Hide resolved
src/pages/dormitory/call-names/index.tsx Outdated Show resolved Hide resolved
src/pages/dormitory/call-names/index.tsx Show resolved Hide resolved
@wappon28dev
Copy link
Contributor Author

wappon28dev commented Sep 24, 2023

レビューありがとうございます!!!

  • ページの説明

    ボイボ寮のキャラクターの呼び方一覧表です。必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。

  • OGP の description
    (上同様)

  • 呼称表へのリンクボタン
    src/pages/dormitory.tsx

などで特に問題なければマージの準備 OK です!

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!!!

マージさせていただいた後、ちょっとデザイン的に色々調整したりとか、ページレイアウトを変えたりとか、bulmaの気持ちに合わせる作業をさせていただこうと思います!

src/components/layout.scss Show resolved Hide resolved
src/components/layout.scss Show resolved Hide resolved
@Hiroshiba Hiroshiba merged commit 121869d into VOICEVOX:master Sep 24, 2023
1 check passed
@wappon28dev wappon28dev deleted the add/call-names branch September 24, 2023 17:17
@Hiroshiba
Copy link
Member

呼称表、リリース早くても良いかなと思ってたんですが、ちょうど8期生のリリースが近めなので、そのときにリリースしようかなと思います!!
来週か再来週くらいの予定です! 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ボイボ寮の呼び方一覧表を作りたいかも
2 participants