ブラウザでテキスト読み上げるコンポーネント: react-voice-components
テキスト読み上げをしてくれるReactコンポーネントの存在を知りました。grvcoelho/react-voice-components
ブラウザで音声を使って何かしたいと思っていたので、試しに触ってみて、GitHub Pageにあげてみました。 以下ちょっと苦労したので、メモです。
Reactを動かせる環境の作成
半年前くらいに作ったコンパイルの環境がかなり古くなっていたので、facebookincubator/create-react-appで作り直しました。インストールに少々時間がかかりましたが、とても便利ですね。
npmで入れたreact-voice-componentsが動かない？
npmで入れたreact-voice-componentsだと、create-react-appで作った環境との相性なのか、コンパイルされずブラウザエラーが発生して動きませんでした。webpackの設定ファイルを上書けばいいようですが、とりあえず、git submoduleでリポジトリをコンパイル対象のディレクトリにクローンして使用することにしました。せっかくなので、本当に問題があるのなら、いずれ修正を送ってみようかと思います。
書いたコードです；
ushumpei/play-with-react-voice-components
GitHubページを公開する
GitHubページの公開方法は3つあるようで、master、gh-pagesブランチのindex.htmlからか、masterの/docsを使うか、だそうです。
今回はdocsを作成して公開しました。静的リソース(css、js)の指定が絶対パスだったため、読み込まれなくて困りました。
