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

Tableタグ出力シェルスクリプトをColspan属性に対応させる

前回の記事では、シンプルにHTMLタグを出力させたが、同タグは各要素を組み合わせることで複雑な表を作り上げることが可能だ。一時期はTableタグが悪者扱いされたが、それはWebページ全体のレイアウト・デザインにTableタグを多用した結果にある。筆者がガリガリと書いていたHTML 2.0時代はタグの種類も現在に比べて貧弱なため、"90年代的"Webページが巷に溢れていた。

HTML 3.2ではCSS(Cascading Style Sheets)による要素の装飾が可能になり、より表現性の高いWebページの作成が可能になったため、Tableタグでレイアウトを決め打ちする必要もなくなった。JavaScriptベースでWebサイトをデザインする現在では想像できない話かも知れないが、当時はあるものを駆使して、Web文化が築き上げられていたのである。

さて、Tableタグに話を戻そう。HTMLで表を作成する場合、水平(X)方向にセルを結合させるColspan属性や、垂直(Y)方向にセルを結合せるRowspan属性がある。PCや家電といったデバイスのスペック表では、同列機種のスペック差を表現する際に多用されるが、この辺りの自動化に今回はチャレンジすることにした。ただし、セルの結合は意図する表の組み合わせによって異なるため、今回は複数の見出しセルを水平方向にまとめることに注力する。

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

 #!/bin/bash

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

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

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

 echo "結合見出しセル数(2以上)"
 read COLSPAN

 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<th></th>\n\t\t<th colspan=\"%d\">結合見出しセル</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
    echo -e '\t<tr>\n\t\t<th>見出しセルY</th>' >>$FILE
    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タグの「行数」入力を求められるので、任意の行数を入力する。続いてTableタグの「列数」入力を求められるので、同じく任意の列数を入力し、最後に水平方向に結合する見出しセル数の入力を行うと、Windows 10のデスクトップに「Table.html」というファイルが生成する仕組みだ。非常に簡素な内容だがWebブラウザーでHTMLファイルを開けばその内容が確認できるはずだ。

Tableタグの行数と列数、水平方向の見出しセル結合数を入力し、それぞれ［Enter］キーを押す

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

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

また、水平方向に結合する見出しセル数として「1」以下の数字を入力すると、セル結合しないと判断して、前回の記事と同じHTMLを出力する。なお今回は見出しセルの文字列を分かりやすくするため、若干の変更を加えた。

水平方向の見出しセル結合数を「1」以下にすると、前回と同じHTMLファイルを出力する

こちらが出力したHTMLファイルの内容。前回と同じコードを出力する

それではシェルスクリプトの内容を説明しよう。今回は16～22行目のif文がポイントとなる。結合する見出しセル数を変数COLSPANに代入し、16行目で値が2以上であれば、17～18行目で対応するHTMLコードを出力し、19～21行目で水平方法の見出しセルを変数COLSPANの値に合わせて出力を行った。執筆時点ではノーアイディアだが、次回はRowspan属性にも対応するシェルスクリプトにチャレンジしてみよう。

阿久津良和(Cactus)