会社のイベントで仕事の話をしました

capture_youtube.png

第3回ペパボテックカンファレンス っていう会社の技術イベントがあって、ここ1年間ぐらいやらせていただいた仕事についてお話ししました!資料だけを見てもちょっとよくわからないので、よろしければインターネットに配信してた中継映像の録画をご覧ください!

もともとはエンジニア文化へのあこがれの気持ちで 興味本位で YAPC にトークを応募 して採用されなかった話を、社内で採用されなかった人たちでイベントをやるというのにまぜてもらい、Perl とか全然関係ないのに発表する機会を得られてよかったです。ダメでもなにかにつながるので、無茶でも応募してみるものだなと思いました。

反省点としては、

  • 「レガシーな画面」と言ってしまったりして、本当はこれまでの10年をリスペクトした上で次の10年に繋げたいという気持ちがあるのに、全体的にもうちょっと言葉を選んで話したかったです。
  • 緊張して息切れしてしまったので、次回は過呼吸にならない発表をしたいです。

場慣れするためにも、これからも発表のチャンスがありそうだったら積極的に参加していきたいです。僕の話を聞いていただいたみなさま、会社、ありがとうございました。

歯車しか描けない僕が Sketch 3 で画面遷移図を描く

(これまでのあらすじ)半年前に衝動的に購入して放置していた Sketch 3 をちゃんと使えるようになろうと思い、本を読みながら歯車アイコンを描きました。連載第3回目です。


仕事で Photoshop を使ってスマートフォンサイトの画面遷移図を描くことがありますが、めんどうくさい。画面遷移図っていくつもの画面を同じドキュメントに載せる必要があるのでカンバスが大きくなりがちですが、大きくなればなるほど重くなってしまう。ベクターデータではそんなことないのかなと思って、きょうは Sketch 3 で画面遷移図を描いてみようと思います。

Mobile Safari のテンプレートをダウンロードする

capture_template_a.png

Sketch にはもともと iOS や Material Design のテンプレートが用意されていて、File > New From Template からプロジェクトにあったものを選ぶだけで UI コンポーネントを手に入れられます!

capture_template_b.png

すごい!ここからコピー&ペーストするだけで、すぐに画面のプロトタイプが作れますね。

でも、Mobile Safari のアドレスバーやタブのコンポーネントはありません。きょうはスマートフォン向けサイトの画面遷移図を描きたいので、インターネットからダウンロードしようと思います。

capture_template_c.png

Sketch App Sources は Sketch で利用できるリソースや Tips やチュートリアルがまとまっているサイトです。無料だけでなく有料でも販売されていますが、ここで Mobile Safari.sketch っていうファイルを無料で配っているすばらしい人がいたので、ダウンロードさせていただきます。Christine Chao さん、ありがとう!

Sketch はこんなふうにユーザー同士で便利なリソースやプラグインをオープンに配布しているエコシステムができていて、すごいですね。もちろん、ライセンスは確認するべきですが…。

ダウンロードした Sketch ファイルを開くと、

capture_template_d.png

Mobile Safari の UI コンポーネントを Sketch で再現している!すごい!
ページを読み込んだときとスクロールしたときの見た目が用意されているので、ページを読み込んだときのほうを選択してコピーします。

capture_template_e.png

File > New で新しい Sketch のドキュメントを作って、ペーストします。

capture_template_f.png

これで画面遷移図をつくる準備ができました!

Make Gird で繰り返しコピーする

画面の数だけコピーしていってもいいのだけど、Sketch には繰り返しコピーする機能があるので使ってみようと思います。

capture_copy_a.png

コピーしたい要素を選択した状態で Arrange > Make Grid… をクリック。

capture_copy_b.png

どれだけコピーするの?と尋ねられるので、きょうは横に5行で縦に2列にしたいので、Rows2Columns5 と入力します。コピーする画面と画面のあいだに書き込みをしたいので、Margin には 500px と広めに指定しました。ほかの項目はちょっと英語の意味がわからなかったので 本とか 読んでください。

Make Gird ボタンを押すと…!

capture_copy_c.png

うおー!コピーされた!便利だなぁ。

たくさんのアートボードをひとつのアートボードにまとめる

画面と画面のあいだに遷移の意味を書き込みたいので、コピーしたアートボードをひとつにまとめるアートボードをつくります。

capture_writing_a.png

Insert > Artboard をクリック。

capture_writing_b.png

