カスタムウィジェット
TikTok LIVEウィジェットを自分で作ろう
TikTok LIVEウィジェットとは、あなたのLIVEに反応するWebページのことです。ギフトが届くとページがアニメーションし、TikTok LIVE StudioやOBSがそのページを配信に表示します。HTML、CSS、JavaScriptで書くことも、作りたいものを説明してAIに書かせることもできます。TokElementsが、あなたのライブイベントと一緒にそれを動かします。
TikTok LIVEウィジェットの仕組み
1 · あなたのTikTok LIVE
視聴者がギフトを送り、フォロー、いいね、シェア、チャットをします。そのひとつひとつがイベントです。
2 · TokElements
公開している@ユーザー名であなたのLIVEに接続します。パスワードは不要です。すべてのイベントを、発生と同時にウィジェットへ渡します。
3 · あなたのウィジェット
小さなWebページです。表示する内容はHTML、見た目はCSS、イベントが届いたときの動作はJavaScriptで書きます。
4 · LIVE StudioまたはOBS
オーバーレイのリンクを、TikTok LIVE Studioでは「リンク」ソースとして、OBSではブラウザソースとして追加します。そこにあるウィジェットはすべて配信に表示されます。
数行で作るギフトアラート
ウィジェットは、ひとつの関数でイベントを受け取ります。次の例は、ギフトが届くたびに、誰がどのギフトを何個送ったかを表示します。
<div id="alert"></div>
<script>
TE.on('gift', function (e) {
var el = document.getElementById('alert');
el.textContent = e.user.name + ' sent ' + e.gift.name + ' ×' + e.gift.repeat;
el.className = 'show'; // your CSS animates it in
setTimeout(function () { el.className = ''; }, 5000);
});
</script>みんなが作っているもの
ギフトアラート
ギフトごとに違うアニメーション。Roseなら小さく、Lionなら画面いっぱいに。
目標バー
視聴者みんなで達成するフォロワー、いいね、ギフトの目標。
ランキング
配信のトップギフターやトップいいね送信者を、リアルタイムで更新。
ゲーム
視聴者がチャットコマンドやギフトで遊ぶ、ルーレット、レース、クイズ、タワー積み。
画面上のチャット
チャットを、あなた好みのスタイルで配信の一部に。
その他なんでも
タイマー、投票、再生中の曲、ギフトで育つペットなど。Webページなので、ページにできることなら何でも作れます。
説明するだけで、AIが作ります
コードを書く必要はありません。ウィジェットを説明するだけです。たとえば「誰かがLionを送ったら、稲妻のライオンを5秒間表示するサイバーパンク風のギフトアラート」のように。AIビルダーがHTML、CSS、JavaScriptを書き、あなたのライブイベントにつないで、プレビューキャンバスに表示します。変更は頼むだけで、コードを開いて自分で編集することもできます。
アイデアから配信まで
1 · 無料アカウントを作成
登録して、公開している@ユーザー名でTikTokをリンクします。
2 · ウィジェットを作る
テンプレートから始めるか、ブラウザエディタで書くか、AIビルダーに説明します。シミュレーションのギフトやフォローでテストできます。
3 · リンクをひとつ配信に追加
オーバーレイのリンクを、TikTok LIVE Studioに「リンク」ソースとして、またはOBSにブラウザソースとして追加します。配置したウィジェットはすべてそこに入ります。
よくある質問
TikTok LIVE Studio用に自分でウィジェットを作れますか？
はい。TikTok LIVE StudioはWebページを「リンク」ソースとして表示できるので、ウィジェットはあなたのLIVEに反応するWebページです。TokElementsがそのページにライブイベントを渡してホスティングするので、書くのは表示内容だけ。AIに書かせることもできます。
コードの知識は必要ですか？
いいえ。テンプレートを選ぶか、AIビルダーにウィジェットを説明するだけです。コードを書く人には、ライブイベントとプレビュー付きでHTML、CSS、JavaScriptを扱えるブラウザエディタがあります。
ウィジェットはどんなイベントに反応できますか？
ギフト（コンボ数とコイン価値付き）、フォロー、いいね、シェア、サブスクリプション、チャットメッセージ、参加、投票、バトル、さらに視聴者数やコインなどの合計値にも反応できます。
OBSでも使えますか？
はい。同じオーバーレイのリンクが、OBSではブラウザソースとして、TikTok LIVE Studioでは「リンク」ソースとして使えます。
TikTokのパスワードは必要ですか？
いいえ。TokElementsは公開している@ユーザー名であなたのLIVEを見つけます。TikTokのログイン情報を求めることはありません。
今日、最初のウィジェットを作ろう。
無料アカウント、ブラウザエディタ、AIビルダー、TikTokのライブイベント。すべてリンクひとつで配信に表示されます。
TikTok LIVE Studioのメニューや機能は時間とともに変わり、国によって異なります。TokElementsはTikTokと提携していません。