音声を文字起こしを補助するサイトを作ってみましたので作るまでの経緯や作ってみた感想などをずらずらと書いてみたいと思います。
Vue.js(Nuxt.js)+Firebaseでサイトを構築しているため、お金がかかったところと言えば独自ドメイン取得のところだけでした。
サイト制作までの経緯
会議の発言を全部文字起こしする際や、誰かにインタビューを行った後に内容を文字起こしする際に使うと便利かなーと思って「モジロイ」というサイトを作ってみました。
モジロイ 現在はクローズしましたmm
※ 音声認識はPCのGoogle Chromeでしか利用できません。
書き起こしイメージ↓
最近Vue.jsを触っていたことから「Vue.jsでサイトを作りたい！」欲が高まって制作を決意しました。
どんなものを作るかで一番悩んでいたのですが、常々と課題に感じている「会議の議事録取り」に視野を当ててみました。
元々議事録を書いている時に「面倒だなー」「自動でやってくれないかなー」と常に思っていて色々調べていたのですが精度が悪かったりお金がかかるやつだったりで現実的でないものが多くて課題を感じていました。
調べていく中でWeb Speech APIを知って「逆にどこまで実用的にできる？」と気になったことからサイト制作を行いました。
実際にサイトを作って使ってみた感想としては、「音声を文字起こしする際に補助的に使えば多少早くなる可能性がある」かなーとぼんやり思いました。話し手を判別できる機能が追加されると需要が少し上がるかなと。
こちらは個人の感想で、議事録をフルに文字起こしすることがそんなにないので皆さまのフィードバックを頂けましたら幸いです。
サイト制作までの必要となった知識
デザイン(HTML/CSS/JavaScript)
デザイン力が足りずに凄く頭を悩ませていました。
BulmaというCSSフレームワークの力を借りてごまかしました。Bootstranpでも良かったのですが、BootstrapはJS(jQuery)依存しているのでCSSを追加するだけで利用できるBulmaを採用しました。
Web Speech API
Web Speech APIについては検索すると実装例などがたくさん出てきたので、割と簡単に使うことができました。
ですが一定時間入力がないと音声認識が止まってしまったりなど少し試行錯誤を繰り返して実装する必要があったため少し時間がかかりました。
フロントエンド(Vue.js/Nuxt.js)
Vue.jsのフレームワークであるNuxt.jsを採用しました。
今回作成したサイトは小規模サイトであるためプレグレッシブフレームワーク(段階的に複雑さを取り入れることができる)であるVue.jsで十分だったと思います。
詳しい選択理由などはここでは割愛しますが、Nuxt.jsは学習コスト低めでかつ制約もそんなに厳しくないので終わってみて入れたことによるメリットの方がでかかったと思っています。
インフラ(Firebase)
調べてみたところ最近は、静的なサイトを作成するのであればNuxt.jsのソースコードをnuxt generateコマンドで静的なサイトとして書き出してFirebaseという静的サイトホスティングサービスにホスティングするというのをよく見かけるので今回自分もFirebaseを使うようにしました。
画像制作
favicon.icoや、サイト内で使う画像などは自分で用意するかフリー素材を使うなどしなければならないためIllustratorなどが使えると良いかもしれません。
サイトの使い方などを文字で説明するより画像で説明した方がわかりやすいためそうしたかったのですがIllustratorなどのスキルも乏しかったため一旦諦めることにしました。
サイト運営
このあたりはお好みで
- アクセス解析(Googleアナリティクス)
- 広告(Google AdSense)
- ドメイン管理(ムームードメイン)
作成期間
元々仕事でVue.js/Nuxt.jsを触ったことがあるのと
FirabaseやGoogleアナリティクス/Google Adsense/ムームードメインも使ったことがある状態で作業を始めて
1日平均1.5~2時間かけて約1ヶ月ぐらいでできました。
終わってみての感想
モチベーションが最後まで保てて、形にできたので一安心しました。
Vue.js/Nuxt.jsの知識が深まったことが良かったですが、デザイン力の無さを痛感したのとVue.jsの綺麗な書き方がわからず他人に見せられない状況になっていてコーディングスキルも足りないことを学んだため、自分に今何が足りていないのかがわかったことは良かったと思います。