はじめに
シャニマスにて、4.5周年を記念して「4.5 Anniversery プロデューサーズカップ」というランキングイベントが開催されました。
私も参加して、浅倉透で64位という成績をおさめることができました。
よかったですね。
前回は有給を取って稼働で殴り、凛世5位のプラチナ称号を取得した（コミュァーが走った4thAnniversaryPカップの記録 - 末吉日記 ）けど、今回は仕事休めないのが確定だったので、ぶらっと金称号を取ろうかなくらいの気持ちでいて、実際そうなりました。
タイマー制作へ
ただ、せっかくのお祭りだし金称号とるだけじゃなくて何かしら頑張りたいな～というモチベはあったんですよね。
というわけで、前回Pカップ以降広く知られることになった「30秒ルール」をうまい感じに管理できるツールを作ってみました。
それがこちらです！じゃん！
タップすると30秒を測ってくれるというだけのシンプルなアプリです。
作ったタイマーをよくうろついているPカップ鯖に投げつけてみたところ、何人かの方にPカップ期間中使ってもらえました！なかにはこれを使用して、三峰１位をはじめ、プラチナ称号を取られた方も。
喜びの声
うれしいですね。
アプリ開発を気軽に
アプリ役立ってうれし～という気持ちもありつつ、エゴサしてたらタイマー自作も検討してたという話もちらほらみつけたのですが、それは、ぜひみんな軽率に自作してほしい！！と思いました。
みんなが気軽にアプリ作って公開されたらいろいろと便利になって素敵ですよね。ということで、以下では自分がどうやって今回のアプリをリリースできたかという話をしていきたいと思います。
今回のタイマーだと1日でできました。こんな感じでサクッとアプリ作れるんだ～ということを踏み台に、こんなんあったらな～ってツールをじゃんじゃん開発してみんなで便利にゲームを遊びましょう！
30秒ルールの参考：
要件定義
まずどんなアプリにしよっかな～というところ。
- ブラウザで動作するwebアプリケーション
- github+vercelでリリース
- PC/スマートフォンで動作するレスポンシブ対応
- フットペダルでのキー入力に対応する
- スマホで動作することを想定し、タップできる面積を可能な限り広く取る
- UIは余計な情報が入らないよう極力シンプルにする（タイマー以外の情報は極力載せない）
- V3を入れた回数を管理し、画面を注視していなくても入れた回数がわかるようにする
V3入れると同時にペダルを踏む！回数が2回の状態ならV3しない！という単純な規則に従うだけでよいので楽、という思想のタイマーです。
スマホしか別デバイス用意できないよ～というケースを考えてスマホでの動作も想定。
リリースについては、友人からvercelならgithubつなげるだけでリリースできて良いよ～と聞いていたので使ってみました。実際めちゃ楽だったのでマジオススメです。
このあたりを考え始めたのが10/9(日)の昼ごろでした。
Pカップ開始2日前！急げ！
開発環境
自分はもろもろ済んでいる状態だったので、vercelの登録処理からのスタートでした。
そうでない方だと、
の前準備が必要です。正直コード書くよりこっちの環境構築のほうが数倍難しいんだよな。
今回使用したnodeのバージョンは16.17.1でした。
準備が終わったら、vercelに登録。
githubのアカウントと繋いだあと、new projectのClone Templateからvue.jsを選択して、テンプレートをgithub上のリポジトリに構成します。
そのリポジトリを手元のPCへgit cloneしてvscodeでいじっていきます。
フレームワークは以前触ったことのあったvue.jsの3系を選択しました。
vueはhtmlに+αでさまざまな処理を仕込めるtemplate部分、その処理の内容を詳しく記述するscript部分、デザインを司るstyle部分が一体となったvueファイルを作るといい感じにページが作られるというやつです。
プロジェクトがinitializeされたのが10/9 15:21。ここからコードを書いていきます。
設計/実装
世にjavascriptで書かれたストップウォッチのコードなんてのはたくさん転がってるので、参考にしつつ実装していきます。
ただこのアプリは
・ふたつのタイマーを動作させること
・停止ボタンを用意しないこと
・3回目の入力でタイマーがロック時間表示用のものへ切り替わること
・入力回数を画面に反映させること
・タイマーカウントダウン完了時にカウントをリセットすること
という特徴があるので、そのあたりだけ気を使いながら書いていきます。
背景に、カウントごとにクラスが切り替わるv-bind:classを書いておき、クラスごとに別の色が当たるCSSを用意しておくことによって、色がガラッと変わり、現在の状況がすぐにわかるようにしています。
そんな複雑なものでもないため、翌日の夕方ごろにはあらかた完了。
githubへプッシュするだけであっという間にリリースできました。さっそくdiscordで鯖のメンバーに共有。
鯖の面々からは「めちゃくちゃ使いやすいな」「視覚情報で何回押せるかが分かりやすいの、Pカッパー専用って感じでかなり良い」「最高」「30秒期間中に自分が1回リロ入れてるかどうかを確かめる術を探してたから、かなりありがたいかもしれない」「美味しいヤミー❗️✨🤟😁👍感謝❗️🙌✨感謝❗️🙌✨またいっぱい食べたいな❗️🍖😋🍴✨デリシャッ‼️🙏✨ｼｬ‼️🙏✨ ｼｬ‼️🙏✨ ｼｬ‼️🙏✨ ｼｬ‼️🙏✨ ｼｬ‼️🙏✨ ｼｬｯｯ‼ハッピー🌟スマイル❗️👉😁👈」といったポジティブな感想がもらえて嬉しかったです。
実走
11日の正午ごろ、Amazonからフットペダルが到着。
自分のタイマーの使用感を確かめるためにもあったほうがいいよなと思って9日の夜に急いで注文したのがギリギリ間に合いました。
そして16時、Pカップ開幕。
開幕少しだけ触ってみたところ……フットペダルの操作感が楽し～！
途方透のパッシブと全体札の噛み合いがもたらす締めターンの変化の波を、タイマーとフットペダルで乗りこなしていく感覚。これは楽しい……。
あとはちょこちょこ走って金ボーダー載せてSSF行って、完！という感じのPカップでした。
めでたしめでたし……。
おわりに
仕事で走れないなか、次へのモチベーションに繋がるいいPカップにできたかなと思います！
Pカップに限らず、何かしらゲームをより楽しくできるようなものを作っていきたいなと思います。アプリもそうですし、コミュァーとしては次の同人誌も作りたいですね。
歌姫庭園31新刊のシャニマス評論本『PRISMA 001』の再販分入荷が完了し、購入できるようになっています！ぜひお求めください！https://t.co/G2ZgwPj4OI pic.twitter.com/DK0IoiSN7c
— スペクトラム・シャンディ (@spectrumshandy) 2022年7月2日
それでは～
