ちびこといっしょ

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

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

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

oekaki.png

『ちびっこおえかき』

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

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

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

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

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

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

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

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

♪ こちらもどうぞ ♪

オーズの終わりとフォーゼの始まり... 子供は常に先を見ています。 今週末、仮面ライダーオーズ、最終回ですね。 私はいろいろと感慨深いのですが、子供らは、 オーズが終わるの?じゃあ、フォーゼが始まるんだねっ! とワクワクドキドキです。 Amazon でフ...
『仮面ライダー鎧武(ガイム)』特別号第2弾~スポーツ報知を買ってしまった... 遅ればせながら、2013年11月26日発売のスポーツ報知 仮面ライダー特別号を買ってしまいました。 スポーツ報知、タブロイド判のヒーロー特集は、店頭で見かけると、 いつも、つい手に取ってしまうのですよね。 仮面ライダー...
フォーゼ・アストロガシャポン キターッ!!... 今日はパートワークの面接に行ってきました。 結果はまだですが、全力を尽くしてきたので悔い無しです。 帰りに、次男と約束していたポケモン、 鼻水をたらすクマシュンのぬいぐるみを探しに、ヨーカドーへ。 (長男にはビクテ...
ダンボール戦機だった! 今、突然、   X ダンボール戦記   O ダンボール戦機 ということに気づきました。 今までの記事で、直せるところは直しました。 ごめんなさい。 今日、パート三次試験の帰りに、長男の貯めたお小遣いで 本日発売予定の...
メテオドライバーでプラネタリウム?... 4歳次男が、お年玉で買いたかった 仮面ライダーフォーゼのメテオドライバー。 わずかにお金が足りなかったので、おこづかいが貯まるまで、 私のクロゼットで預かっていたのですが、 昨日めでたく、Get&開封できました♪ ...

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

コメント

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

  • いいねこれ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 2年後。

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

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

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

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

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

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

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

  • ちびメモ

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

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

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

    ・はだいろ

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

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

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

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

コメントを残す

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