動かない大図書館/コマンドについてのチュートリアル

用語集

はじめに

　現在、隠しコマンドと呼ばれるものはまずフィルターで置き換えをして、置き換えた先に書かれてあるものによって変化する仕組みで成り立っています。
これらと向き合うことは所詮機械語であるプログラミングとも向き合うこととなります。
しかし安心してください。プログラミングとは不可解な魔法の呪文でも、難解な暗号でもなく、それらとは正反対に位置していると言っても過言ではありません。
なるべく深入りしないようにこれらについての解説をしていき、読み終わる頃には隠しコマンドの作成が出来るようになることを目標とします。
　また、プログラミングに触れたことのない人にとって不親切な部分も多くあると思います。できない・わからないという部分がありましたらこのページのコメントに書き込むか実況中でも構いませんので私に直接聞きに来ても大丈夫です。細かいフィードバックは他の困っている人の助けになります。
そして必要だと感じたら加筆しても構いません。ただし、チュートリアルとして相応しくない過剰な要素の詰め込みは控えましょう。

コマンドの使い方

　コマンドを作成せず、CTV☆に存在するコマンドを用いてPV再現やネタを作りたい！ という方向けにコマンドを使用するにあたっての説明を行います。
　コマンドとは文字を修飾したりエモートを動かしたりできる機能のことです。
大抵のコマンドは、 [コマンド]（文字あるいはエモート） の様に定義されます。
[コマンド](文字)[/コマンド] の形や a!エモート のような形のコマンドも存在します。

エモートの修飾について

　エモートと文字では対応しているコマンドが異なります。その為、エモートに対応していないコマンドを使用するとエモートが文字表記になってしまいます。
　エモートにコマンドの重ねがけは不可能です。
これ等の特徴から、エモートの修飾のパターンは限られています。

文字の修飾について

　重ねがけできるコマンドがあり、エモートと比べると自由度が高いですが、重ねがけの出来ないコマンドも存在します。

コマンド一覧

　CTV☆で定義されているコマンドは、CTV☆内のプレミアムコマンドヘルプにて確認できます。
其方に記載されていないコマンドの殆どは、動かない大図書館/コマンド一覧にて確認できます。

コマンドの挙動

　では、Cytubeに実装されている、太字コマンドを用いてみましょう。
この場合の結果は以下のようになります。

　上記の様に、文字を囲うことの出来るコマンドでは囲んだ部分のみに効果が適用されます。

TIPS
PV再現等、コマンドの挙動確認は以下のCTV☆廃墟が有用です。
https://cytube.mm428.net/r/cookie_honhe_live

前準備

　さっそくコマンドの作成について解説を始めたい所ですが、プログラミングと言うものは実際に手を動かすことが重要です。
その為に環境を整えると同時に本ページで利用するcytubeの機能についての簡単な説明を行います。
　まずは自分用のチャンネルの作成をします
1.CTVから上のタブにあるホームボタンを押してcytube.mm428.netのホームへ行きます。
2.ホームの右にあるマイチャンネルボタンからマイチャンネルのページまで飛びます。
3.新しいチャンネルの登録をするためにチャンネルURLの入力をして登録ボタンを押します。
4.チャンネルの作成ができました。左側に出てきたチャンネルリンクをクリックして確認してください。
　参考動画

自分用のチャンネルの作成ができたら上のタブからチャンネル設定を押してそこから編集タブを開いてください。
今回利用するのはこの編集タブのチャットフィルタ、CSSのみとなります。
　チャットフィルタ編集画面を開くとデフォルトでいくつかのチャットフィルタがあると思います。
そして左側に二つのボタンがあり、赤色のゴミ箱ボタンはチャットフィルタを削除することができ、その左側にあるボタンはそのチャットフィルタの編集を行うことが出来ます。

TIPS
失敗してサイトが機能しなくなってしまった場合は上のタブのオプションからスクリプト参照を開き、不具合が発生したサイトのスクリプトを拒否すると一旦サイトの挙動を正常に戻すことができます。

チャットフィルタ

