traPtitech/rucQ-UI

点呼のページの左上にバツを置いて戻れるようにする

Open

#244 opened on 2026年6月21日

GitHub で見る
 (0 comments) (0 reactions) (0 assignees)Vue (0 forks)auto 404
good first issue

Repository metrics

Stars
 (2 stars)
PR merge metrics
 (PR metrics pending)

説明

rucQには合宿中にシンプルな択一問題に答えてもらう形式の点呼機能があります。ふつう点呼は

  • 合宿のアクティビティページを開く
  • オレンジ色で示された点呼のアクティビティの右「確認する」または「回答する」ボタンをクリック

でアクセスすることができます

やってほしいこと

点呼のページの左上にバツボタンを置いて、それを押すことで「アクティビティ」ページに戻れるようにしてください

バツボタンには Vuetify の <v-btn> コンポーネントを使用してください。既存のものとしては src/components/event/EventEditor.vue の実装と見た目を参考にしてください。ちなみに EventEditor.vue はイベントの編集ページのコンポーネントであり、合宿のスケジュールページの「新規イベントを作成」などで出現するモーダルです

補足

  • 開発環境のフロントエンドから直接ステージングのバックエンドに接続して確かめるのがやりやすいです。README.md の Staging / Production API を使う方法 を参考にしてステージングに接続してください
  • 合宿・点呼を新規作成するには https://rucq-admin-dev.trapti.tech/ から rucQ Admin にアクセスしてください。ステージング環境に過ぎないので、好きにいじってもらって構いません

めっちゃ発展

結構難しいのでQSoCの中でここまで取り組んでもらう必要はありません!

その上で、もしあなたがすごくチャレンジ精神旺盛だったならば、この点呼のページ自体のモーダル化に挑戦してもらえるとすごくありがたいです。概要を説明すると、

  • 点呼のページは https://rucq.trap.jp/camp26spring/rollcall/15 のような独自の URL を持つ独立したページとして存在していますが、
  • 先ほど例にした src/components/event/EventEditor.vue のような「モーダル」はある1つのページの中の仕組みです

点呼のページを「モーダルにする」とは以下のようなことを指します

  • RollCallView.vue を RollCallModal.vue のような Vuetify モーダルコンポーネントに置き換え、アクティビティページの「確認する」とか「回答する」ボタンを押した時にパッとページを移るんじゃなくてヌッと下から迫り出してくるような見た目にする
  • モーダルを開いたタイミングで URL を手動でその点呼に対応するものに書き換える。つまり、rucQというSPAの中でさらにミニマルな手動SPAみたいなことをする
  • 点呼のURLを開いた時に「1. アクティビティページが開く」「2. モーダルが下からヌッと出てくる」が連続して実行されるようにする

コントリビューターガイド