まとめたい画面を囲むようにドラッグして、アートボードを作ります。

capture_writing_c.png

あとは、このアートボードに画面遷移の説明を書いていくだけ。
矢印を描くときは、Insert > Shape > Line で線を引いて、ウィンドウ右の Borders の歯車でいろいろ設定できるみたいです。書くのに疲れて雑になってきました。

よーし、これで画面遷移図を Sketch で描けるようになったぞ。次の仕事から使ってみよう!

円しか描けない僕が Sketch 3 で絵を描く

(これまでのあらすじ)半年前に衝動的に購入して放置していた Sketch 3 をちゃんと使えるようになろうと思い、まずは 円を描きました


身の回りに Sketch に詳しい人がいなかったし、インターネットを検索しても初歩的な使い方を教えてくれるページがなかったので、本を探しました。でも、実は Sketch だけ紹介する日本語の紙の本ってまだないのでしょうか…?電子書籍では、以下の2冊があるようです。

でも、書かれたのが2014年だったり、やっぱり電子書籍より紙の本がいいなという時代錯誤的な思いもあり、さらに調べてみると「Sketch 3の基本。」を書かれている窪木博士さんが、ベクターデータについて紹介している本で Sketch について書かれていることを知りました。

買って読んでみると、この本の Chapter 5-2 で Sketch を使って歯車のアイコンを描くというチュートリアルが載っていた!というわけで、この本で紹介されている方法に従って僕も歯車のアイコンを描いてみようと思います。

photo_completion.jpg

この本、Sketch のことだけ書いてあるわけではなく、Illustrator の使い方やベクターデータを最適化する考え方、ウェブで svg 画像を表示する方法やロゴ作成の仕事の進め方まで幅広く書かれていて、とても参考になりました。

円をくりぬく

では、さっそく 前回 円を描いただけの Sketch ファイルを開きます。
歯車を描きたいので、この円をドーナツみたいにくりぬきたいです。

capture_substract_a.png

円を選択して、Mac の画面上のメニューバーから Edit > Duplicate をクリック。

capture_substract_b.png

複製された円を選択して、80px 小さい 330px × 330px に縮小して中央に寄せます。

capture_substract_c.png

背面にある円を前面の円でくりぬきたいので、両方の円を選択して、Mac の画面上のメニューバーから Layer > Combine > Subtract をクリック。
Combine は結合、Subtract は差し引く、という意味なのか(英語の勉強)。

capture_substract_d.png

くりぬけた!

capture_substract_e.png

ちなみに結合する前のそれぞれの円のパス情報は残ったままなので、あとでウィンドウの左の描いた要素のリストから結合タイプの指定を変更することもできるそうです。

スポークを描く

歯車の車輪のスポーク部分(3本の線が Y 字になっているところ)を描きたい。
Mac の画面上のメニューバーから Insert > Shape > Rectangle をクリック。

capture_spoke_a.png

に載ってるキャプチャ画像を見ながら、180px × 20px の長方形を描きました。

この長方形を回転させながらコピーします。
長方形を選択した状態で、Mac の画面上のメニューバーから Layer > Paths > Rotate Copies をクリック。

capture_spoke_b.png

何個コピーするか尋ねられるので、あと2個ほしいから 2 と入力します。

capture_spoke_c.png

コピーできた!
ここで、コピーした長方形たちの中央にある白い丸をクリックしてガイドを引いた中央にドラッグすると…

capture_spoke_d.png

あっ

capture_spoke_e.png

すごい!Y 字にできた!

あとは、さっきくりぬいた円と長方形たちを結合したいので、円をくりぬいたときと同じ要領で、両方を選択して Mac の画面上のメニューバーから Layer > Combine > Union をクリック。
ちなみに Union はひとつにするという意味(英語の勉強)。

capture_spoke_f.png

スポークが描けた!

歯を描く

歯車の歯を描きます。
スポークと同じように、Mac の画面上のメニューバーから Insert > Shape > Rectangle をクリック。

capture_teeth_a.png

にならって、36px × 36px の正方形を描きました。

capture_teeth_b.png

ウィンドウ上にある Edit ボタンを押してパスを編集するモードに切り替えます。

capture_teeth_c.png

パスのポイントをドラッグして歯車の歯っぽくします。矢印キーも使えます。

capture_teeth_d.png

ウィンドウ右の Finish Editing をクリックして、編集モードから抜けます。Vim っぽい。

capture_teeth_e.png

