文章を決まった文字数で折り返して表示する処理の作り方
はじめに
この記事では、文章を決まった文字数で折り返して表示するプログラムの作り方について説明しています。ある程度の経験があるプログラマーにとってはそれほど難しいものではないと思いますが、初心者・初学者の方に向けにまとめています。
実現したいこと
たとえば、「あけましておめでとうございます」という文章を1行5文字で折り返す場合、以下のように表示されます。
あけまして
おめでとう
ございます
3文字で折り返すと以下のように表示されます。
あけま
してお
めでと
うござ
います
このような処理を各文字の座標を指定して表示しなければいけない場合に、それぞれの文字の位置を計算で求めることができます。
文字の位置を計算する
結論からいうと、以下の計算式で計算することができます。
(文字の位置 - 1) / 1行あたりの文字数 = 行数 あまり 列数
この計算式で求められる行と列は0から数えます。このようにする理由、文字の位置からあらかじめ1を引く理由は後ほど説明します。
「あけましておめでとうございます」を1行5文字で折り返す場合、「と」の位置以下のように計算できます。
「と」の位置：先頭から数えて9文字目
(9 - 1) / 5 = 1 あまり 3
さきほどの図で確認すると「上から1行め、左から3文字目」が「と」になることがわかります（繰り返しますが、行も列も0から数えます）。
他の文字も同様に計算することができます、それぞれご自身で計算してみてください。
なぜ文字の位置から1を引くのか
これは、そのまま計算した場合と1を引いて計算した場合の違いを見ていただければわかると思います。
赤文字で示した5文字目（折り返しの最後の文字）に注目してください。1を引かずに計算するとここで割り切れてしまうので、同じ行の他の文字と連続した値にならないのに対して、1を引いて計算すると同じ行の他の文字と連続した値になります。この方がプログラムとして扱いやすくなるのです。
ためしに、1を引かずに計算してX座標とY座標を求めてみてください、計算以外の別の処理が必要になることがわかります。
このようにあらかじめ1を引いて計算することで、プログラムとして扱いやすくなります。これに合わせて、行と列も0から数えるようにしているのです。
計算結果から座標を求める
文字の位置が分ければ、ここから座標を計算することはさほど難しくありません。
X座標 = 列番号 x 文字の幅
Y座標 = 行 x 文字の高さ
文字のサイズが32px x 32pxの場合、「と」の座標は以下のようになります。
X座標 = 3 x 32 = 96
Y座標 = 1 x 32 = 32
これらは、X座標、Y座標をそれぞれ0から数えている場合の値ですので、これに基準となる座標を足すことで、実際の座標を求めることができます。
X座標100、Y座標50を基準とする場合、「と」の座標は以下のようになります。
X座標 = 3 x 32 + 100 = 196
Y座標 = 1 x 32 + 50 = 72
Scratchの場合
一般的なプログラミング言語の場合、座標は左上がX座標、Y座標が0で、右下がX座標、Y座標が最大値になるので、先の計算方法で座標を求められますが、Scratch中心のX座標とY座標が0で、上下左右に広がる形になります。
つまり、Y座標が増えると座標は上に移動するので、Y座標を求める際には、文字の高さを引く必要なければなりません。
X座標 = 3 x 32 = 96
Y座標 = 1 x -32 = -32
最後に
この記事では、文章を一文字ずつ切り出してそれぞれの座標を求めて折り返す処理について説明しました。ある程度のプログラミング経験のある方なら「そんな面倒なことしなくても指定文字数ずつ切り出して表示すればいいじゃん」と思われることでしょう。
まったくその通りです、たとえば以下のような処理で十分です。
message = "あけましておめでとうございます" // 表示する文字列
line = 5 // 1行あたりの文字数
for (let i = 0; i < message.length; i += line) {
console.log(message.slice(i, i + line))
}
ここで説明した方法が有効なシーンは限定されますが、だからこそこのような方法もあるということを知っていただければと思います。
Discussion