Tosainu Lab

ブログデザイン更新した

どもども(✿╹◡╹)ﾉ

見ての通り, ブログのデザインを変えました.
といってもデザイン自体はあんまり変わっていない気がしますが…

SCSS

まず, 今回のデザインからCSSではなくSCSSを使うようにしました. SCSSめっちょ便利.
SCSSのすごいところはいっぱいあるのですが, そのなかでも@mixinを簡単に紹介しようと思います.

mixinは, スタイルの定義を簡単に再利用できるようにするための仕組みです.
例えば, こんな感じに書くことができます.

@mixin button_bg($color) {
  background: $color;

  &:active, &:hover {
    background: darken($color, 20%);
  }
}

.twitter {
  @include button_bg(#55acee);
}
.hatena {
  @include button_bg(#007bca);
}
.pocket {
  @include button_bg(#ed4055);
}
.google_plus {
  @include button_bg(#c93725);
}
.adn {
  @include button_bg(#4a484d);
}

これをコンパイルすると, こんな感じになります.

.twitter {
  background: #55acee; }
.twitter:active, .twitter:hover {
  background: #147bc9; }

.hatena {
  background: #007bca; }
.hatena:active, .hatena:hover {
  background: #003d64; }

.pocket {
  background: #ed4055; }
.pocket:active, .pocket:hover {
  background: #b61125; }

.google_plus {
  background: #c93725; }
.google_plus:active, .google_plus:hover {
  background: #731f15; }

.adn {
  background: #4a484d; }
.adn:active, .adn:hover {
  background: #171718; }

middlemanではSCSSのコンパイルも勝手にやってくれるので, コンパイルを全く意識することなくCSSを書く感覚で書くことが出来ました.
また, livereloadと組み合わせることで, PCはもちろんAndroid端末までブラウザ開きっぱなしでデザインすることができて最高すぎました. (なんか日本語おかしいけど伝われ〜)

Susy

SCSSを採用したもう一つの理由に, SusyというCSS Librariesが使いたかったのがあります.

Susyは簡単にResponsiveなGrid layoutを組むことができるものです.
例えば12カラムのレイアウトで9:3で分割したいとき, こんな感じに書くだけで実現できてしまいます.

<div id="main">
  <p>メインカラム</p>
</div>
<div id="side">
  <p>サイドバー</p>
</div>

@import 'susy';

#main {
  @include span(9);
}

#side {
  @include span(3 last);
}

middlemanやRails等のRuby製アプリケーションでは, Gemfileに

gem 'susy'

を追加してbundle installしたりするだけで使えるようになります.

JavaScript使ってません

僕はサーバサイドのJSは好きだけれどブラウザ上で動かすJSはあんまり好きじゃなくて(だいたい某巨大JSライブラリによる激重サイトのせい), 数世代前のデザインからXperia 2011でも快適に閲覧できるブログをコンセプトに少しづつJSを減らしていました.
今回のデザインでは今まで愛用していたskelJSを使うのをやめ, またTwitter等のShareボタンもアイコンとリンクだけで書くことで, レイアウト/デザイン面ではすべてCSS(SCSS)だけで実現することができました.

正確には完全に脱JSしたわけではなくて, Twitterウィジェットを埋め込んだ記事やGoogle Analyticsの導入なんかでちょこっと使っていたりしますが…

Remote Debugging

詳しくはRemote Debugging on Android with Chrome - Google Chrome参照.
これが無かったらChromeのデバイスエミュレートじゃ起きないけど実機だとズレる現象が解決できませんでした.

Android端末にChromeを入れることなく, KitKatの標準ブラウザで普通に動きました.
使い勝手は普段のDeveloper Toolsと変わることなく, 普通にパラメータ変更とかもできるからヤヴァイ.

その他

このBlogはGithubでビルド前の状態から公開していますが, そのレポジトリのライセンスがめちゃくちゃだったので修正(テンプレートはMIT, 記事はCopyright)したり, 詳細プロフィールの情報を更新したり, ブログ記事に付けられたタグを表示するようにしたりと, いろいろ変更しました.
Webデザインは相変わらず苦手ですが, 少なくとも小6の頃書いたやつよりは進化してると思います.

おっと, 日付が変わりましたね.
あんまりクリスマスとか気にする人ではないのですが, まぁ挨拶(?)だけでも.

メリークリスマス.