ちびこといっしょ

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

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

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

oekaki.png

『ちびっこおえかき』

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

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

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

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

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

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

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

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

♪ こちらもどうぞ ♪

新フォーゼガンバライド設置! さっきスーパーに行って、データカードダスコーナーをのぞくと、 ガンバライドがフォーゼ仕様になってました。 「9/15稼働予定ですので、お待ちください」との張り紙。 アストロスイッチをセットする場所が4ヶ所。 ...
フォーゼドライバー入荷状況(津田沼12/8)... 今日、長男と一緒にイオン津田沼店に行ってきました。 目的は、機動戦士ガンダムAGEのゲイジングバトルだったんですが。 仮面ライダーフォーゼコーナーに   広告のフォーゼドライバー200個は完売しまし...
ペントンとおうちで遊ぼう♪ 夏休み、いかがお過ごしですか? 暑いから公園はつらい、毎日おでかけするお金も体力もない、 レゴも折り紙も飽きちゃった。 そんなときは、ちょっと気分を変えて キッズ・ウェブ【トレジャーズ!】 で遊んでみません...
新仮面ライダーフォーゼと子供受けとおもちゃ供給... プリキュア見ながら書いてます♪ フォーゼ初回の感想です。 バンブルビーさんが登場で驚き。格好いいですね。 おおきいオトモダチはどうとるかは分かりませんが、 ちいさいオトモダチはきっとフォーゼ大好きだと思います。 少...
ジャイアン主義 弟の物はオレのもの。オレの物はオレの物。 そんなジャイアンな兄6歳。 弟のオーメダルをムリヤリ奪い取ってギャー泣きさせているところに 「あ、ジャイアンがいるー」と声をかけると、 「ジャイアンじゃないっ、ジャイアンっ...

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

コメント

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

  • いいねこれ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 2年後。

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

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

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

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

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

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

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

  • ちびメモ

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

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

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

    ・はだいろ

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

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

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

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

コメントを残す

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