文章を音読させる方法
2019年11月20日
この記事は2019年11月20日 の「記事を読み上げて貰っちゃおう♪」のリライト記事です。元記事もこの記事同様にリライト済みです。この記事はリライトした記事の再投稿です。
テキストを読み上げてくれるソフトって色々あるんだけど、いざって時に結局使わなかったりしてあまり役に立ってなかったりすることも多いと思います。
スマホやタブレットであれば簡単に使える読み上げアプリなどもありますから、スマホではそういったアプリを利用するのが手っ取り早いです。まずはパソコンでの読み上げからやってみましょう。
パソコンで読み上げ
ブログ主はパソコン使いが主なので主にブラウザの記事を読み上げさせることをしています。読み上げ(音読)させると最初は聞き取りにくいかもしれませんが、慣れるとこれもちゃんと頭に入ってくる言葉に認識できるようになります。
ってことは、人の脳の対応力が凄いってことなんですね。
ブログ主は Windows 使いなので、他のOSをお使いの方は参考にする程度でご利用するOSで応用してください。応用するといってもブラウザにクロームを使っていらっしゃればその方法は多分同じだと思います。
答えを先にいうと Google 翻訳 を使うのです。
グーグルで色々な言語を翻訳してくれるって知ってますよね。
知らなかったかな、知らなくても問題はないですけど、結構便利な機能なので利用なさってみてください。
Google 翻訳 は、ぜひブラウザのお気に入りに入れておいてくださいね。
◇◇◇◇◇
Google 翻訳の使い方
では、実際の使い方を見て行きましょう。
今回は Hatena Blog に花子かーさん(さん)の「生き物と暮らす日々」という素敵な記事がありましたので活用させていただきました。
読み上げさせたいテキストはご自分の任意のテキストを選んでくださって大丈夫です。文章を選んでドラッグして反転させ、反転しているところにマウスを持って行き右クリックでコピーを選択。
文章を選択したら[Ctrl]+[C]でコピーもOKです。
青空文庫の小説や、小説になろうサイトの小説なども良いと思います。一度の翻訳でで利用できるテキストサイズに制限がありますので、読み上げさせたら更新を繰り返して対処ください。
コピーする文章に画像が入っててもかまいません。後で画像部分は画像IDとなっているのでGoogle翻訳にテキストをペースト後に削除します。
貼り付けは左ペインの枠内をマウスで右クリックして[貼り付け]を選択。あるいは右ペインを繰りくしておいてから[Ctrl]+[V]でもOKです。
記事をGoogle翻訳の左ペインに貼り付けた状態です。デフォルトで右ペインは英語文章に瞬時に翻訳されています。
余談ですが、翻訳遊びとしては英文に再度日本語に、英文翻訳の日本語を再度英文にを繰り返してどんな文章に化けるかなんてのも、人によっては楽しいと思います。
コピーした画像は画像IDの文字列になっていますので、探して削除しておけば読み上げ音声がスムーズに聞こえます。気にしなければそのままでも良いです。
※画像がID文字列となっている状態
それでは、翻訳ページの最下段に移動してください。
はい、最下段ですね。
最下段に赤丸の中にスピーカーアイコンがありますので、スピーカーアイコンをクリックすると読み上げが始まります。もう一度クリックするとゆっくりと読み上げます。※赤丸はブログ主が付けたものです。
英文を読み上げてもらうには右ペインのスピーカーアイコンをクリックします。ゆっくり読み上げるには同じく二度クリックです。
さあ、これでパソコンに目を向けることなくブログの記事が読み上げられるので、その間なにか作業をすることが出来ますし、モニタから目を離して目を休ませることも可能です。
この翻訳はネイティブな Google 様ですから、英文の言い回しなどを勉強するにも使えます。
以上簡単にブログ記事などのテキストを Google 翻訳 で、読み上げてもらう方法でした。参考にしてください。
音読ソフトを使う方法
ちなみに音読ソフトでやりたいって方は、フリーのソフトがいろいろあるようですから検索にて利用なさってください。参考までに一つ Balabolka を紹介しますがブログ主は利用していません。ご自分の裁量権にてご利用ください。
自分の記事を読み上げに対応させる
はてなブログを音読するボタンというCSSが公開されていますので、ご自身の記事に音読ボタンを設置なっさては如何でしょう。
/*
* はてなブログに「音読する」ボタンを追加する
** 使い方
- 以下をコピーして デザイン編集 → カスタマイズ → フッタHTML に貼り付け
<script async defer src="https://hitode909.github.io/hatenablog-unofficial-modules/speech.js"></script>
** 注意
- Web Speech API非対応のブラウザでは音読できません*/
(function () {
if (!window.speechSynthesis) return;
document.querySelectorAll('article').forEach(function (article) {
var button = document.createElement('button');
button.type = 'button';
button.className = 'btn';
button.textContent = '音読する';
button.style = 'float: right';
article.querySelector('header').appendChild(button);
button.addEventListener('click', function () {
var synth = window.speechSynthesis;
var body = article.querySelector('.entry-content').textContent;
var utter = new SpeechSynthesisUtterance(body);
synth.speak(utter);
});
});
})();
設置する方法は難しくありませんが、はてなブログのデザインから、スパナマークの「カスタマイズ」で引用部分の青い字のCSSを「{}デザインCSS」に貼り付け、赤い字の「<script>」タグ部分を各ページに貼り付けた記事作成用雛型を作っておくと良いでしょう。
CSS製作者の hitode909 さんにベリー・サンクスです。
スマホでの読み上げ対応
Android スマホに関しては、ほとんどの機種で予め Google の読み上げアプリがインストールされているので有効となっているはずですから、へのへのもへじ凄いの記事なら「音読する」ボタンで読み上げてくれます。*1
でも、「音読する」ボタンが付いているなんてアクセシビリティの高い記事は*2、そうだねへのへのもへじ流石というようなブログにしか設置されてませんのです。自画自賛乙
ああ、めんどくせえなあ、読み上げてくれたらほかのことをしながら記事も読めるのに、ってかた向けにはアプリを使う方法があります。
Talk FREEを使うと便利です。
このアプリは任意でインストールしなければインストールされていませんので、インストールして使ってください。
難しいことはありません、インストールするだけです。インストール出来たらTalk FRREを使ってみましょう。
- まずは、読み上げさせたい記事やページを表示させます。
- そして共有ボタンを押してください。記号で『:』な感じで点が三のアイコンがブラウザの右上端にあると思います。
- あるいは共有のマークをクリックし、Talk FRREを選択すれば自動で読み上げしてくれます。
- iPhoneではアプリは違うかもしれませんが、iPhoneでも同様な方法で利用できると思います。あるいはシステムから可能かもです。お調べください。
さあ、これでながら族の出来上がりです。ブログ記事の読み上げを聞きあげながら、なにか作業をすることが出来るようになりましたね。
おわりに
文字数が多いと読む気が失せたり、多数行空け行間の多い記事などは読むためにスクロールするのも面倒なってのもありますよね。
文字数が多いからとか、多数行空けの行間がうざいとかで、購読を止めるかと思う前に Google 翻訳を試してみてください。それから購読を止める止めないを検討してもいいのではないでしょうか。
最後になりましたが 花子かーさん(さん)にお断りのなくの再度の言及失礼しました。あしからずご容認くださいませ。
◇◇◇◇◇
CM