Go to Qiita Advent Calendar 2024 Top
LoginSignup
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@takasho1024(たかしょー)

【個人開発】独学が捗る！オンライン自習室サービスを作りました【Rails ✕ Nuxt】

Last updated at Posted at 2023-03-20

ogp

はじめに

閲覧ありがとうございます！
現在、独学をしながらエンジニアを目指しているたかしょー（@takasho1024）と申します。

独学をしている人なら分かると思いますが、独学するモチベーションを保つのって結構大変ですよね。
そこでもくもく会の出番なのですが、出先だと自宅の作業環境を再現するのが難しいですし、なにより時間もお金もかかります（郊外住みの私には厳しい）。
一方オンラインもくもく会では、上記のデメリットはないのですが早朝だけ開催など時間的な縛りがあります（生活リズムが乱れがちな私にはこれまた厳しい 笑）。
また、カメラとマイクを繋げるのが少し仰々しく感じて参加までに至らないという人が私以外にもいるのではないでしょうか。
もっとカジュアルに、いつでも、どこでも、仲間ともくもくできる場所があればいいのに・・・
そんな独学者たちの悩みを解決するべく、オンライン自習室サービス MokuTube（もくつべ） を作りました！

▼サービスURL
※現在はサービスを停止しています。

※パソコンからのみ利用可能です。
※現在、平日の9:00〜21:00の間だけ稼働しています。
https://mokutube.net

▼GitHubURL

サービス概要

MokuTubeはYouTube上にある作業用BGMを流しながらゆるっと気軽に参加できるオンライン自習室サービスです。
“もくもく会をもっとカジュアルに“ がコンセプトです。
基本的には登録不要ですべての機能を使うことができます（ゲストは24時間だけ有効）。
自習室内では常にWebSocketによるリアルタイム通信が行われるので、家にいながら本当の自習室にいるかのような没入感が味わえます。

使い方

  1. ゲストログイン OR ログイン
  2. ルーム一覧からルームを選んで入室
  3. 着席する
    基本的にこれだけです。
    最短3クリックで使えるようになっています。

ターゲット層

勉強のモチベーションを上げたい独学者（プログラミングに限らず）

主な機能

ルーム内

主に4つの機能があります。

自習室内機能.png

①リアルタイムな座席情報の共有

画像上の座席をクリックすると席を確保することができます。
※座席数はルームの種類により異なります。

ezgif.com-video-to-gif.gif

②リアルタイムチャット

簡単なコミュニケーションツールとしてルーム内のユーザー同士でチャットができます。
※着席していなくても使えます。

ezgif.com-video-to-gif (1).gif

③BGMの視聴

リラックスして作業に集中できるように各ルームに設定されたBGMを視聴することができます。
付随して以下の機能も使えます。

  • スライダーによる音量調節
  • ボリュームアイコンクリックでミュートの切替（デフォルトではミュート）

④滞在時間の計測（ストップウォッチ）

入室から退室までの時間を計測して 勉強時間の見える化 ができます。
付随して以下の機能も使えます。

  • ボタンクリックで計測の一時停止と再開の切替
  • 退室時に自動で滞在時間を各ユーザーの総利用時間に加算

⑤その他

座席上のユーザーアイコンクリックで簡単なプロフィールを閲覧することができます。

ルーム一覧

ここから好きなルームを選んで入室することができます。

FireShot Capture 117 - ルーム一覧 - MokuTube - mokutube.net.png

  • ルームのソート（公式ルーム、ユーザーが多い順、作成日時が新しい順）
  • 動的なページネーション
  • 現在の着席ユーザー人数の表示

ルーム作成

自分でルームを作ることもできます。

ezgif.com-video-to-gif (2).gif

  • 10種類のアイソメトリックイラストからルームイメージを選択（iStockの素材を使用）
  • YouTube Data APIによる再生リストの自動取得
    • BGMは著作権フリーのものを使用しています
    • 提供元：RYU ITO MUSIC 様
  • BGMの試聴

認証関係、マイページ

