☰

(html) ファイルに複数のファイル名を挿入するスクリプトを作成するにはどうすればよいですか?

tag-icon • tag-icon bash scripting html
(html) ファイルに複数のファイル名を挿入するスクリプトを作成するにはどうすればよいですか?

この質問に対する答えがどこかにあると確信していますが、その質問を見つけるためにGoogleに自分の質問をどのように表現するのかわかりません。私の一般的なアプローチは、似たようなスクリプトを見つけて適用することですが、このスクリプトを起動するのに苦労しています。しかし、私はsedが関連していることを知っています。

たとえば、ビデオファイルの変数（名前と番号）のセットがあります。

2020_12_15-14_20_56_Event23.mkv
2020_12_15-14_24_28_Event24.mkv
2020_12_15-15_09_11_Event25.mkv
2020_12_15-15_15_26_Event26.mkv
2020_12_15-15_18_36_Event27.mkv
2020_12_15-15_42_16_Event28.mkv
2020_12_15-15_46_15_Event29.mkv
2020_12_15-15_49_48_Event30.mkv
2020_12_15-16_15_03_Event31.mkv
2020_12_15-16_20_05_Event32.mkv

たとえば、これを表示するHTMLページを生成するスクリプトを実行したいと思います。

<!DOCTYPE html>

<html>
<body>

<h1>Test</h1>

<video width="1280" height="720" controls>
  <source src="2020_12_04-13_46_45_Event23.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_04-13_46_45_Event24.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="INSERT NEXT FILE IN LIST HERE" type="video/webm">
  Your browser does not support the video tag.
</video>

(...etc)

</body>
</html>

私はそれを純粋なHTML（PHP、JavaScriptなどなし）に保ちたいので、bashだけを使ってこれを行いたいと思います。可能であれば、すべてのファイルを選択するスクリプトを実行します。ディレクトリを作成し、htmlよりも多くを生成します。

よろしくお願いします。

ベストアンサー1

とても簡単です。ヘッダーとフッターを変数に入れ、ファイル名によって変更されるテキストブロックにも同じことを行います。次にファイル名を繰り返し、それぞれ印刷します。このような：

#!/bin/bash

read -r -d '' header <<EoF
<!DOCTYPE html>

<html>
<body>

<h1>Test</h1>

EoF

read -r -d '' footer <<EoF
</body>
</html>
EoF

read -r -d '' printfFormatString <<EoF
<video width="1280" height="720" controls>
  <source src="%s" type="video/webm">
  Your browser does not support the video tag.
</video>\n\n
EoF

printf "%s\n" "$header"
for file in "$@"; do
    printf "$printfFormatString" "$file"
done
printf "%s\n" "$footer"

その後、ファイル名を引数として使用してスクリプトを実行できます。

$ foo.sh *mkv
<!DOCTYPE html>

<html>
<body>

<h1>Test</h1>
<video width="1280" height="720" controls>
  <source src="2020_12_15-14_20_56_Event23.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_15-14_24_28_Event24.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_15-15_09_11_Event25.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_15-15_15_26_Event26.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_15-15_18_36_Event27.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_15-15_42_16_Event28.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_15-15_46_15_Event29.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_15-15_49_48_Event30.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_15-16_15_03_Event31.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

<video width="1280" height="720" controls>
  <source src="2020_12_15-16_20_05_Event32.mkv" type="video/webm">
  Your browser does not support the video tag.
</video>

</body>
</html>

おすすめ記事