ゴールの見た目

株式会社シンメトリック新入社員の青木です。研修期間が3か月ということで今回で3か月です。ですので〆というものをしないといけないです。やはり作っているものがゲームなのでわかりよい見た目にしたいですね。ルールはオセロなので誰もが知っているといったところなのですが、その他諸々の機能をちゃんとわかるように表現することを〆とします。

今週の目標

前回までにゲームとしてつけておいた方がよいような機能をつけてきました。最終日なのでこれらの締めとして、見た目の部分をどうにか変化させることにします。

とはいっても最終的な見た目になるまでの過程を逐一書いていくほどドラマがあったわけではないので、今回の記事にしやすい部分を抜き出して書いていきます。

というわけで最終的な見た目がこちらです。

この1画面のうち、上部のチャット機能、及び右の最新の部屋を見る機能・ランキング機能は常に同じような表示で、サーバーからの情報が更新され次第、それらの中の文字列だけが変わります。 残りの左下の領域で、実際のオセロ対戦の表示・入力がなされ、その対戦の場面だけではなくログイン機能であったり対戦相手を選ぶための機能であったりの場面に切り替わるような形です。

最新の対戦を見ることができる機能やランキング機能等の表示部分にポップ感を出したかったので角丸にしてみました。

これは以下のようなhtmlとcssになっています。

html

	<div>任意のtable構造</div>

css

div{
	border-radius: 10px;
	border: 5px solid #任意の色;
	overflow: hidden;
}

tableタグをdivタグの中に入れて、中のtableタグには特に工夫せずにdivタグにborder-radiusをかけたうえでoverflow: hiddenとすることで中から角がはみ出したtableを隠すことをしました。

今調べたら角丸テーブルを作るのに適する方法があるのですが、当時は発想がなかったのでとりあえずそのとおりにします。

そして、やはりよくない角丸の仕方でしたのでこういうことが起きました。

画面幅を狭めると、tableタグ内の文字列の幅が相対的に広くなるので、divタグに設定したボーダーから、中のものが右から消えて行ってしまい台無しでした。

一番最初に示した全体像のとおり、この最新対戦機能とランキング機能の表示領域はそこまで広くしない想定だったので、意識して画面幅を狭めなくてもこのtableが順に消えてゆくバランスになってしまいました。

この問題をを解決するために様々な手法・発想があるとは思いますが、今回は画面幅に応じてこのふたつの要素をオセロの盤面の右から下へと移動させる手法をとることにしました。レスポンシブ対応というものです。

行ったアプローチ

今回レスポンシブ対応といってもスマホ表示に最適化がしたいというのが主目的ではなく、ある程度見た目の体裁を守るという面がつよいので、基本的な仕組みの部分だけを書いていきます。

何にするにもhtmlのviewport設定することが必要なので、以下のように書きます。

これを書き加えることでコンテンツの横幅を画面の横幅になり、ページを開いた瞬間は倍率1倍である状態になります。

この状態で画面幅によるデザインを分けます。その書き方自体は2パターンあるので両方述べていきます。

まずcssファイルを複数作り、htmlにて使われるcssファイルを画面幅に応じて変えるように設定する方法です。 htmlファイルにて以下のように変えたい幅を境に

	<link href="wide.css" rel="stylesheet" media="(min-width:769px)" />
	<link href="narrow.css" rel="stylesheet" media="(max-width:768px)" />

と分けて記述します。

次に、cssファイルは1つで、そのcssファイル中に局所的に分ける記述をする方法です。 @media 規則というのですが、使われるデザインを

.sample{
	/* 任意の設定 */
}
@media(max-width:768px){
	.sample{
		/* 狭い画面幅で使いたい設定 */
	}
}

のように記述することで画面幅に応じて分けることができます。こちらは＠media規制がついていない方の設定が規制かけている方にも継承されるので、すべてのパラメータを書く必要がありません。

方法としてこのふたつあったのですが、今回作成したオセロゲームの作りとして、左のオセロの盤面がある領域と右のランキング等の表示の領域でdivを分け、それぞれfloat属性をつけることによって横に並べていたので、やることといえばその部分の場合分けだけです。ですので、局所だけの設定を切り替えるだけでよいので後者の方法でやりました。

作業結果

移動しました。

おわり

なんと3か月もオセロを作成してきました。その間、このようにブログを更新するために1週間前のソースコードを読んで新しく作り直したくなるというサイクルがあり、そのたびに自分の成長を感じました。これから研修で学んだ知識をどう生かしていくのかは実際分からないですが、何するにしても生かされていくかのような総合競技感がオセロゲーム作成にはあり、この大きな目標を遠いスタートラインから時間をかけてでも完成させるというのは自信にもつながるはずので、いい体験をすることができたと考えています。