Skip to content

Latest commit

 

History

History
166 lines (118 loc) · 8.18 KB

File metadata and controls

166 lines (118 loc) · 8.18 KB

Hashlog(ハッシュログ)

GitHub release (latest by date) Rails Vue CircleCI Coverage Status Maintainability

サービス概要

ハッシュタグであなたの学びをキチンとする

面倒くさがりツイッタラーが ハッシュタグを登録するだけで継続を可視化できる Twitter 連携型 学習記録サービスです。

プロダクトについて

サービスを作った思い

Twitter で学習報告をしている人を見て、「毎日学習記録を付けることはすごいことなのに、ツイートがすぐに流れてしまってあまり評価されていない気がする」と感じたことと、自分が実際に過去の記録をツイートの中から探そうとしたときに日常ツイートに埋もれていて大変だった経験から作りました。 きちんと継続して記録したくなる仕組みを作ること、その積み上げをカレンダーの可視化やランキングで評価することで達成感を感じさせることを目的としています。

使用画面と機能紹介

トップページ 利用規約
最近登録されたハッシュタグ 3 件と機能の紹介を表示する。 ユーザー登録 / ログイン前に利用規約を表示し、ユーザーが同意した上で Twitter 認証ページへジャンプする。

マイページ ハッシュタグ登録画面
ユーザープロフィールと公開設定のみ編集できる。
非公開設定の場合、自分以外によるユーザーページへのアクセスが制限される。
ハッシュタグを登録することで、自動でツイートを取得する。
登録後はサービス側で自動で 1 日ごとにツイートを収集し更新する。

ツイート一覧ページ(マイページ) ツイート一覧ページ(ユーザーページ)
該当のハッシュタグのツイートが表示される。
カレンダーにはツイートした日にマークが付いている。
限定公開 / 非公開設定にしたハッシュタグはユーザーページに表示されない。

ハッシュタグの設定 日付選択時
公開設定・リマインダーを設定する。
リマインダーで設定した日数ツイートがない場合、Bot から Twitter アカウントにメンションが送られる。
カレンダーの日付を選択することで、その日のツイートのみ表示する。

継続率ランキング 管理画面
公開設定になっているハッシュタグを継続率・ツイート日数でランキングにする。 ユーザーなどの情報、定期実行の状況を確認する。

使用技術

バックエンド

  • Ruby 3.1.2
  • Rails 6.1.6
  • RSpec 3.11.0
  • Twitter API(外部 API)

機能における主要な Gem

  • sorcery(ログイン)
  • twitter(TwitterAPI OAuth)
  • pagy(ページネーション)
  • banken(認可)
  • whenever(定期実行)
  • sidekiq(非同期処理)
  • administrate(管理画面)

ER 図

Image from Gyazo https://drive.google.com/file/d/1xGTZvsnf1Tqezl44daZW8v8j_zwY8kEK/view?usp=sharing

API エンドポイント一覧

フロントエンド

  • Vue 2.6.11
  • axios 0.19.2
  • Vuex 3.1.3
  • Vee-Validate 3.3.0
  • Vuetify 2.2.21

インフラストラクチャー

  • Docker
  • Sider
  • CircleCI
  • Nginx 1.12.2
  • puma 4.3.3
  • AWS
    • VPC
    • EC2
      • Amazon Linux 2
    • RDS
      • MySQL 8.0.19
    • ElastiCache(Redis)
    • S3
    • Cloud Front
    • ALB
    • Route53
    • ACM

インフラ構成図

Image from Gyazo https://drive.google.com/file/d/1lCmn-IeardJ3zwkcgTyybtmjb9wh80Hf/view?usp=sharing

環境構築手順

事前に管理者からmaster.keyを取得してconfig配下に置いてください。

  • config/database.yml の作成
$ cp config/database.yml.default config/database.yml
  • ローカル環境構築
$ bundle install --path vendor/bundle
$ yarn install
$ rails db:create
$ rails db:migrate
$ rake db:seed_fu  # 事前に自分のアカウントを管理ユーザーとして設定してください

サーバー起動

$ rails server
$ bin/webpack-dev-server

上記のコマンドは$ bundle exec foreman startで代替可能。

テスト実行

$ bundle exec rspec spec

テスト項目一覧

開発者用 自動ログイン

See app/controllers/development/sessions_controller.rb

/login_as/[user_id]