
【超初心者向け】ティラノスクリプト/ティラノビルダーをブラウザで動作確認する方法【鯖に上げよう】
ティラノスクリプトやティラノビルダーで作ったゲームを「ブラウザ版」で出力すると、その中にindex.htmlというファイルが生成します。ティラノスクリプトで作られたブラウザ版ゲームはこの「index.html」開けば普通に動く……と思っていたのに、ブラウザ版が動かない!? 「Windows版」アプリだと動くのに!? そんな経験、ありませんか……?
前提として
ブラウザ版ティラノスクリプトは何か適当なサーバにアップロードしないと、ゲームが動きません。
理屈は置いといて、ただindex.htmlを開いても動かないんです。じゃあどうしたらデバグしたらいいのって?
サーバに上げればいいんです。
というわけで、実際ブラウザ版のティラノ製ゲームを動かす方法はざっくり2つあります。
①ローカルホストを建てる(ちょっと慣れてる人向け)
②適切なレンタルサーバを借りる(一部の無料サーバも可)
のどちらかです。
①についてはたくさんの方がやりかたを紹介してくれています。
例えばこの記事。
というわけで、今回はあまり解説のない②について解説しようと思います!
準備するもの
①エクスポートしたプロジェクトフォルダ
②レンタルしたサーバ
③FFFTP(FTP通信ソフト)
以上です。
難しい言葉がいっぱいですが、1つずつ見ていきましょう。
①エクスポートしたプロジェクトフォルダ
※ティラノスクリプトの場合はエクスポートしなくてもいい場合が多いです。
まず、ティラノビルダー本体やティラノスタジオで
「ブラウザゲーム」として出力したフォルダを見てみましょう。

上記画像の3つのフォルダが入っている状態の、
「任意英数字で書かれた名前のフォルダ」を準備してください。
(※このフォルダ名に限らず、ティラノで使うファイル名は英語表記にしましょう。)
このフォルダをレンタルサーバにアップロードします!
ホームページをFTPでアップロードしたことがある方は
それと同じような感じです。
②レンタルサーバを借りよう
Q.無料のものと有料のもの、どっちがいいの?
そりゃ有料の方がいいに決まっています。
早いし、安定してるし、セキュリティがしっかりしているからです。
アドレスもhttpsで始まりますし、よりノベコレっぽい環境です。
Q.無料のところじゃだめなの?
うちのサークルは無料の所でやっています!!!!!
お金がかかるからです!!!!!!!
ちょっと重いけど、アドレスはhttpで始まるけど(SSL非対応)、
動きは確認することができます!!!
が
無料のレンタルサーバは勝手に広告を挿入してくる都合で動く所と動かないところがあるのです……。
(動かない所の例:F●2サーバ)
今回は実際に動くことを確認した所を2か所紹介します。
① シンクラウド for Free (旧Xdomain Free)
②Star Server Free
私がガッツリ使っているのは②のスターフリーサーバなのですが、安定性や重さの面では少々使いづらいかもしれません。シンクラウドはXFreeの時にちょっとだけ使っていたのですが、そんなには困らなかった記憶があります。ですが正直どんぐりの背比べだと思います。
ウェブサイトを作るなら多少吟味したほうがいいかもしれませんが、ブラウザ版テストプレイぐらいならどちらでも大丈夫でしょう。安定性とかが気に入らないなら素直に有料版に切り替えればいいしね。
注意点としては、半年に一度程度更新しないと消えちゃうので、リマインドメールを見落とさないようにすることです!

というわけで、まずはアカウントを作ってください!
そしてログインしてください!!
弊社サークルがStar Free Serverを使っている都合で、ここからはStar Free Serverで説明します。
以下はStar Free Serverでの説明ですが、他のサーバを使われている場合は似た操作を行ってください。
目的は「FTP設定を探す」ことです。それっぽいのを探してください。
①ログイン画面から無料プラン管理を開く

そうすると、スターサーバ管理という画面が出てくるのですが、おそらく最初の状態では何もサーバを取得されていないと思うので、何かテストプレイ用のサーバを取りましょう。設定は、いろんなことができそうな設定で取りましょう!!ちなみに「フリー容量増加」と「フリーPHP+MySQL」では動きます!!!

