前々から既存のhtmlをRWDに変更しようと勉強してました。
昨日社長からあるサイトのトップページをRWDに変更しろといわれたんで
下記サイト様を参考に変更。
https://webboy.jp/responsivewebdesign/
しかし、うちのサイトはhtmlがいっぱいあるわけで、
htmやhtmlを探し一括編集できるスクリプトをつくってみました。
スクリプトを解説するとまずhtmlとhtmの拡張子を捜し
ヒアドキュメントで3つのcssを作成。
その後、htmlを<head>タグを削除して<head>や<link>タグを変数に入れて追加
そして、sedのデミタリはスラッシュではなくパーセントをつかっています。
上記サイト様をみるとわかりますが、タグの終わりにスラッシュを使ってるのでシェルが上手くうごきません。まぁバックスラッシュをいれればいいんだけどね。多すぎるしわからりにくいからなー。ちょっとこれで実験的に色々動かしてみようと思う。
#!/bin/bash
# htmlとhtmの発見
PWD=`pwd`
find $PWD/$1 -name "*.html" -o -name "*.htm" > html.txt
# style.cssの作成
cat <<_EOT_ >> $PWD/$1/style.css
/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}
_EOT_
# tablet.cssの作成
cat <<_EOT_ >> $PWD/$1/tablet.css
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}
_EOT_
# smart.cssの作成
cat <<_EOT_ >> $PWD/$1/smart.css
/*===============================================
●smart.css 画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}
_EOT_
# htmlをRWDに変更
OLDTXT="<head>"
NEWTXT="<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /><link rel="stylesheet" media="all" type="text/css" href="style.css" /><link rel="stylesheet" media="all" type="text/css" href="tablet.css" /><link rel="stylesheet" media="all" type="text/css" href="smart.css" />"
cat html.txt |while read line
do
sed -i -e "s%$OLDTXT%$NEWTXT%g" $line
done