ウィンドウ右の Radius4 と入力すると、4px の角丸になる!
描いたあとで角丸の大きさを指定できるのは便利ですね。

capture_teeth_f.png

あとは歯を回転させながらコピーしたい!ということで、スポークと同じように Mac の画面上のメニューバーから Layer > Paths > Rotate Copies をクリックして合計20歯になるように 19 と入力します。

capture_teeth_g.png

あっ

capture_teeth_h.png

あっあっ

capture_teeth_i.png

あ───────っ

capture_teeth_j.png

やった─────────────────!

学習の記録ということで最後めんどくさくなって省略しましたが、こちらの本 にはもっと詳細に書かれているので、ぜひご参照ください…!

なんにもできない僕が Sketch 3 で円を描く

半年前に衝動的に Sketch 3 を買ったものの、全然使い方がわからなくて、英語だし、ほったらかしていました。これではあまりにも富豪すぎるので、ちょっとずつ勉強していこうと思います。

本当になんにもできないところからはじめるので、

  • アートボードを用意する
  • ガイドを引く
  • 円を描く

というさみしい目標で臨みます。

アートボードを用意する

アートボードとは、Illustrator のそれと同じ意味の、土台というか、なんか描くときの支持体のような、ドキュメントのサイズを決めるやつのことらしいです。僕もアートボードを作りたい!

まず、Sketch を起動します。よーし。

capture_artboard_a.png

Mac の画面上のメニューバーから Insert > Artboard をクリック。

capture_artboard_b.png

Sketch のウィンドウの右にアートボードのプリセットが一覧で表示されます。
今回はアイコンを作りたいので、Mac Icons > 512 をクリック。

capture_artboard_c.png

512px × 512px のアートボードができました。

ガイドを引く

上下左右の中央にガイドを引きたい!

capture_guide_a.png

512px の半分ということで、定規の上にカーソルを乗せて 256px のところでクリック。

capture_guide_b.png

ガイドが引けました!

円を描く

いよいよ円を描きたい!

capture_circle_a.png

Mac の画面上のメニューバーから Insert > Shape > Oval をクリック。

capture_circle_b.png

カーソルをドラッグして 410px × 410px の正円を描きます。

capture_circle_c.png

円が描けた!描いた円は円をドラッグして中央に揃えます。Keynote っぽい挙動で吸い付くように中央寄せできて気持ちいいですね。

よーし、そろそろ帰ります。

Pull request でごはんにカレーをかける

僕が働いている 会社 では、今期の目標や実績などの評価資料を Markdown で書いて、GitHub Enterprise の規定のリポジトリに pull request を送ることで管理しています(エンジニアだけでなく、デザイナーや、一部の部署ではマネージャーやディレクターも pull request で提出している一風変わった会社です)。どうしてこんなことをしているのかは CTO の記事 を参照いただければと思いますが、僕はデザイナーだし pull request も自己アピールの場だなと思って、コミットメッセージで絵を描くことにしました。

FIGlet は文字をアスキーアートへ変換するツールです。コマンドラインで実行できるので、開発環境ごとに ssh ログインしたときに違うアスキーアートを表示させるようにしておくと、ログインしたサーバーを区別できて便利ですね。

$ brew install figlet
$ figlet shikakun
     _     _ _         _
 ___| |__ (_) | ____ _| | ___   _ _ __
