たぬえさ3で特定のコマンドに反応して動画や画像を出す方法！
はじめに：たぬえさ3の記事、何があるとよい？
どうも、うにのれむです。
結構初期設定の段階で困っている方がいらっしゃるみたいなのでnoteの記事みたよなんて話を聞くことが多くなってきました。
配信におじゃましてそんな話を聞くとnote書いてよかったなと思うときもあります。
今回もかなりかみ砕いて説明していくので文量がかなり多くなってます。
目次から見たいところを見てください！
チャート式を意識して書いてみました。しっかり読めばわかるかも？
余談ですが自分が使うソフトウェアを選ぶのは個人の自由ですので、好きなソフトウェアを使って楽しい配信画面を作ると良いと思います！
TriggerFyreやその他にも同じような操作ができるアプリがたくさんあるので、使いやすいものを使ってください！
ということで、今回はTriggerFyreのコマンドシステムのようにたぬえさ3を使って「！」の付いたコメントがチャットされた時にトリガーを設定する方法と画像が画面に表示される方法の２つをご紹介します！
「！」コマンドをトリガーにする方法
コメント欄に「！」のコマンドが送られてきたときにトリガー（画像や音がでる）方法を早速まとめていきます。
トリガーを作ってみる
まずメイン画面からコマンドのトリガーを設定するための画面を開きます
このように操作すると「Command Twitchイベント設定」というウィンドウが開きます。
⚠今回使うのは「Command Twitchイベント設定」ですので間違えて別のウィンドウを開いたら、いったん閉じて正しいウィンドウを開いてください
トリガーの詳細な設定をする
すこし複雑なので、注意して設定しましょう
（ここに入力した名前はコマンドには関係しないです）
③のトリガー設定を押すと、「キーワード編集」のウィンドウが開きます。
④では 「！」コマンドを 「！」を含まずに入力してください
⑤では「！」コマンドがどのくらい一致していると発動するのかを設定します。
「ExactMatch」は大文字小文字を考慮した完全一致です
「PartialMatch」は大文字小文字を考慮した部分一致です
「ExactMatchIgnoreCase」は大文字小文字を無視した完全一致です
「ParticalMatchIgnoreCase」は大文字小文字を無視した部分一致です
「AnyMatch」は文字が何でも反応します
たぶん何設定すればいいのかわからんと思うので、コマンドの場合は「ExactMatch」か「ExactMatchIgnoreCase」にしてください。
「ExactMatch」なら「!uni」というコマンドの場合は「!UNI」だと発動しないです。
「ExactMatchIgnoreCase」なら「!uni」というコマンドの場合でも「!UNI」で発動します。
⑥入力が済んだら、保存ボタンを忘れずに押してください。
⑦の保存ボタンも忘れずに押してください。大抵保存ボタンどっちか押し忘れます。
画像がでてくるようにする方法
ここからはトリガーが入力された時に画像がでるように設定する方法を書いていきます。画像以外にも動画を出すこともできます。
「コマンド」以外の他のトリガーでも活用できるので、覚えてみて下さい。
⑨→⑩→⑪→⑫と進みます。
⑫では自分がわかりやすい名前を付けて、セットを押します。
⑭を押して、表示したい動画や画像を選択します。
⑮から表示される時間や場所、動画の音量を設定できます。
初期設定では画面のどこかにランダムに出現するようになってます。
もし、画面の右上とか左下とかに固定して表示したい場合は「位置設定」が必要です。
※1 プリセットを選択するとあらかじめ製作者さんが作ったプリセットの通りに出現します。
画像を配信画面の好きな場所に好きな時間だけ出したい！
⑯の「位置設定」を押すと、位置編集ウィンドウが出てきます。
まず、初期設定の画面を理解しましょう！
初期設定では上から順番に
＠TL 横ランダム、縦ランダム 500ﾐﾘ秒すなわち0.5秒かけてフェードイン
＠TL 横不動、縦不動 5000ﾐﾘ秒すなわち単純に5秒表示
＠TL 横不動、縦不動 500ﾐﾘ秒すなわち0.5秒かけてフェードアウト
に設定されてます。
なにも設定しないと、6秒間表示されて、表示される位置はランダムで、
最初の0.5秒と最後の0.5秒にぬるっと出てきてぬるっと消えます。
6秒以内の動画は強制的に6秒で消えます。
通常、上から順番に処理されます。
※＠TLというのは画像の左上を起点にするということです。
※不動というのは一つ前の位置から動かないということです。
ここから下では位置編集で時間をいじる方法と場所をいじる方法をそれぞれご紹介します。
位置編集で配信画面に好きな時間だけ出す方法
位置編集画面を使うと、配信画面に好きな時間だけ出現させることができます。例を３つ用意したので確認しましょう。
例１: 画像をランダムな位置に30秒表示したい場合
※フェードイン&アウトあり
②表示時間を今回表示したい29000ﾐﾘ秒すなわち29秒に設定
→フェードイン&アウトで1秒あるので30秒になる。
③必ず設定を変えたら保存すること
例２：画像をランダムな位置に10秒表示したい場合
※フェードイン&アウトなし
②1つ目の設定を変えます。
③エフェクトが「FadeIn」になっているので「None」にします。
④時間を表示したい時間（今回は10000ﾐﾘ秒すなわち10秒）にします
⑤数値や設定を変えたら絶対に保存ボタンを押すこと！
例３：動画をランダムな位置に動画の再生時間分だけ表示する場合
※45秒の動画を45秒表示したい フェードイン&アウト有
「映像の時間に自動調整」を使って簡単に設定できます。
また、「映像の時間に自動調整」は２つ目のアクションに設定すると、
その後のアクションも自動的に自動調整されます。
②映像の時間に自動調整にチャックを付けます
③保存を忘れずに！！！
位置編集で配信画面の好きな場所に出す方法
場所編集の基本その１：位置をつくってみる
まず試しに左上の謎の青〇がある場所を押してみてください。
押した場所の座標が書かれた
@TL 横:〇〇〇 縦:〇〇〇
が追加されます。
これが場所操作の基本です。
場所編集の基本その２：位置の起点について
青〇の位置は、表示される画像や動画の起点になります。
位置の起点とは座標グラフでいうところの(0.0)の位置になります。
下の画像の青〇は
＠TL 横:373 縦:176
に設定されています。
＠TL というのは「位置の起点」が左上にあるということで、
例えば、ウニのPNG画像が出現するようにすると、その画像の左上の角に合わせて画像が表示されます。
また、「位置の起点」は下の画像のまるで囲っているところで変えることもできます。
ただし、「位置の起点」を変えると、座標の(0.0)の位置が「位置の起点」になるので気を付けましょう。
画像は左上の角を〇に合わせてでてくる。
位置の起点は変えることもできる。
場所編集の基本その３：数値でサイズや位置を変える
位置編集の画面は数値を用いてサイズや位置を変えることができます。
まず位置についてですが、
位置編集の左上の白い四角が実はフルHD(1920×1080)のサイズになっていて、座標があります。
※位置の起点が左上の場合のみ
左上 横: 0、縦: 0
左下 横: 0、縦: 1080
右上 横: 1920、縦: 0
右下 横: 1920、縦: 1080
移動させたいアクションを選択して、
手動で左下の横軸と縦軸の数値を入力するところに数字をいれると、
その位置に青〇を移動させることができます。
画像はあくまで@TLすなわち「位置の起点」がTopleftの場合。
前の位置から動かさない☑
前と同じ大きさ☑
とかも活用しよう。
また、サイズについては
左上の白い四角の中で編集することはできません。
アクションごとに横幅と高さを設定しましょう。
また、サイズは原則位置の起点の方向に大きくなります。
ここからは実際に表示させる例を例示します。
例４：画像を6秒間配信画面の左上に表示したい
②横軸ランダムと縦軸ランダムの選択を解除します。
③保存は絶対に忘れないこと。
保存をすると、「＠TL 横：0、縦：0」になって、〇を位置が左上になります。
例５：画像を６秒間画面の右下に表示したい。
例４と最初の操作は同様です。
②横軸ランダムと縦軸ランダムの選択を解除します。
④位置の起点を「BottomRight」（つまり右下です）に設定します。
⑤保存を忘れずにします。
保存をすると、右下に〇が移動して、右上の選択したアクションの数値が＠BR 横：0、縦：0になります。
応用してさまざまなアニメーションを作ってみよう
単純な動きは以上の例１～６をうまく使えば簡単に再現できます。
たぬえさ３を使えば画像や動画を動画にしなくてもどんな風にでも動かすことができます。苦手な動きは回転をかけることがあまり得意ではないです。
エフェクトや位置の起点を使うことで数値をいじらなくても簡単に動かせます。
GIFを使わなくても、PNGだけでアニメーションを作ることもできます。
ここからはプレビューと設定画面で応用したパターンをいくつか紹介します。
応用していろんなアニメーションをつくってみた。
設定画面
困ったときはコチラ
コマンド：コマンド動かないんだけど！？
・設定しているタブは間違っていませんか？
→「トリガーを作ってみる」の項目で
タブを改めて確認してみてください。
コマンドを設定するタブは「Command Twitch設定」です。
・「トリガー設定」の保存は適用されていますか？
「トリガーの詳細な設定をする」の項目で保存は⑥と⑦で２度必要です。
・トリガーを間違えて登録していませんか？
「！」は文頭に必要ありません。
位置編集：画面に画像が出てこないんだけど！？
OBSのブラウザソースを確認しましょう。
「forOBS3.html」は幅と高さを（1920×1080）に設定する必要があります。
これは「位置編集ウィンドウ」の白い四角がその大きさに設定されているからです。
ソース内からブラウザソースを右クリック→プロパティからアクセスできます。
さいごに：全部読んで理解して発想力さえあればなんでも作れる
最初は僕のアニメーションや表示方法を参考にして大丈夫です！
後々には是非あなただけのアニメーションを作って、配信画面を盛り上げてほしいなと思います。
いろいろな人が使って、共有することで絵が描けなかったり、動画編集のつたない僕が想像つかないような素晴らしいものも作れるじゃないかと思います。
PNGやMP3はMP4に比べてかなり軽いタイプのファイルタイプです。
配信画面にたくさんMP4やwebmファイルを表示するとかなり重くなることが懸念されますが、ローカルファイルを使って表示し、手軽にアニメーションが作れるのはすごく魅力的かと思います！
また、製作者は一人でたぬえさ3を制作しているのですが
元は好きな配信者さんが楽しく配信できるように開発されたものです。
ただ、たぬえさ3の製作者さんも開発につかえる言語が限られており、少し不便な仕様になっていると嘆いてました。
たぬえさ3はHTMLを使って拡張することもできるので、その手の開発言語を使える人が増えれば、簡単に使えて見栄えするルーレットツールや、画像や動画の表示ができる位置編集画面が実装できるかもしれませんね！
次回はガチャの作り方でも紹介しようかと思います！
ではまた！
たぬえさ３製作者様のウェブリンク
https://vivibit.net/tanuesa3/
うにのれむのTwitch配信先はコチラ（配信中に聞いてもらっても大丈夫！）
よろしければフォローお願いします！
https://www.twitch.tv/uninorem
お困りで急ぎでない場合はうにのれむのTwitterのDMに直接どうぞ
https://twitter.com/Uninorem1