Windows 10で始めるBash(35) BashでHTMLのTableタグを楽に

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

HTMLのTableタグをシェルスクリプトで出力する

HTMLが広まりだした頃、筆者もHTMLをテキストエディターで記述し、Webページなどを作成していた。今ではHTMLを書く場面は皆無だが、本誌のようにWebページで記事を配信するサイトではCMS(コンテンツマネージメントシステム)などを用いてWebページを作成している。だが、それでもコードを直接書く場面は少なくないという。

そこで今回は担当編集からのリクエストに応える形で、シェルスクリプトから対話形式でTableタグを作成するシェルスクリプトに取りかかることにした。時としてスペック表のような複数行のテーブルには骨を折ることもあるようだ。

まず、Bash上で対話的な処理を行うのであれば、「read」コマンドの出番である。標準入力からコマンドラインを受け取り、IFS環境変数ベースで区切った内容を変数に格納できるコマンドだ。

下図に示したように「read ARG1 ARG2」と実行し、任意の文字列を入力して［Enter］キーで確定すると、変数「ARG1」に1つめの単語、変数「ARG2」には2つめの単語が代入されたことを確認できる。ちなみに変数より単語が多い場合は、最後の変数に残りの文字列を代入し、変数を指定しない場合は変数「REPLY」にすべて代入される仕組みだ。

「read」コマンドの実験。ご覧のとおり引数で与えた文字列を変数として扱い、入力した内容を代入している

引数を用いなかった場合は、環境変数「REPLY」に入力内容が代入される

それではreadコマンドの仕組みを理解したところで、シェルスクリプトの作成に取りかかろう。いつもどおり任意のテキストエディターに以下の内容を入力し、必要に応じて出力先のパスなどを変更してから、「chmod」コマンドなどで実行権限を与えて動作を確認してほしい。

 #!/bin/bash

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

 echo "行数"
 read TR

 echo "列数"
 read TD

 echo -e '<html>\n\n<div class="center">' >$FILE
 echo '<table class="Table1" border="1" cellPadding="0" cellSpacing="1" >' >>$FILE
 for ((y=0; y < $TR; y++)); do
    echo -e '\t<tr>\n\t\t<th>見出しセル</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のデスクトップに「Tbale.html」というファイルが生成される。非常に簡素な内容だがWebブラウザーでHTMLファイルを開けばその内容が確認できるはずだ。

最初にTableタグの行数を入力して［Enter］キーを押し、続いて列数を入力して［Enter］キーを押す

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

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

それではシェルスクリプトの内容を説明しよう。3行目は出力先となるHTMLファイルのパスなどを記述しているので、ご自分の環境に合わせて変更して欲しい。5～9行目はreadコマンドを使った入力内容を、それぞれ変数「TR」「TD」に代入している。11～12行目はHTMLタグを単に出力しているに過ぎないが、ここではオプション「-e」を使って改行などのエスケープシーケンスを有効にした。改行もさることながら、タブを用いたインデントを付けることで視認性を高めるためだ。

14～20行目はreadコマンドと取得した行数・列数をfor文で回し、必要に応じたth要素やtd要素を出力している。最後の22行目でHTMLタグを出力して完了という流れだ。今回は極めてシンプルな状態だが、Tableタグにはセルを結合する「colspan」「rowspan」などがある。次回はこの辺りも取り込んだシェルスクリプトにチャレンジしてみよう。

阿久津良和(Cactus)