はじめに
前々からリニューアルしようとしているけどどうも腰が重い。
take-she12.hatenablog.com
今時の方法ってどうやってんだろ？さくらVPN借りてweb立ててドメインとって公開するのが一番スタンダードなやり方なのはわかってるけど、もっとイケてるやり方ないのかな、と探したらありました。
qiita.com
ドンピシャでやりたいことあるやんけ。今仕事ではWebではなくインフラ含めですが、CI/CDをやっています。社内ではJenkinsを使ってるけどCircleCIも使ってみたかったのでちょうどいい。
最終目標はこれとして、今回はhtmlの移植をやっていきます！
プロジェクトを作成し、git clone
take@MacBook-Air ~/toketenakunaru>
git clone https://github.com/takeshe12/toketenakunaru.git
Cloning into 'toketenakunaru'...
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
Checking connectivity... done.
まずは今のレガシーなコードを全部ぶちこみます。
github.com
途中までやりかかってたらしきファイルが見つかったのでそれをいれました。多分css抜きでコンテンツだけ書いたレベルのものだと思われます。
開発環境
開発環境なんてたいそうなものではないですが。。。とはいえhttpdとgitさえあればいいので、わざわざvagrantで環境作るまでもないかなと思いました。てか最初からhttpd入っていた。適当なディレクトリを作業フォルダとします。
take@MacBook-Air ~> mkdir toketenakunaru
take@MacBook-Air ~> cd toketenakunaru/
take@MacBook-Air ~/toketenakunaru> httpd -v
Server version: Apache/2.4.18 (Unix)
Server built: Feb 20 2016 20:03:19
take@MacBook-Air ~/toketenakunaru> git --version
git version 2.7.4 (Apple Git-66)
なんかもう既に動いてるっぽい。
take@MacBook-Air ~/toketenakunaru> sudo apachectl start
Password:
/System/Library/LaunchDaemons/org.apache.httpd.plist: service already loaded
take@MacBook-Air ~/toketenakunaru> sudo apachectl status
Go to http://localhost:80/server-status in the web browser of your choice.
Note that mod_status must be enabled for this to work.
とりあえず、httpdの設定を変えるというよりは、gitでpullした場所にシンボリックリンクを貼ってうまいことやりたい。が、軽く検索したところいろいろハマりそうなので、設定ファイルのドキュメントルートを変えることにした。
diff /etc/apache2/httpd.conf.161203 /etc/apache2/httpd.conf
236,237c236,239
< DocumentRoot "/Library/WebServer/Documents"
< <Directory "/Library/WebServer/Documents">
---
> #DocumentRoot "/Library/WebServer/Documents"
> #<Directory "/Library/WebServer/Documents">
> DocumentRoot "/Users/take/toketenakunaru"
> <Directory "/Users/take/toketenakunaru">
ちゃんと変わりましたね。
take@MacBook-Air ~/toketenakunaru> curl localhost
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>とけてなくなる</title>
<meta name="Keywords" content="バンド、作詞、作曲">
<meta name="Description" content="とけてなくなるというバンドのHPです。">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
$("#menu").load("menu.html");
})
</script>
</head>
<body>
<nav id="header"></nav>
<div id="menu"></div>
<div id="contents">
<h2 class="info">Information</h2>
<section class="sec">
<h3>5th Album 発売決定！</h3>
<p>初のバンド録音だよ！</p>
</section>
<section class="sec">
<h3>HPリニューアル</h3>
<p>HPリニューアルしたよ！</p>
</section>
</div>
<div id="footer"></div>
</body>
</html>
S3だドメインだっていう前にローカル環境でそれなりのものを作らないといけません。
今回のリニューアルはスマホ対応が目的の一つ。そのためにはレスポンシブデザインに簡単に対応したいのでフレームワークを使うことにします。bootstrapはwepアプリを作った時に経験しましたが、あれはちょっと重たい。もっと軽いフレームワークを探します。
Skeltonが良さそうです。
Skeleton: Responsive CSS Boilerplate
Downloadして、zipを解凍。
take@MacBook-Air ~> ll /Users/take/Downloads/Skeleton-2.0.4/
total 8
drwxr-xr-x@ 4 take staff 136B 12 29 2014 css
drwxr-xr-x@ 3 take staff 102B 12 29 2014 images
-rw-r--r--@ 1 take staff 2.1K 12 29 2014 index.html
cssとimagesのディレクトリをコピーします。
index.htmlをみると,cssとfavicon指定箇所があるので、使いましょう。
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="icon" type="image/png" href="images/favicon.png">
まずいれただけだとこんな感じに変わりますね。あとは公式HPを見て使い方を学びましょう。
メニューはgridで横並びに
リスト形式になっていたのでgridで横並びに。header+menuで1コンテナ、コンテンツで1コンテナにいれました。
コミットは以下。
use grid in menu · takeshe12/toketenakunaru@14e1c3c · GitHub
一気にそれっぽくなりましたね。
discographyとlyricが重なっていたり。そもそも9個メニューがあるけど12分割単位じゃなく、9分割にできないのかなとか。あと箱に枠や背景色つけられないのかなとかわからないところはありますが、先に進みます。
全てのページにcssを読み込ませる
先にやっとけって話ですね、はい。
load css and add container · takeshe12/toketenakunaru@c391fb1 · GitHub
DRYじゃなくて吐きそうなんですけどどうしたらいいかもわかんないし最初はとにかく進むよ。
Biography
update biography · takeshe12/toketenakunaru@ba45740 · GitHub
githubって画像もプレビューできるんだねすごい。
説明文と画像を横並びにしました。
Discopraphy
作品ごとにページ分けてたんですけど、めんどくさいので1ページにしました。
table地獄を全部書き直すのなかなかめんどくさかったです。
update discography · takeshe12/toketenakunaru@349ff1e · GitHub
箇条書きの間隔が広いのをなんとかしたいんですが、cssの変更が反映されない事件が起きてるのでとりあえずスルーします。
変更前
変更後
Lyric
一番悩ましい。歌詞はtxtファイルをおいて、そのrawデータを表示するってことできないかなぁ。歌詞データそのものに装飾をしたくない。
それかjava script使ってクリックするとペロンと表示されるようにするか。
考えた結果、preとcodeを使ってコードブロックとして引用すればいいですね。
update lyric · takeshe12/toketenakunaru@bbc70ee · GitHub
全然DRYじゃないから嫌なんですが、多分java script使わないと、クリックしたidのファイル名のtxtファイルを表示するってできないと思うのでとりあえずスルー。
movie
ここは単に列挙してるので３分割でgridで置いていくとします。
変更前
まわりこみの挙動が変
ここは最初の要素にstyle=“clear:both"を指定してまわりこみさせないようにしました。
clear（要素の回り込み解除）｜Box - ボックス｜スタイルシート（CSS）｜PHP & JavaScript Room
変更後
update movie · takeshe12/toketenakunaru@ad7b944 · GitHub
箇条書きの間隔
このあたりを修正。
diff --git a/css/skeleton.css b/css/skeleton.css
index f28bf6c..1d525b2 100644
--- a/css/skeleton.css
+++ b/css/skeleton.css
@@ -298,10 +298,10 @@ ul ul,
ul ol,
ol ol,
ol ul {
- margin: 1.5rem 0 1.5rem 3rem;
+ margin: 0.5rem 0 0.5rem 0.5rem;
font-size: 90%; }
li {
- margin-bottom: 1rem; }
+ margin-bottom: 0rem; }
ちなみに少し上で言っていたstyle sheetが反映されない問題はやはりブラウザキャッシュでした。プラグインを導入しました。
Clear Cache - Chrome Web Store
skeltonのものになっていたので置き換えました。
おわりに
html編はここまで。htmlってDRY原則あんまり気にされないもんなんですかね、普段サーバサイドやってるといろいろ気になってしまう。
おいおいstyle sheetは勉強しつつHPを華やかにしていこうと思いますが、とりあえず最低限やったのでここまで！次回はいよいよ本番環境にデプロイします！
![ソフトウェアデザイン 2016年 06 月号 [雑誌]](http://ecx.images-amazon.com/images/I/51nkkBejIDL._SL160_.jpg "ソフトウェアデザイン 2016年 06 月号 [雑誌]")
