かならずお読みください→
なでてあげるとよろこびます
前回はJavaScriptで日本語を自由に発話させる方法を説明しました。いかがだったでしょうか。私も試作の段階でプログラムを使って色々試して楽しんでみました。これはそのときの話です。
日本語版Chromeでは日本語や英語はすぐに発話できました。しかし続いてフランス語でボンジュール（Bonjour）を試してみるとどうもあの鼻に抜ける声がでません。例えるならば英語訛のフランス語といった感じです。設定を見直し何度も試してみましたが、なかなかこれはうまくいきませんでした。その日はとうとう諦めたのですが、性懲りもなく翌日にまたやってみました。すると今度は、きちんとフランス風の発音で『ボンジュール』としゃべってくれました。できたー。でもこれはどうしたのだろう？どうして次の日は発音が良くなったの？
ここからはあくまでも私の想像です。日本語版Chromeには、はじめから日本語と英語の発音データが含まれているようですが、フランス語データは入っていなかったようです。 このため日本語や英語ははじめから正常に発音できましたが、データのないフランス語は アルファベットの組み合わせをとりあえず英語のデータを使って英語風に発音したようです。これが『英語訛りのボンジュール』になったようです。（英語にも同じ意味のBonjourという単語があるようです）
ところが、Merci beaucoup（どうもありがとう）など英語らしくない文字つづりを使用すると『これはどうも英語ではないみたい』とChromeくんにもわかるのでしょう。 そこで早速、自動的にインターネットにつないでフランス語データを取り寄せてきてインストールして、次の日に素知らぬ顔（？）で発音したのではないかと思います。
このような、利用頻度の少ないデータは標準で添付せず、後で必要に応じて追加する仕組みは合理的ではあります。また最初はできないことがしばらくすると出来るようになるところは一ユーザとして興味をひかれます。真相は明らかではありませんが、どこかの誰かが何を考えていたのか、どんな工夫をしているのかを想像しながら、このような技術を使ってみるのも楽しいやり方だと思います。
私も昔は「使い方だけわかればそれでいい」と考えたこともありましたが、とかくお得なはなしには落とし穴もつきもので、行き詰まったときに苦労も経験しました。 やはり『損しないためにはお得な話にのらないようにする』のが一番なようです。以後このようなやり方をお勧めしています。
話を外国のことばにもどします。 私は技術者です。日本語のほかは学生時代に英語とドイツ語を少し勉強しました。しかしどこの国の技術者も大体英語を話しますので仕事上のコミュニケーションは英語でなんとかなります。（ただしインド英語は苦戦）また仕事や技術の話なら私の語学力不足は相手の聞き取り力でかなりカバーしてもらえます。このように英語が母語でない人同士の仕事上（！）の英語会話は経験上なんとかなることが多いようです。それにひきかえ（以下略）
これに対して文系の人たちは言語に対して違った見方や感じ方をするのでしょうか。現在では文系のみなさんも普通に自分のパソコンをお使いだとと思いますが、そこからいろいろな国の言葉が自由に出せるとしたら、理系の人とは違った興味深い利用方法や応用事例を考えつくかもしれません。
今ではまだプログラムに取り組むひとは文系では少ないかもしれませんが、パソコンが普及したようにこれからは増えていくのは間違いないと思います。プログラム自体がなかなかおもしろいですし、何よりもこのような分野は年長者が少ないので比較的若い人がこれまでにない新規の仕事をして、従来にない他の人にはない個性的な成果を上げる可能性が高いところも魅力です。誰かが最初に何かおもしろいことをやれば、次々と広がっていくと思います。
思い起こせば、40年前の理系や技術者の世界ではまさにそうでした。職場の年長者は『へーすごいね』と予算も時間もくれて自由にさせてくれました。やらねばならないのに、できるひとがほんの少ししかいなかったのですからしかたがありません。職場も若者を大事にしてくれました。もちろん仕事はハードでしたがそんな時代でした。
この文章をお読みの方には、文系の人も少なくないでしょうからこんなことを考えて、前回、発話機能を一番に紹介することにしました。
今回はこれに引き続き、 パソコンやスマホで『何か操作をしたら何かが起きる仕組み』について説明したいと思います。 コンピュータに限らずの機械や道具などでもこの『何か操作をしたら何かが起きる仕組み』 をよく見かけます。それどころかこのような仕組みの塊（かたまり）であることもよくあります。
例えば、クレーンゲームでは、前後と左右の2方向の移動を2種類のボタン（あるいはジョイスティック）を使ってクレーンを動かします。
自動車の運転では、アクセル、ブレーキ、ハンドルとその他のスイッチを使うことで、自動車は走り、止まり、曲がります。ドライバーは何をどうしたらどうなるかを十分理解した上で運転し目的地に向かって行くわけです。
スマホでは、主に画面に触るなどいくつかの動作で操作しますし、パソコンでは、キーボードとマウスを使って様々なことをするわけです。
これらの例のように、『何か操作をしたら何かが起きる仕組み』ははっきり決まっています。逆に、その決まっているルールどおりに動作がうまく出来ないと、その機器や道具をうまく使えなくなります。 ある事情で特定の動作がうまく出来ない場合にはこの仕組みを変更することが考えられます。例えば障害をお持ちの方々のための自動車の改造などはすでに皆さんよくご存知のことと思います。またパソコン操作に補助具を使用したり、特殊な部品やソフトを利用することも広く行われています。
さらにこれらの道具を使いこなすためには、まず目的を決め、次に手順を考え、その手順にそって次から次へと操作を実行し必要な機能を次々に動作させて、目的を実現していきます。実際にこれをやるためには、これらの仕組みを覚えて理解し、さらにいくらかの練習も必要になることもあります。つまりある程度の知識や技量も必要になります。
もしうまくいかない場合はこれらのどこか、つまり目的、手順、操作のどこかでつまづいているのかもしれません。そんな場合にはうまくいかないのはどこなのか、なぜなのかを考えることがその問題を解決する基本となります。
スマホやパソコンは一般消費者向けの商品ですから、より多くの人が使いやすいように設計されていますが、これはすべてのひとが使えるという意味ではありません。なかには使いにくいとか使えないこともあります。
例えば、ボタンを押すのに力が足りないとか、ボタンが小さいとか、よく見えないとか、手が届かないなどです。高齢の方や不自由をもつ方はこのような使いにくさを感じる場合が見受けられます。
このような場合、実物のボタンでは種類や位置などを変更すると、アプリのソフト的ボタンでは、デザインや配置を変更すると操作できるようなることがあります。 これは、『何か操作をしたら何かが起きる仕組み』の一部に変更を加えて、標準とはちょっと違う人の使いやすさを改善する例です。
これと同様に、『何か操作をしたら何かが起きる仕組み』自体に変更を加えて改善する方法もあります。例えば、タッチパッドをタップする代わりに、マイクに向かって声をだしたら同じことがおきるようにプログラムを変更したらうまく行くかもしれません。
ボタンという部品を変更する改善策と、プログラムというシステムを変更する改善策とは、ずいぶん異なるアプローチのように見えますが、どちらも基本は、 『何か操作をしたら何かが起きる仕組み』 に変更を加えて、ユーザの『苦手』を回避して『不便』を少なくしようとしているところは同じです。 またこれは福祉機器や補助具を使用して『できない』を『できる』に変えるのと同じ発想です。
古くから杖や歯ブラシや孫の手やペンを切ったり曲げたり伸ばしたりして『できない』を『できる』に試みてきました。パソコンやスマホやタブレットをなんとかしたい場合は、切ったり曲げたりではなくその道具や目的にふさわしい手段をつかうのがよろしいでしょう。その方法の一つがプログラミングです。
理屈はこんなところにして話を元に戻しましょう
パソコンやスマホには『何か操作をしたら何かが起きる仕組み』がたくさん詰まっています。マウスのクリックや画面のタップで何かが起きるのが基本のパターンです。 まず基本的な例を見てみましょう。 これは画面をタップすると、しろいいぬが吠えるアプリです。
クリックやタップをするとしろいいぬが吠えます。
このアプリはwebアプリですので、最初はhtmlファイルから始まります。
ここから先は、一般の人には馴染みのない言葉がたくさん出てきます。 例えば、上の文で、「webアプリ」や「html」などはそうかもしれません。知っている人は知っているけど知らない人はしりません。これはあたり前ですね。知らない人は、その都度検索してください。検索するとさらに知らない言葉が次々出てきます。それらも次々と検索してください。この作業を始めると知らない言葉のオンパレードになりますが、がまん強くこれを繰り返していると徐々に知識が蓄積して知らないことばが減ってきます。この用語（ボキャブラリ）の峠を超えないと話の内容に入っていけないのは、語学を始め何の勉強でもおなじですのでよろしく。
次にhtmlの基本的な例を示します。このhtmlでは アプリを動かすプログラムファイル（ここでは、"./js/sketch.js"）を読み込み、 中央にしろいいぬがしっぽを振っているgifアニメ画像"dogde.gif"を表示しています。
<!DOCTYPE html>
<html lang="ja">
<head>
WebToy DOG
</head>
<body>
</body>
</html>
説明
5行 フォルダjsのsketch.jsを読み込みます
6-10行 .class1の全体を画面中央に表示する
13-15行 画像ファイルdogde.gifを"image_dog"というidをつけて、class1という classの中に表示する
16-17行 背景が白のキャンバスを指定します。
このアプリで実際に使用しているhtmlは、いいろいろな機能を盛り込んだ関係で、この5-6倍の大きさがりますが、基本的な流れを理解するにはこれで十分でしょう。
上のhtmlが動作すると続いて、"./js/sketch.js"が動き始めます。 下はこの一部です。
function handleMouseDown(e){
console.log("MouseDown");//コンソールに"MouseDown"と表示する
var elemdog = document.getElementById("image_dog");
elemdog.src = "./dogf.gif";
audioElem = new Audio();
audioElem.src = "./dog2.mp3";
audioElem.play();
}
1行目 マウスボタンを押したとき2-8行を実行します。スマホ、タブレットではタップしたとき同じことが起きます。
2行目 コンソールに"MouseDown"と表示されます。1行目がきちんと動いていることがわかります。（動いているはずなのにうまくいかないなど困ったときに動きを確認する工夫です）
3行目 "image_dog"というidをもつドキュメントを示す変数、elemdogを定義しています
4行目 elemdogのファイルをdogf.gifに変更しています。ここで犬の絵が口を開けてしっぽを上げた絵に切り替わります。
5行目 新しい音として、audioElemが定義され
6行目 audioElemのファイルをdog2.mp3にしています。
7行目 audioElemを再生しています。ここで鳴き声が出ます
以上より、マウスを押下すると、口を閉じた犬のイラストが口を開いてしっぽを上げた犬のイラストに切り替わり、鳴き声が再生されます。 これとよく似た次の例では、マウスを離したときの動作が記述されています。
function handleMouseUp(){
console.log("MouseUp");
var elemdog = document.getElementById("image_dog");
elemdog.src = "./dogde.gif";
}
1行目 マウスボタンを離したら2-4行を実行します。スマホ、タブレットではタップ終了したとき同じことが起きます。
2行目 コンソールに"MouseUp"と表示されます。これで1行目がきちんと動いていることがわかります。
3行目 "image_dog"というidをもつドキュメントを示す変数、elemdogを定義しています
4行目 elemdogのファイルをdogde.gifに変更しています。ここで犬の絵が口を閉じしっぽを下げた絵に切り替わります。
以上より、マウスを離すと、口を開けた犬のイラストが口を閉じた犬のイラストに切り替わります。
ここでマウスをカチカチカチとクリックすると犬がワンワンワンとなきます。これは、上の8行と下の5行が交互に3回繰り返されたのです。プログラムは説明を文字で追いかけると手間暇かかりますが、動かすとかなり高速で動きますので、アニメーションのような表現ができます。
しろいいぬ で紹介しているプログラムでは上で紹介した他に、一定回数吠えると舌を出すなどの追加の『おあそび』も加えて約10倍の量の仕事をさせていますが、みたところもたつく様子もありませんし、まだまだ余力は十分あるようです。
このようにプログラムはパターンの決まった高速の長時間労働が得意です。これはロボットが繰り返しの精密力仕事が得意なのとよく似ています。ロボットによって過酷な肉体労働から開放され、パソコンによって手作業による単純事務労働から開放され、プログラムにより瞬間の判断が必要な長時間監視労働から開放され、今に至っています。
この結果、どうやればできるかなどやり方がわかっている仕事は次々と機械でもできるようにして人手不足をなくし、まだよくわからないことを調べる仕事やこれまで不可能とされた仕事を実行する仕組みをつくる仕事など、難しい仕事（どうやればいいかまだわからないことを自分のアタマで考えていく仕事）に人間が取り組みことになってきました。皆さんいかがですか？
この例では、単純なマウスを押す動作と離す動作をきっかけにして、それぞれ『何かをしたら何かがおきる』の働きを作りました。 その結果として、マウスをカチカチすると犬がわんわんほえる仕組み（おもちゃ）ができました。
今回上で紹介した、 function handleMouseDown(e){} や function handleMouseUp(e){} は、マウスのクリック動作を感知するイベントリスナ（出来事を聞きつける、Event Listener）です。イベントリスナにはこの他にも多くの種類があります。これらを使って、ユーザが何かをしていることを検知して、プログラムで何かがおきるようにすると、 『何かをしたら何かがおきる』仕組みを作り出すことができます。 市販の『何かをしたら何かがおきる』仕組みではうまくできない、難しすぎる、満足できない。そんな場合にはこんなやり方もできないわけではありません。
このようなやり方でアプリをつくり、それによって利用する人にストーリイを提供しようとしています。ここで言うストーリイとは、参加可能な擬似的な体験や経験の機会と考えてください。 文字や言葉を並べて物語を作るように、プログラムでつくります。ただ使っている文字や言葉がやや変わっているところが特徴です。これについては後で改めて説明します。
とかくアプリの話題では、プログラムを作るところに皆さんの注目が集まりがちです。しかしパソコンは文房具のようなもの、プログラムはことばのようなもので、これらは、道具や手段以上のものではありません。立派な筆記具と立派な日本語が使えるだけでは、よい物語ができるわけではないのと同じです。肝心なのは、どのような目的で、これで何を実現するか？その構想やプラン、企画のほうが大きな意味を持つと思います。
さてイベントリスナを使いユーザの様々な動作を取り入れ、その動作に応じてなにか出来事を起こす事例を見てみましょう。
次のサンプル、 しろいいぬ２ はマウスの動きを感知するhandleMouseMove(e){}を使っています。
なお、パソコンの場合は画面が表示されたあと一度画面をクリックすれば音が出ます。
function handleMouseMove(e){
var clientX, clientY;
if(e.clientX){
clientX = e.clientX; clientY = e.clientY;
console.log("clientX Y =", clientX, clientY);
C_WIDTH2 = window.innerWidth;
}else if(e.changedTouches && e.changedTouches.length > 0){
var touch = e.changedTouches[e.changedTouches.length - 1];
clientX = touch.clientX; clientY = touch.clientY;
}else{
return;
}
// しっぽを触った場合の処理
if(clientX > (C_WIDTH2/2-512/2)+460 && clientX <(C_WIDTH2/2-512/2)+510 && clientY >220 && clientY < 260){
console.log("clientX hit", clientX, clientY);
var elemdog = document.getElementById("image_dog");
elemdog.src = "./dogf.gif";
audioElem = new Audio();
audioElem.src = "./dog2.mp3";
audioElem.play();
setTimeout(function(){
console.log("いやがっています")
elemdog.src = "./dogd2.gif";
},1000);
}
//あたまや背中に触ったときの処理
if((clientX > (C_WIDTH2/2-512/2)+260 && clientX <(C_WIDTH2/2-512/2)+263 && clientY >150 && clientY < 210) ||
(clientX > (C_WIDTH2/2-512/2)+130 && clientX <(C_WIDTH2/2-512/2)+133 && clientY >80 && clientY < 100)){
console.log("clientX back", clientX, clientY);
var elemdog = document.getElementById("image_dog");
elemdog.src = "./dogde.gif";
audioElem = new Audio();
audioElem.src = "./dog4.mp3";
audioElem.play();
setTimeout(function(){
console.log("なでてもらってよろこんでいます")
elemdog.src = "./dogd2.gif";
},1000);
}
1-12行 マウスを動かすと（スマホの画面に触ると）1行目の関数(function)handleMouseMove(e){}が動きはじめ、12行までを実行しますます。
2行目 座標値を入れる変数clientX, clientYを定義します
3行目で、e.clientX （x座標値）が検出されると、4行目で変数clientXと clientYに代入されます。
5行目では、この座標値を求める動作と求めた数値を確認のため、コンソールに表示します。
6行目で、その時のwindowの横幅をC_WIDTH2に代入します。
7-9行目は、ドラッグやスワイプ動作した場合に座標値を得るために作りましたが、実際に試運転をするとこの部分は不要であることがわかりました。（それでも消去しないのは、いつか必要になったときのためにとっておこうという、ありがちな動機によるものです）
11行目、上の条件が成立しなかった場合に何もしないで抜け出します。
ここまでで得られたマウス（タップ）座標値をこれから利用します。
13-27行でしっぽにさわった場合の動作を記してします。
14行目の条件式でしっぽをさわっていることを判定します。（別の絵ならこの式も変わります）（この条件式を作るために、5行目のコンソール表示を使います）
16行目 条件式が満たされると、hitとコンソールに表示します。
17-21行目、画像データを切り替えて動きを表現し、効果音を出します。
23-26行、その状態を1000ミリ秒保持して、コンソールに『いやがっています』と表示してから、画像をもとに戻します。26行目の1000を2000にすると保持時間が2秒にかわります。1000分の1秒単位で設定できます。
28-41行は、背中や頭に触られると、別のことをします。上の応用です。
（このようなしかけを追加すると、例えばいぬの目の前をタップすると『お手』をするなどということもできます。大事なのはこのようなアイデアで、アイデアを実現する手段がプログラムなのです。）
このような仕掛けで、しろいいぬはしっぽをさわられると、 おこって吠える。 あたまやせなかをなでてもらうと、 よろこんで甘える。 といった『ストーリイ』ができます。
『わんちゃん よろこんでいるねー』 とおはなししてあげることができます
もちろん、こんなおもちゃを使わなくても、実際の犬や猫と遊べればいいのですが、なかにはそうはいかないこともあります。
当院のこども棟にも何人かいるのですが、 感染などの事情があると、動物に接することができません。 またなでてあげたくても、手がうまく動かせないこともあります。
でも顔の動きや眼球の動きでマウスを操作できて、ゲームで遊んだり、宿題をしたりするひともいることは皆さんご存知のとおりです。
それぞれの方の事情のゆるす範囲で、 いぬにいたずらしてワンワン吠えられてびっくりしたり、いぬをなでたら甘えてかわいかったなど、 こんなの経験を提供する目的でつくりました。アニマルセラピーってありますよね。
何よりも、タブレットを消毒するのは簡単ですが いぬを消毒するのは大変です、しかもいやがってあばれます。多分動物虐待に近い行為でしょう。たいへんな騒ぎになります。これはお勧めできません。
今回紹介したような方法で作られたストーリーで、世界中の多くの人々が多くの時間と費用をかけて思い思いに過ごしています。皆さんご存知ですね。 このようなストーリーをもっと多くの人が楽しめるように多くの人が作れるようにしてもらいたいものだと思ってこのような仕事をしています。
次回は、Web文字盤への応用方法について説明します。 どうぞお楽しみに
2024/12/06 公開
研究企画課リハ工学科にもどる
←もくじはこちらです