🎮トータライザーを作る

テレビでよくみる匿名でYES/NOアンケートをとって統計を見れるアプリを作りたい

WebブラウザとしてもiOS/Androidアプリとしても動くようなアプリにしたい

既存アプリにはない以下の機能を追加したい
- スマートフォン一台を回して順に回答することもできるし、ルームを作成してそれぞれのスマートフォンで回答することもできる(WebRTCとかで通信)
- 質問とその回答結果をtwitterなどのSNSでシェアできる
- ルームごとの質問とその回答結果を履歴として閲覧できる

PixiJSを使えば綺麗にWebサービスが作れるし、Apache Cordovaを使ってmobileアプリにもできるらしい

慣れてきたEbitengineも良さそうだけどWebサービスの開発は少し苦労しそうな気がして据え置き

まずは以下のリポジトリでフロントを作ってみる

回答の通信はskywayを使えたら個人利用が無償で良い

skywayにjsのsdkがあるのでそれが使えそう

skywayのWebRTCのサンプルプログラムがすごい、参考にしたい

PixiJSのサンプルゲームもすごい、普通にハマる

viteでbuildされてるっぽい

とりあえず以下の設定でPJを開始
❯ npm create vite@latest
✔ Project name: … totalizer
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript
Scaffolding project in /Users/ponyo877/Documents/workspace/totalizer/totalizer...
Done. Now run:
cd totalizer
npm install
npm run dev
npm notice
npm notice New minor version of npm available! 10.5.2 -> 10.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.7.0
npm notice Run npm install -g npm@10.7.0 to update!
npm notice

viteで動いた

初push 🎉

PixiJSのサンプルゲームを読む、一旦ストップ

i18nは面白い、特定のkey-valueで多言語対応できるのは便利そう

copilot便利だ

想定通り全部日本語になった、便利

暫定TOP画面

figmaでデザインしてみる

参考にする

とても参考になるスクショ
1 | 2 | 3 | 4 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |

デザインしてくれる生成AIないかな

以下を試してみたが、あんまりうまくいかなかった。プロンプトに改善の余地がある
figmaにexportできるのは凄い

dribbble綺麗過ぎてずっとみてられる

以下の4つがシンプルで参考になる

凝らずにシンプルにデザインしてみた

PixiJSで2画面くらい作ったけど、このアプリにPixiJSは適していないと分かった

普通にReactで作ることにした、Cloudflare Pagesにホスティングしてタイトル画面だけ作れた