/ __| '_ \| | |/ / _` | |/ / | | | '_ \
\__ \ | | | |   < (_| |   <| |_| | | | |
|___/_| |_|_|_|\_\__,_|_|\_\\__,_|_| |_|

さっそく僕のインターネットでの通り名の「shikakun」をアスキーアート化して、上から1行ずつ空コミットしてみました。

$ git commit --allow-empty -m '     _     _ _         _'
$ git commit --allow-empty -m ' ___| |__ (_) | ____ _| | ___   _ _ __'
$ git commit --allow-empty -m '/ __| '_ \| | |/ / _` | |/ / | | | '_ \'
$ git commit --allow-empty -m '\__ \ | | | |   < (_| |   <| |_| | | | |'
$ git commit --allow-empty -m '|___/_| |_|_|_|\_\__,_|_|\_\\__,_|_| |_|'

おもむろに push すると!

capture_commit_a.png

あれ…

残念なことに、GitHub の仕様上、コミットメッセージに半角スペースが連続すると省略されてしまうようです。これでは思うような表現ができません。

capture_commit_b.png

全角スペースも試してみましたが、環境や書体によっては意図した表示にならないことがわかりました。しかし、ここでひらめきました。スペースがダメなら、空白を意味する文字を挿入すればいいじゃないか。また、思い通りの書体で表示されないなら、どの環境でも同じ見た目の絵文字で表示すればいいじゃないか!幸い GitHub はコミットメッセージに :emoji: と書くと絵文字へ置換してくれる機能があります。

capture_commit_c.png

できた!

FIGlet では文字2種類を指定してアスキーアートを描く機能はないので、Photoshop で 28px × 28px(GitHub の pull request の画面でコミットメッセージの幅が最大 28 絵文字ぶんのため)のカンバスを用意してドット絵を用意しました。

capture_photoshop.png

完成したドット絵を見ながら、上から 1px ごとに塗られているかどうかで 0 と 1 を入力していきます…。このあたりを自動化する便利なツールないかなぁ。

0000000000000111000000000000
0000000000000111000000000000
0001111111111111111111111110
0001111111111111111111111110
0001100000110000011000000000
0001100000110000011000000000
0001100000110000011000000000
0001111111111111111111111100
0001111111111111111111111100
0001100000110000011000001100
0001100000110000011000001100
0001100000110000011000001100
0001100000110000011000001100
0001111111111111111111111100
0001111111111111111111111100
0001100000000000000000000000
0001100011000000011000000000
0001100011000000011000001100
0001000011111110011001111110
0011000011111110011111111100
0011000011000000011111000000
0011000011000000011000000000
0011000011000000011000000010
0111000011001110011000000011
0110111111111110011000000011
1110011111111110011111111110
0010011110000000001111111110

アスキーアートができたら、1行ずつ絵文字に置換してコミットしていくのはめんどうなので、以下のような Rakefile を書きました。

require 'rake'

@messages = [
'0000000000000111000000000000',
'0000000000000111000000000000',
'0001111111111111111111111110',
'0001111111111111111111111110',
'0001100000110000011000000000',
'0001100000110000011000000000',
'0001100000110000011000000000',
'0001111111111111111111111100',
'0001111111111111111111111100',
'0001100000110000011000001100',
'0001100000110000011000001100',
'0001100000110000011000001100',
'0001100000110000011000001100',
'0001111111111111111111111100',
'0001111111111111111111111100',
'0001100000000000000000000000',
'0001100011000000011000000000',
'0001100011000000011000001100',
'0001000011111110011001111110',
'0011000011111110011111111100',
'0011000011000000011111000000',
'0011000011000000011000000000',
'0011000011000000011000000010',
'0111000011001110011000000011',
'0110111111111110011000000011',
'1110011111111110011111111110',
'0010011110000000001111111110'
]
@emoji_zero = ':rice:'
@emoji_one = ':curry:'

task :commit do
@messages.each do |message|
message.gsub!(/0/, @emoji_zero)
message.gsub!(/1/, @emoji_one)
`git commit --allow-empty -m #{message}`
end
puts 'commit complete successfully!'
end

task :default => :commit

好きな絵文字に置換できるので、0 と 1 をごはんにカレーがかかってるかどうかで表現することにしました。

0:rice:
1:curry:

実行すると!

capture_commit_d.png

やった〜。

もちろん業務時間中にはこんなことやってませんが、こんな評価資料を提出しても「インターネットが好きで好きでたまらないという気持ちが溢れでています。」とコメントしてもらえて、楽しい会社だなぁと思いました。

CSS フレームワークのボタンのスタイルシート読書会

暑い日が続きますが、いかがボタンのスタイルシートを書いてお過ごしですか?
例えば、こういう html があったとして…

<a class="button" href="/signin">ログイン</a>
<input class="button" type="submit" value="検索">

当たり前のように書いていくと、こんな感じのスタイルシートになるでしょうか。

.button {
display: inline-block;
padding: 10px 20px;
color: white;
background-color: blue;
}

単純なようで、実はここにはスタイルシートの大事なことが詰まっていると思うんです。というのも、こんなスタイルシートを書くのだって、考えることがいっぱいあるから。

  • セレクタの名前は .btn なのか、.button なのか
  • ボタンの上下に隙間を指定するのか、高さを指定するのか
  • ボタンの幅は指定するのか、しないのか
  • ブロック要素にするのか、インラインブロック要素にするのか
  • ブラウザのデフォルトのスタイルは影響しないのか?

そんなふうに半分無意識に選択していままでなんとなく書いてきたボタンだけど、みんなどうやって書いてるんだろう。そこで、いくつかの CSS フレームワークのボタンのスタイルシートを読んでみることにしました。

(今回はボタンに関係するスタイルシートだけ抜き出して見ていますが、ブラウザのデフォルトのスタイルをリセットしていたり、抜き出した箇所以外の記述が影響している場合があります。)

Bootstrap (v3.3.5) のボタン

bootstrap_v3.3.5.jpg

サンプルボタンのページ

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}

  • セレクタの名前は .btn
  • width を指定せずに inline-block 要素に指定しているので、文字数によってボタンの大きさが変わる。
    • さらに .btn-block を指定すると、block 要素になって幅が 100% になる。
  • height を指定せずに padding でタップ領域を広げている。
  • white-spacenowrap を指定しているので、ラベルの文字が改行されない。
  • touch-action は、IE (Edge) や Chrome などで有効なタッチ操作に何を許可するか指定できるプロパティが指定されている。
  • user-select は、タップしたときにハイライトされないように none が指定されている。
  • 角丸は 4px
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: thin dotted
;

outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #333
;

text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none
;

outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}

a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none;
}

  • ボタンの状態によって細かくスタイルが指定されている。
  • -webkit-focus-ring-color は、webkit の独自仕様で focus してるときの周囲の色のこと…。初めて聞いたよ!
  • outline-offset は、指定すると outline の線を表示する位置が指定できる。ここでは負の値なので、2px 内側という意味になる。
  • pointer-events は、none に指定しておくとマウスイベントのターゲットにならなくなるとのこと。

Foundation (v5.5.2) のボタン

foundation_v5.5.2.jpg

サンプルボタンのページ

button, .button {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
border-style: solid;
border-width: 0;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-weight: normal;
line-height: normal;
margin: 0 0 1.25rem;
position: relative;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 1rem 2rem 1.0625rem 2rem;
font-size: 1rem;
background-color: #008CBA;
border-color: #007095;
color: #FFFFFF;
transition: background-color 300ms ease-out; }

button:hover, button:focus, .button:hover, .button:focus {
background-color: #007095
; }

button:hover, button:focus, .button:hover, .button:focus {
color: #FFFFFF
; }

button.disabled, button[disabled], .button.disabled, .button[disabled] {
background-color: #008CBA;
border-color: #007095;
color: #FFFFFF;
box-shadow: none;
cursor: default;
opacity: 0.7; }


button::-moz-focus-inner {
border: 0
;

padding: 0; }
  • セレクタの名前は .button
  • appearance は、ブラウザにおける標準的な UI の見た目を利用するかどうか指定できるプロパティ。ここではあえて button を指定しないことで、ブラウザのデフォルトの見た目のスタイルに影響を受けないようにしている。
  • padding で下方向に絶妙な値が指定されていて、ラベルの文字が中央に見えるように調整されている。
    • 日本語の文字だとベースラインの位置が違うのでずれちゃう?
  • transition で、カーソルを合わせたときにに色がゆっくり変わるように指定している。
  • ::-moz-focus-inner は、Firefox で focus したときに適用されるスタイル。normalize.css にも border と padding を無効にする記述が書かれています。
  • 角丸はなし。

Pure (v0.6.0) のボタン

pure_v0.6.0.jpg

サンプルボタンのページ

.pure-button {
/* Structure */
display: inline-block;
zoom: 1;
line-height: normal;
white-space: nowrap;
vertical-align: middle;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner {
padding: 0
;

border: 0;
}

/*csslint outline-none:false*/

.pure-button {
font-family: inherit;
font-size: 100%;
padding: 0.5em 1em;
color: #444; /* rgba not supported (IE 8) */
color: rgba(0, 0, 0, 0.80); /* rgba supported */
border: 1px solid #999; /*IE 6/7/8*/
border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
background-color: #E6E6E6;
text-decoration: none;
border-radius: 2px;
}


.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0)
;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.pure-button:focus {
outline: 0
;

}
.pure-button-active,
.pure-button:active {
box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset
;

border-color: #000\9;
}

.pure-button[disabled],
.pure-button-disabled,
.pure-button-disabled:hover,
.pure-button-disabled:focus,
.pure-button-disabled:active {
border: none
;

background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
filter: alpha(opacity=40);
-khtml-opacity: 0.40;
-moz-opacity: 0.40;
opacity: 0.40;
cursor: not-allowed;
box-shadow: none;
}

