かならずお読みください注意事項

ウェブアプリのつくりかた 10

Enchant.jsからJavaScriptへ
ウェブアプリを手作り

タブレットでコミュニケーションエイド

Enchant.jsで作ったエンチャント文字盤スキャン1秒
上の写真をクリック(タップ)すればあなたの前で動き始めます。
左クリック(タップ)で操作できます
youtubeの動画はこちら 4分30秒 音が出ます

0 はじめに

やらなければならないことがあるのに、どうしてもやる気が出ない。 もし悩みや不安があると、ますますやる気がなくなってくる。 小さなこどもさんやご高齢の方ではこのような話がよくあります。

ところがそんなときでも、ゲームならなぜかできることがあります。 試験前に、ついつい手を出してしまったという経験をお持ちの方は少なくないでしょう。

どうも理由ははっきりしませんが、ゲームが持つ何かの効果でそのようなことになっているようです。 例えばにぎやかな音楽、鮮やかな色彩、映像の動き、期待と予感、成功と失敗とスリル、達成感と失望。このようなもので刺激されると、悩みや不安が入り込む余地が少なくなるようです。

例えば得点が表示される。予想より高得点だと気分がよくなり、反対に点数が悪いと悔しくてやめられなくなる。点数が出るとあれこれ細々と考えなくなり、思考が単純化され惑わなくなり、集中しやすくなる。(他のことを忘れる はまる など)

またアニメは人の関心や興味、注意を強く惹きつける効果があります。特に年少の人たちではアニメにかなり深く没入する様子もよく観察できます。

このようにゲームやアニメには、人の心に働きかける効果がいくつかあるようです。これらの要素を、うまく抜き出して、楽しさを演出したり、積極性を引き出すために利用している例は、玩具が教材などでいくつも見つかります。このようにアニメなどのゲーム的要素を、興味、関心や積極性を引き出す手段として利用した商品開発はすでに各所で行われています。

手元のタブレットに自分や家族がアニメで登場してこちらに向かって話しかけてくるといったものを、個人で手作りするのは長い間夢物語と思っていましたが、調べてみると実はほとんど手の届くところにあることがわかりました。

このようなことができると、既成のやり方では十分効果をあげられない人に、オーダーメイドの対応や指導ができるのではないかと期待がふくらみます。

アニメに気を取られて課題に集中できない人なら、課題がアニメになればいいわけです。このようなことが自由にできれば、かなり大きな可能性が期待できます。

1 2つの課題と『つくる』取り組みの不足

前々回の『2つの課題』では

  1. 取り組みを維持継続するにはどうしたらいいのか
  2. 多種多様な福祉機器作りをするにはどうしたらいいのか

というお話をしました。

1は、少ないとはいえ需要のある福祉機器がどうして消えてしまうのか。 2は、とかくひとくくりにされやすい不自由な人達の、多種多様なニーズを満たすために多種多様な福祉機器作りはできないものか、という疑問から始まっています。

また、関係したコミュニケーション支援の場面で次のような経験もありました。

  1. 支給された機器が、実際に使われていない。理由を尋ねると、扱いが難しく時間がかかるので使わない。もっとかんたんなものがほしい。
    これはニーズと機器のマッチングが不十分とも言えますが、現実には選択肢が限られマッチングできない場合もよくあります。
  2. 適切な給付のため、申請者が機器を活用できるか判定することになった。
    給付の適正化のためとはいえ、結果的に人が道具に合っているか判定することになってしまいました。本来ならその人に合わせて道具を選ぶべきところ、それができなかった。機器の種類も多くなかったのです。
  3. 支給のガイドラインが作られた。
    多くの市販品がリストアップされて用途や条件にいよる選択が推奨されていた。しかし、これでも品揃えの不足は隠しきれず、供給に不安がある市販品もありました。
  4. さらに自治体によっては財政の影響で支給が滞ることもあった。申請者の時間が限られているのに、長く待たねばならないことがありました。

