はじめに
コジマです。
ドットインストールでjsやらCSSやら覚えつつあります。
こんなもの作りたいなーとか思った時に毎回とか書くのが
めんどくさくなってしまったので、一発でそれを用意してくれるシェルを作ることにしました。
テンプレートってのはドットインストールの講師が第一回で書き上げるアレですね。
わかる人にはわかると思います。
どんな人におすすめ？
以下に該当する人におすすめです。
- HTML/js/CSSのテンプレを書き飽きた人
- サクッとテンプレート用意して実装に取り掛かりたい人
- これがどんなシェルか興味ある人
- シェルの勉強もしたい人
どんな技術？
いたってシンプルなbashです。
- if文で空を判定する
- ヒアドキュメントをテキストに出力する
- コマンドライン引数を扱う
このあたり使ってます。
そんなに難しいことはやっていません。
開発環境はmacを想定しています。
実際のソースを解説と共に使い方の紹介
実際のソース
#!/bin/bash
#引数：$1 プロジェクトディレクトリ名
#引数：$2 プロジェクトディレクトリ作成パス(なければカレント)
# パスの宣言があれば移動する
if [ "$2" != "" ]; then
cd $2
fi
#HTMLプロジェクトディレクトリを作成する
mkdir $1
cd $1
mkdir js
mkdir css
#HTMLテンプレート作成
cat << EOF > ./index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>$1</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
EOF
#jsテンプレート作成
cat << EOF > ./js/main.js
(function(){
'use strict';
})();
EOF
#cssテンプレート作成
cat <<EOF > ./css/styles.css
@charset 'utf-8';
EOF
ちょっとだけ解説
if文でから文字を判定
# パスの宣言があれば移動する if [ "$2" != "" ]; then cd $2 fi
先ほどのソースの一部です。
引数の値の有無を判定するときは両辺に””をつけてあげます。
左辺に””つけ忘れること多いんですけど、それだとシェルの仕様上上手くいかないんですね。
そ
ヒアドキュメントをテキストに出力する
ヒアドキュメントはどういうやつかというと
#jsテンプレート作成
cat << EOF > ./js/main.js
(function(){
'use strict';
})();
EOF
こういうやつです。
cat << EOF
なんか文章
なんか文章
なんか文章
EOF
こんな感じ。ちなみにEOFは区切り文字ってやつで
実はEOFじゃなくHOGEとかでもよかったりします。
区切り文字の間にある文章を複数業いっぺんに扱うことができて便利なのです。
その一行目をリダイレクトすることでファイルにヒアドキュメントを一気に書き込めます。
cat << EOF > ファイル名
なんか文章
なんか文章
なんか文章
EOF
コマンドライン引数を扱う
$1:1番目のコマンドライン引数
$2:2番目のコマンドライン引数
$n:n番目のコマンドライン引数（nはなんかの数字）
って感じで値をとることができます。
$#:引数の数
$0:コマンド自身
を取ることもできるので頭の片隅に入れておくと良いでしょう。
具体例はここでは挙げませんが、気になる方は調べてみてください。
使い方
これをコピーしていただいても構いません。
mktpl.sh(make templateの略のつもり)とlinuxコマンドっぽくしてみました。
⑴任意のディレクトリに保存します。
⑵[cd (mktpl.shを保存したディレクトリ)]を実行します。
⑶[chmod 755 mktpl.sh]を実行します。
シェルはデフォルトでは実行権限がつかないので、実行権限をつけてあげます。
このコマンドが実行できない場合はsudoをつけて実行してみてください。
⑷[mktpl.sh (プロジェクトディレクトリ名) (プロジェクトディレクトリを作りたいパス)]を実行します。
プロジェクトを作りたいパスはなくても大丈夫です。その場合はカレントディレクトリになります。
完了！
こんな感じでファイルができています。（フルネーム出てますが、まあいいでしょうw）
catで出すとこんな感じ。
HTMLのタイトルにプロジェクトディレクトリ名が入る仕様になってます。
サクッと15分くらいで書き上げたのでエラー処理とかないです。
平気で上書きしてしまうのでそこだけ注意してください。
最後に
私と同じくHTML/CSS/JavaScript勉強している人のお役に立てればと思います。
githubにも公開しているので、こちらからDLしても大丈夫です。
https://github.com/kojimanotech/makeHTMLTemplate
これからラーメン食べてきます。
それでは！
