日曜プログラマー的オリジナルお絵描きツールを作る

2017年03月22日 17時00分更新

文● 加藤兄　プログラム作成･監修●松下浩則

●登場人物

尾地定数（おじ･さだかず）自称「日曜プログラマー」。芽衣のおじ。

開発芽衣（かいほつ･めい）尾地のめいで、近所に住む中学生。

おじ　ゲームにしろ、ツールにしろ、マウス操作をプログラムで読み取るのは必ず必要になることなんだよね。
めい　どした、おじさん。やぶから棒に。
おじ　やぶから棒なんて言葉どこで覚えてくるんだよ。
めい　こないだ見たドラマで言ってた。ていうかそれはどうでもよくて、マウス操作がどうしたって？
おじ　そうそう、JavaScriptで、どうやってマウスの操作を読み込むかを理解しておくのはいろいろ役に立つと思うんだ。というわけで、今週の週刊アスキー（3月21日発売）No.1119の連載『JavaScriptの部屋』で取り上げた、オリジナルのお絵描きツールはなかなかいい素材だったんじゃないかな。

めい　これまでだって、“再生する”みたいなボタンをマウスでクリックするって操作があったじゃん？
おじ　それはそうだけど、これまでは、押されたかどうかだけが問題で、マウスカーソルの位置はどうでもよかったよね。でもより高度なプログラムではそれが必要になることもある。特にゲームはそうかも。
めい　とはいってもこれまでとよく似てるよね。「onMouseDown」で、マウスボタンが押されたとき、「onMouseMove」でマウスカーソルを動かしたときみたいなのがわかって、それぞれ定義しておいた関数を実行するっていう。
おじ　うん、そういったイベントが起こったときに自動で関数を実行してくれるしくみがJavaScriptの便利なところなんだ。まぁ、最近のプログラム言語の多くはそうだけど。
めい　マウスカーソルの位置がわかれば、キャンバスでその位置に線を引けば絵が描けるんだったよね。
おじ　カーソルの位置は「event.clientX、event.clientY」というプロパティで読み出せるんだけど、これは、ブラウザーのウインドー内の位置なので、キャンバス上の位置にするには少し工夫が必要だったよね。詳しくは記事を見てもらうとして。
めい　あとは、描いた絵を保存する方法も教えてもらったんだった。
おじ　そう、キャンバスをpngファイルに変換して保存。これも今後いろいろなプログラムで応用がききそうだよね。