Appearance
チケット
概要
有料オンラインイベントを開催する際に必要となるチケット番号の発券、またイベントへの入場制限機能を提供します。
チケットは複数のイベントに対して紐づける事が可能で、例えばイベント 1、2、3 があった時に
- 「チケット 1」はイベント 1 のみ視聴できる
- 「プレミアムチケット」は全てのイベントが視聴できる
といった運用が可能です。
購入機能の実装
フロントエンドでチケットの購入機能を実装するには、専用のコンポーネントを使用する必要があります。
npm からインストール
shell
npm i @hedgehog-live/credit-dialog
WARNING
コンポーネントは Vue3 のみの対応となります。
手動発券
管理者は SDK 経由、またはHedgehog Dashboard でチケット番号を手動で発券する事が出来ます。管理者が発券できるチケットは 2 種類あります。
- 発券手数料かかる有料チケット
トラブル発生時の補填や、物理的なチケットを作りたい時に使用する想定です。
- 発券手数料がかからない無料チケット
イベントのゲスト用チケットとして使用する想定です。
WARNING
無料チケットは発券数に上限があります。
サンプル
ここでは、チケットを作成してフロントエンド側で情報を取得するまでの流れを解説します。
TIP
ステップ 1 ～ 3 は、Hedgehog Dashboard でも同様の操作が可能です。
WARNING
以下サンプルは、環境変数に STAGE_UUID がセットされている前提になります。
1. イベントを作成する admin
まずはイベントを作成します。
ts
// イベント作成
const event = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.event.admin.create({
title: "〇〇イベント",
isPublic: true,
startDate: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(),
image: new File([], ""), // 本来はイベントのタイトル画像を入力します
});2. チケットを作成する admin
イベントと紐づけるチケットを作成します。
チケット作成のためには支払先情報が必要なので、先に支払い先情報を取得し、得られたデータをチケットに紐づけます。
INFO
支払先情報は、ステージを作成した時に入力した stripe の情報になります。
ts
// 支払先情報取得
const payee = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.admin.payee.list();
// チケット作成
const ticket = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.ticket.admin.create({
title: "〇〇イベント用チケット",
isPublic: true,
amount: 3000,
stripeAccountUuid: payee[0].uuid,
});
// チケット番号を発券
const res = await ticket.admin.issue(TicketType.Free, "テスト用", 1);
console.log(res.ticketNumbers[0].number); // チケット番号テストで発券したチケット番号は、後で動作確認に使用します。
3. チケットをイベントに紐づける admin
作成したイベントとチケットを紐づけます。
ts
await ticket.admin.associate(event.uuid);ここまでで、チケットの作成は完了となります。
4. フロントエンドを作成する
イベントに使用する web サイトを作成します。イベントの趣旨に沿った web サイトを、自由に作成してください。
5. チケット情報を取得する
web サイト内で Hedgehog SDK を使用して有効なチケット一覧を取得するには、以下のようにします。
ts
const tickets = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.ticket.list()
.all();ここでは一覧取得時に all() を使用していますが、数が多くなるようであれば page() を使用して取得数を制限し、フロントエンド上でもページネーションを実装する必要があるでしょう。
uuid の分かっている特定のチケット情報を取得するには、以下のようにします。
ts
const ticket = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.ticket.ref("チケットのUUID");6. チケットの購入ダイアログを実装する
WARNING
ダイアログのリニューアルを検討しているため、リニューアル後に追記します。
7. チケット番号の有効判定を実装する
チケット番号を使用した限定エリアを作るためには、まず入力されたチケット番号が有効かどうかを判定する必要があります。
以下のようにして、チケットに対してチケット番号が有効かどうかを判定する事が出来ます。
ts
const validForTicket = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.ticket.ref("チケットのUUID")
.validate("チケット番号");この場合はチケットの UUID が分かっている必要がありますが、例えば一つのイベントに複数のチケットが紐づけられていた場合は、紐づけられたチケットの分だけ判定を繰り返す必要があります。
これを簡便にするため、以下のようにしてイベントに対してチケット番号が有効かどうかを判定する事が出来ます。
ts
const validForEvent = await Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.event.ref("イベントのUUID")
.validate("チケット番号");WARNING
Hedgehog SDK では、ルートガード等実際にページ遷移を制限するような仕組みは提供していません。
以上の機能を使用し、お使いのフレームワーク等で最適なルートガードを実装して下さい。
8. チケット番号の同時使用を制限する
hedgehog では、1 つのチケット番号につき 3 人まで 同時に視聴する事が可能としていますが、これを実現するためには以下のように監視機能を実装し、制限を超えた場合の処置を設定する必要があります。
ts
const limitter = Hedgehog.stage
.ref(process.env.STAGE_UUID as string)
.ticket.limit("チケット番号");
limitter.watch(() => {
alert("チケット番号の視聴制限を超えました");
// 視聴中であっても中断し、適宜別のページへ戻す処理を入れる
});watch() 関数を呼んだ時に自身のチケット番号使用権を取得し、もしその時 3 人以上のチケット番号使用者がいた場合は、最初の 1 人に対してコールバックが返ります。
同時制限の監視の必要がなくなった場合は、以下のようにして監視を停止します。
ts
limitter.stop();WARNING
この機能を適切に実装しない場合、1 つのチケット番号で複数人の視聴が可能になります。