Category: アプリデザイン・開発話

タッチパネル版ピッケを作成中2


今のパソコン版のピッケは、タイマーをつけてはいますが
時間無制限で楽しめます。
対して、タッチパネル版は、ディスプレイに間近で向かい合うし、
商業施設におかれるものなので、ある程度の時間で
次の人にチェンジしてもらえるようにしたいです。
10分くらいで1セッションが終わるように作りたい。

さて どうするか…。思い切って、おうちステージをバッサリ省き、
タッチする面白さをより味わえる「リズムのもり」だけで
作ることにしました。
(ピッケが設置されるフロアのテーマも、ちょうど「北欧の森」なのです)

それでも、4つのサブステージをひととおり見ると約20分。長すぎます。
そこで、2つ並ぶタッチディスプレイのうち、ひとつは床から高さ50cm、
ひとつは70cmと高低差をつけ、コンテンツの中身も出し分けることにしました。
低い方は、池~地面~葉っぱサブステージ、
高い方は、地面~葉っぱ~空サブステージ。
低い方なら、身長100cm=3歳の子でも背伸びすれば上まで届きます。

タッチパネルは、eITさんの商品を使用。
普通のモニターに、タッチパネルをカチャッとアタッチするだけで、
どんなモニターもタッチパネルに早がわり!
(液晶、プラズマ、プロジェクターなんでもOK)
子どもが多少ベタベタ触っても、画面を拭くこともできて
具合がいいです。

開発用にと、45インチの商品を貸していただきました。

Img080402_1
大っきーい。重ーい。

Img080402_2
これで、実際にタッチ操作を大きな画面で確認しながら開発できます。ありがたや。がんばります!

タッチパネル版ピッケを作成中1


来月末 神戸にリニューアルオープンする施設に
ピッケが入ることになりました。
これまでの パソコン上で、マウスで操作するピッケではなく、
大型タッチパネルディスプレイ上で、手や指で操作するピッケです。

大きさのイメージをつかむために、紙で作って壁に貼ってみました。
大きいような、意外と小さいような…。

Img080331_1
最初65インチの予定だったのが57インチに変更になったので、紙も変更。
対角線で20cm違うので、かなり小さくなった感じ。

床からの高さを決めて、設置工事の方に連絡。
小さいお子さんのいるファミリー層対象ということなので、
身長110cm(5歳児平均)をメインに出した高さです。

Img080331_2

「リズムのもり」をタッチ操作版にする予定。
オープンまで残り1ヶ月切りました。
がんばらねば!

ピッケの音3


音の容量は大きいので、1ループを、あまり長くはできません。
でも単調に感じないようにしたい。
そこで、BGMに複数トラックをあてられるのであれば、
音を変える条件をトラックごとに変えてやって、
各トラックの、別種類のループへ移るタイミングをずらすことで、
単調に聞こえるのを和らげようとしています。
例えば、「リズムのもり」はっぱサブステージでは、
1つ目のトラックは、はっぱのRGB値によって変わる
2つ目のトラックは、地色のRGB値によって変わる
3つ目のトラックは、実の色(3色の実の色の比)によって変わる
としてあります。
そこに加えて、実にマウスオーバーしたときのSE、
花にマウスオーバーしたときのSEが、上からかぶさるので、
画面上でマウスを動かしていると、なんとなく心地よく
音が変わっていく となっています。

Img080229_1
3色ある実の色の比(青が多い、オレンジが多い、黄色が多い、混在)が変わると、音も変わります。

ピッケの音2


「リズムのもり」ステージの音楽は、
大貫貴子さんに依頼して作ってもらいました。
プロにお願いできて、うれしい限り。

・ マリンバやスティールパンなど、アコースティックな音色で
・ 「メロディー」が強くあったり「楽曲」になっていないのが望ましい
勝手な希望を山ほど伝え、お願いしました。

じめんサブステージやはっぱサブステージにいる時に
バックに流れている音、時間帯によって、少し違うのに
お気づきですか?
午前、午後、夜(夕方以降)の3通りあるのですよ。

Img080227_1
水面が空の色を映してオレンジ色になる頃、鳥の声も静まっています。

ピッケの音1


初期の、おうちステージしかなかった頃、
自分で録音した音やフリー音源を、フリーソフトで加工して
ピッケの動きに貼り付けていました。
ピッケが「おなかいっぱい」と腹つづみを打ちますが、
これは、まさに鼓=タイコの音から加工。
「クラクションみたいな おとがする
 この おはなが じまんだよ」