.pure-button-hidden {
display: none;
}


/* Firefox: Get rid of the inner focus border */
.pure-button::-moz-focus-inner{
padding: 0
;

border: 0;
}

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
background-color: rgb(0, 120, 231);
color: #fff;
}

  • セレクタの名前は .pure-button 。ボタンに限らず、すべてのセレクタでフレームワークの名前が接頭辞になってる。
  • コメントめっちゃ書いてある。なんで Structure という名前で切り分けたんだろう…?
  • CSS ハックとか IE8 対応とか、辛そうだなぁ…。
  • -webkit-user-drag-webkit-user-select と似ていて、ドラッグしたときに選択させない指定。
  • 角丸は 2px

Bourbon (v4.2.3) + Bitters (v1.0.0) のボタン

bourbon_v4.2.3.jpg

サンプルボタンのページ

Bourbon と Bitters は、CSS フレームワークというよりは Sass の mixin のライブラリなので、以下のような scss を書きました。

@import "bourbon/bourbon";
@import "base/base";

.button {
@extend button;
}

これを Sass でコンパイルしたのが、以下の css です。

button, .button, input[type="button"], input[type="reset"], input[type="submit"],
button,
.button {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
background-color: #477dca;
border-radius: 3px;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
font-size: 1em;
font-weight: 600;
line-height: 1;
padding: 0.75em 1em;
text-decoration: none;
user-select: none;
vertical-align: middle;
white-space: nowrap; }