　まずはフィルターの話からです。
1つのフィルターにはフィルタ名、フィルタ正規表現、フラグ、置換の四つの情報が含まれています。
一つ一つ見ていきます。

フィルタ名

　これ自体はフィルターに影響を与えませんが分かりやすいように設定されているものです。
例えば[white]と言うコマンドには「white color」というフィルタ名が付けられています。

フィルタ正規表現

　まずこの文字がチャットに打たれた際に置き換えるイベントを発生させる働きを持っています。
例えばフィルタ正規表現にPPPPPPと書くと、チャットからPPPPPPと入力された際にこのPPPPPPが置き換えられます。ここでは「ぱぴぽぱぴぺ」と置き換えることにしましょう。

ACTION
早速チャットフィルタ編集画面を開いてフィルタ名は適当に、フィルタ正規表現にPPPPPP、フラグはデフォルトのままgで置換にぱぴぽぱぴぺと入力、フィルタ作成ボタンを押してください。

この場合の結果は以下のようになります。

　そしてその上で正規表現と言う書き方が出来ます。
正規表現と言うのはパターンを指定することができる特殊な書き方のことです。

ACTION
試しにフィルタ正規表現を[ぱ-ぽ]{6}、フラグはデフォルトのままgで置換がぱぴぽぱぴぺというフィルターを作成してください。

この場合の結果は以下のようになります。

　[ぱ-ぽ]{6}　と言う書き方をすると、それは「ぱ・ぴ・ぷ・ぺ・ぽ」の5種類の文字が6つ連続している　と言う意味になります。順を追って説明していきます。
まず、この　[ぱ-ぽ]　と言うのは、「ぱ・ぴ・ぷ・ぺ・ぽ」のいずれかを指します。また、　[ぱ-ぽ]　と　[ぱぴぷぺぽ]　は同義であり、　[ぱ-ぽ]　と言うのは　[ぱぴぷぺぽ]　を省略した形になります。
これは　[a-z]　が　[abcdefghijklmnopqrstuvwxyz]　と同義なのも示し、　[あ-ん]　は平仮名全てにマッチします。
そして、　{6}　と言うのは、”前にある文字”を6回繰り返した際にマッチするという意味を持ちます。
つまりP{6}=PPPPPPであり、P6という愛称は奇しくも正規表現に近い呼び名だったということがわかります。
　今説明したもの以外にも正規表現の書き方は沢山ありますが、一度に全部覚えるよりも仕組みを理解してもらいたいので、正規表現の一部だけを紹介しました。この後にCTVのチャットフィルターによく使われる正規表現の紹介もしますので、このまま読み進めていただくと幸いです。

フラグ

　この概念を理解するにはスイッチに例えると理解しやすいかもしれません。
スイッチはONとOFFの2つの状態があり、フラグも同様に旗が上がっているか降りているかの2つの状態があります。

ACTION
先程作成したフィルタ正規表現にPPPPPPと入力したチャットフィルタのフラグに　i　を追加して　gi　にしてください。

そうした場合以下のような結果になります。

　フラグはこれ以外にもあり、フラグの設定には計6種類の旗が組み込まれています。
それぞれ、「i・g・m・s・u・y」の一文字で表すことが出来、これらはマッチする正規表現に影響を与えることができます。
i　・・・　このフラグを指定した場合、大文字と小文字を区別しなくなります。すなわち、a一文字で[Aa]と同義であり、A＝aであることを表します。
g　・・・　このフラグを指定した場合、全ての一致を探します。指定が無い時は最初の1つのみを探します。
　現在11/19のCTVにおいて、フラグは　i　と　g　以外使用されていないので、他のフラグの紹介は省きます。
記述の方法は、記入するかしないかでONとOFFを切り替えることが出来ます。
また、複数指定する場合は順不同です。

QUIZ
フィルタ正規表現を[ぱ-ぽ]{6}、置換をぱぴぽぱぴぺとしフラグに　i　と記入した場合、以下の入力をするとそれぞれなんと置き換えされるでしょうか？

1. ぱぱぱぴぴぴぷぷぷぺぺぺ
2. パピポパピペ