次に、「サーバ管理ツール」を押します。
その次に、「サーバー情報」を押します。

このホスト名を使うので、このページに行けるようにしておきましょう!

FFFTPを導入します!
何をするソフトかというと、HPのサーバにデータを送ってくれるソフトです。お便利。古から使われている有名ツールです!
インストールして開くと、「ホスト一覧」のウィンドウが出るので、「新規ホスト」を押しましょう。
(※2回目以降はホスト一覧から入力した設定に飛べるようになります。)


「ホストの設定」を開くと上の画面が出てくるので各項目を埋めましょう!
①ホストの設定名:何でもいいです。わかりやすい名前を付けましょう。
②ホスト名(アドレス):上記のftp設定ページを見ましょう
③ユーザー名:ftp設定ページに書いてあることが多いです。
④パスワード:設定or支給されたパスワードを入力しましょう。
⑤ローカルの初期フォルダ:空欄でOK
⑥ホストの初期フォルダ:空欄でOK
詳しくは各サーバが提供してる設定方法も見てください。
それで設定を終えると、

出てきた画面、左側が自分のパソコンの中身(ローカル)右側がレンタルサーバの中身です。
いよいよアップロードです!
フォルダをフォルダごと右のウィンドウにドラッグしましょう!
たとえば「game」というプロジェクトフォルダがある場合は、
中身でなくフォルダをドラッグしましょう。
(中身でも動くけどサーバが散らかるのでおすすめしません)

フォルダを開くと「data」「tyrano」「index.html」が入ってたらおっけーです! これでブラウザで動きます!!!!!
http://サーバに指定された部分/game(フォルダ名)/index.html
を開けば動きます!!!!!!
他の人にテストプレイも頼めるよ!! やったね!!
ブラウザで動かないとき
いくらか原因が考えられますが、代表的なものを4つ紹介します。
①ファイル名に「全角文字(2byte文字、日本語とか)」を使っている。
バグることが多いです。半角英数字を使いましょう。
②画像サイズがでかすぎる
画像サイズがデカすぎるとロードに時間がかかります。特にPNG画像。ロードに時間がかかりすぎて始まらないことがあります。画像は原寸大にしておくのがお勧めです!
ちなみに画像サイズ大きめにしたときの検証記事があったので貼っておきます。拡大したときには効果があるのか……?
PNG画像のダイエットもできると吉。
ちなみに私はこのソフトじゃなくてPNGooってソフト使ってます。
画像のインデックス化という技術で圧縮してると思います!
少なくともPNGooってソフトはそう!
③冒頭に「タップorクリックでスタート」を入れていない。
ブラウザで音を再生する場合、冒頭(音楽を流すよりも前に)に「タップorクリックでスタート」(+改行[p])を入れる必要があります。タップしないとゲームが始まらないからです。ティラノビルダーでもティラノスクリプトでも、一番最初に表示するようにしましょう!!
④音楽ファイルの形式
「oggとm4a」か「mp3」のどちらかになっていますか?
「ogg」しか入っていない場合はiPhoneでフリーズしてしまいます!
いっそmp3で全部準備するのが最近は安牌のようです。
【追記】
ノベコレさんをはじめとしたノベルゲーム小説サイトは、おおむねoggをmp3に変換し、oggとm4aファイルを消していることが多いです。したがってmp3で用意しておいたほうが間違いはなさそう。
いかがでしたでしょうか?
ティラノスクリプトのブラウザテストプレイ、レンタルサーバでやる場合はローカルホストを建てる必要がないので、楽だと思います。しかも他の人にテストプレイを頼む際にもアドレスを送るだけでいいので楽ですね。嬉しいです。
その他のサービスだとこういうのもあるので、是非こちらの記事も参考にしてください。
その他にもティラノスクリプトで困ったことがあったら、有償だったり無償だったりしますが、お力添えできたらと思いますので、気軽に紫靂せちる(@Xetil_Works)に声をかけていただけると嬉しいです! リプでもDMでもどうぞー!
それではみなさん、よい創作ライフを!
↓↓↓私のTwitter↓↓↓