学習の備忘録です。タスク管理アプリを作っています。
今回は、スタンプカード機能についての考え方を思考の整理がてら書いていきます。
「実際にこういうコードで実装する」みたいなものではなく、考え方の記事なので具体的なコードはありません。（そういう実装手順についてはまた後日記事にするつもりです。）
本記事は個人の学習記録です。内容の正確性を保証するものではありませんので、あらかじめご了承ください。
トップ画面のスタンプカードアイコンについて
以下はfigmaで作成したトップ画面のイメージです。
このイメージの右上のようにスタンプカードのアイコンを配置したいのですが、実装方法としては以下のようにしたいと思います。
- スタンプなし、スタンプ1個、スタンプ2個……のように、スタンプ数に対応した画像を用意する。スタンプ数は10個予定なので、stamp_0～10.pngで合計11枚用意
- それをBladeテンプレート側で表示制御する
スタンプ数はuser_statsテーブルのperfect_stamp_countカラムで制御しているので、「コントローラー側でこのデータを取得してフロントに渡す」→「フロント側で条件分岐させて表示する画像を選別」で実装できます。
if分岐で以下のようにスタンプ数ごとの分岐を書いていってもいいですが、
<div class="stamp-card">
@if($stampCount === 0)
<img src="{{ asset('images/stamp_0.png') }}">
@elseif($stampCount === 1)
<img src="{{ asset('images/stamp_1.png') }}">
@elseif($stampCount === 2)
<img src="{{ asset('images/stamp_2.png') }}">
// ...
</div>
コントローラーの方で以下のように配列データを作って、
$stampImages = [ 0 => 'stamp_0.png', 1 => 'stamp_1.png', 2 => 'stamp_2.png', // ... ];
そのデータをフロントに渡して、
<img src="{{ asset('images/' . ($stampImages[$stampCount] ?? 'stamp_0.png')) }}">
みたいに表示させてもいいですね。
または、stamp_0.png、stamp_1.pngとするなら、
<img src="{{ asset('images/stamp_' . $stampCount . '.png') }}" alt="スタンプカード">
こんな感じでやっていけばわざわざ配列を作らなくていいかも。
スタンプカードのモーダル表示
スタンプカードは、トップ画面の右上に表示させるのとは別に、以下の場合のためにモーダル表示させます。
- 自分が今スタンプをどれだけ貯めているかの確認
- スタンプ獲得条件を達成した時のスタンプ追加
特に、スタンプ獲得時はスタンプをポンッと追加するアニメーションを入れたいので、画像を使っての表示制御だとその辺り調整が難しそうです。
というのも、画像だとスタンプを追加する時に「どの位置にスタンプを押すアニメーションを入れればいいかの指標がない」からです。
HTML/CSSでスタンプカードのマスを区切っていって、マスごとに番号を割り当てていけば、「そのマスの番号に対応する位置にスタンプを押せばいい」ということになります。
まとめ
まとめると、
- 静的な部分は画像差し替えで
- 動的な部分はHTML/CSSで
スタンプカードの見た目を作っていきます。
トップ画面のアイコンの方もHTML/CSSでやれますし、「スタンプカードのデザインを気軽に差し替えたいな」という場合はHTML/CSSでの実装の方がいいのかなと思います。
ただ、今回は
- スタンプカードのデザインに幅を持たせる予定がないこと
- 小さいアイコンを細かくDOM制御する必要性が低い（動的な制御が少ない）こと
上記の理由から、画像差し替え方式にします。
実装手順はまた後日記事にする予定です！
コメント