発表資料:https://docs.google.com/presentation/d/1k9OKzgEupLBzkmyd6TjX5fwokXsRn2yfYxU2xsJLMv0/edit?usp=sharing
デモ:https://voice-tag-jp.vercel.app/57471d9a-b943-40e7-b97e-a46cda982c73
テキストベースのコミュニケーションって大変ですよね?
コロナ禍でリモートワークが増え、Slackやメールでのテキストベースのコミュニケーションが増加しました。その中で、対面で行われていたようなコミュニケーション(例えば同じ資料を指差しながらディスカッションしたり、わからない部分を資料作成者に直接聞いたり)が取りづらくなりました。
またテキストベースであるがゆえに、雰囲気や温度感が伝わらず、認識違いが発生したり、過度に堅い文章になってしまったり、言い回しに拘り何度も文章を書き直してしまったりしたことはないでしょうか。
Voice Tagは、PDFファイル上に自分の声を付箋として残し、共有できるサービスです。
- 共有したいPDFファイルをアップロードします。
- ファイル上の任意の場所をクリックして、音声の付箋を残しましょう。
- ファイルをチームに共有しましょう。チームメンバーも新たな付箋を追加したり、既存の付箋にコメントを追加したりすることができます。
アプリで、チームメンバーの音声をながら聴きできることでタスク効率化や心理的安全性の向上に寄与します。
Voice Tagでは、アップロードしたPDF資料に音声データを追加し、他のユーザーと相互に音声によるコミュニケーションを行うことができます。
プロダクトURL:https://voice-tag-jp.vercel.app (バグが残っている可能性がありますmm)
- ログイン後、ダッシュボードで「+新規」をクリックし、PDF資料をアップロードしてください。
- PDF資料上の任意の場所でダブルクリックすることで音声を追加することができます。(音声追加後、一度ポップアップを閉じて再度開き直すと反映されます)
- ダッシュボードに戻ると自分が作成したファイルを一覧で見ることができます
音声ベースのコミュニケーションでは、複雑な事柄を簡潔に伝えやすい、音声情報は脳で処理されやすい、ながら聴きによって可処分時間も多い、といった特徴があります。テキストでは説明に文字数がかかってしまう場合でも、音声ならば、より簡潔かつ的確に伝えることができます。また、テキストであれば文体や言い回しに過度に気を遣ってしまいますが、音声では普段話すように説明することができます。
音声でチームメンバーとコミュニケーションを図ることでチーム内の心理的安全性をもたらします。(テキストでは相手のテンションや気持ちが伝わりづらいですよね)
- アップロードされたPDFファイルからサムネイル画像を自動生成するようにしたい
- テキストの読み上げ機能を追加し、より簡単に耳から情報を得られるようにしたい
- Google Drive等のストレージサービスとの連携
- 録音・音声の再生などの、直感的に使いやすいUIとアニメーション
- CI/CDの設定
- サムネイルの自動生成(プロダクトへの連結が間に合わなかったものの、実装自体はできています)
- Web Speech API
- Google Drive API
- フロント:TypeScript / React / Next.js / Tailwind.css / Konva.js / PDF.js
- バックエンド:Fastify / TypeScript / TypeORM / ImageMagick
- その他:Github Actions / Vercel / AWS / Firebae (auth, storage)
- 録音・音声再生時のポップアップUI / 音声波形のUI
- サムネイルの自動生成
- https://github.com/jphacks/F_2108_1 (別レポジトリ)
- その他全てのコードはハッカソン期間中に書いています
yarn workspaceを利用してfront/serverのパッケージを作成しています。tsconfig/esLintrc/prettierrc等をまとめて設定しています。
packages/
├─ front/ クライアントサイド
└─ server/ サーバーサイド
各パッケージのREADMEを参照ください
yarnを利用します。npmを利用するとエラーが出ます。
- yarn dev: 開発サーバーの立ち上げ
- yarn build: ビルド
- yarn start: ビルドしたものを実行する
- yarn lint: Linterを実行する
- yarn format: フォーマッタを実行する
- yarn fix: Linter / フォーマッタの自動修正を行う
:front, :serverがついているものは、それぞれのパッケージ内で実行します
- yarn workspace front/server add xxx: ライブラリの追加(各パッケージのディレクトリに移動してyarn add xxxでも可)