新入社員、エンジニアになる　完

こんにちは。シンメトリック新入社員の田中です。今回は6月最終週のオセロが完成するまでの過程を書かせていただきます。また、今回がオセロブログの最終回となります。

新入社員、デザインをこだわる

今週の前半はオセロゲームのデザインをやっていきました。見た目が良くないとゲームとしての面白さは半減してしまうと思ったので、オセロとして見た目にも楽しいものを作りました。 先週までにトップページ、ログインページ、新規登録ページは完成していたので、残りの入室画面、対戦画面、ランキング画面、プロセス画面のデザインをやっていきました。

デザインの完成図はすでに作ってあったので、それと同じように作っていきました。入室画面、ランキング画面、プロセス画面では表を使うので表のcssデザインを調べ実装していきました。1つ表のデザインが出来るとほかのページにもそのcssが流用できるので、少し楽でした。 また、他のページに遷移するボタンやフォーム部分なども前回作ったcssを使うことで全体的に統一感を持たせ、かつ楽に実装することが出来ました。

これらのページは少し手を抜いてしまった感はありましたが、その分オセロゲームの対戦ページを少し頑張りました。

こだわったのは、オセロの盤面の部分です。 ただ単に緑色の盤面があるだけでは寂しいので、盤面の周りにふちを付けることにしました。

フリーの木の額縁の画像を取ってきて、オセロの盤面に重ねて表示することによって、少しリッチなオセロの盤面を作る想定で実装していきました。

しかし、やはりcssについての知識が浅いためか、上手く碁盤のテーブルと額縁の画像が合わさって表示してくれませんでした。marginやpaddingなどを駆使して、一見重なったように見えるものが出来たのですが、画面サイズを変更すると位置がずれてしまったりと苦戦しました。

初めの想定では碁盤はページのちょうど真ん中に位置するように表示し、画面幅が変わっても、自動的に中央に来てくれるようにしたかったのですが、今の自分では難しく、泣く泣くpositionのrelativeやabsoluteを使って画面に場所を固定して表示させるようにしました。

またそれによって、デザインも少し変更し、ユーザの名前、駒の数、秒数カウンターなどは右側に表示させるようにしました。 これが実際に完成したオセロの対戦画面です

また試合終了後に出てくるモーダル画面のデザインも行いました。元々は次のページに遷移させるリンクしか表示していなかったのですが、対戦結果も表示できるように変更しました。

データの受け渡しの数が少し増えたため、処理を少し変更させないといけなかったのが少し大変でした。 これが実際に完成した対戦終了後に出てくるモーダル画面です。

新入社員、面白い機能の実装をする。

先週、オセロの面白い機能を実装しようとしてあまり面白くなかったため、没になりましたが、違う楽しい機能を考えました。

それはオセロの3人対戦の実装です。 正直締め切りまであと3日ほどしかいなか作り上げるのは無理かなと思っていましたが、気合で何とかしました。 初めは動いてくれず、「これは間に合わんな。」と思っていましたが、完成している2人対戦のオセロをベースに、3人になった場合に追加される機能や、変更される部分などを書き換えていくことによって実装していきました。

特にこの3人オセロで難しかったのはひっくり返る部分の処理と、置ける駒がなかった場合の処理でした。 3色になるため、処理が複雑になってしまったため苦戦しました。

なんとか3人で遊べるというものは出来ましたが、テストにほとんど時間を取れず、バグがまだ残ってそうな感じはしました。

そこを徹底的につぶせなかったのは残念でしたが、おまけとしてこの機能を付けたので遊べたら十分かなと思っています。

このような感じで赤色の駒も追加し、3人で対戦できるオセロが完成しました

この週の後半はテストと修正、3人オセロの実装を主にやっていきました。最終段階のテストであるため、バグが出ないように祈りながらテストを行っていましたが、細かいバグなどが結構ありました。

これらの細かいバグの修正やデザインの修正を行って、テストを完了し、オセロ制作が終わりました。

研修を終えて

今回4月から約3か月間、新人研修としてオセロ作りを続けてきました。何も知識がない状態でオセロを作り始めて、最初の頃は毎日とても困惑していました。

うちの会社は取りあえず自分で調べて作ってみてというスタンスだったので初めのころは少し辛かったです。ただその分、力はついたと思います。

オセロに関しては、先輩社員の方々に助けられながらでしたが、最終的にはいいものが出来上がったと思います。