同人誌売上管理Webアプリ

ただしグラフは自分で作る必要がある

Todo

Remixのチュートリアルをやる

デザインとアニメーションを無視して動くモックをつくる

データセーブはローカルストレージ

本の追加

タップでカウントアップ

長押しでカウントダウン

要件

スマホでワンボタンで売り上げ入力ができる

売り上げ冊数のカウンターが増える

時刻が記録できる

やり直しができる

手動で時刻入力もできる

複数の本が買われた時に素早く入力できる

本の情報が入力できる

後からイベント時のグラフが表示できる

累積売り上げグラフ

5分間平均部数記録

Webアプリでやりたい

よかったら誰でも使えるように公開したい

ググってでてきたアプリはそういうものはなかった

UI設計

考察

最も単純なUIを考える。本が買われたら買われたボタンを押すだけのもの

https://gyazo.com/c579dbc4b16ad40f7d372aedde3061cc

履歴が出てきて消せる

このUIの課題：本がたくさんある時に切り替えがめんどくさい

方法はいくつかある

簡単に切り替えるUIをつくる

最初から全てのUIを出す(切り替えなし)

素早い切り替えUIをどうすればいいだろうか？

https://gyazo.com/11c704b91a5cd3ab145161c6f123c3ca

左：ボタンを押したら画面下から本の表紙がいっぱい展開されて押すと切り替えられる方式

例：Hey

右：UI表示ボタンを押したらその周りに本が出てきて、そちらの方向に指を移動すると本が選択される

このUIの課題：3冊の本が買われた時にいちいち切り替えるのは面倒

そもそも切り替えないで画面上に表示させるUIにすることにする

https://gyazo.com/719277a01f9ed2b2360b293f23857a79

削除は上の詳細画面でできればとりあえずいいだろう

（オプション）アニメーション設計

タップでカウントアップするときにこういう感じに楽しげ＆気持ちよくしたい

https://gyazo.com/8b938c472dea973430cdacada6879c5a

長押しする時に消えそうなアニメーションになってほしい

https://gyazo.com/ab947b64765b76399f8e123ba596e620

画面設計

フレームワーク選定