【NextJS】日程調整からグループ分け、精算までPankoが便利です

1. 概要

前回はNextJSで開発されたPankoの利用シーンについて書きました。今回は新たにPankoにBingoが追加されたので、ビンゴについて書きます。

• Panko | 無料オンラインビンゴを楽しんでください。
  • ログイン不要。URLを共有するだけ
• 利用者
  • ホスト（１人）
    • ビンゴを作成して、参加者にURLを共有
  • 参加者（50人まで）
    • 共有頂いたURLを開いて参加

この記事のご覧の皆様、是非お使い頂ければ幸いです。

2. [ホスト]ビンゴを作成

2-1-1. 作成ボタンを押して、作成

• タイトル
• 詳細
• パスコード
  • ホスト画面に入る時に必要

2-2-1. 景品を登録

※景品があれば左上から景品登録を行う

2-3-1. 招待URLを共有

• QRコード
• URL

※LineやInstagram・Facebook・メール等で参加者に共有してください。

3. [参加者]入場

参加者は、共有頂いたURLを開いて入場する。

• 入場
  • 好きなPankoを選択
  • 自分の名前を入力
    • ビンゴとなった際にわかる名称
• 自分のカードが作成される

※ホストがビンゴをオープンするまで待つ

4. [ホスト]ビンゴをオープン

4-1-1. オープン

招待した参加者が集まった事を確認し、ビンゴをオープンする。

• 待機中のリストに参加者の皆さんがいるのかを確認

5. [参加者]参加ボタンを押して参加

参加ボタンを押して参加してください。

• 自動でビンゴが進むため、参加者は自分の状況を見ていればOK
• Chatにてホストにメッセージを送るとかすると盛り上がるかも

6.[ホスト]スタート

参加者一覧に皆さんがいる事を確認し、「スタート」する。

• 「スタート」ボタンを押すだけでビンゴが進む
  • 「ビンゴ」になるのは誰かな？？？

7.「クラウドデータリスト」よりいつでも確認が可能

ホストも参加者（ゲスト）もいつでも「クラウドデータリスト」より確認ができる

8. 備考

Pankoでは、ログイン不要でそれぞれのイベントを作成しURLを共有するだけで日程調整からグループ分け・精算、そしてビンゴができますので是非使ってみてください。

9. 参考

• Docs | Next.js (nextjs.org)
• Quick Start – React
• Getting Started with Redux | Redux
• Getting Started with React Redux | React Redux (react-redux.js.org)
• Material UI: React components based on Material Design (mui.com)

投稿者プロフィール

Sondon

開発好きなシステムエンジニアです。
卓球にハマってます。

最新の投稿

• 【Next.js】2025年1月4日【NextJS】Pankoにオンラインビンゴが追加されました
• 【Next.js】2024年12月14日【NextJS】Upload and Render Images with AWS S3
• 【Next.js】2024年11月10日【NextJS】ChatApp with Realtime updates(onSnapshot) On Cloud Firestore
• 【Next.js】2024年11月4日【NextJS】ChatApp with SocketIO