HSL色空間とはなんぞや

Wikipediaで調べてみた所、こんな感じで書いてました。

HLS色空間（エイチエルエスいろくうかん）とは、色相（Hue）、彩度（Saturation）、輝度（Lightness/Luminance または Intensity）の3つの成分からなる色空間。HSV色空間によく似ている。 HSL、HSIと呼ばれることもある。

HLSのカラーモデル
色相：色味を0～360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。すなわち、反対色を見つけるのも容易。色相についてはHSVと同じ。
彩度：HSVとは違い、純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づいている。
輝度：明度100%を純色とし、そこからどれだけ明るさが失われるかを示すHSVとは違い、輝度0%を黒、100%を白とし、その中間（50%）を純色とする。50%以下はHSVの明度を示し、50%以上はHSVの彩度を示すと考えると分かりやすいだろう。
HLS色空間を使う代表的なアプリケーションとしては Microsoft Windows （ペイントを含む）、CSS3、Paint Shop Pro など。

引用:HLS色空間 – Wikipedia

つまり、色相を角度、彩度、輝度を%で指定する。そっから色相の値を替えずに、彩度と輝度をいじっていけば、同じ色合いの色を直感的に指定できますね。

CSS3でのHSL(A)カラー指定方法

/* Green */
.hoge {
    color: hsl(120, 50%, 50%);
}
/* アルファを加えたもの */
.huga {
    color: hsla(120, 50% 50%,.3);
}

画像にフィルターをかけてみる

HTML

<figure class="sample">
    <img src="dog.png" alt="実家の犬" />
<figure>

CSS

.sample {
    position:relative;
    display:inline-block;
}

.sample:before {
    content: '';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    background: hsla(270,100%,50%,0.1);
    /* SASS(Compass)を使ってるとコンパイル時にRGBAに変換されます */
    background: rgba(127, 0, 255, 0.1);
}

結果

Before

After

ブラウザのサポートはFirefox 3.0+, Safari 3+, Chrome 6+, Opera 10+, IE9となってます。

最近はSASSやらLESSやらが流行ってるから、変換してくれる機能使ってHSLからRGBに出力する事にしといて、HSLに慣れとく方がいいかもしれません。

参考サイト
公式: CSS Color Module Level 3 – W3C
日本語訳: CSS カラーモジュール Level 3
SASS : Module: Sass::Script::Functions

input要素のplaceholderにスタイルを適用させる

/*for Webkit*/
input::-webkit-input-placeholder {
    color:    #999;
}

/*for Firefox*/
input:-moz-placeholder {
    color:    #999;
}

inputとtextarea両方に適用させる

::-webkit-input-placeholder {
    color:    #999;
}
:-moz-placeholder {
    color:    #999;
}

今のとこWebkitとFirefoxしかプレイスホルダーのスタイリングに対応していないようです。

Mixin

text-shadowとかも効くんですが、とりあえず色だけかえるためのSCSSでmixinにしてみるとこんなかんじになります。

@mixin placeholder-color($color) {
     &:-moz-placeholder {
         color:$color;
     }
     &::-webkit-input-placeholder {
         color:$color;
     }
 }

