はじめに
こんにちは！kato(@k1997022023)と申します。
この度、「ViMemo」 というアプリをリリースしました！
ViMemoは、動画視聴中に時間軸上で直感的にメモを追加できる機能を提供します。
この機能により、メモ取りが簡単になり、メモに登録されたタイムスタンプをクリックすることで、その時間まで動画をスキップできます。
特に長尺動画では、メモを活用することで視聴効率が飛躍的に向上します。
サービスURL
GitHub URL
目次
作成経緯
TV業界の照明マンは、CUEシート作成に苦労しています。
CUEシートとは、次の音のタイミングで照明を調整するための進行表のようなものです。
私も照明マンだった頃、この作業に非常に苦労しました。
YouTubeなどからアイデアを得る際に、動画に直感的にメモを書き込むことができれば、作業効率が飛躍的に向上すると考えました。
そこで、現役の照明マンの助けになるべく、このサービスを作成することにしました。
メイン機能紹介
メモ作成
再生中でもメモを書くことが出来ます。
メモ編集
モーダルにすることで、動画を視聴しながら修正しやすくしました。
タイムスタンプ
タイムスタンプをクリックでその時間までスキップします。携帯だと時間が表示されないので、タイムを別途表示しています（表示・非表示の切り替え可能）
機能一覧
- 会員登録
- ユーザー編集
- Googleログイン
- パスワードリセット
- メモ投稿
- メモ編集・削除
- Xで共有
- 動画検索
- キーワード検索機能
- サジェスト検索機能
- ソート機能
- 動画・メモいいね機能
- Youtubeの取得機能
- いいね動画プレイリスト機能
主な使用技術
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Next.js 14.2.3 / React 18.3.1 / TypeScript 5.4.5 |
| バックエンド | Ruby 3.1.5 / Ruby on Rails 7.0.3 |
| データベース | fly postgres |
| 認証 | Google OAuth 2.0 / sorcery |
| API | Youtube data API |
| 環境構築 | Docker |
| CI/CD | Github Actions |
| インフラ | Vercel / Fly.io / Amazon S3 |
| その他 | Tailwind CSS / Swiper / ESLint CarrierWave / letter opener web |
構成図
ER図
工夫した点
UI/UX
PCとスマホの両方での操作性を考慮して、レイアウトを変更しています。具体的には、デバイスの画面サイズに応じてデザインや配置を最適化することで、ユーザーエクスペリエンスを向上させる取り組みを行っています。これにより、PCでは広い画面を活用した情報表示を、スマホでは直感的で操作しやすいインターフェースを提供しています。
| PC | スマホ |
|---|---|
 |
 |
 |
|
 |
 |
操作性
一覧画面でも「いいね」機能を提供しており、気軽に動画・メモに「いいね」を付けることができます。この機能により、ユーザーは簡単にお気に入りの整理することができます。
今後の展望
Rspecテストの導入
開発に集中してテストを全く書いていないため、将来的な品質向上を目指してテストを書けるようにスキルを向上させたいと考えています。これにより、安定したコードベースを維持し、バグの早期発見と修正を実現したいと思っています。
フロントエンドのUI/UXの向上
Next.jsを学び始めてまだ2ヶ月程度なので、今後はリファクタリングや動きをより洗練させることに力を入れていきたいと考えています。これにより、コードの品質向上とともに、ユーザー体験をより魅力的にすることを目指していきます。
終わりに
最後までお読みいただき、ありがとうございました。
ViMemoが作業効率を少しでも向上させることができれば幸いです。
ぜひ、アプリをお試しいただき、ご意見やフィードバックをいただけますと嬉しいです。
また、Xでも活動していますので、よろしければフォローをお願いいたします。
今後も更なる改善と機能追加を目指して努力していきますので、
引き続きご支援のほどよろしくお願いいたします。
ありがとうございました🙇♂️