かならずお読みください→
JavaScriptらしい画像ってありませんね しかしロゴすらないなんて
ウェブアプリをつくる話も4回目になります。 これまではメリットについて、そして前回はウェブアプリの基本となるhtml作りのホンの基本についてお話ししました。いかがだったでしょうか。
さて、どこかのサイトをパソコンで表示して、マウス右クリックからページのソースを表示させると、そのサイトのhtmlファイルが表示されます。みなさんも一度試してみてください。予想以上に大きなhtmlファイルが表示されて驚かれるかもしれません。ですがここで興味をひかれるのは、世界じゅうの人たちが同じ言葉でホームページを作っていることと、それが誰にでも丸見えなことです。
ですから自分でホームページを作る際には、このようにしてどこか好みのページを参考にすることができます。実はこれがなかなかためになります。
またhtmlファイルをこつこつとエディタで作ってもいいのですが、 ホームページビルダーやAdobe Dreamweaverなどのウェブオーサリングツールを使えば、見た目の美しいホームページを比較的楽に作れると言われています。
実は私もはじめの頃、ホームページビルダーを使ってみました。ところが完成したhtmlファイルをテキストエディタで開いてみると、いろいろと余分なものがついているのが見つかりましたのでこれらを削除しました。するとスッキリとシンプルなhtmlができました。 このようなわけで、シンプルなホームページを作るなら、ソフトの使い方を勉強するよりもhtmlを勉強したほうが話が早いと考えるようになりました。それ以来ホームページのデザインもほぼ変えることなく、もう長いことテキストエディタばかり使って更新しているのです。
もし情報発信が目的で、作業量も学習量も費用も少なくしたいならブログの方が適しているでしょう。しかしウェブアプリを作るならここはがんばって、htmlやJavaScriptの勉強をしていくほうが早道と考えています。
さて今回は、JavaScriptをつかって、 前回画面に表示した犬をほえさせたり動かしたりする方法について説明していきたいと思います。 よろしくおねがいします。
さてこれが前回の最後から二番目の作品です。
これを表示するhtmlファイルは次のようになります。
<!DOCTYPE html> <html> <head> </head> <body>こんにちは
</body> </html>
これからこのいぬを吠えるようにします。
<!DOCTYPE html> <html> <head> </head> <body>こんにちは
まず11行から25行を追加しました。また犬の鳴き声の音声ファイルdog2.mp3を作りhtmlと同じ場所に保存しました。 ここ に犬の鳴きこえの音声ファイルdog2.mp3がありますので右クリックからダウンロードしてください。 これでマウスをクリックするたびにワンワン吠えるようになります
それでは、すこし説明します。
11行の<script type="text/javascript">と25行の</script>の間は、
スクリプト（簡易なコンピュータ・プログラム）を書き込む部分を示しています。また11行では使用するスクリプトはJavaScriptだと指定しています。
12行目のconsole.log("Hello WhiteDog!");は、スクリプトが開始した際に、コンソールに"Hello WhiteDog!"と表示して動作を確認できます。プログラムの動きを確認するコツです。
13行から24行は、読み込み終了後に自動的に開始する関数です。
14行は、マウス動作を記載してあるというメモ（コメント）です。見やすくするコツです。
15行は、isMouseDownという変数を定義しています。マウスの押下を監視するのに使います。
16行から22行は、マウスを押下（ダウン）したときに動く関数です。
17行では、変数isMouseDownをtrueにしています。
18行では、コンソールに"MouseDown"を表示します。これでマウスやタッチパネルの正常動作を確認できます。故障したときもここでわかります。
19行では、新しい音を定義しています。
20行では、htmlと同じ場所にある音声ファイルdog2.mp3をセットしています。
21行では、音を再生しています。つまりここで「わん」とないています。
23行では、マウスの動きを見張る仕組みを動かしています。
以上により、マウスを押下（ダウン）するたびに、16行から22行が何回も何回も動きます。
このようにして、前回まで動かなかったしろいいぬが動くようになりました。いかがだったでしょうか？
えー、そこのあなた、何かご意見がありますか？えーなになに、いぬのなきごえは聞こえるが、いぬはうごいていない。なるほどたしかにそうですね。 では、もうすこし手を入れてみましょう。
さてここにもう一枚、別のいぬの画像があります。こちらは口を開いてしっぽをあげています。そのほかの部分はみんな前の画像と同じです。
前回と同じく上のいぬの画像にマウスを合わせて、右クリックして「名前をつけて画像を保存」でこの画像ファイルをdog2.jpgで保存してください。ブラウザの設定によって保存場所を訪ねて来ますので適切に対応してください。何も出ないときは、ダウンロードに保存されます。 このdog2.jpgも同じくtest.htmlと同じ場所（フォルダ）にコピーします。
さて上のhtmlファイルに更に手を入れて以下のように変更します。
<!DOCTYPE html> <html> <head> </head> <body>こんにちは
また何行か追加しました。追加変更した部分を中心にすこし説明します。
37行に、id="image_dog"を追加しました。これでいぬの画像に"image_dog"と名前をつけました。
マウス押下関数に、19行と20行を追加しました。この文を和訳すると、"image_dog"の画像ファイルをdog2.jpgに変更しろ。となります。これでクリックボタンを押す（ダウン）と口を閉じたいぬの画像が口を開けてしっぽを上げた画像に切り替わります。
さらに、26行から30行にマウスアップの関数を追加しました。これはマウスボタンをはなしたときに作動します。そして28行29行があります。この文を和訳すると、"image_dog"の画像ファイルをdog.jpgに変更しろ。となります。これでクリックボタンをはなす（アップ）と口を開いたいぬの画像が口を閉じてしっぽを下げた画像に切り替わります。
あとは、変更していません。
えー、さきほどのかた、これでよろしいですか？よろしいようですね。ありがとうございます。
さあこのようにして、前回までは動かなかったしろいいぬが動いてほえるようになりました。動くようになったのはスクリプトを使ったからです。今回ご紹介したのはJavaScriptというスクリプト言語です。
マウスの動きを検知するとか音を再生するとか画像を切り替えたりなどの機能は、数多いJavaScriptの働きのなかのほんの一部です。また新しい機能も次々と開発されていますので、機能はますます増えています。Web文字盤もこれと同じ方法で作られています。そしてさらに他の福祉機器も様々なアプリもつくることができるでしょう。
さあ次回はなにをご覧にいれましょうか。おたのしみに。
htmlを勉強してやがて文章や画像の表示ができるようになると、みなさん別のことが気になり始めます。例えば、『もっといい文章が書けるようになりたい』とか『もっとうまく写真を撮影したい』とか『描画ソフトを使いこなしてイラストの質を上げたい』などです。 どうも多くの人が同じように感じるようです。やはり人に見せるとなるといろいろ気を使うようですが皆さんはいかがでしょうか。
じつはこれと同じことが、JavaScriptにもあてはまります。 ご覧いただいたように、画像を動かしたり音をだしたりするためには、やるべきことをきちんとやればそれでできます。
そのためにはまず実際にどんな事ができるのか一通り知ること大事です。できないことを悩まずできることを実行することが重要です。 そしてそれらを大きくしたり小さくしたり、早くしたり遅くしたり、長くしたり短くしたりと自由自在に変化できるようにならないと仕事になりません。これもがんばってやればできます。 そして次にこれらの画像や音のひとつひとつの動きや動作を組み合わせて、不自由のある人がそれぞれが持つ特定の目的を実現する方法を考えだすわけですが、これがなかなか簡単ではありません。
例えばことばや書字が苦手でうまくいかない人が自分の意思を相手に伝える 方法について考えてみましょう。
日本でもこれまで何種類かのコミュニケーションエイドが登場してきました。 これらの目標はお互いよく似ていますが、それでもそれぞれが多様性も特徴も持っています。 あるものは、シンプルで使いやすさをめざし、あるものは高度な機能を目指しています。
普通の人の歩き方はほどほど似ていますが、不自由のある人の歩き方はそれぞれかなり特徴的です。これと同じことがコミュニケーションでもあります。 『言葉が苦手』、『コミュニケーションが苦手』とひとことで言いますがじつは それぞれ人の苦手も事情も目的もかなりかなり違って多様です。
難病の方のおうちを訪問すると他所とは違う透明文字盤を見かけることがよくあります。 これを見ると、それぞれが違っているのが普通なんだと気づかされます。 ではコミュニケーションエイドではこれができないのはなぜでしょう。 ひとりひとりにあった多種多様なコミュニケーションエイドを提供するには、もう作り方から変えていかないといけないように思っています。
もう『ハイテク』とか呼んでたてまつっている時代ではありません。こちらの望むように動かして仕事をさせるべきなのです。 そこでこのようなことを可能にする方法についていろいろ考えてきました。 その結果、お金や人手がなくてもなんとかなることがわかってきました。またいくらか勉強して努力すればたったひとりでも、まんざらできない訳ではないことをこのように紹介しているのです。
2023/09/29 公開
研究企画課リハ工学科にもどる
←もくじはこちらです