置換

　この置き換えは度々出てきました通り、フィルタ正規表現に記述したものにマッチする文字列を、この置き換えに記述されたものに変換するために存在します。
ですが、これに様々な効果を付与することが出来ます。

ACTION
試しにフィルタ正規表現に\[red\]、フラグg、
置換を

<span style="color:red">

としたチャットフィルタを作成してください。

これで[red]任意の文字列とチャット欄に打つとその文字列が赤色になるはずです。
詳しく見ていきます。
　まずこの<span style="color:red">というのはWebページを構成するマークアップ言語の1つ、HTMLのタグと呼ばれるものです。
マークアップ言語とは純粋なテキストに近く、タグでテキストにマークを付けることができる言語です。
マークがついたテキストには後に紹介するCSS、Javascriptで動かしたりすることができます。

TIPS
F12キーを押すことでそのブラウザを形作っているプログラムなどを見ることができます。
様々なものが含まれていますが、上のタブのElementsからHTMLの確認が出来れば今回は大丈夫です。
また、control+shift+cを押してその後確認したい要素をクリックすると指定した要素が簡単に表示される為オススメのショートカットになります。
　参考動画

loading...

先程打った文字列のタグは<span style="color:red">任意の文字列</span>となっていると思います。
spanタグは個別にテキストのフォント調整、文字色・背景色の変更を施すのによく利用されているタグになります。
また、style=と宣言するとイコールの後ろにCSSの記述ができます。ここではcolor:redを指定することでコメントを赤色にしています。
CSSには様々な書き方がありますが、これはまた後程紹介します。

CSS

　CSSとは前にちらっと出ましたがスタイルシートと呼ばれるもので、HTMLでつけられたマークに装飾をすることができます。
先程は色を変えるだけだったのでHTMLタグにそのまま記入すれば大丈夫でしたが、より複雑な装飾をするには記述量が多くなってしまいます。
そのため、文章量が多くなりそうであるならHTMLとは別途でCSSを書きます。
また、CSSにはanimationというプロパティがあり、CSSのみでアニメーションの設定ができます。

ACTION
試しに編集→CSSからCSS編集を開いて

@import url("/up/src/up22338.css");

と記述し保存ボタンを押して、フィルタ正規表現に^生きていたくないよ$、フラグg、
置換に

<p class="gehenna">生きていたくないよ</p><span class="gehennamoji">不　　</span><span class="gehennamoji">適　　</span><span class="gehennamoji">切　　</span><span class="gehennamoji">な　　</span><span class="gehennamoji">発　　</span><span class="gehennamoji">言　　</span><span class="gehennamoji">で　　</span><span class="gehennamoji">す</span>

というチャットフィルタを作成してください。誤字が発生しないようにコピペが望ましいです。

準備が終わったら生きていたくないよとチャット欄に入力してみてください。
上手く行けば以下の動画のような動きが見れるはずです。（文字が小さいので全画面推奨）

