🎮トータライザーを作る
テレビでよくみる匿名で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にホスティングしてタイトル画面だけ作れた