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

jinjamonogatari

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

ティラノビルダーで作成した後、
ファイルを作成したらすぐ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で検索すると「真ん中より」なんだけど、
どういうわけかパソコンで見ると、左に寄ってしまう。

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

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

3つを試してみてね。

 

ファイルのまとめ

index2.htmlより

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

<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時間も費やした。おかげで頭が痛い。

 

おまけ;コードを書くためのファイル探し

コード

コードを書く際、プラグインなど色々調べたのだけど、

<code>というタグを入れればいいだけド気づいた。
僕はCKEditorを使っている。Computer Codeを入れればすぐ解決した。

新しい行動をとるのは大変、時間がかかるね。

スポンサードリンク(広告)

 

Writer軽い自己紹介

ティラノスクリプトや小説家になろう、ピクシブ他で物語を書きながら、 「私が気になった事件」の裏側を作家の視点で書いているおっさん。

プロフィール画像は自画像でなく、Megabe-0ブログのマスコット、めがびちゃん。

 

雷が苦手で、光を見ると頭が固まる(元から固い)。 月初めは墓参りと神社参拝を行い、賽銭箱へ1万円を入れた際、とても気持ちがすっきりした。

 

■ 簡単な自分史 ■

0歳:釧路のある病院で生まれる。暇さえあれば母乳を吸って、ご飯を4膳食べても体重が落ちるほど、母のダイエットにものすごく貢献したらしい

 

3歳:行方不明になり、全裸で海を泳ごうとしたところ、いとこのお姉さんに発見され、この世へ留まる

 

8歳:自分のお金でおもちゃのカードを初めて買い、経済を知る。なぜか父親に怒られ、家出するがすぐに見つかる。

 

12歳:学校で給食委員長になる。委員長として初めて全校生徒の前にて演説する際、原稿用紙を忘れてアドリブで笑いを誘いながらも何とかやり過ごし、多くの生徒に名前と顔を覚えてもらう。また、運動会の騎馬戦では変なアドリブを行い、多くの笑いを誘った。

 

18歳:初めて好きな人ができたけれど、告白が恥ずかしくてついにできず、別れたことを今でも根に持っている(妻となる人にははっきり言えてよかった)

 

21歳:大学在学中、アルバイトを始める。人手不足かつとても忙しい日々を過ごしながら「どうせなら自分から楽しいことをしていきたいなあ⇒起業って選択肢があるのか」働き方の選択肢を見つける

 

27歳:自分で作った会社がうまくいかず、一度たたんで都落ち。実家でとことん自分を責める日が続く。「何をやっても駄目だな、お前は」など。自分を責めても自殺ができず、体中から毒素があふれ出て苦しい日々を送る。寝るのも怖かった日々。

 

28歳:「このままじゃいけない」決心を決め、小学校からの勉強をやり直す。高校の勉強で躓きながらも、学び直すうちに「自分は何もわかっていなかったんだなあ」大切な教えに気づかされる。 加えて、小説やイラストなど「今までの自分が手を出さなかった分野」に手を伸ばしてみた。

 

29歳:「定義」と「自己肯定」こそが生き方を決めると気づかされ、不安な日々が起きても、心が強くなったと感じる。でも子供の誘惑にはめっぽう弱くなる。

 

自分の生き方はすべて自分が握っている。わずかな瞬間にしか現れない「自分の真実」を表に引きずり出し、ピンチからチャンスを生み出す発想や視点をブログやメルマガ他で提供中。

プロフィール詳細は下にある WebSite を押してね♪