ちら裏メモ

TOP 　＞　文字を手書き入力する（１）

作成日：2024年07月30日

文字を手書き入力する（１）

どうも、にゃん太です

スマホで文字入力をしている時、面倒に感じる事はありませんか？

今回のメモでは、文字入力を手書きで行う方法について書いていきます

文字を手書きする

HTMLで文字を手書きする仕組みを作成してみます

まずは、作成したサンプルを表示します

これは、次のようなコードで動いています

HTML
<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='content-language' content='ja'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=1'>
</head>
<body>
  <canvas id='handWriteBox' width=325 height=100 style='border:1px solid #000;'></canvas>
  <button id='boxClear' class='btn' type='button'>Clear</button>
  <button id='boxSave' style='margin-top: 10px; padding: .3em .5em; font-size:16px;'>Save</button>
</body>
</html>
<script>
const hwb = document.getElementById('handWriteBox');
const ctx = hwb.getContext('2d');
let writing = false;
let lastPosition = { x: null, y: null };

/* 線の形状, 太さ */
ctx.lineCap = 'round';
ctx.lineWidth = 2;
ctx.fillStyle = '#FFF';
ctx.fillRect(0, 0, hwb.width, hwb.height);

/* 描画 */
function draw(x, y) {
  if(writing){
    if(lastPosition.x !== null && lastPosition.y !== null){
      ctx.moveTo(lastPosition.x, lastPosition.y);
      ctx.lineTo(x, y);
      ctx.stroke();
    }
    lastPosition.x = x;
    lastPosition.y = y;
  }
}

/* 描画の開始 */
function lineStart() {
  ctx.beginPath();
  writing = true;
}

/* 描画の終了 */
function lineEnd() {
  ctx.closePath();
  writing = false;
  lastPosition.x = null;
  lastPosition.y = null;
}

/* PC用 */
hwb.addEventListener('mousedown', lineStart);
hwb.addEventListener('mouseup', lineEnd);
hwb.addEventListener('mouseout', lineEnd);
hwb.addEventListener('mousemove', (e) => {
  draw(
    e.layerX - hwb.getBoundingClientRect().left,
    e.layerY - hwb.getBoundingClientRect().top
  );
});

/* スマホ、タブレット用 */
hwb.addEventListener('touchstart', lineStart);
hwb.addEventListener('touchcancel', lineEnd);
hwb.addEventListener('touchend', lineEnd);
hwb.addEventListener('touchmove', (e) => {
  e.preventDefault();
  draw(
    e.touches[0].clientX - hwb.getBoundingClientRect().left,
    e.touches[0].clientY - hwb.getBoundingClientRect().top
  );
});

/* 描画の削除 */
document.getElementById('boxClear').onclick = () => {
  ctx.clearRect(0, 0, hwb.width, hwb.height);
  ctx.fillRect(0, 0, hwb.width, hwb.height);
}

/* 手書き文字を保存 */
document.getElementById('boxSave').onclick = () => {
  let jpeg = hwb.toDataURL('image/jpeg');
  let a = document.createElement('a');
  a.href = jpeg;
  a.download = 'tegakimoji.jpeg';
  a.click();
  a.remove();
};
</script>

WEBビューアで動作させる

上述のコードでHTMLで動作する事は分かりました

次は、これをファイルメーカー上で動作さてみましょう

レイアウトにWEBビューアを追加し、上記コードをコピーします

WEBビューア
"data:text/html,
<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='content-language' content='ja'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=1'>
</head>
<body>
  <canvas id='handWriteBox' width=325 height=100 style='border:1px solid #000;'></canvas>
  <button id='boxClear' class='btn' type='button'>Clear</button>
  <button id='boxSave' style='margin-top: 10px; padding: .3em .5em; font-size:16px;'>Save</button>
</body>
</html>
<script>
const hwb = document.getElementById('handWriteBox');
const ctx = hwb.getContext('2d');
let writing = false;
let lastPosition = { x: null, y: null };

/* 線の形状, 太さ */
ctx.lineCap = 'round';
ctx.lineWidth = 2;
ctx.fillStyle = '#FFF';
ctx.fillRect(0, 0, hwb.width, hwb.height);

/* 描画 */
function draw(x, y) {
  if(writing){
    if(lastPosition.x !== null && lastPosition.y !== null){
      ctx.moveTo(lastPosition.x, lastPosition.y);
      ctx.lineTo(x, y);
      ctx.stroke();
    }
    lastPosition.x = x;
    lastPosition.y = y;
  }
}

/* 描画の開始 */
function lineStart() {
  ctx.beginPath();
  writing = true;
}

/* 描画の終了 */
function lineEnd() {
  ctx.closePath();
  writing = false;
  lastPosition.x = null;
  lastPosition.y = null;
}

/* PC用 */
hwb.addEventListener('mousedown', lineStart);
hwb.addEventListener('mouseup', lineEnd);
hwb.addEventListener('mouseout', lineEnd);
hwb.addEventListener('mousemove', (e) => {
  draw(
    e.layerX - hwb.getBoundingClientRect().left,
    e.layerY - hwb.getBoundingClientRect().top
  );
});

/* スマホ、タブレット用 */
hwb.addEventListener('touchstart', lineStart);
hwb.addEventListener('touchcancel', lineEnd);
hwb.addEventListener('touchend', lineEnd);
hwb.addEventListener('touchmove', (e) => {
  e.preventDefault();
  draw(
    e.touches[0].clientX - hwb.getBoundingClientRect().left,
    e.touches[0].clientY - hwb.getBoundingClientRect().top
  );
});

/* 描画の削除 */
document.getElementById('boxClear').onclick = () => {
  ctx.clearRect(0, 0, hwb.width, hwb.height);
  ctx.fillRect(0, 0, hwb.width, hwb.height);
}

/* 手書き文字を保存 */
document.getElementById('boxSave').onclick = () => {
  let jpeg = hwb.toDataURL('image/jpeg');
  let a = document.createElement('a');
  a.href = jpeg;
  a.download = 'tegakimoji.jpeg';
  a.click();
  a.remove();
};
</script>

これを動かしてみると……、

マウスで書いたのでかなり歪ですが、とりあえずファイルメーカー上でも手書きできる様になりました

長くなったので今回はここまで

次回は、手書きした文字をフィールドに保存してテキスト化する処理を行います

文字を手書き入力する（２）へ続きます

以上で今日のメモ書きは終了です

内容はいかがでしたか？

もしご意見やご要望、誤りの指摘などありましたら、下記フォームよりお気軽にご連絡ください

ご連絡フォーム

概要連絡内容メールアドレス