ちびこといっしょ

二歳差・保育園卒・小学生のちび兄弟。育児と仕事と日常の話。ゴマアレルギーも。

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

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

oekaki.png

『ちびっこおえかき』

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

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

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

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

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

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

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

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

♪ こちらもどうぞ ♪

明治チョコレートパズルの奥深さにうなる~チョコパズルの選び方!... ♪プレゼント・景品におすすめ!500円くらいで買えちゃう  チョコパズルの違いと年齢別の選び方についてまとめてみました♪ ちび弟6歳が、クリスマスイベントで、明治ハイミルク(Hi milk) チョコレートパズルをもらっ...
おつかい&LBXオーディーンキャンペーンに応募☆... 長男6歳がLBXキャンペーンに応募するというので、 いつものように、 ・ハガキは自分で、おこづかいで買うこと ・抽選だから当たることはめったにないこと ・抽選は12月だから、当たってもクリスマス位に届くこと を念を押し...
メテオドライバー&メテオギャラクシーGet☆... 昨日は、家族4人で、お年玉持って初売りに♪ お小遣いと合わせて、 6歳長男は4500円ほど、4歳次男は5000円ほど。 ***** バスを待つ間、お休みの役所の広い駐車場で 走り回る兄弟。シャキッとポーズをとっ...
星のカービィ☆Wii届きました 去年買った毛糸のカービィ Wiiはすごく可愛くて 5歳だった長男と一緒に、たくさん遊びました。 2人しかプレイできないので、3歳次男は横で見て、 カービィになった気分で遊んでいることが多かったです。 絶対ゲーム...
ペントンとおうちで遊ぼう♪ 夏休み、いかがお過ごしですか? 暑いから公園はつらい、毎日おでかけするお金も体力もない、 レゴも折り紙も飽きちゃった。 そんなときは、ちょっと気分を変えて キッズ・ウェブ【トレジャーズ!】 で遊んでみません...

♪ Pick up items ♪ スポンサードリンク
持ち手付き財布 IH ご飯土鍋 フィルムミラー 北欧紅茶
すこやかふりかけ エーラベルカレー 焼肉のたれ 鴻巣ラーメン

コメント

  • やってみました~。
    色の名前がひらがななんで、
    息子でもちゃんと色をかえることができました。

  • いいねこれ。

    いろのところに文字だけでなく色を付けてくれるとおバカでもより直感的に使えそう。
    しろと同じのを太くして「けしごむ」にして追加すれば、1個で2機能作れるかも。

  • 遊んでくれてありがとう~。

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

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

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

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

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

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

    ということで、ご意見ご感想は、随時歓迎です。ありがとうございます♪
    反映は気長にお待ちくださいませ。

  • iPadで使えないの?って要望もありました~。
    タッチパッド対応・・・すぐにはできないので
    気が向いたらがんばってみます。

  • 茶色も追加するんですね[Em146]
    雀さんを書こうとして、茶色がないので黒で書きました。
    地面とか樹木を書く時も茶色があるといいと思います。
    ちびさんには茶色は不人気なんですか~? 
    茶色より、水色とかピンクの方が喜びそうですよね[Em140]

  • ちびっこおえかき というなまえが おとなはつかうなといっているようです。

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

    にたいろなのに
    あお と みずいろ がはなれているし、
    あか と だいだい と きいろ もはなれている。

  • 2年後。

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

    そこで新バージョン「オ・ト・ナのお絵描き」リリースです!

  • 茶色のクレヨンはあまり減らない印象があります。
    とりあえず、茶色はさくっと追加してみたので、よかったら
    小鳥さんをかいてあげてくださいな♪
    茶色のランドセル、女児にはけっこう人気ありますけどね~。

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

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

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

    既にあるペイントと同じもの作っても面白くないでしょ?
    大人のお絵描きは私は作る気がないので、Tomさんオリジナルバージョンで
    リリースしていだだくといいのではないのかな、と思います。

  • ちびメモ

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

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

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

    ・はだいろ

  • かこさん、こんばんは[Em98]
    ちびっこおえかきで書いたうちのちびっこの絵を、
    私のブログに載せたので、リンクを貼らせて頂きました。
    よろしくお願いします。

  • かわいいちびっこ、ありがとうございます♪
    茶色追加してよかったです!
    こちらからもリンクさせていただきました~。

  • こんばんは。
    しばいつんさん→アリサヤさん経由でやってきました。
    私も描いてみましたが
    マウスでお絵かきは難しいですけど楽しいですね。

  • いらっしゃいませ♪遊んでくださりありがとうございます☆
    マウスで描くの難しいですよね、私もうまく描けません笑。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です