Kobito のアドベントカスタムテーマ tonakai を作る

サァアドベントカレンダーが始まりました！！

こちらはさくらのアドベントカレンダー（その２）ということなので、[その１](http://qiita.com/advent-calendar/2016/sakura)とは違った雰囲気で行きたいと思います!

# 作業概要
さて、12月なので Kobito.app の年末用テーマがほしいなと思いました。
普段 kobito はデフォルトの見た目で使用していますが、せっかくなので雰囲気を盛り上げようと思いました。これが3時間前のことです。

## 環境
```
この記事は Mac版 Kobito を対象に書かれています。
```

## 目標
- 年末らしい雰囲気は少し出したい
    - 年末要素を込める
- エンジニアの人でも親近感が湧きやすいものにする
    - テキストエディタなどのThemeとして人気の `monokai` をベースにしていく
- テーマを `tonakai` と命名して盛り上げていく 🎅
- その２を言い訳にしていく

## 作成開始
### カスタムスタイルシート用の編集方法
💡 スタイル変更用ファイル `custom-style.css` の開き方は、以下の公式ヘルプを参考にして下さい。
[http://help.qiita.com/ja/articles/kobito-mac-custom-stylesheet](http://help.qiita.com/ja/articles/kobito-mac-custom-stylesheet)

カスタムテーマは、デフォルトの継承スタイルを追加・上書きしながら作成していく必要があります。今回は既存のスタイルを活かして[^1]、手を抜いていく方向性で進めます。

[^1]: いったんすべてのスタイルをリセットしても良かったのですが、どうやらそもそもデフォルトで読み込むスタイル `markdown.css` の方で `normalize.css` を呼んでいるようで、自分で再度リセットスタイルを定義するのは無駄だなとおもい止めた。

### スタイルの雛形コピー
`Kobito.app/Contents/Resources/markdown.css` をみると、コード下部に以下のような項目があるので、ここから最後までが入力結果のスタイルを定義しているようですね。

```css
/* =============================================================================
   Markdown styles
   ========================================================================== */
...
```

この部分をまるっとコピーして、変更すべきスタイルの雛形にしました。先に開いておいた `custom-style.css` に貼り付けます。このままだと `markdown.css` で定義されているスタイルと同じものが２回呼ばれるだけなので、スタイルを追加・修正したら、不要な部分は消すことにします。

### スタイルの定義と要素調査の仕方
定義されているスタイルを眺めてみると、大体どの HTMLタグが Markdown シンタックスのどれに該当するかは見当がつきます。(例えば `#` は `h1`, `blockquote` は `>` に対応するなど)

試しに `custom-style.css` に定義した任意の要素の値を変更してみると、入力結果がリアルタイムに反映されると思います。

```css:custom-style.css
body {
  background-image: url("markdown_background.png");
  margin: 1em;
  /* font-size: 13px; */
  font-size: 10em;
  font-family: "Monaco", monospace, Helvetica Neue, Helvetica, "Hiragino Kaku Gothic Pro", "Lucida Grande", Verdana, Arial, Meiryo, sans-serif; }
```

文字がすごく大きくなりましたね。こんな感じでこつこつスタイルを定義していくのですが、ときおりどのスタイルがどの要素に対応しているのかわからないことがあります。
うれしいことに、Kobito.app は、普段ブラウザのデバッガを使って開発を行うのと同様に、デバッガを立ち上げて要素の検証を行うことができます。

右クリックでコンテクストメニューを表示して `要素の詳細を表示` する。
![スクリーンショット 2016-12-01 11.57.37.png](https://qiita-image-store.s3.amazonaws.com/0/102819/9296b4f5-8a65-32ef-b02a-21a34a820351.png)

デバッガが開くので、![スクリーンショット 2016-12-01 12.04.10.png](https://qiita-image-store.s3.amazonaws.com/0/102819/f8868266-6207-6272-0ccd-be9056da64d2.png) ボタンを押して、任意の要素を選択します。スタイル調査エリアが表示されていない場合は ![スクリーンショット 2016-12-01 12.06.01.png](https://qiita-image-store.s3.amazonaws.com/0/102819/90f93b4d-77a5-0259-cfb9-c7e86957ca24.png) ボタンで表示切り替えを行うことができます。

![スクリーンショット 2016-12-01 14.55.36.png](https://qiita-image-store.s3.amazonaws.com/0/102819/c87a8d91-efbc-aa4c-8727-fcefc4e54332.png)

選択した要素に現在どんなスタイルが設定されているのかがわかれば、希望のスタイルに変更もしやすいです。また、デバッガでリアルタイムに変更プレビューできるのも、普段web開発を行っている利用者にとっては親しみがわきますね。

### monokai スタイルの用意と適用
該当する要素の調べ方とスタイルの書き方がわかったところで、さっそく monokai風のみために変更していきたいと思います。

ところで、肝心の monokai のスタイルは、 Atom （テキストエディタ） のThemeとして公開されている [atom-monokai-extended](https://github.com/danielgtaylor/atom-monokai-extended) を利用させてもらうことにしました。
こちらのスタイルをコツコツ移植していきます。

### その他のスタイルへの対応
上記の作業を行っていると、[atom-monokai-extended](https://github.com/danielgtaylor/atom-monokai-extended) には存在しない qiita特有のスタイルや、`markdown.css` の継承による文字サイズや余白に対して似合わないものがでてきます。
こればかりは自分で何かしらの定義を行う必要があります。こちらもひたすら地味に Kobito.app上で要素を検証しつつスタイルを適用してきます。

### 年末感を出す
ざっくりと monokai風のスタイルが適用できたので、少しだけ期間限定感を出していきたいですね。若干緑がかったクロを背景に敷いて、見出しに emoji をつかって装飾を試みてみましょう。

```css:custom-style.css
h1::before {
  content: '🎁';
  margin-right: 0.4em;
}

h2::before {
  content: '🌲';
  margin-right: 0.4em;
}
```

![スクリーンショット 2016-12-01 12.41.15.png](https://qiita-image-store.s3.amazonaws.com/0/102819/b7491507-d68f-82ff-3a6c-ae216859ae2b.png)

期間限定感が増しました・・・。

最後にトナカイを背景に表示させてあげましょう。画面右下に固定されてついてくるのが可愛いですね！！！

```css:custom-style.css
body {
  color: #f8f8f2;
  background-color: #000C00; /* default #222222 */
  background-image: url("markdown_background.png");
  /*font-family: Source Han Code JP, "Monaco", monospace, Helvetica Neue, Helvetica, "Hiragino Kaku Gothic Pro", "Lucida Grande", Verdana, Arial, Meiryo, sans-serif;*/
  font-family: "Monaco", monospace, Helvetica Neue, Helvetica, "Hiragino Kaku Gothic Pro", "Lucida Grande", Verdana, Arial, Meiryo, sans-serif;
  line-height: 1.6;
  position: relative;
  font-size: 12px;
}

body::before {
  position: fixed;
  right: 0;
  bottom: 0;
  content: '🐑';
  font-size: 20em;
  opacity: 0.2;
  line-height: 1;
}
```

![スクリーンショット 2016-12-01 12.46.35.png](https://qiita-image-store.s3.amazonaws.com/0/102819/c2c86912-6420-a0b2-f112-ee351ca349ec.png)

tonaka..

冬特有の寒さを表現させるために、画面をマウスオーバーしたらしばらく震える演出を加えて完成です・・・！

```css:custom-style.css
body:hover::before {
  animation: shake 0.12s linear 15;
}

/* 
アニメーション参考
https://css-tricks.com/snippets/css/shake-css-keyframe-animation/
*/
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
```

![hoge.gif](https://qiita-image-store.s3.amazonaws.com/0/102819/fcdef83d-c679-8bf7-112a-5e74e41e3c0d.gif)

やったね 🎉🎉

## まとめ
トナカイの emoji は無い。


## 今回のコードはこちら
装飾を消せば、ただの monokai風テーマとして利用可能😍
[https://gist.github.com/octonyat/437577775e3c183a142c3f7111d7e6d4](https://gist.github.com/octonyat/437577775e3c183a142c3f7111d7e6d4)

## 参考
[Kobito用カスタムCSSつくってみた
](http://qiita.com/naoty_k/items/392ec06dad1877b0043f)