HTMLのコードをプログラミングで特定の箇所を連番で出力する例【バッチファイル / batファイル】

Yiガオ [IT技術者];

2022年10月1日 23:08

こんばんはYiガオです。
HTMLのタグでコードは変わらないけど特定の箇所を連番にして出力したい。よくあるプログラミングのループを使うとできそうだけど。と悩んでいる方、朗報です。

HTMLのコードが増えれば増える程にコピペで一つ一つ修正するのは大変なので、上記画像の結果をプログラミングでサクッと実現しちゃいましょう！

「Pythonとかでコードの書き出しは出来そうだけどわざわざ環境を整えるのも・・・」

と言う方、ご安心ください！

Windowsには何もしなくてもメモ帳で書いたプログラムを実行できるバッチファイルという優れたモノがあります。

今回はそのバッチファイルを作って、HTMLコードの連番を上記の画像のように簡単に出力しちゃおうぜ！という記事です。

※尚、バッチファイルはミスると少し怖いので、自己責任でやってくれよな(;'∀')

下準備

下記のようにファイルの拡張子を表示するように設定してください。

そして、テキストファイルを作ります。ここでは「func.txt」としました。

今回の目的

生のタグを作成したfunc.txtファイルに貼り付けます。

 <img src="./data/image1.jpg" alt="image1">

今回は上記のコードをimage1と記された2ヶ所ある文字列をimage2, image3, image4となるように、これを30回出力することが目的です。

コードを書く前に文字列をエスケープする

「"」「'」「<」「>」などの特殊な記号はそのままにしているとプログラムがプログラムのコードだと誤解して、正しくコードを実行してくれません。

そこで、このHTMLのコードはプログラムではないんだよー。っと機械に教えてあげます。それがエスケープです。

やり方はバッチファイルの場合だと特殊記号の前に「^」を付けるだけ。今回の場合はHTMLコードが簡単でコード数がかなり少ないので自分で、「^」を付けるのもよいでしょう。

しかし、実際に使うHTMLのコードは複雑で100文字を超えることもあるかもしれません。そんな時に目視で一つ一つ「^」入力するのはミスにも繋がるのでやめましょう。

そこで使うのが置換。

これでエスケープができました。

^<img src=^"./data/image1.jpg^" alt=^"image1^"^>

コードを書こう

いきなり完成コードを下記に置きます。

chcp 65001

for /l %%n in (1,1,30) do (
 
echo  ^<img src=^"./data/image%%n.jpg^" alt=^"image%%n^"^> >> ./text.txt
 
)

pause

まず一行目の「chcp 65001」はこのファイルはUTF-8ですよー。と知らせる為に書いています。これがないと日本語の文字列がある場合、出力結果が文字化けします。

次に二行目の
「for /l %%n in (1,1,30) do (」
これはそのまま書いちゃってください。%%nが現在の数字で、よく他言語でいうiやjの変数のようなもの。

次にinの中身の説明。

1, 1, 30
左の1が開始する数字。これが2だといきなり「<img src="./data/image2.jpg ….」となってしまいます。
真ん中の1は増加数。これが2だとimage1, image3, image5, image7と奇数にの連番になります。
右の30は何回ループを回すかを表します。これが50だと最後の出力するコードがimage50とかになります。ここだけ任意の数字にしてね。

続いてecho

echo  XXX >> ./text.txt

PHPにもあるechoと似ていますね。出力を命令するコマンドです。
XXXにエスケープしたHTMLコードを差し替えてください。
「>> ./text」は出力したコードをファイルに書き出すコマンドです。

連番したい数字、ここでは「image1」を「image%%n」にします。こうすることでループを回し、連番を生成してくれます。

最後にあるpauseは出力した結果を目視する為に使うコマンドです。これがないと恐らくエラーが出ても、プログラムが自動修了してしまい何も教えてもらえません。

pause

バッチファイルを作る

コードを書き終わったら「func.txt」をリネームして「func.bat」にしましょう。

後はダブルクリックで実行！

実行すると「text.txt」というファイルが作成されて、成功なら下記の様にコードが生成されているはずです。

試してみたい方は、下記のコードをそのままバッチファイルにして実行してみてくださいね。

chcp 65001

for /l %%n in (1,1,30) do (
 
echo  ^<img src=^"./data/image%%n.jpg^" alt=^"image%%n^"^> >> ./text.txt
 
)

pause

おわりに

以上がバッチファイルの作成手順でした。慣れたら色々使えそう。
何かミスっていたらコメントください。では！

この記事が気に入ったらサポートをしてみませんか？