カテゴリー別アーカイブ: 手抜き

実験用RWD変更シェルスクリプト作成

前々から既存の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

変なサイト多いな

最近、体の調子が悪いのでよくネットで調べます。

で、googleの検索で上位表示されるサイトは

サイトの滞在時間ながくするたなのか?

だらだらと長文がかいてあり、ページ容量を多くするために?変な外人の写真が挿入して

わざわざ長文を読んでみると結局医者に行きましょうという結論。

おいおい、こんなくだらないことを聞くためにネットでしらべたわけじゃないんだよ!!

俺の時間返してくれとマジ本気で思います。

キューレーションの問題で医療系はこんなサイトばっかりになったのかな?

一応医者や薬剤師が監修してるぽいサイトもある。

一見すると作りこんであるサイトに見えるけど、中身はすかすかなんですよ。

こんなくだらない情報を調べるより専門家に聞いたほうがいいでしょう。

まぁ、中身スカスカなサイトをつくってる俺が言えた義理ではありませんけどねw。

さて、体重が68kgからおちない。

でももうこれくらいが限界でしょうか?

あるきすぎなんだろうかねー。

足腰が痛い。まぁ、まったりとやりますよ。

ゆっくりプログラミングのお勉強

先週はあんなにいそがしかったのに今はまったりとしております。

ゆっくりプログラミングを覚える環境を頂いてうれしい限りですが、ちょっときがぬけちゃってるかんじがする。ここで堕落しないようにまたまたお勉強しないとね。

さて、vim。

vimで開発環境をつくってみたいのだが・・・。どうもネットでしらべてもうまくひっかからない。俺がほしいのはインデントやら”を入力したらもうひとつ入力してくれるとか

今度,vimの本でもちょっとみにいってみようかな。

できればlinuxで開発環境をつくってみたいですからね。C言語はこれとかphpはこれとかhtmlはこれとかもうめんどくせーよ。

ここら辺絶対vimにありそうw

今日あたりpythonの本も届くだろうし色々やっていきたいな。