button:hover, .button:hover, button:focus, .button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus,
button:hover,
.button:hover,
button:focus,
.button:focus {
background-color: #2c5999
;

color: #fff; }
button:disabled, .button:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, input[type="submit"]:disabled,
button:disabled,
.button:disabled {
cursor: not-allowed
;

opacity: 0.5; }
  • -webkit-font-smoothing は、文字をレンダリングするときにアンチエイリアスのかかり具合を調整できるプロパティ。知らなかった…。subpixel-antialiased がデフォルトなので、Retina ディスプレイなど環境によっては太く見えることがあるらしい。
  • 角丸は 3px

まとめ

  • セレクタの名前は、当たり前ですがプロジェクトが採用している命名規則に沿ってつけたらいいんじゃないでしょうか。個人的には、競合しないなら .button でいいんじゃないかなぁと思います…。あと、セレクタがなくても要素名だけでスタイルが適用されるように書いておいてもいいのかもしれない。
  • ボタンの幅や高さは指定していない。なぜなら、ラベルの文字の量によって大きさが変わるようにしておいたほうがはみださないし。ボタンそのものに大きさの情報を持たせるよりも、ボタンを置く場所自体のスタイルで配置を調整するほうがコンポーネントとして使いやすそうです。もちろん、Modifier として幅を揃えるセレクタを用意しておいてもいいかもしれませんが、middle とか large とかつけてると、その中間の名前で悩みそうなので避けたい。block 要素にしておいて、囲んでる要素の大きさで揃えるとかかな?
  • :focus したとき、:hover したとき、:active なとき、:disabled なとき…。ボタンは、想定しなきゃいけない状態がいっぱいあるなぁ。地味に disabled なときにカーソルの形を not-allowed にしてたりする気遣い。
  • 見たこともないようなプロパティの意味を理解して使いこなせると便利そうだなぁ。
    • touch-action
    • user-selectuser-drag
    • pointer-events
    • -webkit-font-smoothing
    • outline-offset-webkit-focus-ring-color…。

あくまでもこれは CSS フレームワークのスタイルシートなので、たとえばコーポレートサイトや EC サイトのボタンとか読んでみてもおもしろそう。

Hexo でブログをつくるまで

capture_tips.png

これまで技術的に調べたことは、GitHub の Tips 専用リポジトリ に issue に書いて公開していた。Markdown で書けるのはもちろん、画像のアップロードもドラック&ドロップでできるし、コメント欄もタグの絞り込みも検索も用意されているので、ブログツールとしてなかなか便利だなーと思っていたんだけど、いいねボタンとかはてなスターとかリアクションがもらえないし、フィードもわかりやすく吐けないし、デザインもいろいろいじってみたいな!と思い、よしブログを作ろうと思ったのでした。

はてなブログ最高だし Tumblr という手もあったけど、この機会に前から興味があった静的サイトジェネレーターを使って GitHub Pages で公開してみようかなと思って いろいろ調べてみると、npm でインストールできる Hexo というツールが 現在の仕事 で扱ってる技術に近そうだなーと思い、あと GitHub Flavored Markdown で書けるので、いっちょ Hexo でブログを作ってみることにしました。

インストールする

とりあえず GitHub でブログ用のリポジトリを作るところからやります!

リポジトリを作ったら、Hexo のウェブサイトの Get started を見ながら以下のコマンドを叩いて Hexo をインストールしました。

$ npm install hexo-cli -g
$ hexo init dev.shikakun.com
$ cd dev.shikakun.com
$ npm install
$ hexo server

これだけ!ローカルに Hexo のサーバーが立ち上がって、 http://0.0.0.0:4000/ で見られるようになりました。
用意した GitHub のリポジトリをリモートリポジトリに登録しておきます。

$ git remote add origin git@github.com:shikakun/dev.shikakun.com.git

デプロイする

とりあえず GitHub Pages にデプロイするところをやります!
Hexo の Deployment のドキュメント を読むと、GitHub Pages へデプロイするには hexo-deployer-git という Hexo のプラグインをインストールしろとあるので、インストールします。

$ npm install hexo-deployer-git --save

Hexo の設定ファイルの _config.yml の Deploy の項目を以下のように編集します。

deploy:
  type: git
  repo: git@github.com:shikakun/dev.shikakun.com.git
  branch: gh-pages
  message: "Updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"

これだけ!

$ hexo deploy -g

デプロイのコマンドを実行すると、Hexo が静的ファイルを生成したあと、gh-pages ブランチへ push して http://shikakun.github.io/dev.shikakun.com/ で見られるようになりました。

独自ドメインを設定する

http://shikakun.github.io/dev.shikakun.com/ で見られるようにはなったけど、せっかくなので http://dev.shikakun.com/ で見たい。というわけで、独自ドメインの設定をやります!

まず、僕は shikakun.com をムームードメインで取得して管理しているため、ムームードメインの管理画面(ムームー DNS のカスタム設定画面)で以下のように入力しました。

サブドメインdev
種別CNAME
内容shikakun.github.io

GitHub Pages の独自ドメインを設定するドキュメント を読むと、リポジトリに CNAME ってファイル名の独自ドメインを書いたファイルが置いてあれば良いみたい。
master ブランチのリポジトリ直下に CNAME ファイルを置いてしまうと Hexo のデプロイ先の gh-pages ブランチのファイルには含まれないため、記事のファイルを置いている source ディレクトリに置きます。

$ echo 'dev.shikakun.com' > source/CNAME

これだけ!hexo deploy -g でデプロイすれば、http://dev.shikakun.com/ で見られるようになった!やったー!

フィードを生成する

Hexo ではデフォルトテンプレートのナビゲーションに「RSS Feed」ってリンクがあるくせに、標準ではフィードを生成してくれない。ということで、フィードを生成してくれる Hexo のプラグインを追加します。

$ npm install hexo-generator-feed --save

これだけ!hexo deploy -g でデプロイすれば、http://dev.shikakun.com/atom.xml で見られるようになった!やったー!
フィードに含めるエントリー数とかは 設定ファイル で設定できるらしいです。

いろいろ設定する

だんだん書くのが疲れてきたので雑になりますが、いろいろ設定しました。
当たり前だけど Git で差分を管理できるのがいいですね!

というわけでブログできた!やった──────────!

capture_dev.png

デフォルトのテンプレートが宇宙感すごいのはなんでなのか。自分の好きなようにカスタマイズ して大満足です。

Hologram ではじめるスタイルガイド入門

スタイルシートを書くのってほんとうにややこしいですね。気がついたら、どこになにが書かれているのかわからない数万行の CSS 地獄になってしまいます。

CSS 地獄にならないためには、例えばボタンなら共通のボタンのスタイルシートに統一して、どのページでも同じスタイルシートでボタンを表現したほうが、効率的だし仕事も早いですよね。デザインのリニューアルだって一瞬です。さらには、デザイナーが作業しなくてもエンジニアだけでボタンを用意できてしまうという CSS 天国が待っています。

CSS 天国を実現するためには、どのような共通のスタイルシートを用意しているのかまとめてあるドキュメント、「スタイルガイド」を用意しておくと便利です。べつに wiki にまとめてもいいんだけど、wiki って更新するの忘れてしまいがち。そこで、スタイルシートに書いたコメントを抽出して自動でスタイルガイドを生成してくれるっていう便利なツールを紹介したいと思います。

このようなツールは GitHub も使っている KSS や、デフォルトのテンプレートがかっこいい StyleDocco などいろいろありますが、ここでは Hologram を使ってスタイルガイドを作ってみようと思います。ツールそれぞれに特徴があるので、ぜひいろいろ試してみて自分のプロジェクトに合ったものを選んでください!

Hologram を使ってみよう

それでは Hologram でスタイルガイドを作ってみましょう!

スタイルガイドの生成を体験するために、サンプルのかんたんなプロジェクトを用意しました。

さっそく以下の手順で Hologram を実行してみましょう。
(環境は Mac の OSX、Ruby は最新のバージョンになっている前提のコマンドです!)

  1. ターミナルを立ち上げます。
  2. $ gem install hologram
    • Mac に Hologram をインストールします。
  3. $ git clone git@github.com:shikakun/styleguide.git
    • サンプルプロジェクトを Mac にダウンロードします。
  4. $ cd styleguide
    • サンプルプロジェクトのディレクトリへ移動します。
  5. $ hologram hologram_files/config.yml
    • Hologram を実行します。

Hologram を実行すると、app ディレクトリと同じ階層に styleguide というディレクトリができます。このなかにあるファイルが、スタイルガイドです!

button.html をウェブブラウザで開いてみましょう。

capture.png

スタイルガイドができてるぞ!!

Hologram の仕組み

さきほど生成したスタイルガイドでは例としてボタンのスタイルシートについて説明していますが、この説明がどこに書かれているのかというと、ボタンのスタイルシートが書いてある CSS ファイルにコメントとして書かれています。

app/stylesheets/button.css には、以下のように書いてあります。

/*doc
---
title: このスタイルシートについて
name: 0-button-outline
category: button
---

このスタイルシートでは、ボタンのスタイルを指定しています。

*/

この /*doc からはじまったコメントが Hologram のために書かれたコメントです。スタイルシートのコメントがすべてスタイルガイドに反映されるわけではなく、Hologram の記法に沿っていないものは無視されます。

それぞれ指定してる項目の意味は以下の通りです。

  • title:
    • スタイルガイドで見出しになる文字列です。日本語で書いても問題ありません。
  • name:
    • スタイルガイドで URL のアンカーになる文字列です。また、同じ name は同じスタイルの説明として解釈されるので、スタイルの説明ごとに別の name をつける必要があります。半角英数で指定するのがおすすめです。
  • category:
    • スタイルガイドの目次に表示されたり、ファイル名になる文字列です。半角英数で指定するのがおすすめです。

コメントは issue でいつも慣れ親しんでいる Markdown で書くことができるので便利ですね。

Hologram をカスタマイズする

スタイルガイド自体のテンプレートは hologram_files/templates ディレクトリに入っていて、ヘッダーとフッターのマークアップや、スタイルガイド自体のスタイルシートを編集できるようになっています。目の前の仕事から逃避したいときや、土日に予定がなさすぎてつらいときとかにプロジェクトに合ったおしゃれなデザインをしてみるのも一興です。

そんな暇ないよ!って人は、モダンな Hologram のテンプレートを作って公開してる人もいるので、そのまま使うなりディレクトリ構成を参考にするなりしてみたらいかがでしょうか。

これは、CodeGrid っていう有料のメールマガジンで Hologram の使い方を紹介していたときのサンプルコード。サンプルコードは GitHub で無料で公開されています。

このサンプルプロジェクトの Hologram は、実は Markdown をパースするところもカスタマイズしています。
詳しくは hologram_files/markdown_renderer.rb を参照ください。
Hologram はカスタマイズ性が高いので、自分の好きなように表示できてめっちゃ楽しいです。

実際にスタイルガイドを書きながらスタイルシートを書いていると、いつも誰かに説明を迫られているような気がして、scss の長い入れ子を分割したり、どうしてこのように書いているのかをまめにコメントするようになって、あとから自分で見返したときもわかりやすくなって良いなと思います。

あと、サンプルの html が一覧になっていることで、そのスタイルシートがうまく適用されなくて表示が崩れても見つけやすいという、テスト的な使い方もできるなーと思いました。

まだ全然手探りでやってますけど、なかなかよかったので、とりいそぎご紹介でした!