Add: ボイボ寮キャラクターの呼称のコピー機能 + リファクタリング

[wappon28dev]

内容

ボイボ寮キャラクターの呼称表 (呼び方一覧表) のコピー機能を実装します.
また, #163 に関連して以下のような修正を行います:

- URL アンカー (#{characterId}) で飛んだときに画面の中心にスクロールするように
- ﾁｮｯﾄハイライトアニメーション付けました (discord/slack みたいな)

• ボイボ寮にある呼称表へ飛ばすリンクが call-names になったまま (URLのcall-namesをcall_namesに #167 のミス？) なので call_names に
• セルにホバーしたら, “クリックしてコピー: 「ずんだもん」” のように出てくるようにしてみました

関連 Issue

refs:

• Add: ボイボ寮キャラクターの呼称表 #163
• URLのcall-namesをcall_namesに #167

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

準備中

その他

不要な機能があれば遠慮なくお教えください！！！

[Hiroshiba]

プルリクエストありがとうございます！！
ざっと動かして見させていただきました、コピーボタンとかすごくいい感じに思います！！！
リファクタリングもありがとうございます！

ちょっとまだコードは見れてないのですが、guiを見てのコメントを先に･･･ 🙇

コピーボタンすごくいいと思います！！！
消えるまでのアニメーションがちょっと長めに感じたので短くさせていただくことになるかもです！

横スクロールした時に表示がバグっていそうでした！z-index？

アンカーが指定されて飛んできた場合のアニメーションは、ボイボーWebページ全体的にかなり珍しそうなのでおそらくもう少し落ち着いた感じにさせていただくことになっちゃうかもです 🙇
点滅せずに枠がずっとつき続けるようなUIや、あるいは少し長めの時間をかけて薄くなって消えていく色枠とか･･･？
（ちょっとアニメーションデザインに詳しくなく。。。）

あとアンカーがあるけれどもそのリンクを発行するための道がなさそうに感じました！
自分でHTMLタグを見れる人であれば発見できますが、現状だと結構もったいないな～と思います。

一番左のキャラクターをマウスホバーした時、コピーボタンみたいな感じでリンクボタンアイコンが出てくるとかはどうでしょう？
アンカーから飛んできた人が見る枠がプレビューで表示されていると、何へのリンクなのかが分かりやすいかも･･･？
ただまぁ実装が大掛かりになってしまうので、やるやらない含めてお任せしたいなと･･･！！

[wappon28dev]

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

消えるまでのアニメーションがちょっと長めに感じたので短くさせていただくことになるかもです！

消えるまでの時間を 3s → 1.5s にしてみました.

横スクロールした時に表示がバグっていそうでした！z-index？

ご指摘ありがとうございます！
これについては, アンカーが指定されてきたときに枠 (border / outline) と背景 (background) のスタイルが知らない間に衝突してしまってました.

ところで, アンカーが指定されてきたときに枠をハイライトする機能ですが,

• ページが表示されている場合でアンカーを踏むと, ブラウザがどうしてもアンカーへ移動してしまう
  → コールバックを貼るのが難しい……
• 枠のスタイルとセル背景のスタイルが重複して, その回避が私では厳しい
• この PR での範疇外, そもそも issue に上がっていない

のような理由より, アンカーが指定されているときに枠をハイライトする機能のコミットを Revert し, この PR から機能を削除しました. また,

• 他ページと馴染むよう, 控えめなアニメーション
• アンカーリンクを発行する機能
• その際のプレビューでも枠が見えていると良いかも？

などのコメントありがとうございました！　これを踏まえていつか実装するかもしれません.

---

ということで改めて以下が変更点です.　

• ボイボ寮にある呼称表へ飛ばすリンクが call-names になったまま (URLのcall-namesをcall_namesに #167 のミス？) なので call_names に
• セルにホバーしたら, “クリックしてコピー: 「ずんだもん」” のように出てくるように
• コピー完了のチェックマークはちょっと短めに

よろしくお願いします！！！

[Hiroshiba]

挙動はlgtmです！！

コード読ませてもらいました、すごいいい感じだと思います！！
ちょっと細かいかもですが2点ほどコメントしてみました！

[Hiroshiba]

LGTM！！！！！
５日にリリース予定です！その前に1回プレビュー版を更新したいと思います。

ちょっとこちらで微修正だけさせていただきます！

[Hiroshiba]

呼称ページ、リリースしました！！ 🎉 🎉 🎉
https://twitter.com/voicevox_pj/status/1709908431224889622