ユーザーはマイページで自分の情報の確認&編集ができます。

FireShot Capture 118 - マイページ - MokuTube - mokutube.net.png

  • トークンベースの認証
    • 新規会員登録
    • 一般会員ログイン
    • ゲストログイン（24時間だけ有効）
  • ユーザーの詳細情報の閲覧
  • ユーザーの登録情報の編集

工夫&苦労した点

オンライン自習室をどのように表現するか

ググっても実装例が皆無に等しかったので、この部分は非常に難儀しました。
DB設計、フロントとバックの連携、ActionCableの使い方など考慮することが多く、ピースをハメようと試行錯誤する日々が1ヶ月くらいは続きました。
特にActionCableを用いたWebSocket通信の実装は苦労しました。
チャット機能はよくある実装例なのですが、席の移動に関しては情報が全くなく一から自分でロジックを組む必要がありました。
正直途中で実現不可能なのでは？と思ったりしたのですが、集めまくった断片的な情報をうまいことつなぎ合わせてなんとか実装に至ることができました。

参考までに作成したRails側のActionCable関連ファイルの一部を下記に記載します。

room_channel.rb

ルームチャンネルに関するメソッドをまとめたファイルです。

room_channel.rb
class RoomChannel < ApplicationCable::Channel
  # ルームID毎にストリームを別ける
  def subscribed
    stream_from "room#{params[:room]}"
  end

  # 退室の際にカレントユーザーの席情報を削除する
  def unsubscribed
    return unless RoomsUser.exists?(room_id: params[:room], user_id: current_user.id)

    RoomsUser.find_by(room_id: params[:room], user_id: current_user.id).destroy
    room_users = RoomsUser.where(room_id: params[:room]).includes(:user)
    room_users.map do |room_user|
      room_user.detail = {
        avatar: room_user.user.avatar.thumb.url
      }
    end
    content = {
      type: 'getSeat',
      body: room_users
    }
    ActionCable.server.broadcast("room#{params[:room]}", content)
  end

  # チャットのメッセージを作成する
  def speak(data)
    Message.create!(
      room_id: params[:room],
      user_id: current_user.id,
      body: data['message']
    )
  end

  # ルームの席を確保する
  def get_seat(data)
    if RoomsUser.exists?(room_id: params[:room], seat_number: data['seat_number'])
      return
    elsif RoomsUser.exists?(room_id: params[:room], user_id: current_user.id)
      RoomsUser.find_by(room_id: params[:room], user_id: current_user.id).destroy
    end

    RoomsUser.create!(
      room_id: params[:room],
      user_id: current_user.id,
      seat_number: data['seat_number'],
      x_coord: data['x_coord'],
      y_coord: data['y_coord']
    )
  end
end
message_broadcast_job.rb

チャットメッセージをブロードキャストするActiveJobのファイルです。
メッセージは、DBに保存された後に該当ルームにいる全ユーザーに送信されます。

message_broadcast_job.rb
class MessageBroadcastJob < ApplicationJob
  queue_as :default

  def perform(message)
    message.sender = {
      name: message.user.name,
      avatar: message.user.avatar.thumb.url
    }
    content = {
      type: 'speak',
      body: message
    }
    ActionCable.server.broadcast("room#{message.room_id}", content)
  end
end
connection.rb

WebSocketのコネクションに関するファイルです。
認証されたログインユーザーごとに接続を確立するようにしています。

connection.rb
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private

    def find_verified_user
      uid = request.params[:uid]
      token = request.params[:token]
      client = request.params[:client]
      user = User.find_by(uid:)
      if user && user.valid_token?(token, client)
        user
      else
        reject_unauthorized_connection
      end
    end
  end
end

ちなみにアイデアをまとめるツールとしてNotionを活用していました。
下記は本サービスのアイデアをまとめたメモです。
自分用に作ったので少し荒削りですがよければご覧ください。

デプロイ関連