これらのように支給制度が円滑に動かないところにも、『2つの課題』に通じるところがあると思います。

2 利益と有用性、必要性

意志伝達装置、コミュニケーションエイドをはじめとして、福祉の方面は『あまり儲からないしごと』のようです。また儲からない仕事にはお金も人も集まって来ないのはある意味で当然の結果です。商品の種類が少ない、選択肢が少ないものここから始まります。

しかし世の中には、儲からないけれどなくなっては困る仕事もあります。救急や消防はその代表的な例です。これまでは税金でそれらを支えてきました。福祉機器の支給制度もその一例です。しかしこれもだんだん苦しくなって来ているようです。これまでのやり方がだんだん通用しない世に中になっているのです。

『つくる』が余りにたりないこの時代に、いまやるべきこと、いまつくるべきことは何でしょう。それはつぎのようなものではないかと考えています。

儲からなくてもいいやり方で『つくる』、儲からなくてもいい方法を『つくる』

ここからの長い話は最後にここに戻ってきます。よろしくお付き合いください。

3 選択肢不足と手作り さらに必要なこと

人類の歴史はそれこそ物不足の連続だったと思います。そんなとき我々の祖先は自然にあるものを利用したりそれに手を加えて自分で用意したのでしょう。

現在では、多くの品が流通し必需品の多くも購入できます。しかし今でも趣味や節約のために手作りは行われています。そして選択肢不足への対策の基本は『手づくり』だと思います。

今回の場合には単にものを作ればいいだけではありません。ほかにも解決すべき課題はいくつかあります。

まず安く使えることが必要です。金銭的負担は可能な限り小さくしたいものです。

次に取り組みを迅速に開始できるようにする必要もあります。試みにつかってみるのに手間暇かかるようでは困ります。

そして道具の種類がたくさん必要になります。 これは不自由があると人間の方が道具に合わせてうまく使いこなすのが難しくなるからです。こんなときは道具の方でその人の事情にできるだけ合わせる必要があります。このような理由から、形や重さなどの条件が少しづつ違う道具を何種類も揃えてそこから丁度よいものを選ぶかまたは、微調整できることが必要がなります。 これは、ちょうど靴のサイズやメガネのレンズが何種類もあることと同じことなのです。靴やレンズで当たり前のことが他のことでは当たり前ではないことがよくあります。

この結果、大量生産と対局にある『多品種少量生産』が必要になります。しかし多品種少量生産は多くの場合コストアップにつながります。この『常識』を突破しないとすぐにつぶれ、行き詰まり、持続可能でなくなります。

このような背景を踏まえながら、手作りの話にすすんでいこうと思います。

4 エクセルでの限界と新展開

前回ご紹介した、エクセルを利用した文字盤作りでは、手作りである程度のものがつくれりることがわかりました。しかしさらに改善が必要なところや限界もみえてきました。

例えば、作ったエクセルファイルを電子メールに添付して送れば、低コストで遠くの人にも届けて使ってもらえます。またウェブサイトで公開すれば、欲しい人が自由にダウンロードでき自由に使えます。これもかなりの低コストでできます。

しかし、エクセルファイルを手に入れてパソコンにコピーしエクセルを設定して使えるようにする作業は、手慣れた人、つまりやや平均から外れた、少し変わった人には特に問題ありませんが、平均的な人は苦労することがよくあるようです。多様でない集団は困難に弱いようです。それはさておき。

個人のパソコン技能の格差は、自動車運転などの他の技能の格差と比較してかなり大きいようです。 例えば、仲間とのドライブでは、誰が運転しても目的地には到着できるでしょう。パソコンでは操作担当者によって目的が実現しないことがずいぶん多くなります。 この能力格差の問題をクリアするには、世の中全体がすっかり変わってしまう必要があるでしょう。

