Windows 10で始めるBash(37) HTMLコードの出力シェルスクリプトをRowspan属性に対応させる

Windows 10 Anniversary UpdateからサポートしたWSL(Windows Subsystem for Linux)。その結果としてWindows 10上でもBUW(Bash on Ubuntu on Windows)が動作し、各種Linuxコマンドが利用可能になった。本連載ではWSLに関する情報や、Bashから実行するシェルスクリプトを紹介する。

HTMLコードの出力シェルスクリプトをRowspan属性に対応させる

前回の記事で予告したように今回はTableタグを出力するシェルスクリプトを、垂直(Y)方向に結合するRowspan属性に対応させてみる。その前に1つお詫びを述べておきたい。普段から直前のシェルスクリプトをベースにお題に応じて書き換えているが、よく見るとif文のインデントが部分的にずれていた。出力するHTMLコードのインデントに意識が向いていたらしく、ソースコードの見直しがなおざりになってしまったようである。

また、HTML出力に関する一連のシェルスクリプトでif文にダブルパーレン(「((～))」)を使用していることにお気付きだろう。通常であれば「if [ 条件式 ];」と記述するのがBash的？だが、筆者自身がC言語出身ということも相まって、Arithmetic Expansion式で書いていることに後から気付いてしまった。Arithmetic Expansionは比較演算子に「==」や「!=」といった他言語でお馴染みの記号が使えるため、個人的にはお薦めしたい。だが、最初に説明することをすっかり念頭から抜けていたため、読者諸氏には改めてお詫びする。

さて、HTMLをご存じの方ならご承知のとおり、Rowspanをtdタグやthタグで指定した場合、その分の列を埋めるためのセルを並べなければならない。そのため、水平(X)方向にセルを結合させるColspan属性と異なり、個別の条件式が必要となる。そこで今回はRowspanを含むタグを出力したらフラグを立てて、次のループではスキップする簡単な仕掛けを加えることで対応した。

それではいつもどおり任意のテキストエディターに以下の内容を入力し、必要に応じて出力先のパスなどを変更してから、「chmod」コマンドなどで実行権限を与えて動作を確認してほしい。

 #!/bin/bash

 FILE=/mnt/c/Users/kaz/Desktop/Table.html
 FLAG=0

 echo "行数(1以上)"
 read TR

 echo "列数(1以上)"
 read TD

 echo "水平(X)方向の結合見出しセル数(2以上)"
 read COLSPAN

 echo "垂直(Y)方向の結合見出しセル数(2以上)"
 read ROWSPAN

 echo -e '<html>\n\n<div class="center">' >$FILE
 echo '<table class="Table1" border="1" cellPadding="0" cellSpacing="1" >' >>$FILE
 if (($COLSPAN > 1)); then
    printf "\t<tr>\n\t\t<td></td>\n\t\t<th colspan=\"%d\">結合見出しセルX</th>\n\t</tr>\n" $COLSPAN >>$FILE
    echo -e '\t<tr>\n\t\t<td></td>' >>$FILE
    for ((y2=0; y2 < $COLSPAN; y2++)); do
        echo -e '\t\t<th>見出しセルX</th>' >>$FILE
    done
 fi
 for ((y=0; y < $TR; y++)); do
    if (($ROWSPAN > 1 )); then
        if (($FLAG == 0)); then
            printf "\t<tr>\n\t\t<th rowspan=\"%d\">結合見出しセルY</th>\n" $ROWSPAN >>$FILE
            FLAG=1
        else
            FLAG=0
        fi
    else
        echo -e '\t<tr>\n\t\t<th>見出しセルY</th>' >>$FILE
    fi

    for ((x=0; x < $TD; x++)); do
        echo -e '\t\t<td>セル</td>' >>$FILE
    done
    echo -e '\t</tr>' >>$FILE
 done

 echo -e '</table></div>\n\n</html>' >>$FILE

シェルスクリプトを実行すると、Tableタグの「行数」「列数」に続いて「水平方向に結合する見出しセル」「垂直方向に結合する見出しセル」の入力をうながしてくる。Windows 10のデスクトップにHTMLファイルである「Table.html」を出力するのは前回と同じだ。

Webブラウザーで開くと、基本的な内容が確認できる。なお、Webブラウザーによっては文字コードを指定していないため、文字が正しく表示されない可能性もある

垂直方向のみセル結合を行ったHTMLファイルの表示結果。数値入力時は「行数÷垂直方向に結合する見出しセル」の除算で剰余が出ないように気を付けてほしい

垂直方向のセル結合数を「1」以下にした場合は、単純はTableタグを出力する

今回のシェルスクリプトは、28～37行目のif文を新たに追加した。最初に入力をうながした垂直方向に結合する見出しセル数を格納した変数ROWSPANが2以上であれば29～34行目のif文を実行し、フラグである変数FLAGの値が「0」であればRowspan属性を付与して、FLAGの値を「1」に変更。そして最初からFLAGの値が「1」の場合は33行目でフラグをリセットする単純な仕組みだ。これにより、不要なRowspan属性の出力を抑止している。

こちらが出力したHTMLファイルの内容

ところでTableタグには、表にタイトルを付けるcaptionタグやセル内の自動改行を抑止するNowrap属性など、他にも追加すべき要素がある。今回のシェルスクリプトはあくまでもWeb記事に表を挿入するための叩き台となるHTMLコードを出力するのが主目的だが、自動化できる範囲が増えれば、日常業務の負担も軽減できるはずだ。次回はこの観点からシェルスクリプトの拡張にチャレンジする。