はじめに
クロサナです。
普段はポケモンの色んなコンテンツを横断して大会を運営しています
（GO・シングル・ダブル・ポケカ・ユナイト・コマスター・諸過去作コンテンツ）
今回は
参加者管理WEBサイトを作りました。
psychowave.embrabat-report.net
本記事は、参加者管理WEBサイト「PsychoWave!」について、主催側で利用する際の使い方を説明した記事です。
なんか分からないこととかあったら聞いてください。
PsychoWave! とは？
PsychoWave!は、オフライン大会の参加者を Web 上で管理するためのサイトです。
簡単にいうと、使いやすくなったTwiplaのイメージ。
サイト作成のこだわりポイントは以下の通り。
ブログページに参加者一覧を埋め込める！
こんな感じ
こんなん神ですやん！（自画自賛）
連携して参加ボタンを押すだけ！
参加までがマジで簡単。
ページに飛んでDiscord連携したら、でっかく置いてある参加ボタンを押すだけで完了！
一応フォーム機能も付けてあるので、質問事項を書かせることもできます。
一言コメント対応
上の参加者一覧でも見たと思いますが、フォームとは別に一言コメントを入れられます
遊び心ばっちり。
その他
- Discord 連携で本人確認
- 参加者は Discord アカウントでログイン。重複参加やなりすましを抑えやすい
- 定員とキャンセル待ち
- 定員を設定すると満員時は自動でキャンセル待ち。定員変更時は昇格・降格の確認も表示される
- QR チェックイン付き
- 参加者がスマホで QR を見せ、スタッフが読み取ってチェックインできる！
- 質問フォーム
- 参加時に任意の質問（記入・選択・はい/いいえなど）を追加できる
- Discord サーバー未参加者の確認
- 連絡用 Discord サーバーに入っているかを参加者一覧で確認できる（任意機能）
- 参加者一覧・ステータス管理
- エントリー / チェックイン済み / キャンセル待ち / キャンセルを一覧で管理。
- ソートももちろんできる。CSV 出力も可能。
現在、大会作成機能は一旦知り合いに限定公開としています。利用には Discord 連携のうえ、主催者権限のリクエストと管理者による承認が必要です。承認が下りると「主催者ページ」から大会の作成・管理ができます。
PsychoWave!の使い方
以下、サイトの使い方です。
STEP 1 — サイトにアクセスし、主催者権限を得る
1-2. Discord で連携する
まだログインしていない場合は、「Discord で連携してリクエスト」を押します。Discord の認証画面が開くので、許可してください。
すでに Discord 連携済みの場合は、表示名が表示された状態になります。
1-3. 主催者権限をリクエストする
「主催者権限をリクエスト」を押して申請を送信します。送信後は「承認待ち」の状態になります。
- リクエストは短時間に何度も送れません（スパム防止のため、約 60 秒に 1 回まで）
- 承認はサイト管理者が手動で行います。承認されるまで「主催者ページ」には入れません
1-4. 承認後、主催者ページへ
承認されると、トップページのボタンが **「主催者ページへ」に変わります。ここから大会の作成・管理ページにアクセスできます。
STEP 2 — 主催者ページで大会を把握する
2-1. 主催者ページ（ダッシュボード）
主催者ページでは、自分が作成した大会、および共同運営として参加している大会が表示されます。
共同運営として登録されている大会には共同運営バッジが付きます。
→各カードから大会名・日時・場所を確認し、クリックで管理画面に移行します。
QR 権限のみの共同運営者について
共同運営に追加された人のうち、サイトの「主催者承認」をまだ受けていない人は QR 権限となり、主催者ページ自体にはアクセスできません。QR チェックインだけ担当させたいスタッフ向けの権限です（後述 STEP 8）。
STEP 3 — 大会を新規作成する
3-1. 新規作成画面を開く
主催者ページの「新規作成」を押すと、大会設定画面が開きます（新規作成時は「大会設定」タブのみ）。
3-2. 基本情報を入力する
| 項目 | 説明 |
|---|---|
| 大会名 | 必須。参加者ページにも表示されます |
| サムネイル画像 | 任意。JPEG / PNG / WebP、最大 2MB。横長 16:9 に切り取られて表示されます |
| 日付・開始・終了 | 必須 |
| 場所・住所 | 任意 |
| 詳細リンク | 任意。ブログ記事などへの URL |
| 主催連絡先 | 参加者がキャンセルする際の連絡先。後述の「自己キャンセル」をオフにする場合は必須 |
| 概要 | 任意。参加者ページでは 3 行まで表示 |
| QR チェックイン開始日時 | QR チェックインを使う場合は必須。「QR チェックイン不要」にチェックを入れると不要 |
| 定員 | 任意。空欄なら定員無制限 |
事前にサイズと形式を確認してください。
3-3. 参加者ページの見た目を設定する
| 項目 | 説明 |
|---|---|
| URL 設定 | 大会ページの末尾（例: `https://psychowave.embrabat-report.net/t/大会名`）。空欄ならランダムな文字列が自動割り当て。半角英数字・ハイフン・アンダースコア、3〜40 文字 |
| ページ背景色 | 参加者ページの背景色（# は入力不要） |
3-4. 参加ボタンをカスタマイズする
ブログなどに貼る「参加する」ボタンのデザインを決めます。
- ボタン文言（既定は「参加する」）
- ボタン背景色・文字色・枠色・枠の太さ
- プレビューで見た目を確認
- HTMLコピーで埋め込み用コードを取得
- STEP 5 で詳述
3-5. 参加キャンセルのルール
「参加者自身のキャンセルを許可する」の ON/OFF を選びます。
- ON：参加者ページにキャンセルボタンが表示される
- OFF：キャンセルボタンは非表示。代わりに主催連絡先の案内が出る（この場合、主催連絡先の入力が必須）
3-6. 作成する
画面下部の 「作成」 を押すと大会が登録され、編集画面（大会設定タブ）に移ります。
STEP 4 — 大会設定を編集・保存する（作成後）
大会を作成したあと、同じ画面で設定の変更ができます。
作成後の大会には画面上部に 3 つのタブがあります。
| タブ | 内容 |
| 大会設定 | 大会の各種設定、埋め込み HTML、削除など |
| 参加者管理 | 参加者一覧・編集・CSV 出力 |
| 共同運営 | スタッフの追加・削除 |
4-1. 保存のしかた
設定を変更したら 「保存」を押します。
未保存の変更があると、画面下部に固定バーが出て「未保存の変更があります」と表示されます。
変更した状態で保存せず他のページへ移動しようとすると、保存するか破棄するか確認されます。
4-2. 大会ページを確認する
大会設定タブ上部の「大会ページ」リンクから、参加者に見えるページ（`/t/大会のURL`）を開けます。公開前の最終確認に使ってください。
4-3. 質問フォーム（任意）
「質問フォームを有効にする」を ON にすると、参加時に追加の質問画面が表示されます。
- 質問の追加・削除・並べ替えが可能
- 回答形式:の選択が可能
- はい・いいえボタン / 記入 / プルダウン / ラジオボタン / チェックボックス
- 記入型では解答の検証ができる
- 数字のみ・英字のみ・Twitter ID・Discord タグなどのプリセットか、任意記入の選択
STEP 5 — ブログなどに「参加する」ボタンを設置する
大会の告知記事（はてなブログなど）に、参加受付への導線を貼ることができます
5-1. 参加ボタンの HTML をコピー
大会設定タブの「参加ボタン編集」でデザインを整え、「HTMLコピー」を押します。クリップボードにHTMLコードが入ります。
5-2. ブログに貼り付ける
ブログ画面で、コピーしたコードを貼り付けます。
少なくともはてなブログはHTMLをそのまま置けばコピーできますがあとはどうなんでしょう（？）。
参加者がそのボタンを押すと、大会ページが開きます。
Discord連携後、参加者ページで参加ボタンを押すと参加申請が完了します。
- ボタンの色や文言を変えたら、再度 HTMLを貼りなおしてブログ側を更新してください。
- 大会の URLを変更した場合も、古いURLは使えなくなるため、ブログのリンクを貼り直す必要があります。
5-3. 参加者一覧を iframe で埋め込む（任意）
大会設定タブの「参加者一覧埋め込み」では、ブログなどに参加者一覧だけを表示する埋め込み用 HTML をコピーできます。
- 横幅・縦幅を指定
- 枠線の ON/OFF と色を指定
- HTMLコピーで取得
エントリー状況をブログ上でリアルタイムに近い形で見せることで、参加者が他の参加者を見て参加できます。
STEP 6 — 参加者を管理する
大会設定画面の「参加者管理」タブを開きます。
6-1. 一覧の見方
| 列 | 内容 |
|---|---|
| アイコン | 参加者のアイコン。クリックで Discord ID をコピーできる |
| 表示名 | 参加者ページでの表示名 |
| 参加ステータス | エントリー済み / チェックイン済み / キャンセル待ち(n番目) / キャンセル |
| Discord名 | Discord 上の名前 |
| 最終更新日時 | 最後に更新された日時 |
6-2. 絞り込み・並べ替え
- 参加ステータス
- すべて / エントリー済み / チェックイン済み / キャンセル待ち / キャンセル
- Discord名・表示名で検索
- 一覧をその場で絞り込み
- 列ヘッダーをクリックすると、その列で昇順・降順に並べ替え
6-3. 参加者を編集する
一覧の行をクリックすると編集ポップアップが開きます。
- 参加ステータスの変更
- 表示名・コメント
- キャンセル待ち順の変更（キャンセル待ちの場合）
- 質問フォームを有効にしている場合は、回答内容の編集
6-4. ゲスト参加者を追加する
Discord 連携のない参加者を、名前だけで登録できます。
「ゲスト追加」から追加します。
6-5. CSV 出力
「CSV出力」で参加者データをダウンロードできます。外部ツールでの集計やバックアップに使えます。
STEP 7 — 共同運営者を追加する（任意）
当日の受付や参加者管理を手伝ってもらう人を、共同運営タブから追加できます。
7-1. 追加の手順
- 「共同運営」タブを開く
- 追加したい人の Discord ユーザー ID（17〜20 桁の数字）を入力
- 「追加」を押す
- 追加する人は、事前に本サイトへ Discord 連携で一度ログインしている必要があります
- まだログインしていない人は追加できません（エラーになります）
- Discord ID の確認方法は、画面内の「Discord ID の確認方法」リンクを参照
7-2. 権限の種類
運営者一覧に、次の 3 種類の権限が表示されます。
| 表示 | できること |
| 作成者 | 大会設定の編集・削除、参加者管理、共同運営の追加削除、QR チェックイン |
| 編集権限 | 参加者管理、QR チェックイン。大会設定は閲覧のみ。主催者ページに共同運営の大会が表示される |
| QR 権限 | QR チェックインのみ。主催者ページには入れない |
編集権限になるには、その人がサイトの 主催者承認（STEP 1 と同じ承認フロー）を受けている必要があります。承認されていない共同運営者は自動的にQR 権限になります。
7-3. 削除
作成者のみ、各行の 「削除」で共同運営者を外せます。
STEP 8 — 当日の QR チェックイン
8-1. 事前準備
- 大会設定で 「QR チェックイン不要」 がオフになっていること
- QR チェックイン開始日時以降でないとチェックインできない
- QRコードを表示している間、チェックインされたかを確認するために通信量を食い続けるためなるべく表示してほしくないことから。
- チェックインを行うスタッフ（作成者・共同運営者）は、事前に Discord 連携でログインしておく
大会設定画面下部の 「QRチェックイン説明」に、当日の流れがまとまっています。
8-2. 当日の流れ
- 参加者が大会ページの「QRを表示」をタップし、QR コードを見せる
- スタッフがスマホのカメラで QR を読み取り、表示されたページを開く
- 権限のあるスタッフには 「チェックイン確認」画面が出るので、「チェックインする」を押す
- 参加者のステータスが チェックイン済みに変わる
8-3. チェックインできない場合
- まだ QR チェックイン開始時刻前
- 参加者のステータスが「エントリー済み」ではない（すでにチェックイン済み、キャンセル待ちなど）
- スタッフが Discord 連携していない、または権限がない
STEP 9 — Discord 未参加者管理（任意・上級者向け）
連絡用の Discord サーバーに、参加者が入っているかを一覧で確認できる機能です。
設定がやや専門的なので、自信のある人だけ読んでください。
STEP 10 — 大会の削除・その他
10-1. 大会の削除
大会設定タブ下部の「大会削除」から、大会を完全に削除できます。取り消せません。作成者のみ実行可能です。
10-2. バージョン表示
主催者ページや管理者ページの一番下に PsychoWave! v1.2.5のようにバージョンが表示されます。不具合報告の際に聞くかもしれません。
よくある質問
Q. 主催者リクエストを送ったが、いつ承認される？
サイト管理者が手動で承認します。待っててください。
まだ現状はプレリリース版なので、よほど何度も一緒に運営している知り合いかDMで許可を出した人しか通すつもりはないです。
Q. 共同運営者を追加したが「未登録」と出る
その人がまだこのサイトに Discord 連携でログインしていません。先にログインしてもらってから再度追加してください。
Q. 定員を増やしたらキャンセル待ちが自動でエントリーになる？
定員変更を保存すると、定員に空きができた分だけキャンセル待ちの先頭から自動昇格します。保存前に確認画面で対象者が表示されます。
Q. 参加ボタンの HTML を貼ったが、デザインが古い
大会設定でボタンを変更したあと、HTMLコピーし直してブログを更新してください。
おわりに
プレリリース版なので、使いながら改善していきます。
不具合や要望があればクロサナまで。
要望は全部叶うとは限りませんが。
サイトアイコンはるすとりさんに描いていただきました。
本当にいつもありがとう。
余談