　チャットフィルタでマークを付けた文字列に置換して、そのマークを付けられた文字列をCSSから装飾することでこのような動きを付ける事が出来ます。
詳しく見ていきます。下記のURLからCSSの確認をしてください。
https://cytube.xyz/up/src/up22338.css
CSSは.クラス名{プロパティ:値;}でclassセレクタの作成が出来ます。
ここでは、gehennaとgehennamojiというクラスを作成をしています。
沢山文字が並んでいますがやっていることは簡単で、gehennamojiのanimationプロパティ以外は全て文字の大きさや色などの指定です。
動きを付けているのはanimation: gehennaback 0.1s 1s forwards;と、その下の@keyframes gehennabackの部分で、animationと@keyframesはセットで使うもので、@keyframesで動きを指定してanimationから反映しています。
　@keyframesはアニメーション開始から終了するまでどのようなアニメーションをするのかをセットすることができます。
このgehennabackではopacity:1;、padding: 0.35em;、background-clip: padding-box;という部分は全て同じで、一点だけ違う箇所があり、これによってアニメーションを作っています。
それがbackground:～になります。簡単に説明すると、backgroundはこんな感じに文字の後ろの色を設定することができます。linear-gradientはグラデーション用の値で、ここでは文字の後ろの色に二つの色を扱う為に使用しています。transparentという文字列は透明を意味し、もう一つの色のwhiteと合わせて文字の後ろの色が段々と白色になっていくように見せるために時間が経つ毎に白色の部分を増やしていることがわかります。
　また、このアニメーションは「不適切な発言です」という文字の一つ一つに動きを与えています。こうすることでより滑らかに見えるからです。
ですが、これには一つ問題点があり、複数指定したは良いが全部一斉にそのアニメーションを開始してしまう為です。
それを解決しているのが一番下のspan:nth-child(1) { ～～～の部分になります。
括弧の中の数字が増えているのがわかると思いますがこれは1であれば1番目、2であれば2番目...という風にspanタグの何番目の要素を指定しているかを示しています。ここで変化させているのがanimation-delayで、これはアニメーション開始時間を指定することができます。この様に0.1秒ずらすことで背景色を一つの大きな四角だと認識させることができました。

チートシート

カンニングペーパーの意。
CTVのチャットフィルタにおいてよく使われるものを集めました。
厳密には意味が違うものもあります。

正規表現のチートシート

^任意の文字列$　　　　　　　 ... 　「任意の文字列」だけが書かれている場合マッチ
(^|\s)　　　　　　　　　　　　... 　先頭または空白文字とマッチし、マッチしたものを記憶する
(?!\S)　　　　　　　　　　　　 ... 　マッチしたとしてもそのマッチした対象の直前に空白以外の文字があったらマッチしない。
\s?([\w\-]+(?:\d+_)?\d{3}[\w\-]*)　... 　エモートにマッチし、それを記憶する
\s?(\S*(?:\s+\S+)*)　　　　　　... 　文字列とエモート両方にマッチし、それを記憶する

CSSのチートシート

@keyframes 任意の名前 {
	0% {
		CSSプロパティ:値;
	}
	100% {
		CSSプロパティ:値;
	}
}

.任意のクラス名 {
	CSSプロパティ:値;
	animation:値;
}

これからの発展

結構飛ばし飛ばしで説明しきれてない部分もあるので詳しい部分は個々で調べてもらうことになります。
以上のチュートリアルを完了した人向けの指南です。

テキストエディタ

コーディングにはテキストエディタが必要不可欠です。
様々な種類がありますが、Visual Studio Code（通称：VSCode）、Atom、Bracketsがオススメです。
VSCodeは私が使用している為、テキストエディタについてのアドバイスはこちらの方がしやすいです。導入、設定などは他のサイトを参考にしてください。

やりたいことを見つけ、深く知る

今あなたがつくりたいものがないのなら、モチベーションに繋がりにくいと思います。
ですのでいくつかの提案をさせていただきます。

• 好きな曲のMVの再現をする。
• codepen、Qiitaなどのサイトから面白そうなエフェクトを見つけ、それをチャットフィルタに適応してみる。

本ページで説明したもの以外にもチャットフィルタは沢山の可能性を秘めています。
色々調べながらコーディングしていきましょう。

実況をないがしろにしないこと！

コマンドと言うのはあくまでも実況を豊かにするための技術です。
その実況自体が疎かになっていては本末転倒、元も子もありません。
いつも共に実況している"ファミリー"がコマンドで魅せるからこそ盛り上がるものです。

便利なツール

CTVチャットフィルタ一覧
https://nemota.github.io/chatreplace_table_visualize/index.html

コメント

• ナイスゥ -- 2020-11-19 (木) 07:10:32
• 後半、かなり蔑ろな文章になっちゃった 多分めっちゃ分かりづらいから気兼ねなく聞きに来てね -- 2020-12-01 (火) 14:48:08
• コマンドの作成に重きが置かれており、使用に於いてのチュートリアルが有用だと判断した為Discordにて記載された文章を元に加筆を行いました。必要ないと判断された場合は削除して頂いて構いません。 -- 2022-08-18 (木) 20:15:37