ちびこといっしょTOPキッズのおもちゃ『ちびっこおえかき』を作ってみました
2014年08月18日

『ちびっこおえかき』を作ってみました

夏休みなので、JavaScriptで、ちびっこ向けおえかきアプリを
作ってみました。

oekaki.png

『ちびっこおえかき』

よかったら、お子さんと一緒に遊んでみてくださいませ。
マウスでドラッグするとお絵かきできます。

JavaScript部分は、ほぼテキストの写経状態なんですけど、
ちび弟の要望により、色数を増やしてちょこっと見た目を
整えてあります。

テキストは、ソシムの JavaScript&jQueryレッスンブック
Chapter7 「HTML5のCanvasを使ってみよう」
Lesson2 「お絵かきソフトの作成」というところ。



このテキスト、見た目取っ付きやすくて、題材もちびこ受けする
ものが多くて嬉しいのですが、誤植がやたらと多いんですよね。
もし購入された場合は、ソシムの読者サポートページ
サンプルコードも見つつ進めるのがいいと思います。
索引も無くて不便だな、と思ってたら、こちらもサポートページに
ありました。

昨夜寝る前には、まだ黒一色で線の太さも選べなくて、
線を消すこともできない状態で、えー、って言いながら
F5でリセットしつつ、お絵かきを楽しんでいたちび弟。

明日、面白がって遊んでくれるといいな♪

ひょっとしたら、ちび兄弟の要望を受けて、もうちょっと
改良するかもしれません。


→かわいいちびっこを描いてくださいました♪
かこさんの『ちびっこおえかき』
   ・・・Area5.net  Arisaya blog

posted by かこ at 03:02 | Comment(13) | キッズのおもちゃ
Ads by Google
この記事へのコメント
やってみました〜。
色の名前がひらがななんで、
息子でもちゃんと色をかえることができました。
Posted by 心姫 at 2014年08月19日 17:01
いいねこれ。

いろのところに文字だけでなく色を付けてくれるとおバカでもより直感的に使えそう。
しろと同じのを太くして「けしごむ」にして追加すれば、1個で2機能作れるかも。
Posted by Tom at 2014年08月20日 08:52
遊んでくれてありがとう〜。

ちび弟の使っている様子を見てると、チェックボタンではなく、色名のところを
クリックしているので、文字部分をクリックできるようにしておいたのは
正解だったなー、と思ってます。

あと、これ、水色と違う、とか、青っぽくない、とか、思っている色と違う
不満がでたので、色調整と色の表示はやっぱりいるな、と。
茶色も追加しよう。ちびさんには不人気そうだけど。

線の太さもドロップダウンだと直感的に変えられなかったから、
色名みたいにラジオボタンにした方がいいかも、と思いました。
線の太さも見せるようにして。

あと、マウスポインタをクレヨンとか色鉛筆っぽくした方がいいかな、とか。

大人の意見では、取り消しとか白黒ボタンのやり直しボタンが欲しい、とか、
ファイルに保存するボタンが欲しいとか、リクエストがありました。

Canvasで作っているから、ファイルに保存するようにする機能をつけるのは
難しくないみたいなんだけど、現状Chromeから右クリックすると、
透過画像になるんですよ。それだと白は白ででちゃうので、消しゴムとは
ちょっと違う意味になっちゃうんですよね。
ファイルに出す時に、背景に白をつけるようにするのか、そこも迷い中だったり。

ということで、ご意見ご感想は、随時歓迎です。ありがとうございます♪
反映は気長にお待ちくださいませ。
Posted by かこ at 2014年08月20日 17:14
iPadで使えないの?って要望もありました〜。
タッチパッド対応・・・すぐにはできないので
気が向いたらがんばってみます。
Posted by かこ at 2014年08月20日 17:17
茶色も追加するんですね[Em146]
雀さんを書こうとして、茶色がないので黒で書きました。
地面とか樹木を書く時も茶色があるといいと思います。
ちびさんには茶色は不人気なんですか〜? 
茶色より、水色とかピンクの方が喜びそうですよね[Em140]
Posted by アリサヤ at 2014年08月20日 22:40
ちびっこおえかき というなまえが おとなはつかうなといっているようです。

おれんじ ではなくて だいだい では?
ぴんく ではなくて ももいろ では?

にたいろなのに
あお と みずいろ がはなれているし、
あか と だいだい と きいろ もはなれている。
Posted by Tom at 2014年08月21日 07:32
2年後。

お前まだ ちびっこおえかき 使ってるの?やーい、ちびっこ!
うっ!使いたいけど、もう使わない!

そこで新バージョン「オ・ト・ナのお絵描き」リリースです!
Posted by Tom at 2014年08月21日 07:39
茶色のクレヨンはあまり減らない印象があります。
とりあえず、茶色はさくっと追加してみたので、よかったら
小鳥さんをかいてあげてくださいな♪
茶色のランドセル、女児にはけっこう人気ありますけどね〜。

ターゲット層を明確にするのは大切で、似たようなお絵かきアプリや
より高性能なものは、世の中にたくさんありますので、対象は狭くて
いいんだと思うんですよ。
ターゲット外の人が使ってくださるのも、もちろん大歓迎ではあります。

イマドキのちびっこであるちび弟をみると、やはり、
だいだい、より、おれんじ、ももいろ、より、ぴんくの方が、
なじみ深いんだと思うんですよね。私も迷ったんだけど。

似た色をグラデーションで並べていく、というのもありですけれど、
色を表示した時に、似たような色ではないものが並んだ方がきれい、
よく使う色は上の方にあったほうがいい、という観点でこういう
並び順にしてあります。

既にあるペイントと同じもの作っても面白くないでしょ?
大人のお絵描きは私は作る気がないので、Tomさんオリジナルバージョンで
リリースしていだだくといいのではないのかな、と思います。
Posted by かこ at 2014年08月21日 16:40
ちびメモ

・現在ちび弟は、白で絵を描いて、「1・2・3・しろくま!!」と
呪文をとなえながら、黒線の絵を出現させるのがブーム

ちび兄弟からの追加色リクエスト

・はいいろ(シルバー風)
・おうどいろ(ゴールド風)
・あおむらさき
・あかむらさき
・にじいろ!
・とうめい!

・はだいろ

Posted by かこ at 2014年08月22日 20:29
かこさん、こんばんは[Em98]
ちびっこおえかきで書いたうちのちびっこの絵を、
私のブログに載せたので、リンクを貼らせて頂きました。
よろしくお願いします。
Posted by アリサヤ at 2014年08月22日 22:25
かわいいちびっこ、ありがとうございます♪
茶色追加してよかったです!
こちらからもリンクさせていただきました〜。
Posted by かこ at 2014年08月23日 10:15
こんばんは。
しばいつんさん→アリサヤさん経由でやってきました。
私も描いてみましたが
マウスでお絵かきは難しいですけど楽しいですね。
Posted by まゆみさん at 2014年08月28日 23:00
いらっしゃいませ♪遊んでくださりありがとうございます☆
マウスで描くの難しいですよね、私もうまく描けません笑。
Posted by かこ at 2014年08月29日 17:49
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
♪ Pick up items ♪ スポンサーリンク
持ち手付き財布 IH ご飯土鍋 フィルムミラー 北欧紅茶
すこやかふりかけ エーラベルカレー 焼肉のたれ 鴻巣ラーメン