Chromeのローカルサーバー機能でティラノスクリプトを動かしてみる

この記事は1年以上前に書かれたものです。情報が古い可能性があります。

Chrome 65から開発者ツール（Developer Tools）にローカルサーバー機能がついたそうです。これを使ってティラノスクリプトを動かす手順をまとめました。

とりあえず試してみたいけどindex.htmlが開けない（＝真っ黒でチュートリアルが始まらない）、必要なツールを用意するのがちょっと面倒なときなどに使えると思います。

追記：
V5でも有効ですが画面がバチバチ点滅する場合は「他のタブを開いてからゲームのタブに戻る」を何回か繰り返すと一応止まります。

目次

1. 使うもの
2. 大体の流れ
3. ローカルサーバーの準備
4. ゲームを開くとエラーが出る
5. エラーがでるところをコメントアウトする
6. 開発者ツールのキャッシュ設定を確認する
7. libs.js編集による影響
8. 別のエラーがでた場合
9. 再度表示するとチュートリアルがはじまる
10. まとめ

使うもの

• Google Chrome(PC版, バージョン65以降)
• ティラノスクリプト（スタンダードパッケージ, Ver472h）

大体の流れ

1. ティラノスクリプトのスタンダードパッケージ（最新版）を用意する
2. Chromeの開発者ツールでローカルサーバーを立ち上げる
3. index.htmlを開くとエラーが出るので修正する
4. チュートリアルのタイトル画面が表示されるようになる

ローカルサーバーの準備

Googleとコリスさんの記事リンクを貼っておきます。そのほか分かりやすいページを探して読んでサーバーを立ち上げます。

• What’s New In DevTools (Chrome 65)  |  Web |  Google Developers
• Chromeデベロッパーツールの機能が、すごく簡単で便利！ローカルサーバーを1分もかからずにすぐ構築できる | コリス

コリスさんの記事を参考にした場合、フォルダ構成はこんな感じを想定。

chromelocal/tyranoprojects.com/tyranoscript_v472h/tyranoscript_v472h/index.html

デスクトップにchromelocalフォルダを作成。その中に「適当な名前.com」フォルダを作成。さらにその中にスタンダードパッケージをすべて展開（解凍）したものを丸ごと入れます。

記事内にも書かれていますが、作業をやめるときはSources>OverridesにあるEnable Local Overridesのチェックを外します。

ゲームを開くとエラーが出る

前項のフォルダ構成なら、ローカルサーバー上でのゲームURLはこんな感じになります。

tyranoproject.com/tyranoscript_v472h/tyranoscript_v472h/index.html

アクセスしてみるとポップアップで以下のようなエラーが出て、画面真っ黒・歯車の画像だけ表示されると思います。

file not found:./data/system/Config.tjs

Config.tjsの取得に失敗しているようです。

エラーがでるところをコメントアウトする

ティラノスクリプトの本体ファイルを編集するときは、編集前のファイルを別名保存して残しておきます。

1. tyrano/libs.jsを別名保存してバックアップをとる
2. tyrano/libs.jsを開いてctrl+fで「$.loadText」を探す
3. エラーの原因部分を2か所コメントアウトする

コメントアウトするのは以下2点です。

• urlの一部（スラッシュの前にカンマを加えるのを忘れずに）
• cache

tyrano/libs.js

$.loadText = function(file_path, callback) {
  
  /*（省略）*/
  
  $.ajax({
    url: file_path,// Math.floor(Math.random() * 1000000),
    //cache: false,
    success: function(text){
      order_str = text;
      callback(order_str);
    },
    error:function(){
      alert("file not found:"+file_path);
      callback("");
    }
  });
};

開発者ツールのキャッシュ設定を確認する

Settings > Preferences > Network のDisable cache (while DevTools is open)にチェックが入っていることを確認します。

開発者ツールを開いている間はキャッシュ無効となり、結果的にティラノスクリプトの動作に影響は出ない、と思います。チュートリアルシナリオを動かして確認しただけなので、なんともいえませんが。

libs.js編集による影響

• ティラノライダーでindex.htmlを開くと逆に？「Config.tjsが読めないエラー」がでるので元に戻す
• ゲームを公開するときも元に戻す
• キャッシュの影響でシナリオを更新しても反映されない可能性

別のエラーがでた場合

試行錯誤中に何度か以下のエラーが出ました。

Unexpected token ?

開発者ツールのConsoleに「libs.jsのへんなところにハテナがあります」とエラーが出たら行番号を確認してすべて取り除きます。

Githubで元のソースコードを確認しながら、不要なハテナを消します。

再度表示するとチュートリアルがはじまる

libs.jsを編集したあとindex.htmlにアクセスすると、チュートリアルのタイトル画面が表示されます。

もしゲームの後ろがバチバチ点滅していたら画面サイズを大きくすると止まります。

まとめ

本来、公式ツール（ティラノライダー）が開発のサポート～パッケージングまでやってくれるので、わざわざ開発者ツールを使う必要はありません。

ゲームを公開する予定はないけど、だらだらティラノスクリプトを触りたいときにChromeを使えたらいいなと思って書きました。

がっつりゲーム開発するならティラノライダーを、本当にちょっとだけ動かしてみたいときは開発者ツールのローカルサーバーという選択肢もありますよ、ということでした。

関連リンクまとめ

• ティラノスクリプト - tyrano.jp
• What’s New In DevTools (Chrome 65)  |  Web |  Google Developers
• Chromeデベロッパーツールの機能が、すごく簡単で便利！ローカルサーバーを1分もかからずにすぐ構築できる | コリス
• ティラノライダー - tyrano.jp
• tyrano/libs.js - Github