# 04環境オンラインの作成
http://04kankyou-online-aplication.s3-website-ap-northeast-1.amazonaws.com/
インターネット上で遊べるリアルタイム通信ターン制オンライン対戦型カードゲームの個人開発
# チームの編成と概要
開発からAWS上での公開まで全て自分1人で行った。
一部デバッグ(テストプレイ)を友人何名かに手伝ってもらった
# 課題
現物が必要なカードゲームにおいてオンライン上で友人と気軽に遊べないかと思い作成した。
同様の遊びができるアプリケーションは既に存在するが、細かなルールの違いや遊ぶまでの準備が多く、とても気軽に遊べるとは言えないためSPAとしてすぐに遊べるアプリケーションを開発した
# 取り組み
JavaScript, React, Node.js, Socket.ioを用いて開発を行った。公開するにあたりAWSを用いた。
JavaScriptやReactを用いてフロントエンド側でカード等の処理を行い、お互いのプレイヤーの行動はSocket.ioを介して相手プレイヤーのクライアント側に伝わり相手プレイヤー側でも処理が行われるように設計した。
カード1枚をコンポーネントとして扱い、カードコンポーネントにそれぞれのIDをkeyとして持たせる事によりカード毎に振る舞いが異なるような設計をした。
ゲームの性質上、同期的に行う処理と非同期的に行う処理が混在していたため、それらの処理の設計を的確に行った
# 工夫した点
常にプレイヤー目線での開発を心がけ、必要な情報がすぐに分かるようにするなどプレイヤーの手間を極力減らすようなUI/UXにした(山札にどのカードが残っているか、相手がまだ使用していないカードが何かをすぐに確認できる等)
ターン制ではあるが本アプリケーションでは相手ターン中であっても非ターンプレイヤーが行動できるため相互にやり取りを行う部分に注力した
ユーザーのゲームプレイ体験を高めるために常にカードコンポーネント内のアクティベートボタンをユーザーに押させる様に設計した。
相手プレイヤーがカードをアクティベートした時に自分がカードを使用(アクティベート)するかの確認を行うが、このときにSocket.ioのイベントリスナー内で使用可能カードを一覧として表示しアクティベートするかの確認するのではなく、カードコンポーネント内のアクティベートボタンをユーザーが押すように設計した。
これによりユーザーは相手の行動に対して実際にカードを手に取ってアクティベートするかの様な体験をすることができるようになった
# 成果（数値 or 表彰 or 誰に喜んでもらったか等 ）
https://twitter.com/04kankyo_Online
上記X(旧Twitter)にて250リポストされた
公開後3週間でマッチング回数4000回以上、完了マッチ(決着がついた)数1500回以上のプレイをされた
X上で他のユーザーを誘って遊んでいるプレイヤーが散見された