javascript

2010年10月28日

うちの2番目ちゃんと3番目ちゃんは、数字が読めるようになり、足し算もわかってきたようだ。 小学生の1番目ちゃんは、割り算や分数も習ったようだ。
一方、ぼくはjavascriptを使ったドラッグアンドドロップを勉強しようと思っていたので、 数字のブロックを組み合わせて四則演算の数式を作って遊ぶアプリを作った。

num

平日の夜や土日にちょこちょこと勉強しながら作る日曜プログラマなので、 完成まで実に三ヶ月くらいかかってしまった。
せっかくwebアプリなので、iPadやiPhoneのsafariでも動くようにしたほうが、子供にはうける。 そう考えたことが苦労のはじまりであり、結局、 safai対応にするのに二ヶ月余計にかかったと言っても過言ではない。

PCかiPad/iphoneかは自動で識別するので、以下のURLにアクセスするだけで遊べる。 例によってGAE上で動いているが、HTML/Javascriptのファイルを配ることにしか使っていない。 表示されたブロックをドラッグして、任意の数式を作ってほしい。=をおいて、右辺と左辺が等しくなれば、 ハナ丸が表示される。教育目的であるから、計算も自分でして、正解かどうかをフィードバックするものだ。

http://numericblocks.appspot.com/

PCのブラウザでは、マウスのイベントは"mousedown"や"mousemove"で取得できる。 一方、iPad等のタッチ操作は"touchstart"や"touchmove"という別のイベントである。 しかも、単なるイベント名の置き換えではなく、挙動が違うようだ。
今でも解決できていない問題は、touchして、ブロックオブジェクトを生成・表示したあと、 指を離さずに移動させたとき、新たに生成したブロックが動かないという問題。
しかたなく、iPad/iPhoneでは一度ブロックをタップしてブロックを生成し、改めてその ブロックをタッチして移動する、という仕組みにせざるを得なかった。
この解決ができる方、是非、教えていただきたい。

HTML5でドラッグアンドドロップが標準サポートされた。
はじめは、 それを使ってアプリを作れば、HTML5対応をうたうiPad safariで、そのまま使えると思いこんでいた。 しかし、それほど甘くなく、当然ぴくりとも動かない。イベントが違うので当然である。
jQueryをはじめとする、多くのjavascriptライブラリでも、ドラッグアンドドロップの 仕組みが提供されている。が、iPad safariと互換のあるものを見つけることができなかった。 そこで、改めてsafariのタッチイベント関係を調べてみると、最も基本的なstart、move、endしか ない。
PCとiPad safariを互換させたプログラムとすることを考えると、 PCのマウスイベントもdown、move、upの基本イベントのみで記述し、それをタッチイベントと 置き換えるようにしなければならない。でないと、共通部分が少なくなってしまい、別々に専用の プログラムを作るのと変わらなくなってしまう。 ということで、HTML5のドラッグアンドドロップを使うことを捨てて、再度作り直した。

その他、いままでイベント駆動型のプログラムを書いたことがなかったため、実に多くの試行錯誤を 繰り返し、何度も書いては捨ててることとなった。 結局、8月初めから作り始めて、途中、机やタンスを組み立てたりしながら、三ヶ月かかってしまったのだ。

そして先日、子供たちに遊ばせてみたのだが、はじめこそ遊んでくれたが、さほど盛り上がらなかった。 まぁ、そんなものである。



sylphide_ffr31mr at 22:24コメント(0)トラックバック(0) 

2010年08月06日

javascriptの練習ということで、文字を大きく表示するページを作ってみた。Google App Engine上で公開しているが、サーバサイドでは何もやっていない。

もじもじくん



はじめてまともにjavascriptを書いてみたが、やはり難しい。
Javascriptだけ考えればいいわけではなく、HTMLと、CSSも書いていく。
ある働きを記述したいときに、CSSでもjavascriptでも表現可能な場合、どこで記述するのがいいのか、余計なことを考えすぎる。
慣れていくしかない。

うちの2番目ちゃんや、3番目ちゃんは、ひらがなを読むことはできるが、書くのを練習中。
ときどき「ふぁ」ってどう書くの? とか聞かれるので、このページで字を大きく表示して教えてあげるような使い方を想定している。
iPhoneやiPadのブラウザでも動作する。
日本語も入力できるので、1番目ちゃんに漢字を聞かれても大丈夫。
入力できる文字数は、16文字まで。



sylphide_ffr31mr at 00:11コメント(0)トラックバック(0) 
記事検索
最新コメント
livedoor プロフィール
月別アーカイブ
  • ライブドアブログ