当該記事について
学習用の簡易ページを毎回手作業で作成するのが面倒になったので学習も兼ねてshファイルで作成できるようにしました。
その際のメモとなります。
要件
1.テンプレートから新規ページを作成する。
2.ホームページから作成したページにリンクで飛べる様にする。
3.作成したページのヘッダーからホームページに戻れるようにする。
4.リンク名(ページタイトル)はコマンドの引数で指定する。
5.作成ファイルのフォルダ階層をコマンドの引数で指定する。
6.ファイル名をコマンドの引数で指定する。
イメージ
フォルダ階層
初期のフォルダ階層
.
├── cm
│ ├── makePage.sh (このファイルを作る)
│ └── temp.html (テンプレート)
└── src
└── component (このディレクトリ配下に新規ファイルを作成)
├── home.html (ホームページ)
└── one
└── two
├── first.html
└── second.html
ホームページ
home.html
<html>
<body>
<h1>HOME</h1>
<div> <a href="./one/two/first.html">最初のページ</a></div>
<div> <a href="./one/two/second.html">２番目のページ</a></div>
<!-- toHomeLinkPath -->
<!-- ↑ここにリンクを追記します。 -->
</body>
</html>
ホームページ
temp.html
<!DOCTYPE HTML>
<html>
<body>
<div id="page-header">
<a href="toHomeLinkPath">HTML HOME</a><span id="btns"></span><span id="mInfo"></span>
<!-- ↑ここを修正してホームへのリンクを作成します。 -->
</div>
<h1>
<!-- page title -->
<!-- ↑ここにタイトルを表示します。 -->
</h1>
</body>
</html>
<style>
/* 略 */
</style>
shファイル
makePage.sh
#!/bin/sh
CREATED_FILE_PATH="../src/component"
DYNAMIC_DIR_PATH="${CREATED_FILE_PATH}"
for VAR in "${@:1:($#-2)}" ;
do
DYNAMIC_DIR_PATH="${DYNAMIC_DIR_PATH}/${VAR}"
TO_PAGE_LINK="${TO_PAGE_LINK}/${VAR}"
mkdir $DYNAMIC_DIR_PATH
TO_HOME_LINK="..\/${TO_HOME_LINK}"
done
FILE_NAME="${@:($#-1):1}.html"
TITLE="${@:($#):1}"
TO_PAGE_LINK=".${TO_PAGE_LINK}/${FILE_NAME}"
CREATED_FILE_PATH="${DYNAMIC_DIR_PATH}/${FILE_NAME}"
TO_HOME_LINK="${TO_HOME_LINK}home.html"
cp "./temp.html" $CREATED_FILE_PATH
LINK_TAG="<div> <a href=\"${TO_PAGE_LINK}\">${TITLE}<\/a><\/div>"
gsed -i "s/toHomeLinkPath/${TO_HOME_LINK}/g" $CREATED_FILE_PATH
gsed -i "s/ <!-- page title -->/${TITLE}/g" $CREATED_FILE_PATH
gsed -i "/<!-- toHomeLinkPath -->/i ${LINK_TAG}" "../src/component/home.html"
ターミナルでcmディレクトリ配下に移動して以下の様にコマンドを実行します。
sh makePage.sh <ディレクトリ> <ディレクトリ> <ディレクトリ> <ファイル名> <タイトル>
ディレクトリは左からネストしていく構造となります。
以下を実行してみます。
sh makePage.sh three threeChild new 新規で作ったページ
以下の様な構造となりました。
.
├── cm
│ ├── makePage.sh
│ └── temp.html
└── src
└── component
├── home.html
├── one
│ └── two
│ ├── first.html
│ └── second.html
└── three
└── threeChild
└── new.html (新規で作成したページ)
shファイルの簡単な解説
makePage.sh
#!/bin/sh
CREATED_FILE_PATH="../src/component" #作成予定ファイルのベースのパス
DYNAMIC_DIR_PATH="${CREATED_FILE_PATH}" #コマンドの引数によって動的に作成されるパス
#1
for VAR in "${@:1:($#-2)}" ;
do
DYNAMIC_DIR_PATH="${DYNAMIC_DIR_PATH}/${VAR}"
TO_PAGE_LINK="${TO_PAGE_LINK}/${VAR}" #作成ページへのリンクを作成します。
mkdir $DYNAMIC_DIR_PATH #ディレクトリを作成します。すでに存在する場合は作成されません。
TO_HOME_LINK="..\/${TO_HOME_LINK}" #作成ページからホームページへのリンクを作成します。
done
FILE_NAME="${@:($#-1):1}.html" #最後から２番目の引数でファイル名を作成
TITLE="${@:($#):1}" #最後の引数でタイトルを作成
TO_PAGE_LINK=".${TO_PAGE_LINK}/${FILE_NAME}"
CREATED_FILE_PATH="${DYNAMIC_DIR_PATH}/${FILE_NAME}"
TO_HOME_LINK="${TO_HOME_LINK}home.html"
cp "./temp.html" $CREATED_FILE_PATH #テンプレートをコピーします。
LINK_TAG="<div> <a href=\"${TO_PAGE_LINK}\">${TITLE}<\/a><\/div>" #作成ページリンク用のaタグを作成します。
#2
gsed -i "s/toHomeLinkPath/${TO_HOME_LINK}/g" $CREATED_FILE_PATH
gsed -i "s/ <!-- page title -->/${TITLE}/g" $CREATED_FILE_PATH
gsed -i "/<!-- toHomeLinkPath -->/i ${LINK_TAG}" "../src/component/home.html"
#1
${@} => コマンドの引数を配列で取得できる。
${@:スタートのインデックス:取得個数} => 配列の要素を指定して取得できる。(最初の引数のインデックスは0ではなく1)
例えば ${@:1:3} の場合は 1つ目の引数から3つ取得
$# => 引数の数を取得
つまり以下の場合
for VAR in "${@:1:($#-2)}"
引数の1つ目から、最後から3番目までの引数を取得します。(引数のうち、ディレクトリをループで回す。)
#2
macの場合、sedコマンドをそのまま実行するとエラーとなるため、GNUのsedをインストールします
brew install gnu-sed
文字列を置換する場合
gsed -i "s/<置換前の文字>/<置換後の文字>/g" 対象のファイル
-i オプションで指定のファイルを上書きしています。
文字列を指定の文字列の直前に挿入する場合。
gsed -i "s/<置換前の文字>/<置換後の文字>/g" <対象のファイル>
gsed -i "/<指定の文字列>/i <挿入したい文字列>" <対象のファイル>
リファクタリング
pipelineを用いてワンライナーで記載。
cp "./temp.html" $CREATED_FILE_PATH #テンプレートをコピーします。
LINK_TAG="<div> <a href=\"${TO_PAGE_LINK}\">${TITLE}<\/a><\/div>" #作成ページリンク用のaタグを作成します。
gsed -i "s/toHomeLinkPath/${TO_HOME_LINK}/g" $CREATED_FILE_PATH
gsed -i "s/ <!-- page title -->/${TITLE}/g" $CREATED_FILE_PATH
gsed -i "/<!-- toHomeLinkPath -->/i ${LINK_TAG}" "../src/component/home.html"
⬇️
LINK_TAG="<div> <a href=\"${TO_PAGE_LINK}\">${TITLE}<\/a><\/div>"
cat "./temp.html" | gsed "s/toHomeLinkPath/${TO_HOME_LINK}/g" | gsed "s/ <!-- page title -->/${TITLE}/g" >$CREATED_FILE_PATH
gsed -i "/<!-- toHomeLinkPath -->/i ${LINK_TAG}" "../src/component/home.html"
以上となります。