Skip to content

Latest commit

 

History

History
159 lines (124 loc) · 7.88 KB

README.md

File metadata and controls

159 lines (124 loc) · 7.88 KB

MemoTube

MemoTube

製品概要

オンライン授業 x Tech


背景


オンライン授業でパソコンを見ながらノートをとるのは大変!

  • パソコンとノートを並べるには広いスペースが必要.
  • 授業の進行スピードによっては動画を止めたり戻さなければならない.
  • 授業の動画はどうしても長くなりがちで復習しにくい.

先生も生徒の反応が分からずやりにくい!

  • 先生と生徒がやりとりしづらい.
  • 授業の改善を行いづらい.

そこで動画に直接メモを書き込めるWEBアプリを開発しました!
さらに共有機能などで先生と生徒や生徒同士がメモを通じてやりとりできます!


製品説明


MemoTubeは動画に直接メモを書き込めるWEBアプリです.

個人的に利用する場合

  • メモを取りたい動画のURLを指定し,動画を見ながら同じ画面でメモをとれます.
  • メモの編集・削除・タグ付けなどの基本的な機能に加え,メモにリンクした時間へ動画をジャンプできます.

授業で利用する場合

  • ワークスペースにて授業動画などでメモページを作成することで,所属する人々にそのページを共有できます.
  • 生徒が見た動画の時刻やメモをとっていた時間などを分析することができます.
  • 権限が設定されているため誰が生徒で誰が先生か分かりやすく,勝手にメモページが削除される心配もありません.

詳しい使用方法はこちら



特長


1. 直接メモを動画に書き込める

  • パソコンで動画を見ながら同じ画面でメモをとることができます.
  • メモ記入中に動画が止まり, 快適にメモが取れます.
  • ログイン機能があるので過去のメモを保存して後で見返すことができます.

2. メモを友だちやワークスペース内で共有できる

  • 動画の面白い部分や大切な箇所を友達に教えられます.
  • 先生に質問することもできます.
  • メモをプライベートに設定すれば他人にメモを見られることはありません.

3. メモが時間とリンクしている

  • メモをとった動画内の時間にワンクリックで飛ぶことができます.
  • 授業の復習や動画に注釈をつけることなどに利用できます.

4. AIを使った機能を搭載

  • メモの内容からタグを自動で生成できます.
  • メモの内容から感情を読み取りメモのハイライトを行えます.

5. ワークスペース機能

  • ワークスペースに招待することで,そのワークスペース内のページを全員に共有できます.
  • 各ユーザーに権限があり,機能を制限する事ができます.

6. 分析機能

  • 動画のよく見られている時間が分かり動画の大切と思われる部分が分かります.
  • メモの内容をとった時刻や内容の感情判定から,生徒が苦戦している箇所などが分かります.
  • 他にも様々なグラフを確認できます.

その他にも,メモやタイトル・タグからシームレスに検索できる機能もあります.


使い方


ブラウザから使えるので簡単に利用できます.
https://tohoku.memotube.xyz

個人的に利用する場合

  1. ログインまたは新規ユーザー登録します.
  2. 好きな動画を選んで+ボタンよりURLを入力してメモの開始です.
  3. お好きにメモを取ることができます.

授業で利用する場合

  1. ログインまたは新規ユーザー登録します.
  2. 左上のメニューボタンからワークスペースを作成・選択します.
  3. +ボタンよりURLを入力してメモページを作成します.
  4. メモページ内の右側にあるANALYTICS MODEから分析ページに移動します.


解決出来ること


  • オンデマンド授業を見ながらの勉強・要約・振り返り・他の人との問題共有が容易になります.
  • 生徒と質問などのやりとりを行えたり,生徒の反応などを動画に反映することができます.


今後の展望


  • 動画サイト上などで動作する拡張機能を実装する.
  • 蓄積される分析用データをビックデータとして利用し応用する.
  • Google以外のSNSを用いたログイン機能を実装する.


注力したこと


  • メモ作成の使い勝手の向上や検索機能など.
  • メモのスレッド化.
  • グーグルアカウントを用いたログイン.
  • メモの共有機能.
    • トークンを用いた共有.
    • ワークスペースを用いた共有.
  • 動画の視聴時間などの分析機能.
  • レスポンシブなユーザーインターフェース.
  • AIによるキーワードの自動抽出およびメモの分析.
    • gooラボAPIを用いた形態素解析による自動タグ生成.
    • DistilBERTを用いたメモの感情判定.
  • 分析機能,様々なグラフの表示.


開発技術

活用した技術


API・データ


  • DistilBERT
  • gooラボAPI
  • GoogleOauth2.0
  • YoutubeAPI

フレームワーク・ライブラリ・モジュール


  • React
  • Material-UI
  • Ruby on Rails
  • docker


独自技術

ハッカソンで開発した独自機能・技術


  • React
    • アプリケーションのデザインやルーティング.
    • 動画のメモや視聴時間の分析.
  • Ruby on Rails
    • APIの作成やデータベースの管理など.
    • テストの作成.