例えば、ほとんどの人が情報機器を私物として所有し、ときに複数台所有し、日常的に持ち歩き、頻繁に使用する。ゲーム機器の持ち込みを禁止した学校でも情報機器の持ち込みを巡って議論が起き、規則ができたものの、現実にはなし崩しで多くの子どもたちも所有し日常的に利用するようになる。その結果、盗難やいじめが社会的な騒動になり、さらに普通はこんな道具に縁遠い高齢者まで、何の間違いかほとんどの人が所有し使うようになり、病院のベッドサイドでみなさん充電している。などという異様な世界にならないと、この問題は解決できないだろうとずっと思っていました。

ところが、いつの間にか本当にそのような異様な世の中が現実になってしましまいました。しかも世界のあちらでもこちらでも同じようにすっかり変わってしまったのです。

5 休息と放浪とEnchant.jsとの邂逅

その後、エクセルからもコミュニケーションからも離れて、あちこちフラフラと見て回りました。キーワードはここでも『ゲーム』でした。以前別のところでお話したと思いますが、ゲームとコミュニケーションエイドには似たところが少なくありません。 両方とも、画面になにか表示して、スピーカからなにか音を出して、人がなにか操作すると、それらが変化して、目的の何かが起きます。つまりこの両者はよく似た部品を違った目的のために組み立てているような関係です。このような理由でゲームの周辺にはコミュニケーションエイドをはじめいろいろためになる情報がよく見つかるのです。

