『ちびっこおえかき』を作ってみました
夏休みなので、JavaScriptで、ちびっこ向けおえかきアプリを
作ってみました。
よかったら、お子さんと一緒に遊んでみてくださいませ。
マウスでドラッグするとお絵かきできます。
JavaScript部分は、ほぼテキストの写経状態なんですけど、
ちび弟の要望により、色数を増やしてちょこっと見た目を
整えてあります。
テキストは、ソシムの JavaScript＆jQueryレッスンブック、
Chapter7 「HTML5のCanvasを使ってみよう」
Lesson2 「お絵かきソフトの作成」というところ。
![【送料無料】JavaScript＆jQueryレッスンブック [ 大津真 ]](http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f7947%2f9784883377947.jpg%3f_ex%3d300x300&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f7947%2f9784883377947.jpg%3f_ex%3d80x80)
【送料無料】JavaScript＆jQueryレッスンブック [ 大津真 ] |
このテキスト、見た目取っ付きやすくて、題材もちびこ受けする
ものが多くて嬉しいのですが、誤植がやたらと多いんですよね。
もし購入された場合は、ソシムの読者サポートページの
サンプルコードも見つつ進めるのがいいと思います。
索引も無くて不便だな、と思ってたら、こちらもサポートページに
ありました。
昨夜寝る前には、まだ黒一色で線の太さも選べなくて、
線を消すこともできない状態で、えー、って言いながら
F5でリセットしつつ、お絵かきを楽しんでいたちび弟。
明日、面白がって遊んでくれるといいな♪
ひょっとしたら、ちび兄弟の要望を受けて、もうちょっと
改良するかもしれません。
→かわいいちびっこを描いてくださいました♪
◆かこさんの『ちびっこおえかき』
・・・Area5.net Arisaya blog
|
||||||||||||||||||||||||
コメント
やってみました～。
色の名前がひらがななんで、
息子でもちゃんと色をかえることができました。
いいねこれ。
いろのところに文字だけでなく色を付けてくれるとおバカでもより直感的に使えそう。
しろと同じのを太くして「けしごむ」にして追加すれば、１個で２機能作れるかも。
遊んでくれてありがとう～。
ちび弟の使っている様子を見てると、チェックボタンではなく、色名のところを
クリックしているので、文字部分をクリックできるようにしておいたのは
正解だったなー、と思ってます。
あと、これ、水色と違う、とか、青っぽくない、とか、思っている色と違う
不満がでたので、色調整と色の表示はやっぱりいるな、と。
茶色も追加しよう。ちびさんには不人気そうだけど。
線の太さもドロップダウンだと直感的に変えられなかったから、
色名みたいにラジオボタンにした方がいいかも、と思いました。
線の太さも見せるようにして。
あと、マウスポインタをクレヨンとか色鉛筆っぽくした方がいいかな、とか。
大人の意見では、取り消しとか白黒ボタンのやり直しボタンが欲しい、とか、
ファイルに保存するボタンが欲しいとか、リクエストがありました。
Canvasで作っているから、ファイルに保存するようにする機能をつけるのは
難しくないみたいなんだけど、現状Chromeから右クリックすると、
透過画像になるんですよ。それだと白は白ででちゃうので、消しゴムとは
ちょっと違う意味になっちゃうんですよね。
ファイルに出す時に、背景に白をつけるようにするのか、そこも迷い中だったり。
ということで、ご意見ご感想は、随時歓迎です。ありがとうございます♪
反映は気長にお待ちくださいませ。
iPadで使えないの？って要望もありました～。
タッチパッド対応・・・すぐにはできないので
気が向いたらがんばってみます。
茶色も追加するんですね[Em146]
雀さんを書こうとして、茶色がないので黒で書きました。
地面とか樹木を書く時も茶色があるといいと思います。
ちびさんには茶色は不人気なんですか～？
茶色より、水色とかピンクの方が喜びそうですよね[Em140]
ちびっこおえかき というなまえが おとなはつかうなといっているようです。
おれんじ ではなくて だいだい では？
ぴんく ではなくて ももいろ では？
にたいろなのに
あお と みずいろ がはなれているし、
あか と だいだい と きいろ もはなれている。
2年後。
お前まだ ちびっこおえかき 使ってるの？やーい、ちびっこ！
うっ！使いたいけど、もう使わない！
そこで新バージョン「オ・ト・ナのお絵描き」リリースです！
茶色のクレヨンはあまり減らない印象があります。
とりあえず、茶色はさくっと追加してみたので、よかったら
小鳥さんをかいてあげてくださいな♪
茶色のランドセル、女児にはけっこう人気ありますけどね～。
ターゲット層を明確にするのは大切で、似たようなお絵かきアプリや
より高性能なものは、世の中にたくさんありますので、対象は狭くて
いいんだと思うんですよ。
ターゲット外の人が使ってくださるのも、もちろん大歓迎ではあります。
イマドキのちびっこであるちび弟をみると、やはり、
だいだい、より、おれんじ、ももいろ、より、ぴんくの方が、
なじみ深いんだと思うんですよね。私も迷ったんだけど。
似た色をグラデーションで並べていく、というのもありですけれど、
色を表示した時に、似たような色ではないものが並んだ方がきれい、
よく使う色は上の方にあったほうがいい、という観点でこういう
並び順にしてあります。
既にあるペイントと同じもの作っても面白くないでしょ？
大人のお絵描きは私は作る気がないので、Tomさんオリジナルバージョンで
リリースしていだだくといいのではないのかな、と思います。
ちびメモ
・現在ちび弟は、白で絵を描いて、「1・2・3・しろくま！！」と
呪文をとなえながら、黒線の絵を出現させるのがブーム
ちび兄弟からの追加色リクエスト
・はいいろ（シルバー風）
・おうどいろ（ゴールド風）
・あおむらさき
・あかむらさき
・にじいろ！
・とうめい！
・はだいろ
かこさん、こんばんは[Em98]
ちびっこおえかきで書いたうちのちびっこの絵を、
私のブログに載せたので、リンクを貼らせて頂きました。
よろしくお願いします。
かわいいちびっこ、ありがとうございます♪
茶色追加してよかったです！
こちらからもリンクさせていただきました～。
こんばんは。
しばいつんさん→アリサヤさん経由でやってきました。
私も描いてみましたが
マウスでお絵かきは難しいですけど楽しいですね。
いらっしゃいませ♪遊んでくださりありがとうございます☆
マウスで描くの難しいですよね、私もうまく描けません笑。