Scroll,Fixed,0 Board Pen Draw,Erase,0 5,10,20,40,0

ウェブですぐに使える

ホワイトボード 黒板

何か図形を書きたくなった時にすぐに使えるホワイトボード/黒板です。

このウェブブラウザ対応ホワイトボード/黒板シミュレーターは、教育やビジネス、アイデアのブレインストーミングに最適なツールです。以下の主要な機能を備えています。
ボード色の変更
お好みのボード色に変更して、視覚的なプレゼンテーションをより効果的にカスタマイズできます。白や黒だけでなく、さまざまな色から選択可能です。
ペンのカラー変更
カラフルなペンを使って、メモや図形を自由に描くことができます。複数の色を選ぶことで、情報を強調したり、区別したりすることが簡単です。
ペンの太さ変更
必要に応じてペンの太さを調整可能。細かい描写から太字の強調まで、自在に描けます。
イレーサーの太さ変更
消したい部分を簡単に修正できるように、イレーサーの太さも調整できます。大きな範囲を一気に消したり、細かい部分を丁寧に修正したりできます。
このシミュレーターは直感的な操作性を重視しており、誰でもすぐに使いこなせます。オンライン授業やリモート会議、アイデアのメモ書きなど、さまざまなシーンで活用できます。
機能は限定的です。保存機能等は有りません。
ホワイトボード/黒板とは:
ホワイトボードと黒板は、教育やビジネスの現場で情報伝達に欠かせないツールです。それぞれ異なる特徴を持っており、利用シーンによって使い分けがされます。
ホワイトボードは、通常、白色の滑らかな表面を持ち、専用のマーカーを使用して書き込みます。マーカーは乾燥することで簡単に消去できるため、繰り返し利用が可能です。また、色付きマーカーを使用することで、情報を視覚的に豊かに表現することができます。ホワイトボードは現代的なオフィスや教室で多く見られ、ミーティングやプレゼンテーション、授業で頻繁に使用されます。さらに、プロジェクトの計画やブレインストーミング、タスク管理などでも重宝されています。ホワイトボードの大きな利点は、消去が簡単でチョークの粉が発生しないため、清潔で使いやすいことです。また、磁性のボードもあり、マグネットを使って資料を貼り付けることもできます。しかし、ホワイトボードマーカーのインクが乾くと消しにくくなる場合がある点や、インクが服や家具に付くとシミになることがある点には注意が必要です。
黒板は、歴史的に長く使用されてきた視覚的コミュニケーションツールで、黒または緑の表面にチョークで書き込みます。チョークは乾燥した石灰石で作られ、粉末が発生するため、使用時には注意が必要です。黒板は学校教育の現場で特によく見られ、生徒と教師とのインタラクティブなコミュニケーションを促進します。黒板は書き味が良く、滑らかに線を描くことができるため、図やグラフの描写に向いています。また、チョークの色を変えることで、情報を強調することも可能です。黒板の利点としては、消耗品であるチョークが比較的安価であることや、長時間使用しても書きやすい点が挙げられます。ただし、チョークの粉が飛散することにより、アレルギーを引き起こす場合があることや、黒板消しで消す際に手や服が汚れることがデメリットとされています。
これらの特徴を考慮し、ホワイトボードと黒板の適切な使用方法を選ぶことで、効果的な情報伝達が可能となります。それぞれのツールには利点と欠点があり、利用する環境や目的によって最適なものを選ぶことが重要です。現代の教育やビジネスのシーンでは、ホワイトボードが多く用いられていますが、黒板も依然として特定の場面では重宝されています。どちらも、視覚的な情報共有を通じてコミュニケーションを促進し、効率的な学習や作業を支援するための重要なツールです。
現時点のコードは以下の通り: canvasdraw.js
/**
 * whiteboard
 *
 * @author ao-system, Inc.
 * @date 2025-01-04
 */