//使い方
input {
    @include placeholder-color(#aaa);
}
textarea {
    @include placeholder-color(#ccc);
}

今回は設定なので、導入方法なんかは、前回の記事を参考にしてみてください。

設定を変更するにはconfig.rbファイルを編集します。
今回振り分けるのはoutput_styleとline_commentsの2箇所で、下記の2行を追加するだけです。

#圧縮するかどうかの設定(:nested, :expanded, :compact, or :compressed)
output_style = (environment == :production) ? :compressed : :expanded

#SASS内の行番号の出力(true or false)
line_comments = (environment == :production) ? :false : :true

config.rbはrubyですので、environmentを三項演算子で条件分岐してます。
コロンが連続して続くけど、全く意味が違うってのがなんか変な感じを受けてしまいます。

で、config.rbの設定、もしくはコマンドのオプションで切り替えます。

config.rbの設定

#何も書かなければデフォルトは:development
environment = :development

コマンドオプション

compass watch -e production

一つ注意しなければいけないのが、ファイルの変更が全くない状態で、productionとdevelopmentを切り替えても、ファイルが生成されません。

前回書いてなかったけど、compass watchの引数に監視するファイルパスを指定しなければ、sass_dirで設定したパスの中身のファイルを全部監視します。

1つのファイルだけ指定してても、そのファイルがインポートしてるファイルも監視してくれるので、そこら辺がSASSと違うところかな。

1.Compassをインストール

Compassをインストールするには、SASS同様、Rubyがインストールされている必要があります。
Macの方は元々入ってるので、心配無用です。Linux使ってる人なら、自分で入れれるでしょう。
Windowsの方はお近くのAppleStoreで(ry。嘘です。
Ruby Install Guideを参考にすればいいと思うよ。

ターミナルで下記のコマンドでインストール

gem update --system
gem install compass

これでインストールは完了。

2.初期設定

インストールが完了したら、Compassのコマンドが使える様になってるはずなので、コマンドでサクっと初期設定します。
ターミナルで、SASSファイルや、cssを置く予定の場所で、下記のコマンドを実行します。

compass create

実行するとこんな感じのファイルが生成されます。

├── config.rb
├── sass
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── ie.css
    ├── print.css
    └── screen.css

自分の場合、CSSファイルは”css”ってフォルダ名にしたいので、ちょろっと、オプションを付けます。
あと、画像用のフォルダと、JavaScript用のフォルダも設定しておきます。あとで、config.rbを編集すればいつでも変更はできます。

compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

SASSシンタックスを使いたい場合

デフォルトではSCSSのシンタックスなので、SASSシンタックスを使いたい場合もオプションで変更できます。
SCSSの方がCSSっぽくて楽だと思いますけど。

compass create --syntax sass

これで初期設定は完了。

他にも色々な設定があるので詳しくは公式のConfiguration Referenceを参考にしてください。

3.Compassの機能をインポート

Compassには様々なMixinやスタイルが用意されています。使い方は簡単で、@importでインポートするだけです。

@import "compass/css3/border-radius"; /* CSS3のborder-radiusのみインポート */
@import "compass/css3/"; /* CSS3関連のMixinを丸っとインポート */
@import "compass/utilities" /* クリアフィックス等のユーティリティ系Mixinをインポート */
@import "compass" /* コンパスの機能を全部インポート 基本的にはこれだけでOKだと思います。　*/

@import "compass/reset/" /* リセット用CSSをインポート */;

上記のresetに関してはMixinではなく、CSSそのものなので、インポートした場所にEric Meyer’s reset 2.0をベースにしたスタイルが書きこまれます。

4.SASSファイルからCSSファイルを生成

SCSSファイルからCSSを生成するには、SASS同様コマンドラインでコンパイル or ウォッチします。

コマンド

compass compile sass/style.scss
compass watch sass/style.scss #変更を監視して、保存の度にコンパイル
compass watch --output-style compressed sass/style.scss #一行に圧縮

たったこれだけです。SASSの場合、出力先のCSSファイル名も指定しなきゃいけなかったけど、Compassは最初に設定しているので、必要ありません。

設定したCSS用フォルダに同じ名前(この場合style.css)のCSSファイルが生成されます。

5.Compassを使って書いてみる。

Clearfix

例えばクリアフィックスをする場合、下記の様に書きます

Compass (SCSS)

@import "compass/utilities/general/clearfix";

.sample {
    @include clearfix;
}

CSS

.sample {
    overflow: hidden;
    *zoom: 1;
}

こんな感じで出来上がり。でも、これぐらいなら、あんまり便利さが実感できませんね。

コンフィグレーション変数とMixinの組み合わせ

Compassにはコンフィグレーション変数という機能があります。
プロパティに対して、デフォルトのバリューが用意されており、デフォルトのバリューを使う場合は、省略することができます。
もちろん、各自変数の中身を上書きすることができます。

Compass (SCSS)

@import "compass/css3/border-radius";

//$default-border-radius:5px; /* compassの初期設定 */
$default-border-radius:10px;  /* 上書き */

.sample1 {
    @include border-radius; /* デフォルトを使用してバリューを省略した場合 */
}

.sample2 {
    @include border-radius(2px); /* 通常の使い方 */
}

CSS

.sample1 {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   -ms-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
}

.sample2 {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   -o-border-radius: 2px;
   -ms-border-radius: 2px;
   -khtml-border-radius: 2px;
   border-radius: 2px;
}

基本的な奴

正直これ覚えたぐらいでは、普通のGUIのエディターよりも不便

カーソル移動

これに慣れると、もうやめられない。他のエディタ使っててもついついやっちゃう。

まだまだ基礎(ちょっと応用)

ウィンドウ系

イースターエッグ

ワークスペースの作成

とりあえず、作業用のディレクトリはサーバー使うにしろ使わないにしろ一箇所にまとめておきたいので、
/Users/ユーザー名/work
の様に今後ここに色んなサイト用のディレクトリを掘っていく作業場所をつくっておきます。

サーバー側の設定

ヴァーチャルホスト設定

Apacheの設定ファイルは、/etc/apache2/httpd.confに書かれています。

設定ファイルはroot権限がないと編集できないので、ターミナルで、sudoをつけてvimで編集します。

sudo vim /etc/apache2/httpd.conf #vimでapacheの設定ファイルを開く

# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf #ヴァーチャルホスト用の設定ファイルを読みこむため、行頭の#を削除

これで、バーチャルホストの設定ファイルが読み込まれるはずです。

読み込んだバーチャルホストの設定ファイルの中身を編集

次に先ほどよみこんだ、バーチャルホストの設定ファイルを編集します。

DocumentRoot "/Library/WebServer/Documents/local.howtohp.com"
ServerName local.howtohp.com
ErrorLog "/private/var/log/apache2/local.howtohp.com-error_log"
CustomLog "/private/var/log/apache2/local.howtohp.com-access_log" common

こんな感じが最小の設定になるかと思います。ServerNameはネット上に存在しないアドレスにするよう注意してください。
今後同じURLのサイトを見れなくなってしまいます。

今回のサンプルでは、/Library/WebServer/Documents/local.howtohp.comがドキュメントルートになります。

hostsファイルの設定

Macのホストファイルは/etc/hostsにありますので、これもsudoで編集し、先ほどバーチャルホストの設定ファイルにかいた、サーバーネームを追記します。

127.0.0.1 local.howtohp.com

これで、http://local.howtohp.comへアクセスしたときにローカルサーバー内の/Library/WebServer/Documents/local.howtohp.comを見に行くようになります。

Apacheの再起動

Apacheの設定を変更したら、再起動するまで読み込まれないので、以下のコマンドで再起動します。
ここでもroot権限が必要です。

apachectl -t #これで設定ファイルがうまくいってるか一応チェック
Syntax OK #これがでたら問題無し。

sudo apachectl restart　#Apacheの再起動

ローカルサーバーのディレクトリをワークスペースへシンボリックリンクを貼る。

次に作業用のディレクトリとサーバー内で、いちいち同期するのとかローカル環境ではめんどくさいので、シンボリックリンクを貼っておきます。

ln -s /Library/WebServer/Documents/local.howtohp.com ~/work/local.howtohp.com

これで、サーバー内のファイルをワークスペース内で直接編集できますね。完了です。

以前は、rsyncコマンド使っていちいち同期してたんですが、ローカル環境でそんなことやってるのがアホらしくなったので、直接編集することにしました。

Homebrewを使ってMySQLをインストール

まだインストールしてない方は、前回のMacにパッケージ管理ソフトのhomebrewをインストールの記事を参考にインストールしてみてください。

MySQLのインストールはターミナルで下記のコマンドを実行

brew install mysql

インストールは超簡単ですね。今日時点では、MySQL5.5.14がインストールされました。

インストール中に下記のメッセージが出ると思います。

Set up databases to run AS YOUR USER ACCOUNT with:
    unset TMPDIR
    mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp

To set up base tables in another folder, or use a different user to run
mysqld, view the help for mysqld_install_db:
    mysql_install_db --help

and view the MySQL documentation:
  * http://dev.mysql.com/doc/refman/5.5/en/mysql-install-db.html
  * http://dev.mysql.com/doc/refman/5.5/en/default-privileges.html

To run as, for instance, user "mysql", you may need to `sudo`:
    sudo mysql_install_db ...options...

Start mysqld manually with:
    mysql.server start

    Note: if this fails, you probably forgot to run the first two steps up above

A "/etc/my.cnf" from another install may interfere with a Homebrew-built
server starting up correctly.

To connect:
    mysql -uroot

To launch on startup:
* if this is your first install:
    mkdir -p ~/Library/LaunchAgents
    cp /usr/local/Cellar/mysql/5.5.14/com.mysql.mysqld.plist ~/Library/LaunchAgents/
    launchctl load -w ~/Library/LaunchAgents/com.mysql.mysqld.plist

* if this is an upgrade and you already have the com.mysql.mysqld.plist loaded:
    launchctl unload -w ~/Library/LaunchAgents/com.mysql.mysqld.plist
    cp /usr/local/Cellar/mysql/5.5.14/com.mysql.mysqld.plist ~/Library/LaunchAgents/
    launchctl load -w ~/Library/LaunchAgents/com.mysql.mysqld.plist

You may also need to edit the plist to use the correct "UserName".

Warning: m4 macros were installed to "share/aclocal".
Homebrew does not append "/usr/local/share/aclocal"
to "/usr/share/aclocal/dirlist". If an autoconf script you use
requires these m4 macros, you'll need to add this path manually.
==> Summary
/usr/local/Cellar/mysql/5.5.14

まぁ今からこれやれよってことなんですが、書いてある通り、コマンドを打ち込んでいきます。
Warningとか出ちゃってますが、とりあえずスルーしときます。

今のユーザーアカウントでのデータベースのセットアップ

unset TMPDIR
mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp

MySQLのデーモンを手動で起動

mysql.server start

起動時に自動起動

mkdir -p ~/Library/LaunchAgents
cp /usr/local/Cellar/mysql/5.5.14/com.mysql.mysqld.plist ~/Library/LaunchAgents/
launchctl load -w ~/Library/LaunchAgents/com.mysql.mysqld.plist

ルートユーザーでログインしてみる

mysql -u root

これで、いよいよ使えるようになったはずです。5.5.14ではデフォルトの文字コードがUTF-8らしく、めんどくさい文字コード変更の設定はいりません。一応、以下のコマンドを実行して文字コードの設定を確認しておきます。

mysql> show variables like 'character_set%';

+--------------------------+------------------------------------------------------+
| Variable_name            | Value                                                |
+--------------------------+------------------------------------------------------+
| character_set_client     | utf8                                                 |
| character_set_connection | utf8                                                 |
| character_set_database   | utf8                                                 |
| character_set_filesystem | binary                                               |
| character_set_results    | utf8                                                 |
| character_set_server     | utf8                                                 |
| character_set_system     | utf8                                                 |
| character_sets_dir       | /usr/local/Cellar/mysql/5.5.14/share/mysql/charsets/ |
+--------------------------+------------------------------------------------------+
8 rows in set (0.06 sec)

こんな感じで出力されれば、おｋですね。後は使い方を覚えるだけです。
以上。