入力フォームのはみ出す文字を縮小して全体表示する機能の実装について

はじめに

今回の記事はエンジニアを目指す前の
物流企業の事務だった私がプログラミングを使って
課題を解決していく過去のお話です。

背景

前職にて、市販の業務ソフトを使って、
人事書類のワークフロー化に携わることになりました。
その時、ソフトの既存機能では叶えられない問題が１つありました。
__「データーベースから出力した文字に対して、文字を縮小して全体表示する機能」__がなく見にくいことです。
そこで解決方法を探していると追加機能をjavascriptで実装出来るとありましたので実行に移すことにしました。

因みに当時の私のスキルはjavascriptを全く使ったことがない素人です。
ソフトについてきたjavascript追加実装のマニュアルを見ながら作成しました。

課題の前提条件

・　入力フォームは縦と横のサイズ(px)からなる。
・　入力文字はフォントサイズ(px)からなる。
・　縦と横のサイズは固定されている。
・　入力する文字数が都度与えられる。
・　文字のフォントサイズを求めたい。

解法に対する計算方法

上記条件を基に入力された文字数に応じて変動する
フォントサイズXを求める式を考える。

フォントサイズ = X\\
横幅 = W\\
縦幅 = H\\
文字数 = L\\
横幅に入る文字数 = W÷X\\
縦幅に入る文字数 = H÷X\\
文字数(L) = (W÷X) × (H÷X)\\
X^2 = (W × H)÷L\\
X = {\sqrt{(W × H)÷L}}

結果、フォームに文字がぴったりおさまるフォントサイズを求める式が出来た。
これをプログラミングに落とし込めば完成。

実装コード例

test.js

  var target = document.getElementById("test");
  var width = target.clientWidth;
  var height = target.clientHeight;
  var length = target.value.length;
  var fontsize = Math.floor(Math.sqrt((width*height)/length));
  var maxsize = 18;
  if(fontsize > maxsize){
    fontsize = maxsize;
  }

コード解説

fontsizeはフォーム内の横幅と縦幅にぴったりおさまる文字のサイズを求めています。
Math.sqrtでルートの計算が出来ます。
fontsizeの計算結果次第で小数点以下の数値が出力されるので小数点以下を切り捨てして、
整数値を回答として設定しました。
また、上限が設けられていないとフォントサイズが100pxになるなどの問題があったので、フォーム内で表示するフォントサイズの最大値を設けました。
結果、指定したフォントサイズ以下に縮小して文章全体が見れるようになりました。

最後に

ここまで記事を見てくださりありがとうございました。
このような形でプログラミングに落とし込んで自動で縮小する機能を実装出来たのは、
物事の仕組みがどのようになっているのかなと疑問を持って考えてきたからだと思います。どうやったら出来るのか。何が必要なのか。複雑なことはシンプルな部分を考えて組み合わせる。
今後も繰り返しこのなぜなぜを取り組み続けて、もっと精進して参ります。