これ anatofuz.net
背景
最近(ここ数ヶ月)、自分としては珍しくVTuberのファンをやっている。 珍しくと書いたのは自分は別に今までアイドルファンとかにはなったことがなく、いくつかのVTuberも知っているもののYouTubeのライブを見るとかはしてなかったからだ。最近は珍しく見ている。
最近見ているVTuberは2人ほどいるが、その中に宝灯桃汁がいる。 桃汁ちゃんは山梨ご当地VTuberなので、地元応援的な意味で見始めたが、普通にハジケリストっぽい配信が個人的に好きで今に至る。
そんな中先日の七夕に開催されたリスナーからのお願いを叶える配信でリスナーからの「3分タイマーがほしい」という願いがあり、これに答える形でいい感じのセリフを喋る一幕があった。
このボイスは運営によって切り抜かれてショートになった
とはいえ3分たったといいつつショートなので10秒くらいで3分たってしまう。
マジで3分たったときにこのボイスが聞きたいのと、基本的にPCで作業をしているので、カップ焼きそばを食べるときにPCからタイマー3分設定するのが毎回大変な課題感が揃ったので、いい感じの3分タイマーをPCから使えるwebアプリの形で作ろうと思った。
桃汁ちゃん3分タイマー作るか
— 八雲アナグラ (@AnaTofuZ) 2023年8月16日
ツイートしたところ運営のボスと司令官からも補足されたので本格的に作ることにした。
桃汁ちゃん3分タイマー…？？？？ https://t.co/Z24wiAYuyj
— 山梨ご当地Vtuber宝灯桃汁🍑運営(ボス) (@Momojiru_Boss) 2023年8月17日
3分タイマー！！！！！気になってしょうがないw https://t.co/SOV1K6YlXk
— Vtuber宝灯桃汁運営🍑🚔司令官 (@shireikan_mmjr) 2023年8月17日
作ったやつ
おもしろ機能
3分タイマーとしては普通に使えるけどいくつかおもしろ機能をいれている
- 待機BGMを選択可能に
- プレ配信のときの桃汁ちゃんの「ナリ」が入っているBGMがそこそこ気に入っているのでこれで聞けるように
- 再生中にCDが回転する
- 後述するけどviteのデフォルトcssをちょっといじっただけ
- コナミコマンドに対応している
- cdの写真がコナミコマンドで切り替わるようになっている(全3種類)
- 古のオタクらしくHTMLコメントでAAがでるようにしている
おだいじにって書いてるのはこのとき桃汁ちゃんが運営いれて全員コロナに罹患してたから。
技術スタック
ソースコードはこれ github.com
Vite + React(SWC)をTypeScriptで書いていて、ホスティングサービスはGitHub Pagesを使っている。手軽。
仕事でTypeScript + Reactを書いているけれど、実際仕事じゃないプロダクトを1から書いてみると、意外とReactが書けるようになってることが実感できてよかった。 あとcss苦手マンなのだけど、Viteの初期コードのcssが意外とちゃんとしているので、それを拡張することでアプリケーションの形にもなったのが良かった。ダークテーマ対応と絵をcssで回転させる技術をこれで初めて知る。
シュッと作りたかったのでnpmモジュールをフルで使っている。いれたのはだいたい次らへん
- react-timer-hook
- タイマー機能
- react-use-audio-player
- 音楽再生
- use-konami
- unplugin-fonts
- Googleフォント
とくにuse-konamiはかなりお手軽にコナミコマンドを実装できたのでよかった。
音源はYouTubeからyt-dlpでmp3データ形式でダウンロードしてAudacityで3分に調整した。Audacity数年ぶりに使ったけどやはりシュッと音声が作れて便利だった。
おもしろ話題
id:anatofuzはマジでCSSが苦手なので勢いで作ったところ、沖縄時代からの友人のろくさいパイセンがPRを送ってくれてだいぶ見た目が改善されるなどした。
感想
思い返せばここ数ヶ月くらいプライベートでコード書いていなくて、仕事でしか書いてなかった。 仕事で書くコードもユーザーに価値を届けられているので虚無に消えているコードを書いている訳では無いのだが、どうしても仕事となると保守性や仕様の妥当性、タスクの段取りなど、素朴にコードを書く楽しみとは別のファクターで頭を使う必要がある。それらの所為というわけではないものの、仕事でコードを書いているとどうしても「楽しい!!!」というよりは「責任」とかの方に意識が向いてしまう。*1
久しぶりに完全趣味のコードを書いて、公開して、会社の人じゃない人からPRをもらったり、Twitterで反応をもらったりする体験だった。 なにかこうエンジニアになろうとした根源的な楽しさを久々に感じられた。こうみると、やはり自分はプログラミングが好きで、それで周りの人とワイワイしたり、自分が面白いと思っているものを作るのが好きなのだなぁというのを再認識できて、技術に対しての最近のモヤモヤが一つ解消できた気がする。
それはそうと桃汁ちゃんのコロナ明け配信は明日なので各自見ましょう。 そろそろデビューして一周年です。
*1:楽しく仕事が進められるように段取りを工夫しろと言われればそうなのだが....
