JavaScript

drawingboard.jsを使ってマウスで楽しめるお絵描きボードを実装する方法

  /

今回は、ブラウザ上で楽しめるお絵描きボードを実装する方法をご紹介します。この方法を使えば、簡単にブラウザ上で動作するお絵描きツールを作成できます。例えば、子供向けの教育サイトやインタラクティブなWebコンテンツを提供する場面で、この機能を活用することができるでしょう。

特に初心者エンジニアにとっては、ブラウザ上で動くJavaScriptの活用例として非常に学びやすい題材です。実際に手を動かして学ぶことで、Webアプリケーションの基本的な構築方法を理解できるでしょう。

このチュートリアルでは、drawingboard.jsというライブラリを使用します。このライブラリは、Canvasを使ったシンプルなお絵描きアプリを容易にWebサイトに統合できる便利なツールです。次に進む前に、このライブラリをプロジェクトに導入する方法と基本的な設定について説明します。

Contents

drawingboard.jsの導入

まず、プロジェクトにdrawingboard.jsを追加する必要があります。drawingboard.jsは、GitHubから簡単にダウンロードすることができます。また、CDNから直接読み込むことも可能です。以下のように、HTMLファイルにライブラリをインクルードします。

<script src="https://cdn.jsdelivr.net/npm/drawingboard.js"></script>

　
これで、drawingboard.jsを使う準備が整いました。次に進み、CSSとHTMLの記述を見ていきましょう。

ブラウザにマウスで楽しめるお絵描きボードを実装するCSSの記述

お絵描きボードを表示するためには、適切なCSSスタイルの設定が必要です。以下に、基本的なスタイルを示します。drawingboard.cssファイルを読み込むことで、標準的なスタイルが適用されますが、必要に応じてカスタマイズすることもできます。

<link rel="stylesheet" href="css/drawingboard.css">
<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0;
	line-height:1.4em;
	text-align:center;
}
.board {
	margin: 0 auto;
	width: 300px;
	height: 300px;
}
#default-board {
	width: 700px;
	height: 400px;
}
-->
</style>

　
このCSSでは、bodyのマージンとパディングをリセットし、ページ全体がきちんとレイアウトされるようにしています。また、h1タグで見出しを中央に配置し、boardクラスでお絵描きボードの大きさや配置を設定しています。default-boardはデフォルトのボードサイズを指定していますが、用途に応じてこの値は自由に変更可能です。

お絵描きボードを表示するためのHTMLの記述

次に、HTMLコードを見ていきましょう。ここでは、お絵描きボードが表示されるエリアを用意します。このエリアは、ユーザーが実際にマウスで絵を描く領域です。

<h1>マウスを使ってお絵描きができます。<br/>
ボードの上のツールで色・線幅変更・消しゴム等が行えます。</h1>

<div class="example" data-example="1">
	<div class="board" id="default-board"></div>
</div>

　
このコードでは、h1タグで説明文を表示し、次にお絵描きボードを配置するためのdivタグを使用しています。このdivタグには、id=”default-board”が付与されており、JavaScriptコードでこのエリアを操作するための目印となります。

drawingboard.jsを使ったJavaScriptの記述

では、実際にdrawingboard.jsを使用して、お絵描きボードを機能させるためのJavaScriptコードを記述します。

まず、必要なJavaScriptファイル、jquery-1.10.1.min.js、drawingboard.js、board.js、control.js、color.js、drawingmode.js、navigation.js、size.js、download.js、utils.jsファイルを読み込みます。
これらのスクリプトは、drawingboard.jsとその関連ファイルを読み込むために使用されます。各ファイルがそれぞれ異なる機能を担当しており、例えばcolor.jsは色の変更、drawingmode.jsは描画モードの設定、download.jsは描いた絵をダウンロードする機能を提供します。

次に、実際にお絵描きボードを作成し、id=”default-board”のエリアに表示するためのコードを記述します。
DrawingBoard.Board(お絵描きボードエリア)を設定します。
このコードでは、DrawingBoard.Boardというクラスを使用して、default-boardというidを持つエリアにお絵描きボードを作成しています。このシンプルな記述で、基本的な機能を持つお絵描きボードが表示されます。

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src="js/drawingboard.js"></script>
<script src="js/board.js"></script>
<script src="js/controls/control.js"></script>
<script src="js/controls/color.js"></script>
<script src="js/controls/drawingmode.js"></script>
<script src="js/controls/navigation.js"></script>
<script src="js/controls/size.js"></script>
<script src="js/controls/download.js"></script>
<script src="js/utils.js"></script>

<script data-example="1">
	var defaultBoard = new DrawingBoard.Board('default-board');
</script>

　

drawingboard.js：ブラウザにお絵描きボードを表示するデモページ

以下のリンクから、実際に動作するお絵描きボードのデモを確認できます。このデモを参考にして、自分のプロジェクトに適用してみてください。

drawingboard.js：ブラウザにお絵描きボードを表示するデモ

さらに詳しい情報やソースコードについては、drawingboard.jsの公式サイトを参照してください。以下のリンクからアクセスできます。
ソース元：Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website.

まとめ

drawingboard.jsを使用することで、ブラウザ上で簡単にお絵描きボードを実装することができます。このチュートリアルでは、基本的な導入方法から、CSSやHTML、JavaScriptの記述、さらにはカスタマイズや追加機能についても説明しました。

この方法を活用することで、インタラクティブなWebアプリケーションを簡単に作成でき、エンジニア初心者でも気軽に学習を始められます。ぜひ、あなたのプロジェクトにdrawingboard.jsを取り入れて、楽しんでみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

drawingboard.js お絵描きボード
関連記事