ゼロからはじめてみる日本語プログラミング「なでしこ」(13) SNSで縦書きしたい - テキスト回転ツールを作ろう


日本語プログラミング言語「なでしこ」公式サイト

先日、Twitterを眺めていたら、ツイート（投稿文）を縦書きにすることが流行していました。一瞬、Twitterが縦書き表示に対応したのかと思ったのですが、どうやら違うようです。よくよく見てみると、横書きのテキストが縦書きに見えるように、文字の並べ方を縦に組み替えていただけでした。縦書きに見えるように、スペースを駆使するなどして、縦書き表示に見せかけるというテクニックを使っていたのです。

文字数が制限されており、短歌や俳句に通じるところのあるTwitterですから、投稿を縦書き表示にしたい場面も多いことでしょう。もちろん、Twitter自体が縦書きに対応してくれれば一番良いのですが、それは、まだ先の事になりそうなので、なでしこでプログラムを作って、横書きのテキストを並びかえて縦書きに見えるように整形するプログラムを作ってみましょう。

縦書き非対称のTwitterに縦書きのツイートを投稿

横書きを縦書きにする方法を考えよう

さて、横書きを縦書き表示にするためには、文字の並び順を回転させる必要があります。文字の並びを回転させるために、二次元配列変数を利用すると便利です。

二次元配列変数とは？

二次元配列変数とは、表形式のデータを扱うのに便利なデータの処理形式です。Excelなどの表計算ソフトのデータなども二次元配列変数を使うことでプログラム内で利用することができます。

その仕組みですが、普通の配列変数の一つずつの要素の中に、配列変数を代入するという方法で作成します。図にすると以下のような感じになります。

二次元配列変数の仕組み

この図を見ると、縦方向の配列データの各要素に、横方向の配列データを代入しています。配列の中に配列を入れた二次元の配列ですが、これによって、表形式のデータを扱うことができるのです。簡単なプログラムで確かめてみましょう。簡易なでしこエディタに、以下のプログラムを書き込んで実行結果を確かめてみましょう。

 # 二次元配列のデータを作成
 表データ＝[]
 表データ[0] = [0, 1, 2, 3, 4]
 表データ[1] = [10, 11, 12, 13, 14]
 表データ[2] = [20, 21, 22, 23, 24]

 # 表の任意の場所のデータを表示
 表データ[1][3]を表示。

プログラムを実行すると13が表示されます。

今回のプログラムの仕組み

今回、この二次元配列変数を利用して、表の回転を行います。具体的には、二次元配列変数の各要素に一文字ずつのデータを設定しておきます。そして、90度に表を回転させて、一行ずつ文字を取り出せば、横書きの文を縦書きに見せかけることができます。

二次元配列の表を回転させることで縦書き表示になる

縦書き変換プログラムを作ってみよう

それでは、縦書きに変換するプログラムを作ってみましょう。このプログラムでは、最初に、上記のような一文字一要素の表を作るのに必要な文字数を調べます。そして、表を空白文字で初期化します。そして、表に一文字ずつ代入します。最後に、表を元にして文章を出力します。

 ●(Sを)縦書き変換処理
   # 表を作るのに必要な行数を数える --- (*1)
   Sの空白除去してSに代入。
   Sを改行で区切って、SAに代入。
   SAの配列要素数を列数に代入。
   # 続けて列数を数える --- (*2)
   行数=1
   SAを反復
     それの文字数をCに代入。
     もし、C > 行数ならば、行数=C。
   ここまで。
   # 表(仮テーブル)を初期化 --- (*3)
   仮テーブル＝[]
   行を0から(行数-1)まで繰り返す
     仮テーブル[行] = []
     列を0から(列数-1)まで繰り返す
       仮テーブル[行][列] = " "
     ここまで
   ここまで。
   # 仮テーブルに一文字ずつ配置 --- (*4)
   行を0から(行数-1)まで繰り返す
     列を0から(列数-1)まで繰り返す
       F行=SA[列]
       C＝MID(F行,行+1,1)
       もし、C≠空ならば、仮テーブル[行][列]＝C
     ここまで
   ここまで
   # 仮テーブルをテキストに変換 --- (*5)
   結果は「」
   行を0から(行数-1)まで繰り返す
     仮テーブル[行]を配列逆順。
     それを「  」で配列結合してF行に代入。
     結果＝結果＆F行&改行
   ここまで
   # 横棒を縦棒に置換
   結果の「ー」を「｜」に置換して結果に代入。
   結果を戻す
 ここまで

 # 縦書き変換のテスト --- (*6)
「なでしこで
誰でも簡単
プログラマー」を縦書き変換処理して表示。

プログラムを実行したところ

プログラムを確認してみましょう。(＊1)と(＊2)の部分で、一文字一要素の表を作るのに必要な情報(行数と列数)を調べます。(＊1)では、文章を改行で区切ってその要素数を得ます。これは、文章を90度回転させるなら、列数を表す数となります。(＊2)では、一行に最大何文字あるかを調べます。これは、回転後の行数です。

(＊3)の部分では、一文字一要素の表を表す二次元配列変数「仮テーブル」を初期化します。すべての要素に全角スペースを入れて埋めます。そして、(＊4)の部分で、文章を一行ずつ読んで、仮テーブルに一文字ずつを代入します。そして、(＊5)の部分で、仮テーブルにある文字をテキストとして出力します。

最後に、(＊6)の部分で横書きの文章を縦書きで出力します。「なでしこで...」の部分を任意の文章に書き換えて試してみると良いでしょう。

まとめ

以上、今回は、横書きの文章を擬似的に縦書き表示に変換するプログラムを作ってみました。テキストの各文字を二次元配列変数に代入して回転させて出力することで縦書き表示を実現しました。

いろいろ試してみると分かりますが、Twitterの表示欄は、等幅フォントを利用していないため、各行の文字数に差があると、スペース幅の関係で縦書きが崩れてしまいます。そこで、スペースの代わりに「・」を使ったり縦棒「｜」を使ったりと、いろいろ改良もできるでしょう。プログラムの改良は、プログラミング能力の向上につながるので、挑戦してみると良いでしょう。

また、今回作ったプログラムを組み込んだツールを作って公開してみたので、ツールだけを求めている方は、以下を試してみてください。