制作裏話 2018.04.29 せんけん

ティラノスクリプトindexファイルゲーム画面が左寄りなので

おはよう、しゃしゃ。
現在企画中の「めいうんめがび神社」はティラノスクリプトを使っている。

ティラノビルダーで作成した後、
ファイルを作成したらすぐFTPでサーバーにあげる。

実際にあげたサイトがこちら

サイト(音が出ます)：めいうんめがび神社

大きな問題が一つある。
ゲーム画面が左によって、どうすれば真ん中によるのか？

そう簡単に中央へ寄らず、てんてこ舞いだった。

試行錯誤の結果に行きついたのが……

フレームとふりわけ

はじめはゲーム画面が入っているindexファイルと、
tyranoCSSファイルをいじったのだけど……

HTMLとCSSをいじっているなら、ありえない問題が出た。

tyrano.cssより
.tyrano_base{
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;   
}

パソコンだとゲーム画面を真ん中よりにしたら、
スマホでは思いっきり左にずれて、画面がはみ出る。

反対にスマホが真ん中だとパソコンは左に固定される。

1時間ほど格闘したのち、別の手段に切り替えた。
続いて考えた作戦が振り分けだ。

別ファイル「index2」ファイルを作成後、iframeを挿入した。
最初はレスポンシブ作戦でパソコン/スマホを振り分けた。

パソコンかスマホのどちらかが必ず崩れて無理だった。

「スマホはindex、パソコンはindex2へ振り分け」作戦を思いついた。

パソコンで見る際、ifameに幅widthと高さheightを指定。
続いてスマホには振り分けようのファイルを探したのち、

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
location.href = 'index.html';
}
</script>

引用：スマホ・PCを判別してリダイレクトするまとめ

後はFTPソフトでアップロードすると、きちんと振り分けられた。

結果としてこちらのファイルになったよ。

サイト：めいうんめがび神社～パソコン用～

黄金比と真ん中

最低限、indexファイルでゲーム画面が開くので、
わざわざやる必要はないのだけど…見る側はどうだろう？

自分が観る側だったら、いちいちパソコンを左にせねばならぬ。
スマホは別に気にしなくていいのだけど、
パソコンで見る人にとって「不快感」を抱いたら、信用が落ちる。

tyranoCSSを調べていると、
画面自体はCSSで検索すると「真ん中より」なんだけど、
どういうわけかパソコンで見ると、左に寄ってしまう。

ネットで調べても、真ん中に寄せるコツがなかったので書いてみた。

index2ファイルを作る
index2の中にindexファイルをifameで外部読み込みする
スクリプトを使ってパソコンとスマホで振り分ける

3つを試してみてね。

ファイルのまとめ

index2.htmlより

<div id="container"> <div id="main"> <iframe src="index.html(ここにティラノスクリプトのゲーム起動があるファイルへ)" width="480" height="640"　(幅と高さはゲームサイズに合わせて調整) frame scrolling="no" frameborder="0"></iframe> </div> </div>

<head>から</head>に挿入するスクリプトファイル

<script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { location.href = 'index.html'; } </script>

※　location.href = 'ティラノスクリプトがあるファイル';

style.cssをindex2ファイルに入れて呼び出し

#container { margin: 0 auto; width: 800px; background: #fff; }

#main { text-align: center; margin: 0 auto; }

はあ、作成に3時間も費やした。おかげで頭が痛い。