自作サービスのEVENT FOLLOWのご紹介 / Introducing EVENT FOLLOW, a self-made service

Transcript

1. 自作サービスのEVENT FOLLOW のご紹介 mh-mobile
2. 自作サービスの概要 サービス名 EVENT FOLLOW ( 読み: イベントフォロー) コンセプト 興味のある技術イベントを見逃さない技術イベント発見サービス エレベータピッチ [EVENT FOLLOW] というサービスは、 [ 自分の興味の方向に近い技術系のイベントを見逃してしまう問題] を 解決したい [ 積極的にイベントを探さずに、自分の興味の方向に近い技術系のイベントを見つけたい人] 向け の、 [ 技術系のイベント発見サービス] です。 ユーザーは [Twitter の友達がシェアしたDoorkeeper やconnpass な どのイベントを発見すること] ができ、 [Doorkeeper やconnpass などでキーワードで検索すること] とは違っ て、 [ 検索せずに自分の興味の方向に近いイベントを発見できること] が備わっている事が特徴です。 参考: どんなサービスを作るかを考えるの提出物
3. エレベータピッチ [1. サービス名] というサービスは、 [2. 解決する問題] を解決したい [3. このサービスを使うターゲット] 向 けの、 [4. サービスのカテゴリー] です。 ユーザーは [5. このサービスでできること] ができ、 [6. 競合サービ ス] とは違って、 [7. 差別化要素] が備わっている事が特徴です。 1. サービス名 EVENT FOLLOW 2. 解決する問題 自分の興味の方向に近い技術系のイベントを見逃してしまう問題 3. このサービスを使うターゲッ ト 積極的にイベントを探さずに、自分の興味の方向に近い技術系のイベントを見つけた い人 4. サービスのカテゴリー 技術系のイベント発見サービス 5. このサービスでできること Twitter の友達がシェアしたDoorkeeper やconnpass などのイベントを発見すること 6. 競合サービス Doorkeeper やconnpass などでキーワードで検索すること 7. 差別化要素 検索せずに自分の興味の方向に近いイベントを発見できること
4. クライアントのサポート対象 ブラウザ PC 版 SP 版 iPhone アプリ iOS13 以上 3 世代のOS バージョンを対象 iPad は対象外
5. 主要な機能 イベントデータの表示 Twitter ログイン機能 イベント一覧の表示 イベントのソート機能 イベントの絞り込み機能 イベント情報を投稿した友達の一覧の表示 イベントを投稿した友達のツイートの表示 イベントデータの収集（定期実行処理） Twitter 検索からイベントデータの取得 Front API DB Worker
6. Twitter ログイン機能 Twitter のアカウントを使ってサービスにログインする。 ログインユーザーの友達がシェアしたDoorkeeper やconnpass などのイベントを抽出する。
7. イベント一覧の表示 Twitter でフォローしたユーザー（友達）が投稿したイベント情報を表示します。 イベント開催のステータスをわかりやすく表示する。 1 ページに最大10 件ずつイベントを表示します。 iPhone アプリの場合は、スクロールして追加読み込みします。
8. イベントのソート機能 <Friend 数> 、< 新着順> 、< 投稿順> 、< 開催が近い順> の4 つの種別にもとづきソートできます。
9. イベントの絞り込み機能 Friend 数のソートを選択した場合、9 つの時間軸の種別にもとづき絞り込みできます。 Friend 数以外のソートを選択した場合、5 つのFriend 数の種別にもとづき絞り込みできます。
10. イベント情報を投稿した友達の一覧の表示 イベント情報を投稿した友達のアイコンを一覧表示します。
11. イベントを投稿した友達のツイートの表示 イベント情報を投稿した＜ツイート＞や＜リツイート＞、＜引用ツイート＞の内容を時系列順に表示できま す。
12. Twitter 検索からイベントデータの取得 Twitter でイベントの収集 収集したイベント詳細の取得 connpass Doorkeeper 友達一覧（フォロワー）情報の取得 イベントに関連したツイート情報の取得 ツイート リツイート 引用リツイート 過去のイベントの削除 24 時に一括削除 ツイート取得 DB イベント情報取得 リツイート取得 引⽤リツイート 取得 フォロー 情報取得 過去のイベント 削除
13. 技術スタック フロントエンド ・Nuxt.js (Nuxt Composition API) ・Firebase Autentication iPhone アプリ ・Flutter ・Firebase Authentication バックエンド ・Ruby 3.0.0 ・Rails 6.1.3 （Rails API モード） アプリケーションサーバ ・Puma 5.2.2 データベース ・PostgreSQL キャッシュサーバ ・Redis ツール ・Storybook ・Sentry ・Skylight ・OpenAPI インフラ ・Docker （開発環境） ・Heroku （本番環境） ・GitHub Actions
14. インフラ構成図 本番環境の構成図の例になります。 コード リポジトリ プッシュ デプロイ GitHub Actions アクセス アクセス ブラウザからのアクセスは、Nuxt.js にリクエストされます。 iPhone アプリからのアクセスは、Rails API にリクエストされます。
15. ランニングコスト 項目 費用 Nuxt.js （Heroku Web Dyno ） $7 Rails API （Heroku Web Dyno + Worker Dyno ） $14 PostgreSQL （Heorku Addon ） $9 合計で $30
16. サービスの各種URL アプリ リポジトリURL サービスURL Web アプリ https://github.com/mh- mobile/event_follow https://eventfollow.app/ iPhone ア プリ https://github.com/mh- mobile/event_follow_mobile https://apps.apple.com/jp/app/event- follow/id1561648565 Android アプリは今回の自作サービスのスコープ対象外です。 Web アプリはHeroku でリリース済みです。 iPhone アプリはApp Store にリリース済みです。
17. 作って学んだこと API 連携 Nuxt.js とRails API の連携 iPhone アプリ（Flutter ）とRails API の連携 Firebase Authentication （JWT トークンを使った認証） 定期実行処理 Clockwork を用いた定期実行 外部API からイベント情報の抽出 ツール周り Docker OpenAPI Storybook Sentry Skylight セキュリティ周りの対策
18. 今後やりたいこと 機能を追加する Twitter のリスト毎にイベント一覧の表示 connpass やDoorkeeper 以外の技術イベントの抽出 iPhone アプリ版の強化 iPhone アプリのプッシュ通知機能 サーバ側に通知配信の機能を実装 Apple Watch やウィジェット対応など 運用の知見を蓄える 運用してサービスの改善を図りたい メトリクスの評価 パフォーマンス改善
19. 振り返り - フェーズ 「Web サービスを作って公開する」プラクティスのフェーズ 期間 サービス案の検討 7/20 〜9/23 （約2 か月） ペーパープロトタイプを作る 9/23 〜9/25 （3 日） 自分で作るWeb サービスのリポジトリを作る 10/2 Web サービスを作る 10/26 〜4/20 （約半年） 自分で作ったWeb サービスのデザインレビューを受ける 4/20 〜5/11 （約3 週間） 自分で作ったWeb サービスのコードレビュー 6/5 〜6/10 （約1 週間） 参考: どんなサービスを作るかを考えるの提出物
20. 振り返り - Web アプリ 参考: Contributors to mh-mobile/event_follow
21. 振り返り - iPhone アプリ 参考: Contributors to mh-mobile/event_follow_mobile