ツナワタリマイライフ

日常ネタから技術ネタ、音楽ネタまで何でも書きます。

レガシーな静的webサイトを一新！軽量cssフレームワークSkelton導入

Programming

はじめに

前々からリニューアルしようとしているけどどうも腰が重い。

take-she12.hatenablog.com

今時の方法ってどうやってんだろ？さくらVPN借りてweb立ててドメインとって公開するのが一番スタンダードなやり方なのはわかってるけど、もっとイケてるやり方ないのかな、と探したらありました。

qiita.com

ドンピシャでやりたいことあるやんけ。今仕事ではWebではなくインフラ含めですが、CI/CDをやっています。社内ではJenkinsを使ってるけどCircleCIも使ってみたかったのでちょうどいい。

最終目標はこれとして、今回はhtmlの移植をやっていきます！

Githubにコードを登録

プロジェクトを作成し、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>

cssフレームワーク

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指定箇所があるので、使いましょう。

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

まずいれただけだとこんな感じに変わりますね。あとは公式HPを見て使い方を学びましょう。

f:id:take_she12:20161204101158p:plain:w300f:id:take_she12:20161204101203p:plain:w300

メニューはgridで横並びに

リスト形式になっていたのでgridで横並びに。header+menuで1コンテナ、コンテンツで1コンテナにいれました。

コミットは以下。

use grid in menu · takeshe12/toketenakunaru@14e1c3c · GitHub

f:id:take_she12:20161204111744p:plain:w500

一気にそれっぽくなりましたね。

discographyとlyricが重なっていたり。そもそも9個メニューがあるけど12分割単位じゃなく、9分割にできないのかなとか。あと箱に枠や背景色つけられないのかなとかわからないところはありますが、先に進みます。

全てのページにcssを読み込ませる

先にやっとけって話ですね、はい。

load css and add container · takeshe12/toketenakunaru@c391fb1 · GitHub

DRYじゃなくて吐きそうなんですけどどうしたらいいかもわかんないし最初はとにかく進むよ。

Biography

f:id:take_she12:20161204124125p:plain:w300f:id:take_she12:20161204124128p:plain:w300

update biography · takeshe12/toketenakunaru@ba45740 · GitHub

githubって画像もプレビューできるんだねすごい。

説明文と画像を横並びにしました。

Discopraphy

作品ごとにページ分けてたんですけど、めんどくさいので1ページにしました。

table地獄を全部書き直すのなかなかめんどくさかったです。

update discography · takeshe12/toketenakunaru@349ff1e · GitHub

箇条書きの間隔が広いのをなんとかしたいんですが、cssの変更が反映されない事件が起きてるのでとりあえずスルーします。

変更前

f:id:take_she12:20161204145754p:plain:w300f:id:take_she12:20161204145759p:plain:w300

変更後

f:id:take_she12:20161204145801p:plain:w300

Lyric

一番悩ましい。歌詞はtxtファイルをおいて、そのrawデータを表示するってことできないかなぁ。歌詞データそのものに装飾をしたくない。

それかjava script使ってクリックするとペロンと表示されるようにするか。

考えた結果、preとcodeを使ってコードブロックとして引用すればいいですね。

update lyric · takeshe12/toketenakunaru@bbc70ee · GitHub

全然DRYじゃないから嫌なんですが、多分java script使わないと、クリックしたidのファイル名のtxtファイルを表示するってできないと思うのでとりあえずスルー。

f:id:take_she12:20161204152941p:plain:w500

movie

ここは単に列挙してるので３分割でgridで置いていくとします。

変更前

f:id:take_she12:20161204153057p:plain:w500

まわりこみの挙動が変

f:id:take_she12:20161204161517p:plain:w500

ここは最初の要素にstyle=“clear:both"を指定してまわりこみさせないようにしました。

clear（要素の回り込み解除）｜Box - ボックス｜スタイルシート（CSS）｜PHP & JavaScript Room

変更後

f:id:take_she12:20161204161458p:plain:w500

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

favicon設定

skeltonのものになっていたので置き換えました。

おわりに

html編はここまで。htmlってDRY原則あんまり気にされないもんなんですかね、普段サーバサイドやってるといろいろ気になってしまう。

おいおいstyle sheetは勉強しつつHPを華やかにしていこうと思いますが、とりあえず最低限やったのでここまで！次回はいよいよ本番環境にデプロイします！