ちびこといっしょ

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

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

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

oekaki.png

『ちびっこおえかき』

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

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

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

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

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

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

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

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

♪ こちらもどうぞ ♪

『仮面ライダー鎧武(ガイム)』特別号第2弾~スポーツ報知を買ってしまった... 遅ればせながら、2013年11月26日発売のスポーツ報知 仮面ライダー特別号を買ってしまいました。 スポーツ報知、タブロイド判のヒーロー特集は、店頭で見かけると、 いつも、つい手に取ってしまうのですよね。 仮面ライダー...
壊れたクリスマスおもちゃ 小学校一年生のちび兄、保育園年中のちび弟、 朝からクリスマスプレゼントを開けて、 ウキウキで遊んでいます。 私たち親からのプレゼントは、ちび兄には、ダンボール戦機W PSP版。 ラッキーなことに、初回限定版(パスワード...
おつかい&LBXオーディーンキャンペーンに応募☆... 長男6歳がLBXキャンペーンに応募するというので、 いつものように、 ・ハガキは自分で、おこづかいで買うこと ・抽選だから当たることはめったにないこと ・抽選は12月だから、当たってもクリスマス位に届くこと を念を押し...
星のカービィWiiクリア☆ っと言ってもメインモードですが。 難易度も、子供とやるのにちょうど良かったですね。 二つの週末にがっつり、平日ちょこちょこやり、 本日、クリア! だんだんと難しくなりましたが、嫌になるほどではなかったです。 とって...
フォーゼガンバライドが稼働しない件... 昨日スーパーに行ったら、ガンバライドの中身が まだオーズ版でした。 今回は、デモ画面を見て気づきました。 大きめのお友達は、遠巻きにのぞいて手を出していない様子。 でも、 ・ 稼働予定の前々週に使用停止+開始...

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

コメント

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

  • いいねこれ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 2年後。

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

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

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

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

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

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

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

  • ちびメモ

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

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

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

    ・はだいろ

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

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

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

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

コメントを残す

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