ティラノスクリプトの仕様がわからないという声はちょいちょい聞く話ですが、javascriptが多少読めて書けるのであれば、ソースコードを読むのが理解へのいちばんの早道です。

ソースコード、と聞くと身構える人もいるかも知れませんが、ティラノスクリプトのソースコードは平易な書き方をされているので、javascriptの基礎の基礎がわかっていれば十分理解できます。

具体的には、

・if文が書ける
・for文が書ける
・配列、オブジェクトの書き方がわかる
・jQueryのセレクタ記法がわかる

これくらいの知識があれば大丈夫です。

というかわからないとしても、これくらいならちょっとググれば書き方はわかるので、さっさとググって書き方を理解しておきましょう。これでソースコードを読む準備はできました。

ソースコードの場所

ティラノスクリプトのソースコードは、tyranoフォルダにまとまっていますが、このフォルダの中身を直接見るのは玄人向けです。

なぜなら、ソースコードにファイル容量を削減する処理がされているので、人間の目では大変読みにくい形になってしまっているからです。

↑具体的にはこんな感じ

というわけで、人間の目にも読みやすいソースコードを読んでいきましょう。

↑公式サイトトップの赤丸部分をクリックします。

するとこのように、ティラノスクリプトのGithubページに移動します。

Githubというのは、ソースコードなんかを保管しておくサービスです。つまりこのページに、最新版のティラノスクリプトのソースコードが保管されているのです。

画像のとおり、ティラノスクリプトのプロジェクトファイルのフォルダ構造がそのまま表示されています。
まずは「tyrano」フォルダをクリックします。

次に、「plugion/kag」フォルダをクリックします。

この中の、「kag.tag～.js」という名前のファイルが、ティラノスクリプトのタグについて記述しているファイルです。

タグの中身を見てみよう

それではまずは「kag.tag.js」を見てみましょう。

Ctrl+Fでページ内検索し、「.cm」を検索してみます。

するとこのように、[cm]タグの記述が見つかります。
ティラノスクリプトのタグは、start関数を含むオブジェクトとして記述されています。

start関数というのが、タグを実行したときに動く処理です。まずはstart関数の中を見ていきましょう。

    start : function() {
       this.kag.ftag.hideNextImg();
       //フォントのリセット
       //カレントレイヤだけじゃなくて、全てもメッセージレイヤを消去する必要がある
       
       if(this.kag.stat.vchat.is_active){
           this.kag.ftag.startTag("vchat_in",{});
       }else{
           this.kag.layer.clearMessageInnerLayerAll();
       }
       
       this.kag.stat.log_clear = true;
       
       //フリーレイヤ消去
       this.kag.layer.getFreeLayer().html("").hide();
       this.kag.ftag.startTag("resetfont");
   }

まず、「this.kag.ftag.hideNextImg();」という関数を実行しています。
これはクリック待ち画像を非表示にする、という処理です。同じファイル内で「hideNextImg」を検索すると、この処理についても読むことができます。

次に、if文を実行しています。
「this.kag.stat.vchat.is_active」というのは、チャットノベルモードが有効かどうかを判定する変数です。

有効だった場合は「this.kag.ftag.startTag("vchat_in",{});」という関数を実行しています。

この「startTag」という関数が、ティラノスクリプトのタグを実行するjavascriptの関数です。

「vchat_in」というタグは、「kag.tag_vchat.js」というファイルに記述されています。

「this.kag.stat.vchat.is_active」が無効だった場合は、「this.kag.layer.clearMessageInnerLayerAll();」という関数を実行しています。

これは、「kag.layer.js」ファイル内に記述されている関数で、すべてのメッセージレイヤーの中身を削除する処理です。

if文のあとは、「this.kag.stat.log_clear = true;」という処理を行っています。

「log_clear」という変数は、なんの変数でしょうか。ちょっと探してみましょう。

ページの一番上にある検索ボックスに「log_clear」と入力します。
そして、「in this repository」というオプションがついた行をクリックします。（画像で青くなっている部分をクリックします）

するとこのように、ティラノスクリプト全体で「log_clear」が使われている部分が検索されます。
どうやら「kag.js」ファイルで定義されているようです。
そしてコメントを読むと、「次の文章をバックログに記録する時、前の文章につなげるか、別の文章として追加するか」ということを判定しているようです。

このように、Githubの検索機能とブラウザのページ内検索を利用することで、タグの記述内容を理解することができます。

わからない関数が出てきたら？

ググりましょう。

調べることでより理解の幅が広がります。理解の幅が広がることで、さらにまた別の知識を理解することができます。

わからない→ググる→理解する→またわからない→またググる

学習とはこの繰り返しです。

ある程度ソースコードを読んだら

Githubのソースコードをある程度読んだら、今度は実際のプロジェクトファイル内のソースコードも読んでみましょう。

改行などが削除されていますが、コード整形ツールなどを使えば多少読みやすい形にはなります。

そして読めるようになったら、Githubのソースコードと比べる形で読んでいけば、ずいぶん読みやすくなるはずです。

そしてソースコードを理解することで、ティラノスクリプト本体の改造なんかもできるようになります。

さあ、レッツ本体改造！