ドアベルと紹介カードでかわいい挨拶カードを表示する方法

Last-modified: 2025-04-07 (月) 19:28:50

このページでは配信にリスナーが遊びに来たときに通知や歓迎のメッセージが画面上に出てくるギミックについてまとめています

ドアベルと紹介カードをつかったかわいい挨拶とは

スクリーンショット 2025-03-30 054619.png
その日の初めてチャットに反応して「〇〇さん今日も来てくれてありがとう!」という紹介カードを表示して配信にきてくれた人に感謝の言葉を贈ることができるシステムです。
コメント欄で挨拶を返す場合はコチラでまとめています

ドアベルと紹介カードをつかったかわいい挨拶をつくる手順

手順書

  1. ドアベルのトリガーを作成
  2. 紹介カードのオペレーションを作成
  3. 紹介カードの設定
  4. うまく機能しているかテストをする

ドアベル(初チャットに反応する)トリガーを作成する

ドアベルの機能をするトリガーを選択します。
初コメ.png

[設定]>[イベント設定]>[チャット]>[初コメ]>[その配信枠での初コメ]
というように進みます。

イベント設定ウィンドウが現れたらトリガーを作成します
トリガーを作成するにはトリガー一覧の[追加]を押下し、
トリガー作成ウィンドウを開きます。
トリガー作成ウィンドウでは以下のように設定をして、保存を押します。
torigadoorbell.png

紹介カードのオペレーションを作成

次に紹介カードが演出ででるようにオペレーションを作成します。
オペレーションを作成するには[作ったトリガーを押下]>[常時実行]>[一意なタグ]と進んで
オペレーション一覧の[追加]ボタンを押下します。
aisatuka-doope.png

オペレーション追加ウィンドウで適当な名前を付けて保存します。

紹介カードの設定

ここからは紹介カードの設定をしていきます。
紹介カードの設定はオペレーションを選択して、イベントの設定画面の[紹介カードタブ]で作業を行います。
syoukaitab.png

紹介カードタブでは画面表示で登場させるための紹介カードの見た目の設定を主に行います。
まず、紹介カードが表示されるように紹介対象者のIDを入力しましょう。
その配信の初コメで動作させるには「%loginid%」を入力します
loginidnyuryoku.png

紹介カードの背景をカスタマイズする

紹介カードの背景をカスタマイズするにはカードの装飾という欄の呪文生成ボタンを押して、呪文を生成します。
あらかじめ保存しておいた背景画像のファイルを選択して設定すると、いい感じの紹介カードを作成することができます。
haikeifile.png
また、視認性を上げるために呪文生成ボタン内の設定を変更すると良いです。
スクリーンショット 2025-03-30 060236.png
CSSにも対応しています。

紹介カードのメッセージをカスタマイズする

messagebubun.png
紹介カードのメッセージをカスタマイズするには紹介カードタブ中央にある[メッセージ]内に記入することで表示されるメッセージを変更することができます。
messagechange.png

紹介カードのフォントをカスタマイズする

紹介カードで表示されるメッセージのフォントを変更するにはカードの見た目:フォント名にあるフォントを変更します。
fontsentaku.png
ペンのボタンを押下するとフォントを選択するウィンドウが表示されます。このウィンドウではお使いのPCにあるフォントがすべて表示されるので文字登録数の多いフォントを選択すると、すべての文字が表示されて困ることが少ないです。
fontwindow.png

紹介カードの文字のサイズをカスタマイズする

紹介カードの文字のサイズが大きすぎて折り返してしまう場合や、小さすぎて文字を視認できない場合には文字のサイズをカスタマイズしましょう。
文字のサイズを変更するにはこの箇所の数字を変更します。20~30px程度だと見やすいでしょう。
mojisize.png

紹介カードの表示位置をカスタマイズする

紹介カードは好きな位置に表示させることができます。初期状態ではランダムな位置に表示されるように設定されていますが、左下や右上など配信のゲーム画面などに被らないように設定することができます。
表示位置の設定についてこちらのページ位置・音量・遅延で詳しく確認できます。

うまく機能しているかテストする

ここまで完成したら、思い通り紹介カードが出てくるようにできているかをテストしましょう
ひとまず、紹介カードのオペレーション設定の下にある[保存してプレビュー]を押すと自分のアカウントに対して紹介カードが表示されるので、配信画面に正しく表示されているかを確認しましょう

うまく表示されていない場合はブラウザソースの設定を確認するか、位置設定をミスしていないかを確認しましょう。

コメント欄


このwikiにおける回答者は他の利用者です。開発者や筆者ではありません。
当掲示板に質問しても回答が得られるとは限りません。
質問をして回答を得られた場合はお礼を、自己解決した場合は報告を忘れないようにしましょう。

ここで質問する前に右上にあるサイト内検索やよくある質問などで調べてみましょう


  • コメント欄を設置 -- 2025-04-07 (月) 19:28:50