ワンプレ

URL(現在サーバーを停止しております)

https://www.ones-palce.xyz

概要

新しい居場所が作れるサークル作成・参加サービスです。
趣味や興味があるもので繋がることが可能で、活動実績としてブログ機能を実装しており、
サークル活動の促進や、気になっている人に内容や実績を発信できます。
SNSのようにいいね・コメント機能もあり、気になったサークルやユーザーには、フォロー・メッセージでコンタクトを取れます。

開発環境と本番環境にDocker、インフラにAWSを利用し、CircleCIを用いて自動テストを構築しています。

制作背景

• 次の2点を実現したくサービスを作成しました。
  • 所属するコミュニティが少ない(狭い)と感じている人に居場所を提供したい
    退職をしてから様々なことを始める中で繋がりが増え、自分の世界が広がるのを感じていました。
    新しい人/物/事との出会いが好きになり、それが素晴らしいことだと強く実感しています。
    自分の居場所がここではないと感じている人に、居場所を提供し世界を広げられたらと思います。
    
  • 挑戦する人の背中を押したい
    私の周りでは挑戦に悲観的な人が多く、未来のリスクを恐れて何もしないのは本当に勿体ないと感じていました。
    新しく何かを始めるのが苦手でも、同じ気持ちを持つ人と繋がることで心理的コストが下がり、次の一歩を踏み出すきっかけになればと思います。
    

使用言語

Ruby 2.6.3, Rails 5.1.6
Javascript(Jquery), HTML5, Sass, Bootstrap

使用技術

AWS(VPC, EC2, RDS, Route53, ACM, ALB)
Docker, docker-compose
CircleCI(Rspec, Rubocop自動化)
MySQL
Rspec
Nginx, Unicorn
Git

ER図

サービス構成図

機能一覧

認証機能(device)

• 新規登録、ログイン、ログアウト
  • name, email, password必須、ログイン時はemailとpasswordのみでログイン可能
• ゲストログイン機能
  • 閲覧用のユーザー
  • 削除不可
• 管理者ユーザー機能
  • 管理用のユーザー
  • ゲストユーザー以外のユーザー及び、全てのサークルとブログを編集・削除可能

サークル作成機能

• CRUD機能
• タグ付け
  • カテゴリーと活動場所でタグ付け可能

検索機能(ransack)

• サークルに対して検索可能
  • サークル名(フリーワード)、タグつけしたカテゴリー又は、活動場所で検索可能

ブログ作成関係

• CRUD機能(作成したcircleに紐付く)

コメント機能

• ブログに対して送信・削除可能

いいね機能

• ブログに対していいね可能
  • いいね数に応じてランキングを表示

フォロー機能

• フォロー・アンフォロー機能
• フォロー・フォロワー一覧表示

メッセージ機能

• action cableを用いたリアルタイムチャット
• 一覧機能
  • 送信者・メッセージの最初10文字・送信日時を表示

通知機能

• 通知が来るアクション
  • 他ユーザーからフォローされた時
  • ブログにいいねされた時
  • ブログにコメントがついた時

その他機能

• ページネーション
• Ajaxによる非同期処理
• レスポンシブ対応
• SNSシェア機能
  • 投稿したブログをfacebook, twitter, lineにシェア可能

テスト

• Rspec(150以上)

実際に使用いただき意見を反映しました(以下一例)

• 使用している色数が多くデザインにまとまりがない。
  • 使用する色相を統一することでデザインにまとまりをもたせた。
  • ボタンのアウトライン色を透明にし、ホバー時に色が付くように変更。
• サービスの使用方法が分かりづらい。
  • ページ遷移を変更し視覚的に次に何をするのか分かるように改善。
  • リンクボタンの文字を直感的に分かるように変更。

今後の改善点

• 見た目の変更
  • 現状機能の改善や機能の追加
  • デザインの素人感を改善
  • フロントエンド言語の導入
• インフラ周りの変更
  • Capistranoによる自動デプロイ
  • Terraformによるインフラのコード化
  • ECS/ECRの導入

参考、類似にさせていただいたサービス

「サークルブック」
https://www.circle-book.com
「つなげーと」
https://tunagate.com
「ジモティ」
https://jmty.jp