背景
- 前回行きつけのボルダリングジムの課題完登表をWEBアプリとして作るでClaudeCodeを使ってチャレンジした
tameshitemita.blog
- 思った以上に微妙な感じになった
- 原因としては、WEBアプリとしてのUIが足らない、課題の名称が少し特殊でそれを記号で再現すると行きつけのジムっぽさを失った
- 今回行きつけのジムから課題表を頂いたのでそれをベースに作っていく
- クリッカブルにして、紙ベースの物をWEBに置き換えてタッチできる物を作っていく
試してみた
この画像はボルダンリングの各課題の完登表です。
WEB上で課題管理票にチェックを出来るようにしたい
この画像の各マークの右側のセルを押したら、完登したのチェックをできるようにしたい。
要件
・上記にA,B,C,Dの4人の名前を記載し、タブでどのユーザーかを切り分ける
・完登セルをタップしたらチェックマークをいれる（複数回同じセルにタップの場合は、チェックマークの横にx2になど回数をいれる）
・左したの週、6，5，4，3も右側の空白セルを押したら上記同様にしたい。
・一番上に日付けを大きめにいれたい
netlifyでホストするのを想定しています
データは保存する必要無いですが、最後にスクリーンショットを撮って保存したいです。
- index.htmlと画像ファイルのみで構成される形になった
- めちゃくちゃずれてる・・・（緑の所）
- 手で直して行けば使えそう（タブレット未検証）
- まずはこれで試してみる
最終調整後
- 上記の様に完登欄をタップするといい感じにチェックが入る様に調整をした
- クリッカブルの位置調整が大変だったので、良い方法を考えていきたい