この鼻の ブイブイッ!音も、「~みたいな」というか、
実は、車のクラクションの音そのまんまなのでした。

Img080225_1

ピッケの視線


ピッケは、いつも正面向き。
右へ歩いているときも、左へスキップしてるときも、顔は、
モニターの前にすわっている子どもたちの方を向いています。
(ピッケは、短いアニメーションをたくさんつなげて表現しています。
 つなぎ目が見えると不自然に感じてしまいますが、
 占める面積の大きい「顔」部分が動かないことで、
 そのつなぎ目を目立たなくできるという利点もあります。)

Img080206_1
   どっちへ向かっていても、カメラ目線のピッケ。

Img080206_2
ピッケは、子どもの顔をまっすぐ見て、名前で呼びかけます。

また 子どもたちがアバターとなって、ピッケの世界へ入ることは
ありません。
子どもたちは、あくまでモニターの外。
世界中で、いちばん安心、安全なパパ&ママの膝の上にすわって
ピッケの世界を楽しんでほしいなぁ と思っています。

Img080206_3

さよならの仕方


タイマーが鳴って約束の時間がきたら、
いきなりブラウザの閉じるボタンを押すのではなく、
画面右下の「でぐちボタン」を押して、終わってください。

Img080203_1

おうちステージにいるときなら、ピッケが、
リズムのもりステージで森の仲間も一緒なら、居あわせたみんなが、
「またあそぼうねぇー」と、手を振ってくれますよ。

Img080203_2

エッツの絵本「もりのなか」のさいごのシーン。
森の中で空想の動物たちとあそぶ男の子を、
お父さんが迎えに来ます。 お父さんの
「きっと、またこんどまで まっててくれるよ」
の言葉に、男の子は
「さようならぁ。みんな まっててね。
 また こんど、さんぽに きたとき、さがすからね!」
と 肩ぐるまに揺られて帰っていきます。
お父さんのこの一言で、男の子の心の中の動物たちは生き続けます。
(実際、この絵本には続編の「また もりへ」があり、
 男の子は、ふたたび同じ森で動物たちと遊びます。)

こんなふうにできたらなぁ と思うのです。
どうぞ この男の子のお父さんの気持ちで、
「でぐちボタン」を押して、ピッケにちゃんとバイバイして、
納得、満足して、終わらせてあげてくださいね。

電源を切っても、ピッケはネット上のおうちで暮らしていて、
ふとしたときに「ピッケ、どうしてるかな、ピッケも今頃ごはんかな?」
と思えて、会いたくなったら会いにいける。
そんな世界をめざしています。
(まだまだですが、理想は高く!)

タイマー機能をつけました


「ピッケのおうち」は、はじめてコンピュータに出会う
小さな子どもたちのために作った、親子で楽しむソフトです。
ですので、これまで、利用時間の管理は、
一緒に遊ぶパパ&ママにお任せしてきました。
でも現実には、キッズ@niftyへ引越したこともあり、
小学生の割合が増えていて、
子どもひとりで遊んでいることもあるようです。

そこで、かなり迷ったのですが、タイマー機能を設けました。

Img080201_1
   ベルの絵柄↑が、タイマーボタン。

親子で利用の場合も、うまく使ってみてください。
あらかじめ、何分あそぶか親子で話し合って決めて、
タイマー設定もお子さん自身にやってもらえば、
自分で決めた約束を、守ろうという気持ちになることでしょう。

Img080201_2
   10、20、30分の中から、設定できます。

Img080201_3
           クリックすると、残り時間がわかります。

1回の利用は15~20分、
長くても30分までが望ましいと思っています。
コンピュータだけでなく、いろんな遊びを経験してほしいので。

Img080201_4 

もし「ものたりな~い!」っていう場合には、
つくってあそぼうにある、ペパクラやペパドル、
プレゼントにある、がんばるシート&シールやまめぼんなど、
工作類も試してみてください。
ピッケの世界は、PCの電源を落としてからも、楽しめますよ。

以下は、過去のブログから、ピッケの工作あそび例。
ペパクラピッケとかくれんぼ
ペパクラ、ペパドルを戸外でパチリ
ピッケのペパドルでお話づくり
がんばるを応援するシート&シール
ちびサイズのピッケのまめぼん

