ちびこといっしょ

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

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

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

oekaki.png

『ちびっこおえかき』

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

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

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

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

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

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

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

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

♪ こちらもどうぞ ♪

ガンダムエクストリームVSを未就学児がやってみる... 夫が注文した、PS3の機動戦士ガンダム EXTREME VS。 昨日から、6歳長男と4歳次男が、フリーバトルモードで 戦闘中です。 ケンカしないように対戦ではなく、2人協力プレイモードで。 味方戦力ゲージを無限...
なめこ栽培 最近、夫が Android、ちび兄弟が iPad で育てているのは なめこ。 地味に、毎日楽しそうです。 無料で、iPhone、iPod touch でも育てられます。 加湿器や、栄養剤も使って育て、収穫。販売...
紙製フォーゼドライバー 画像は乗せない派(笑)の私ですが、 てれびくん11月号付録のフォーゼドライバーが 良くできていたので。 アストロスイッチは長男作です。 スイッチをはめたり外したりできます。 本物おもちゃつきだと、すぐに売り...
ブレイクボンバー対戦セットGET!... 以前から、ちび兄弟が欲しがっていたクロスファイト・ビーダマンの ブレイクボンバー対戦セット。 それなりに遊ぶ場所もとるし、部品もすぐ無くしそうだし、 買うのはやめよう!って言っていたのですが、 北海道から来ていた、おじ...
LBXオーディーン感想 長男が、自分で組み上げたオーディーンのプラモを しみじみと眺め、 「オーディーン、かっこいいなぁ」 と突如叫びました。 次男に、LBXでどれが一番好き?と聞くと 「オーディーンがいちばんカッコイイ!」 と。 長男にも...

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

コメント

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

  • いいねこれ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 2年後。

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

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

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

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

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

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

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

  • ちびメモ

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

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

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

    ・はだいろ

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

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

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

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

コメントを残す

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