デプロイ後にCORSエラーが発生したのですが、中々解決できず5日間程時間を無駄にしてしまいました。
色々試していくうちに本番環境から導入したNginxが怪しいと思い以下の作業を実施。

  • Railsコンテナ内で同居していたNginxを別のコンテナで動かすようにする
  • ローカル環境（docker-compose.prod.yml）で動作を確認
  • ECSコンソールを新→旧に変えて細かい設定をいじる
  • CloudWatchでログを確認して発生しているエラーを一つずつ確実に潰す

工夫という程でもありませんが、これで無事CORSエラーが解消されました。
ECSへのデプロイは今回がはじめてだったのですが、

  • 難しいことは同時に複数やらないこと
  • 詰まったら問題を細かく分割して一つ一つ確認すること

が大事だということを改めて思い知りました。

特に、サポートが不十分な新コンソールが2023年からデフォだったのはかなり盲点でした。
CORSエラーの原因は未だハッキリと解明できていませんが、ここまで手間取ってしまったのは自分のECS設定に不備があったからだと考えています。

これからECSにデプロイするという初学者には、不要なトラブルを避けるため旧コンソールからデプロイ作業をすることを強くおすすめします。

スクリーンショット 2023-03-04 0.23.35.png

ER図

ルーム画像上のXY座標を保存することでルーム上のユーザーの位置を表現しています。
ER図

インフラ構成図

インフラ構成図

使用技術一覧

フロントエンド

  • Nuxt.js 2.15.8（SPAモード）
  • Vuetify
  • Jest
  • ESLint
  • Prettier
  • 主要なpackage
    • @nuxtjs/axios
    • @nuxtjs/auth（認証関係）
    • @nuxtjs/google-gtag（Googleアナリティクス用）
    • @nuxtjs/moment（表示日時のフォーマット）
    • actioncable（RailsのActionCableとの提携）
    • vue-youtube（YouTubeIFramePlayerAPIのVue用ラッパー）
    • vuex-persistedstate（Vuexデータの永続化）

技術選定に関する補足
JSフレームワークについて、Reactと迷いましたが以下の理由により今回はVue.js（Nuxt.js）を採用しました。

  • Nuxt.jsを含めても学習コストがそこまで高くない
  • 初学者の実装例が多いので再現性が高い
  • 個人開発なので大規模ではない

また、SSRではなくSPAモードを選んだのはあまりSEOを意識する必要がなかったというのと、単純にSPAモードでの開発に慣れていたからです。

バックエンド

  • Ruby 3.1.2
  • Rails 6.1.7（APIモード）
  • RSpec
  • RuboCop
  • MySQL 8.0.31
  • Nginx
  • 主要なGem
    • rack-cors
    • devise_token_auth（アクセストークンの発行）
    • carrierwave（画像アップロード）

インフラ

  • AWS（ECS Fargate, ECR, Route53, ACM, ALB, RDS, S3）
  • CircleCI

技術選定に関する補足
CI/CDについて、GitHub Actionsと迷いましたが以下の理由により今回はCircleCIを採用しました。

  • お手軽&多機能なGitHub Actionsにシェアが奪われつつあるものの、依然として採用している企業が多い（私の観測範囲内）
  • 過去に作成したポートフォリオでGitHub Actionsを使ったことがあったので、単純に自分の守備範囲を広げたかった

開発環境

  • VSCode
  • Docker（docker-compose）
  • MacBook Air (M1, 2020)

今後の展望

インフラ面が少し弱いのでそこを中心に改善していきたいです。

  • CloudWatch Events × LambdaでECSを自動起動・自動停止できるようにする
  • Terraformでインフラのコード化
  • その他機能やUIのブラッシュアップ

おわりに

最後まで読んでいただきありがとうございます！
独学はしんどいですが最後までちゃんとやりきれた場合、確かな自信と実力が身につきますしその結果大きなリターンを得ることにも繋がります。
このサービスと記事がひとりでも独学を頑張る人たちの役に立てるなら本望です。
アプリのリポジトリも公開しているので、もしアプリの作り方で悩んでいる人がいたら是非参考にしてみてください！

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?