かならずお読みください→
こんなしくみでうごいています （ピタゴラスイッチ風？）
前回はWeb文字盤の作り方その１として、htmlファイル、CSSファイル、マニフェストファイルについて説明しました。ここまでできると外見が一応できたことになります。デザインなどの目に見える部分はここまででほとんど決まります。 ですから目に見えるものの見え方や見やすさや文字の読みやすさに主な関心をお持ちの方は前回までの話を活かして取り組んでいただければよろしいと思います。
さて今回はこれに続いてアプリを動かす部分の話をしていきたいと思います。具体的には、前回のhtmlの説明で読み込んだ、test.js（拡張子jsはJavaScriptで書かれたファイルを示しています）について話していきます。ここから先は、ちょっと見ただけではよくわからない、あるいは上のイラストのように目にはまるで見えない部分の話が増えてきます。また今回の話を読み進めるには、JavaScriptの知識がないといろいろつらいこともあるかもしれません。ですから必要と思われたらこの話と並行してそちらの学習も進めていただくのがよろしいと思います。
では早速始めたいところですがその前にひとつ話があります。ここでプログラムファイルを先頭から次々と延々と読み進めるのもまあ悪くはないのですが、これではなかなか退屈で長い話になります。そこでここはひとつ、Web文字盤を動かすと体験できる基本的な機能について、つまりJavaScriptの流儀で文字を並べるとどんなことが起きるかの美味しそうなところを味見してみるのも悪くはないと思います。
これらは言うなる文字で作った部品です。ネジやモーターやバッテリやエンジンやタイヤみたいなものです。それぞれの目的に合わせてこれらひとつひとつの部品を何種類も作り、最終的にこれらを組み立てて最終目的物を完成させるという仕組みです。
またプログラミングというと一般にはキーボードに向かった入力作業がイメージされるようですが、実際には目的を実現するための、形のない部品の設計と組み立てにあれこれ知恵を絞る作業と、そして計画通りに動いているかの確認作業が主な仕事になります。 しかしこれだけは言えるのは、部品に欠陥があるといくら頑張っても目標にはたどり着けないということです。100点満点の99点でもだめな時にはだめです。ですからここから先の話は最後の1点をなんとかする話が続きます。100点取るまでやめないといった気持ちの準備がまず大事になります。
そんなの無理だとお考えの皆さん、すこし想像してみてください。通勤に使っている車が100日に一回故障したらどうでしょう。故障で動かなくなったらかなり困りますね。また故障で止まらなくなったらもっと困りますね。この程度ではまるで使い物になりません。 毎日乗っても安全な車でないといやだとか、自分の命は大事にしたいのは誰にとっても当然のことです。ものを作るということは多くの場合この当然のことをあたりまえに行うものです。適当にやればなんとかなることはありません。そこのところをまずよろしくお願いしたいと思います。
さてWeb文字盤の基本的な「機能部品」として以下のようなものが考えられます。
これらをひとつづつ説明していきたいと思います。まず最初は合成音声から始めます。
生活場面に合成音声が出現したのは2010年ころだと思います。その頃から、『ご飯が炊けました』とか『お風呂が沸きました』などにぎやかな家電製品が出現し、自身の先進性を競ってアピールしていました。初期には、ロボット的、コミカルな声をだすところが『合成音声』らしかったのですが、現在では人間かと思うほど自然に読み上げができるほどの品質が実現しています。
さらに2020年ころから、パソコンで言葉を聞いたり話したりできるのが流行りました。また各社のOSに合成音声機能が追加され、音声案内などができるようになりました。 昔ならここで覇権争いが起きたりもしたのですが、近頃ではみなさんおとなですので、共通の規格をつくり技術を広く利用できるようにするといったことが多くなりました。このような理由で個人的自作（手作り）での利用もまんざらできないわけではなくなりました。 このサイトでもこれまで何種類かの合成音声を試してきましたが、今回のWeb文字盤で使用しているWebspeechAPIは、機能や品質さらにコストの面でもかなり優れています。
基本的には、JavaScriptを使ってWebブラウザに読み上げ命令を実行させます。 現在ではほとんどの主要なブラウザがWebspeechAPIに対応しています。
次にWeb文字盤が発話させている例を示します。これはWeb文字盤を起動した直後に「準備できました」と発声している部分です。
//web speech api tts 音声の設定と起動時の音声発声設定 ユーザの操作なしには許可されない場合がこれから増える
var synthes = new SpeechSynthesisUtterance();
synthes.voiceURI = 'Google 日本人';
synthes.volume = 1;
synthes.rate = 0.9;// ややゆっくり 一文字の発話はっきりする
synthes.pitch = 1;
synthes.lang = 'ja-JP';
synthes.text = '準備出来ました';
//synthes.lang = 'en-US';//米語の例
//synthes.text = 'hello, Now, We start the enchant.js';
speechSynthesis.speak(synthes);
2行目 変数synthesを新しい発話として宣言しています。
3行目 synthesの音声を、『Google日本人』に設定している。これが唯一の日本語音声で女声です。これ以外の選択肢はありません。ちなみに米語では男女のほか多種類の音声が使用できます。
4行目 synthesの音量を１に設定 標準的音量です。
5行目 synthesの速度（レート）を0.9に設定 これでややゆっくりで「あ」など1文字の発話での明瞭さが向上するようです。
6行目 synthesの音程（ピッチ）を1に設定しています。設定でいろいろ変えられます。
7行目 synthesの言語を日本語に設定しています。ちなみにこの設定によって数十カ国語を発話できます。
8行目 synthesの言葉を 『準備できました』に設定しています。
11行目 synthesを発声させています。
ちなみに9行目と10行目のコメントアウトを解除すると、アメリカ英語で、hello, Now, We start the enchant.js と発声します。（これは読み上げ部分の開発を最初にエンチャント文字盤で行った名残です。）
アプリ起動後の早い段階で実際に発声させて、設定の確認や使用する機器の音量の確認できます。例えば『音が出ないので故障かな』と思ったらただ音量設定が最低になっていた。こんなよくある勘違いも「準備できました」の発声で防ぐことができます。
その他の発声部分では、8行目のように発話させる言葉を設定し、11行と同じく発声させることになります。（ページトップのイラストの吹き出しのなかを参照してください） 更に１行目のコメント、「ユーザの操作なしには許可されない場合がこれから増える」について説明します。
あるWebサイトを開いたら、いきなり音楽や動画が再生されてビックリ。こんなサイトが昔はよくありました。しかしブラウザ各社は何年か前から、このようなユーザの意図に反した音楽や動画などが自動再生されるのは好ましくない考えるようになりました。そしてこれ以降、自動再生をブロックする機能を徐々に強化しています。Googleは『Chromeの自動再生ポリシー』（参考URL参照）において自社のブラウザ、Chromeの設計方針を説明しています。その他のブラウザ各社も同様の方針を表明しています。 この結果、ウェブサイトの閲覧で不意に音が出て驚くことは少なくなりました。 しかしブラウザはウェブアプリが動くベースですので、ウェブアプリを作る際にはブラウザの動向への配慮が必要です。
Web文字盤では、クリック（タップ）に続いて音声再生をしていますが、一般的にこのクリック（タップ）操作がユーザの意図であると判断されているようです。
意図による操作から音の再生までの時間がどれだけならユーザの意図と判断するかは各社によって考えが異なるようです。しかしWeb文字盤の通常使用ではいまのところ問題は起きていないようです。 ただ、上記で説明した起動後の「準備できました」の場合、起動動作から発声までの時間がやや長いためか、iOS safari では発声されないことが時々あるようです。ここから想像すると、iOS safariは他よりやや厳しい自動再生ポリシーを持っているのかもしれません。
話がやや本筋からそれました。WebspeechAPIの話に戻りましょう。
どのくらい長く話せるかを試すために、青空文庫から長い文字列を探してきて読ませてみました。その結果、数百文字の日本語文字列を読み上げできました。どうやら文字数の上限もこのあたりにあるようです。これくらいの文字量を読み上げできると、もしかしたら音読や読み聞かせアプリなどへの応用が期待できるかもしれません。 このように、プログラムを動かしながらできることとできないことの境目を把握しながらその活用方法を考えていく作業は、目の前の仕事を進める上でも、次のステージでさらに用途を広げて新しい応用分野を見つけていく上でも大切な取り組みです。
最近なぜかコスパとかタイパとか言って、このようなトライアルを無駄と考える人が多いようです。しかし多くの発見発明はこんな発掘作業でよく見つかるものです。また「知っている人」と「できる人」の違いはここにあります。インターネットのおかげで物知りは多くなりましたが、それを実行できるかとかさらに発展できるかとかは別のようです。 いつも出来ること同じことばかりやっていて、冒険心や探究心や遊び心が足りないと、変化に対応できなくなり徐々に追い詰められしまいには身動きができなくなってしまうかもしれません。
更に調べると、日本語以外にもたくさんの言語を読み上げできます。 英語は７種類（豪州、カナダ、インド、ニュージーランド、南アフリカ、英国、米国）、 スペイン語は20種類（本国と中南米各国）、 ポルトガル語は2種類（本国とブラジル）、 中国語は4種類（大陸南北と台湾と香港）、 日本語、 ラテン語（！）、 ヒンディー語（！！） などです。ここでスペイン語が20種類というと、つまりスペイン本国と中南米の国々が同じ言葉を話しているわけではないとわわります。目からウロコですね。 それにこれらを使い分けがパソコンでできてしまうのも驚きです。生身の人間ではとてもかないません。 これだけたくさんお言葉を自由に話せたらいろいろできるでしょう。例えばいろいろな言葉でコミュニケーションエイドを作ることができるのではないでしょうか？ 外国語教材のアプリのかなり強力なものも作れるかもしれません。翻訳アプリと連携させれば、通訳アプリも作れるかもしれません。
Web文字盤の作り方の第二回は、Web文字盤での合成音声の動かし方について説明しました。いかがだったでしょうか。
Web文字盤の中で何やっているのかを知りたい人や同じ方法を使って別のことをしたいと考えている人のことを考えて、役に立つように主な部分を取り出して説明しましたので、もっと本格的に勉強したい人には物足りなかったかもしれません。どうもすみません。そのような方々は、参考URLで紹介しているところなどに挑戦してください。皆さんの目的に合わせて適宜勉強をすすめていただければよろしいかと思います。
しかしここで使用したWebspeechAPIは、たくさんの言葉を発話できます。 これを使いこなせればかなりの仕事ができるようになるでしょう。 とくに多種類の外国語に関係している人にとってなかなか魅力のある機能だと思います。このような人たちにとって新しい可能性を開く緒になるかもしれません。
世の中では、AIが普及すると仕事がなくなると騒いでいる人が随分いるようです。 しかし今回ご紹介したWebspeechAPIでも自分で動かしてみると、消える仕事も、新しい仕事もいろいろと想像できます。
このようなものに反発したり、生身の素手で対抗しようとするより、将棋の世界の皆さんのように自分で使いこなして自分の能力をさらに引き出すためにこれらを利用するのが、正しい使いかた、技術との付き合い方ではないかと思います。 伝統工芸の方面でも、国宝建築の修復方面でも、今どきの道具や方法も使っています。
人間の能力をさらに引き出すために、さらにいい仕事をするために道具はそれに適したいものを選ぶのがいいでしょう。これだけはむかしから全然変わっていません。
次回はタップで読み上げさせる方法について説明します どうぞお楽しみに
2024/10/04 公開
研究企画課リハ工学科にもどる
←もくじはこちらです