そんなある日、9leapというゲーム投稿サイトが見つかりました。 (https://code.9leap.net/は2024年現在活動がほぼ停止しています。) このサイトは、アマチュアがゲームを作って投稿し、これを閲覧者が自由に遊ぶことができます。そして人気投票したり、意見交換したりしています。まあYOUTUBEのゲーム版みたいなものと考えればいいでしょう。中にはゲーム初心者と思しき人から、上級者まで各種のゲームが投稿されています。 いくつか試してみると、ゲームというものはプログラムの腕とアイデアの良さの両方ないといけないようです。まあ一般的に創作物とはえてしてこのようなものだとも言えます。ゲームの世界はなかなか勉強になります。

さてこのサイトでは、投稿したプログラムも見ることができます。これで初心者も上級者の技能を勉強できます。意見交換をみると、みなさんとてもお若いようです。高校生くらいかもしれません。もしかしたらもっと若いかもしれません。それなのにゲームの質は多くは一定レベルを保っています。これにはなにか仕掛けがあるようです。 そこで何人かのプログラムを見ると、なんとなくどれも似ています。使用するキャラクタも似ていますので、統一された教材か教則本(または教則サイト)があるようです。

調べてみると、思ったとおおり、作成ツールキットと教則サイトが見つかりました。 ゲーム作成で使用する機能をまとめたものが、このEnchant.jsでこれを使うと比較的かんたんにゲームを作ることができます。また使い方を解説したウェブサイトが何箇所かあり、例題と回答といった問題集スタイルで学習が進むように配慮されている。

早速、これらを手に入れて勉強しサンプルを作ってみました。このようなものは見てるだけでは時間の無駄です。料理と一緒です。このときにいろいろ作ったサンプルが、 こちら にあります。このページのトップ写真はその時のサンプルのひとつです。

このページでは基本的機能の試運転から始まり、コミュニケーションエイドに使用する、画面表示や音声再生、画面切り替えなどの機能を当時一つ一つを確認していることがわかります。その後、言葉の数を増やしていき、50音文字盤をつくっています。そこで各osごと、ブラウザごとに動きを確認して、スキャン操作をつくっています。

当時(そして今も)私はiphone、IOS方面の機械を所有していませんでしたので、遠隔地の知人にテストを頼んでいました。このページに作った試作品をのせ、WindowsとAndroidは自分でテストし、あとは知人にテストしてもらい結果を知らせてもらっていました。実はこのような事情と目的で、このページを作り使っていました。

さらに、文章読み上げのために、webspeech.APIを使って読み上げに挑戦しています。ここでiphoneに日本語を読み上げさせるところでかなり苦戦しています。これも、結局突破できました。

最後にアニメーションや物理エンジンも試して見たところで試運転を終わりました。 このように勉強すれば、つぎつぎとできるようになりますので、経験の少ない人も苦労少なく勉強や作業を進めていけそうです。

Enchant.jsを利用すればこれだけのことができることがわかりましたので、これでコミュニケーションエイド作りにも応用できることがはっきりしました。

6 ウェブアプリとマルチプラットフォーム

ウェブアプリ

プログラムについては一応調査ができましたがもうひとつここで注目したことがあります。

9leapのゲームは、特定のurlにブラウザでアクセスするだけで動き始め、遊べます。スマホのホーム画面にショートカットを作ればワンタップでゲームが始まります。 同じ方法でコミュニケーションエイドを作れば、これもワンタッチで使い始めることができます。普通なら5秒から10秒で始まります。エクセルで作ったしゃべる文字盤よりもはるかにかんたんでシンプルです。申請から3ヶ月や6ヶ月かかる話とは比較になりません。

また、使い方がよくわからないという悩みはもうなくなりそうです。もし使い方がわからなくても、今どきの中高生に聞けば教えてくれます。

とうことはエクセルで感じた限界はこのやり方を使えばクリアできそうです。 調べてみるとこれが『ウェブアプリ』とよばれるということがわかりました。

通常のアプリはインストールして機械にプログラムを保存します。iphoneならiphone用の、AndroidならAndroid用のプログラムを間違えないようにインストールします。その際場合によっていろいろ起きるのはご存知のとおりです。

これに対してウェブアプリはインターネット経由でプログラムがやってきて動きます。インターネットがあればOK。インストールが不要です。インストールが苦手な人も安心です。ただウェブサイトの閲覧と同じでいいのです。

QRコードから動かすこともできます。これで教えたり伝えたりするのにかなり便利になります。

マルチプラットフォーム

またこのゲームは、どの会社のパソコンでもスマホでもタブレットでも同じように遊べます。これもパソコンでもスマホでもウェブサイトが同じように閲覧できるのと同じです。このような機能を、『マルチプラットフォーム』といいます。

通常のアプリはそれぞれ別のプログラムで作ります。それはまるで日本語と英語、フランス語のように違います。ところがマルチプラットフォームではプログラムは共通です。まるで世界に共通語ができたような状態です。どの機械にも言葉が通じます。

この技術をつかっているので、このゲームは、パソコン(Windowsでもmacでもlinuxでも)スマホ(androidでもiphoneでも)動きます。では、同じ技術をつかってコミュニケーションエイドを作れば、やはり同じことができます。

まずこの技術のおかげで、共通語をつかってプログラム制作がかなり効率よくできるようになります。プログラマは大いに助かります。同じ労力で何倍も仕事ができるようになります。(多分給料はあがりませんが)

ユーザにも大きな利点があります。 まず、使用する機械を選べるようになります。従来の『このアプリはiphoneでないとできません』ということがなくなります。 また、画面の大きさを自由に選べるようになります。その人が見やすい、使いやすい大きさを選ぶことができます。大きさが1種類しかない現状のほとんどの製品ではこのようなことはできません。 隣の人のスマホをちょっと借りて使うことも、使わなくなった古いタブレットも再利用できます。これでお金の節約にもなります。 これも従来の多くの商品ではできません。

スマホのアプリを何とか自分でつくろうと、AndroidStudioを勉強していましたが手間と時間のわりには、できることはandroidだけです。こちらの方法が随分楽です。

さらに 9leapのサイトからゲームアプリの配布ができるなら、 みなさんがご覧になっているこのサイトでもコミュニケーションエイドアプリの配布はできるはずです。実際にできました。

このように考えると、これまでの課題のいくつかが解決され、さらにいくつかの可能性が見えて来ました。

またこれらに関係する技術は、特に秘密でも何でもなく誰でも自由に使ってかまいません。あとで請求書が届くようなこわいものではあありません。

こうなるとかなり面白くなってきました。フラフラとゲームの周辺をうろついていたのにかなりの収穫です。関係ない勉強もまんざら無駄ではないようです。

7 モノ作りの道標

手作りとかモノ作りというと、作ることに気を取られがちですが、作ったものに何ができるのか、それがどんな役に立つのか、そして作る技能が自分にあるのか、材料、工具、費用などまかなえるのかを考えてある程度の目処を立てて置く必要があります。

これらが不十分だと、行きあたりばったりで完成にたどり着けません。

作ったものがどんな役に立つかを考えるためには、調査と予習が必要です。技能が不足するなら練習、材料や工具が足りないなら知識と訓練を積み上げるしかありません。

それでも作り始めると次々と前途に困難が立ちふさがります。実際にやって初めてわかることも少なくありません。十分な事前の準備と粘り強さとアイデアでこれらを乗り越えていくわけです。

8 Enchant.jsとの別れ

ある日、スペインの若者が作った、顔認識マウス、EVIACAMのテストをしていると、enchant文字盤がうまく動かないことがわかりました。細かい話は別ページに譲りますが、結局、enchant.jsとeviacamがかち合っていたのが原因のようでした。

試しに、enchant.jsを使わず、JavaScriptのみで類似のサンプルをつくって試してみるとこのような問題はおきませんでした。

こうなったら仕方がありません。enchantには随分世話になり勉強もさせてもらいましたが、ここでお別れすることになりました。

9 おわりに 社会と目的と構想とプログラム

この間、JavaScriptとHTML、とCSSをいじくり回す日々が続きました。この間、『こうすればあれができる』というネタをたくさん手に入れました。しかし後になると大事なことはこれらプログラム以外にあることがわかって来ました。

まず、安いコミュニケーションエイドを作って見ました。参考にしたゲームが無料でしたので、こちらも無料でできました。

次に早くできるようにしました。ゲームで遊びたい人たちは、自前でスマホやパソコンを準備して通信も自前です。これと同じようにコミュニケーションエイドをサーバから配信すると、やはり数秒で利用できるようになりました。

このようにして、web文字盤の配信が始めて何日かして、あることに気が付きました。

ここまで来るとこれといってやることがなにもないのです。私がなにもしなくても黙々と配信は続き、記録をみると、何人かの人が自由にお使いになっていることがわかります。

手間も金もかかりませんしそれどころか、だれもいなくて動き続けるのです。まるで永久機関のようです。(もちろん厳密にはちがいます)

無料で作りましたので費用はかかっていません、誰もいないなら人件費もかかりません。費用がかからないから儲ける必要もありません。収入がなければ納税もありません。無料ですから消費税もありません。黒字もなければ赤字もない。

気がついたら、儲からなくていいやりかたにいつの間にかたどり着いていました。

経済不況、会社の倒産、業績不審、生産中止、財政悪化、予算がない。などのこれまでの問題のいくつかがなんとかなりそうです。

私が作ったプログラムはすべて、中身が見えます。誰でも自由にコピーして、自由に改良して、同じように配信していただいてかまいません。

こんな人が国内で数人、アジアで数十人、世界で何百人かいれば、もう選びきれないほどたくさんのものが誰でも自由に使えるようになるでしょう。

このようなことに取り組もうとする方は、まずはパソコンやプログラムの勉強から始めるのもいいでしょう。しかし一つ一つの部品がどのように協力強調できるのか、そしてそれらが人々に働きかけ、世の中をよく変えて行けるのかまで、考えをめぐらせていただきたいと思います。

参考URL


2024/05/31 公開

研究企画課リハ工学科にもどる ←もくじはこちらです