shogicom

概要

「shogicom」は将棋を通じてのコミュニティを広げるサービスです。 オンラインアプリのマッチング機能だけでなく、大会の開催、イベントの開催もできるようになっており、 ユーザー将棋を通じてのコミュニティを広げることができます。

アプリケーションの開発にあたっては以下を実装し、実務を想定したモダンな技術を活用しました。

• インフラにAWSを使用(コンテナ基盤としてECSを使用)
• Dockerを開発環境に導入し、本番環境との差異を吸収
• GitHub Actionsを使用した自動CIに対応

また、本アプリケーションは個人開発ですが、GithubのIssues機能やpull requestを活用することによる擬似チーム開発を行いました。

URL

https://shogicom.com

• 常時SSL化
• テストユーザーとして簡単にログイン可能

使用技術

• HTML
• CSS
• JavaScript / JQuery
• Ruby 2.5.8
• Ruby on Rails 6.0.3.4 (RSpec, Rubocopによる静的解析)
• （開発環境）postgreSQL 12.5
• （本番環境）postgreSQL 12.4
• Nginx (ウェブサーバー)
• Puma (アプリケーションサーバー)
• Git / GitHub (Issues, pull requestによる擬似チーム開発)
• Docker / Docker-compose
• AWS (ECS, ECR, RDS, VPC, ALB, Route53, S3, IAM, SSM)
• GitHub Actions

インフラ構成図

ER図

主要機能

• ユーザー関連

  • デバイスの導入
  • 編集/詳細/削除機能
  • ユーザープロフィール画像アップロード機能
  • ユーザーの投稿一覧
  • ユーザーのメッセージ一覧

• 投稿関連

  • 新規投稿機能
  • 検索検索機能
  • 投稿一覧表示機能
  • 投稿詳細表示機能
  • 投稿編集機能
  • 投稿削除機能
  • googlemapの導入
  • チャットルーム作成機能

• メッセージ関連

  • Action Cableの導入（非同期通信）

• その他・共通

  • ページネーション機能
  • アクションに対する各種バリデーション

アプリケーションの主な特徴

• 投稿記事の検索機能により、自分が使用したいアプリ、自分が対戦したい相手のレベルで検索できる。
• 1つの投稿につき1つのチャットルームが作成され、対戦相手が気に入れば1度きりの対戦ではなく定期的な対戦も可能。
• googlemapを導入したことにより、イベント一覧では自分の地域が拡大表示され、自分の地域でイベントが開催されていないかをすぐに確認することができる。

使用方法

• GitHubからファイルをコピーする

git clone https://github.com/yuya2017/shogicom
cd shogicom

• docker

docker-compose build
docker-compose up

• データベースファイルの作成

docker-compose run web bundle exec rake db:create
docker-compose run web bundle exec rake db:migrate

• データベースへ情報を送る。

docker-compose run web rake bundle exec db:seed

localhost:3000へURLを入れていただければアプリが起動します。ログインから下記ユーザーでログインしていただくと、管理者画面へ移動できます。

• email: tester@gmail.com
• passwoed: password

localhost:3000/adminへ移動していただくと、管理者画面へ移動します。

下記コマンドを入力すると、rubocopでw(Warning)以上のエラーが解決されていることを確認できます。

docker-compose run web bundle exec rubocop --fail-level W --display-only-fail-level-offenses

下記コマンドを入力していていただくとテストがすべてパスすることが確認できます。

docker-compose run web bin/rspec

クイックチュートリアル

1. 新規ユーザー作成

• ヘッダーの新規登録をクリックし、それぞれの項目を入力し、登録をクリックします。
• localhost:3000/letter_openerを開き、送信されたメールアドレスのリンクをクリックすると登録が完了します。
• 本番環境の場合はメールが実際に送信され、送信されたメールアドレスのリンクをクリックすると登録が完了します。

2. ログイン

• ヘッダーのログインをクリックし、Eメールアドレス: tester@gmail.com、パスワード:passwordを入力しログインをクリックするとログインできます。
• 本番環境の場合は実際に登録したメールアドレスでログインしてください。
• ゲストログインをクリックしてもログインできます。

3. 投稿の作成

• ヘッダーの投稿マークをクリックし、投稿したい種類を選びます（対戦・大会・イベント）。
• それぞれの項目を埋め、投稿をクリックすると投稿が作成されます（「*」マークがついていない項目は空白が可能です）。
• 大会、イベントの応募人数、応募期間については設定した値を超えると一覧から表示されなくなります（参加もできなくなります）。

4. 投稿詳細ページ

• 「対戦相手を探す」、「大会を探す」、「イベントを探す」のいずれかをクリックします。
• 投稿一覧が表示されるので、気に入った投稿をクリックします。
• イベントについては投稿一覧にgooglemapが表示されており、ピンをクリックすると詳細ページへ飛びます(「.env」ファイルをアプリの直下へ作成し、SECRET_KEYという環境変数にAPI_KEYを入力してください)。
• 「チャットルームへ移動」、「大会に参加」、「イベントに参加」のいずれかが表示されるのでクリックすると投稿のチャットルームへ移動します。

5. メッセージ

• 送信フォームに送信したい内容を入力し、送信をクリックするとメッセージが送信されます。

6. チャットルーム

• 「対戦相手を探す」、「大会を探す」、「イベントを探す」のいずれかをクリックします。
• 投稿者のアイコンをクリックし、個人用チャットルームをクリックすると個人用チャットルームが作成されます。

7. Myページ

• ヘッダーの自分のアイコンをクリックし、サイドバーの「チャットルーム」、「参加済みの対戦」、「参加済みの大会」、「参加済みのイベント」をクリックすると自分が今までに参加したチャットルームが表示されます。
• 投稿履歴には自分が今まで投稿した一覧が表示されます。

アプリケーション開発の背景

制作背景

将棋は自分の趣味であり、前職では将棋部に所属しており定期的にイベントを開催していました。 将棋は1人でオンラインアプリで対戦していても楽しいですが、最もすばらしいことは将棋を通じて色々な人と交友を持ち、お互いに強くなることだと思います。 将棋部に所属していた頃はイベントで大会を開催したり、合宿を行ったりし、「ああでもないこうでもない」とお互いの手について研究していました。

現状、将棋の主流はオンラインアプリに以降してきていると感じます。 気軽に対戦ができ、誰でも同じレベルの方と対戦できることからも、これはとても素晴らしいことですが、将棋を通じて交友を持つことは出来ません。 どうしても1回きりの対戦で、その感想戦も行うことは出来ません。

そこで、これらの問題を解決するために「shogicom」を開発しました。 今の主流であるオンラインアプリでの対戦からもう1歩踏み出し、1度きりの対戦で終わらせないようにチャットルームを用意しました。 これで定期的に同じ人と対戦することができ、対戦が終わった後も感想戦を行うことができます。 さらに、対戦だけでなく、大会、イベントを開催できるようにし将棋を飽きさせない工夫、実際に会って交友することができる工夫を施しました。 ユーザーはこれらを使用し、全く知らない他人と複数回勝負するオンラインアプリから同じレベルの方と定期的に勝負し、お互いに力を高め合うことができるようになります。

今後の課題点など

• 大会を運用しやすいようにトーナメント表を作成できるようにする。
• チャットルームに将棋盤を表示できるようし、対戦した結果をお互いに見ながら振り返ることができるようにする。
• チャットルームの削除機能を追加する。
• 通知機能を追加する。
• rubocopをW以下にも対応させる。