(() => {
	'use strict';
	new class {
		#canvas = document.querySelector('canvas');
		#penColor = document.getElementById('penColor');
		#penMode = document.getElementById('penMode');
		#penWidth = document.getElementById('penWidth');
		#penClear = document.getElementById('penClear');
		#penWidthList = [5, 10, 20, 40];
		#cursor = [
			'url(./image/cursor_pen5.svg) 2.5 2.5, pointer',
			'url(./image/cursor_pen10.svg) 5 5, pointer',
			'url(./image/cursor_pen20.svg) 10 10, pointer',
			'url(./image/cursor_pen40.svg) 20 20, pointer',
		];
		#ctx;
		#lineWidth = 5;
		#isDrawing = false;
		#lastX = 0;
		#lastY = 0;
		#resizeTimer = null;
		constructor() {
			this.#ctx = this.#canvas.getContext('2d');
			this.#init();
		}
		#init() {
			// Resize listener
			window.addEventListener('resize', () => {
				clearTimeout(this.#resizeTimer);
				this.#resizeTimer = setTimeout(() => {
					this.#onResize();
				}, 500);
			});
			this.#onResize();
			this.#penColor.addEventListener('change', () => {
				this.#penMode.shadowRoot.querySelector('label').click();
			});
			this.#penClear.addEventListener('click', () => {
				this.#ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
			});
			this.#penMode.addEventListener('click', () => {
				if (this.#penMode.getAttribute('value') == '0') {
					this.#penWidth.shadowRoot.querySelector('label').click();
				} else {
					this.#penWidth.shadowRoot.querySelectorAll('label')[3].click();
				}
				this.#setCanvasCursor();
			});
			this.#penWidth.addEventListener('change', () => {
				this.#setCanvasCursor();
			});
			this.#canvas.addEventListener('mouseover', () => {
				this.#setCanvasCursor();
			});

			// Mouse events
			this.#canvas.addEventListener('mousedown', (event) => {
				this.#startDrawing(event.offsetX, event.offsetY);
			});
			this.#canvas.addEventListener('mouseup', () => {
				this.#stopDrawing();
			});
			this.#canvas.addEventListener('mouseleave', () => {
				this.#stopDrawing();
			});
			this.#canvas.addEventListener('mousemove', (event) => {
				if (this.#isDrawing) {
					this.#draw(event.offsetX, event.offsetY);
				}
			});

			// Touch events
			this.#canvas.addEventListener('touchstart', (event) => {
				const touch = event.touches[0];
				const rect = this.#canvas.getBoundingClientRect();
				this.#startDrawing(touch.clientX - rect.left, touch.clientY - rect.top);
			});
			this.#canvas.addEventListener('touchend', () => {
				this.#stopDrawing();
			});
			this.#canvas.addEventListener('touchcancel', () => {
				this.#stopDrawing();
			});
			this.#canvas.addEventListener('touchmove', (event) => {
				if (this.#isDrawing) {
					const touch = event.touches[0];
					const rect = this.#canvas.getBoundingClientRect();
					this.#draw(touch.clientX - rect.left, touch.clientY - rect.top);
				}
			});
		}
		#startDrawing(x, y) {
			this.#isDrawing = true;
			this.#drawCircle(x, y);
			[this.#lastX, this.#lastY] = [x, y];
		}
		#stopDrawing() {
			this.#isDrawing = false;
			this.#ctx.beginPath();
		}
		#draw(x, y) {
			this.#drawCircle(x, y);
			this.#ctx.lineWidth = this.#penWidthList[this.#penWidth.getAttribute('value')];
			if (this.#penMode.getAttribute('value') == '0') {
				this.#ctx.strokeStyle = this.#penColor.value;
			}
			this.#ctx.beginPath();
			this.#ctx.moveTo(this.#lastX, this.#lastY);
			this.#ctx.lineTo(x, y);
			this.#ctx.stroke();
			[this.#lastX, this.#lastY] = [x, y];
		}
		#drawCircle(x, y) {
			const radius = this.#penWidthList[this.#penWidth.getAttribute('value')] / 2;
			this.#ctx.beginPath();
			this.#ctx.arc(x, y, radius, 0, Math.PI * 2);
			if (this.#penMode.getAttribute('value') == '0') {
				this.#ctx.fillStyle = this.#penColor.value;
				this.#ctx.globalCompositeOperation = 'source-over';
				this.#ctx.fill();
			} else {
				this.#ctx.globalCompositeOperation = 'destination-out';
				this.#ctx.fillStyle = 'rgba(0, 0, 0, 1)';
				this.#ctx.fill();
			}
		}
		#setCanvasCursor() {
			this.#canvas.style.cursor = this.#cursor[this.#penWidth.getAttribute('value')];
		}
		#onResize() {
			this.#canvas.width = '';
			this.#canvas.height = '';
			const rect = this.#canvas.getBoundingClientRect();
			this.#canvas.width = rect.width;
			this.#canvas.height = rect.height;
		}
	}
})();
2025年1月初版
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。