かならずお読みください→
言われなくても見りゃわかるって
さてウェブアプリのつくり方の第5回です。 前回はJavaScriptを使ってマウスクリックでしろいいぬが吠えたり動いたりしました。いかがだったでしょうか。
ご覧になったようにこれは簡単なアニメーションです。アニメーションは年齢の低い人（時にあまり低くない人も含む）の興味や関心に強く作用する効果があることはすでに広く知られています。
もしアニメーションを自分で思うように自由に作れるとしたら、 無関心な誰かさんの気持ちを引きつけたり、 機嫌の良くない誰かさんをニコニコさせたり、 やる気のない誰かさんのやる気を引き出したり、 そんなことができるかもしれません。
またアニメが持っている見る人への影響に興味があって、 どんなアニメにどんな効果があるかを研究してみたい、 心理や学習などの研究にアニメを利用したいと考える人もいるでしょう。 しかし、市販の既製アニメだけでは研究結果に十分な検討や考察を加えるのはおそらく容易ではないだろうと想像できます。
おそらく、研究の目的に相応しいアニメを用意するところから始めないと、
『XXアニメを視聴した直後は、OOが急激に上昇しその後沈静化する。一方XOアニメでは...これらの比較から...』
といった話にまでたどり着くのはかなり難しいだろうと思います。
歌舞音曲に限らず、何かを自分でできると相手へのアピール力はかなり強力になります。夏のホタルや秋のムシと同じことです。
いまでは、パソコンもタブレットも普及がすすみ、身の回りにたくさんあります。これらを利用できるなら従来の手作業よりずっと簡単に目的にかなったアニメを作ることができるでしょう。
手作りを成功させるポイントは今も昔も道具をつかいこなすことです。 道具を使いこなせないようではまず見込みはありません。 昔は刃物やバーナーやハンマーやキリのような道具もよく使いました。 うまく使うため練習も手入れもしました。ときには失敗や怪我もしました。今ではパソコンもなかなか使える道具になっています。
そして少なくともパソコンは怪我がとてもすくないという長所があります。
また、スクリプトやプログラムが苦手でも、別のアプローチがあります。 例えば、前回紹介したスクリプトには手を入れずにそのまま使用して、いぬの画像ファイルと鳴き声の音声ファイルを 同じ名前の別の画像や音声のファイルに置き換えれば、猫が泣いたり騒いだり、カラスが喧嘩したりなど、一人で何十種類もつくるのもそれほど難しいはなしではありません。
このような話題ではとかくプログラミングに目が行きがちですが、パソコンの理解がいくらかあるとこのような工夫もできます。これで画像ファイルや音声ファイルを自由に作れ扱って、アニメの量産が可能になります。ただこのやり方ではある意味でワンパターンになりやすくなります。
またさらに工夫をすれば、だれかの写真と声を使ってアニメーションをつくることもできます。これでモニターの中でそのだれかが動き話します。
多くの人に喜こばれるアニメを作るにはもちろん才能が必要です。 しかしよく知っている特定のあるひとが喜ぶアニメを作るには、そのひとに合わせてそのひとが喜ぶように作ればいいわけですから、まんざら不可能ではありません。似たようなことは多くのお父さんお母さんが昔からやっています。
このような取り組みではは手作りの強みやメリットが発揮されやすくなります。このように手作りだからできることはいろいろな分野でみつかります。このように手作りでできることとできないことをよく考えるのが大切です。
さて今回は、JavaScriptをつかって、 前回、吠えたりしっぽをふったりしていた犬に人間の言葉をしゃべらせる方法について説明していきたいと思います。今回もよろしくおねがいします。
さてこれが前回の作品です。画面上でクリックすると犬が吠えました。
これを表示するhtmlファイルは次のようなものでした。
<!DOCTYPE html> <html> <head> </head> <body>こんにちは
</body> </html>
今回これに手を加えて、以下のようにします。
<!DOCTYPE html> <html> <head> </head> <body>吾輩は犬である
変更前から21-23行を削除しました。ここはいぬのなきごえを出していた部分です。 そして、変更後の22-45行を追加しました。この部分で日本語を喋っています。
説明はたったこれだけです。少なすぎますか？ではもう少し説明しましょう。
ここで紹介しているのは、ブラウザに搭載されている、Web Speech APIを利用して発話しています。お使いのブラウザによっては、これに未対応のものがあります。
22－26行は、未対応のブラウザを検出して、警告文を表示します
28行では、発話機能の宣言をしています
29行では、音量
30行では、レート
31行では、ピッチ
32行では、発話する言葉
33行では、使用する言語
34-36行では、発話時刻をコンソールに記録します
37行では、発話しています
さらに50行では、表示文字を変更しています。
以上が今回変更した部分です。これ以外の部分は前回説明しましたのでそちらを参照してください。
さてこのような変更すると、このページのトップ画像のように表示されます。 また実際に動かしてみたい方は、 こちらをクリックすると動くサンプルを試すことができます。
いままで黙っていましたが、じつはこのしろいいぬは英語もしゃべることができるのです。 ここではその方法について簡単に説明したいと思います。
まず33行の、'ja-JP'を'en-US'に変更します。
また32行の、'吾輩は犬である'を'that this nation, under God, shall have a new birth of freedom - and that government of the people, by the people, for the people, shall not perish from the earth.'に変更します。
これでかの有名な、アイブラハムリンカーンの演説の一節をしゃべるようになります。このしろいいぬが。（アメリカのみなさん。ご無礼お許しください）
こちらもまたた実際に動かしてみたい方は、 こちらをクリックすると動くサンプルを試すことができます。
いままで黙っていましたが、じつはこのしろいいぬはフランス語もしゃべることができるのです。 ここではその方法について簡単に説明したいと思います。
まず33行の、'ja-JP'を'fr-FR'に変更します。
また32行の、'吾輩は犬である'を'On ne voit bien qu'avec le coeur. L'essentiel est invisible pour les yeux'に変更します。
これでかの有名な、星の王子さまの一節、『人は心でのみはっきりと見ることができる。大切なものは目には見えない』をしゃべるようになります。またこのしろいいぬが。（原作ではこれはキツネの台詞ですから、まあちょうどいいような気もします）
こちらもまたた実際に動かしてみたい方は、 こちらをクリックすると動くサンプルを試すことができます。（ご注意：firefoxではアメリカ訛？のフランス語が聞こえてきます。Chrome かEdgeならきれいに発音します）
コミュニケーションエイドを作る際の難関のひとつが『読み上げ』です。
無料のコミュニケーションエイドを作ろうとするときに、有料の読み上げソフトを使用するわけにはいきません。かつてエンチャント文字盤で使わせていただいたAquesTalkもこの時期には有料化されていましたので、しかたなく断念しました。
長いことあちこち調べ回って見つけたのが、今回ご紹介した、Web Speech APIです。これは各社のブラウザに組み込まれていますので、すでに世界中の人が持っていて将来もおいそれとは消えてなくなることはなさそうです。開発したWeb文字盤は日本語しか使っていませんが今回ご紹介したように、多くの言葉が使用できます。
このページの末尾の参考URLのサイトによると、 62カ国語（日本語１、英語７（米、英、オーストラリア、カナダ、インド、ニュージランド、南アフリカ）、スペイン語２０、中国語４など）で使用可能なようです。これをみてもかなりの資金と人材を注ぎ込んで開発されただろうと推測できます。しかもこれが、無料でだれでも使用できるのですから驚きです。
こんな素敵な話は多くの人たちに知ってほしいものです。とくにコミュニケーションに困難を持つひとがたくさんいるけれど、自国語のコミュニケーションエイドがまだ十分でないところも世界にはあるでしょう。熱意はあっても経済的に困っているひともいるでしょう。そんな人達に『日本じゃこんなことやって、タダで配っているぞ』と知らせたい。こんな気持ちが、Web文字盤開発の目標に加わったのは、Web Speech APIのおかげです。
本当にWeb Speech APIを作ったひとたち、作ると決めたひとたちは偉いものだと思います。
莫大なお金がかかったと思いますが、それが何倍にもなって世界に戻って来るのですから。
2023/10/26 公開
研究企画課リハ工学科にもどる
←もくじはこちらです