昔のピッケ2


MicrosoftAgentの旧版「ピッケのおうち」
見た目も内容もほとんど同じなのですが、
現在のFlash版では消えているアイテムがいくつかあります。
(12/13 をもちまして、旧版のページを終了しました。)
例えば、ポストやカレンダー。
開発当初(公開が2002年~なので2001年頃)やりたいと思いながら
できずに終わったコトの残骸です。

Img071210_1_3 
          旧版「ピッケのおうち」のスクリーンショット

このうち「みんなのギャラリー」は、
形を変え、「みんなのひろば」として実現できました。

さて、その「みんなのひろば」新作は、
さんごくんが、こんど発表会で演じる「さるかに合戦」の
「うすさん」とピッケのツーショットです。

Img071210_2

見合った両者、なんともイイ顔ですね!

昔のピッケ1


今年 こどもの日 5/5 にリニューアルした「ピッケのおうち」、
それ以前は、私の仕事サイトgoodgrief.jp の下にありました。

Img071206_3

見た目は同じなのですが、
実は 動かしている技術がまったく違います。
今のピッケはFlash、以前のピッケはMicrosoftAgent です。
「MicrosoftAgent」はなじみのないコトバかもしれませんね。
ひと昔前、WordやEXCELでヘルプとともに出てきたイルカや、
最近なら、「検索」すると登場する犬のロッキーが、
このMicrosoftAgentです。

Img071206_1

出てきてほしくないとき出てこられるとうるさいですが、
使い方次第では、とても面白いんじゃないかと、考えました。
MicrosoftAgentは、作り方が公開されていて、
オリジナルキャラクタで作ることができます。
(ピッケの前、ネズミのシナモンも、MicrosoftAgentにしてみました。
 シナモンは、今も、goodgrief.jp のサイトを、案内してくれますよ。→ 終了しました)

Img071206_4

ピッケを作り始めたのは2001年。当時、Flashも使われ始めていて
どっちでいくか迷った末、MicrosoftAgent を選びました。
Macユーザをあきらめることになるけれど、メリットの方が大きいと
判断したのです。

メリットと考えたのは、主に次の点です。
1)プレインストールされているので、初心者にとって敷居が低い。
2)Flashだとブラウザの枠から出られないが、MicrosoftAgent は
  ブラウザの枠を超えて、例えばサイトツアーのようなこともできるし、
  デスクトップに常駐もできる。
  5年後、10年後には、子どもたちもネットを利用するだろう。
  そのとき、安心なサイトばかりではないだろうから、
  子ども用ポータルを作って、子ども向けサイトをツアーして回りたい。
3)MicrosoftAgent は、音声入力対応になっている。
  5年後、10年後には、音声入力がもっと一般化しているはず。
  キーボードやマウス操作でなく、Agent に話しかけて
  っていう使い方ができる。これって子どもに最適。

3)は、はずれました。まだ一般的ではないですね。
2)は、子どものネット利用は急速に進み、予想は当たったのですが、
同時にセキュリティの縛りも大きくなってしまい、
サイトツアーも、機能としては可能でも、セキュリティの壁に阻まれ
どちみちできなくなりました。
そして、Windows XP sp2 になった時、とうとう「信頼サイトへの設定」
という、私だったら絶対やらない めんどくさいことをしないと
見れないように なってしまいました。
この時点で、ピッケもこれまでか… と観念しかけたのですが、
あきらめきれずに、一念発起!
全部Flashで作り直して、今日に至ります。

MicrosoftAgentによる旧版の「ピッケのおうち」、来訪者も
ほとんど無くなってきたので、そろそろ閉鎖しようと思っています。
技術的な興味がある方、もしよろしければ、今のうちにご覧になってくださいね。
ただし、Windows かつ ブラウザはIE、信頼サイトへの設定が必須、
最新のShockwaveプレイヤーのインストール(無料)が必要、
と とっても面倒くさいです。
MicrosoftAgent+Shockwave+JAVAscript で動作しています。

Img071206_2

旧版の「ピッケのおうち」(MicrosoftAgent)はこちらです。
http://www.goodgrief.jp/picke/(旧版の「ピッケのおうち」は終了しました。12/13)

あたらしい「ピッケのおうち」(Flash):http://pekay.jp/house/