feat: use hexo

source/_posts/2015/2015-02-26-cabocha-on-rubygems.md

@@ -0,0 +1,34 @@
+---
+title: CaboCha on RubyGems
+date: 2015-02-26 09:00:00 +09:00
+redirect_from: "/blog/2015/02/26/cabocha-on-rubygems"
+---
+
+日本語係り受け解析器 CaboCha の Ruby バインディング [cabocha-ruby](https://github.com/uetchy/cabocha-ruby) をリリースした。とは言っても [公式](https://code.google.com/p/cabocha/) の SWIG バインディングをベースにしたものだ。
+
+## 導入
+
+```bash
+gem install cabocha
+```
+
+でインストール出来る。
+
+> cabocha-ruby をインストールする前に、CaboCha を`brew install cabocha`かなんかでインストールしておかないと make が失敗するので注意すること。
+
+## 使う
+
+require する時は`require "cabocha"`と`require "CaboCha"`、どちらを使っても正しい。
+
+```ruby
+require "cabocha"
+
+parser = CaboCha::Parser.new
+tree = parser.parse("太郎は次郎に本を貸した")
+
+p tree
+```
+
+これまでソースコードをダウンロードし`ruby extconf.rb && make install`していたのが、これからは`gem install cabocha`で済むようになる。
+
+バグを見つけたら [Pull request](https://github.com/uetchy/cabocha-ruby/pulls) を送ってほしい。

source/_posts/2015/2015-02-26-gulp-decomposer-bower-import.md

@@ -0,0 +1,108 @@
+---
+title: 'gulp + decomposer: Best way to sassy-@import bower components'
+date: 2015-02-26 09:00:00 +09:00
+redirect_from: "/blog/2015/02/26/gulp-decomposer-bower-import"
+---
+
+gulp + Browserify(+ debowerify)という構成で Web サイトを作っていると、SASS にも debowerify 相当のものが欲しくなってくる。
+
+ちなみに、**debowerify** というのは、
+
+```js
+var Velocity = require('velocity')
+```
+
+という JavaScript を、
+
+```js
+var Velocity = require('./../../bower_components/velocity/velocity.js')
+```
+
+という風に、bower_components 内のパスに解決してくれる Browserify transform だ。
+欲しいのはこれの SASS 版。
+
+「あったらいいのにな〜」と思うようなライブラリは Github で検索すれば必ず出てくる。はずだったが、無かった。
+
+そこで [decomposer](https://www.npmjs.com/package/decomposer) という gulp プラグインを作った。
+
+# 使い方
+
+まずは`npm install --save-dev gulp gulp-sass decomposer`で必要なものをインストールしておく。既存のプロジェクトに追加するなら decomposer だけでいい。
+
+**gulpfile.js** はこのように定義しておく。
+
+```js
+var gulp = require('gulp')
+var sass = require('gulp-sass')
+var decomposer = require('decomposer')
+
+gulp.task('styles', function() {
+  gulp
+    .src('src/styles/**/*.sass')
+    .pipe(decomposer())
+    .pipe(sass({ indentedSyntax: true }))
+    .pipe(gulp.dest('dist/css'))
+})
+```
+
+ポイントは`sass` **よりも前** に`decomposer`を挟むこと。なぜなら、外部から@import した mix-ins や変数は SASS コンパイル時に解決されるからだ。`sass`よりも後に置くと、SASS が@import を解決出来ずにエラーが発生する。
+
+続けて SASS を書こう。
+
+```scss
+@import normalize.sass @import styles/font body font-family: $ff-gothic;
+```
+
+> `$ff-gothic`は [uetchy/styles](https://github.com/uetchy/styles) の _font.sass_ で定義されている font-family だ。
+
+最後に Bower を使って必要なアセットをインストールする。
+
+```bash
+bower i --save normalize.sass
+bower i --save uetchy/styles
+```
+
+これで完成。後は`gulp styles`を実行するだけだ。
+
+# ファイルパス解決時のポイント
+
+decomposer は Bower モジュールに入っている任意のファイルを指定して@import することが出来る。
+記法はこのようになる。
+
+```scss
+@import [Bowerモジュール名]/[ファイル名];
+```
+
+例えば、よく使うスタイルをまとめた [uetchy/styles](https://github.com/uetchy/styles) の**\_font.sass** を@import するなら、
+
+```scss
+@import styles/font;
+```
+
+と書ける。
+ここでもし`@import styles`と、ファイル名を省略して書くとどうなるのだろうか？　コンパイルに失敗する？　そんなことはない。
+
+モジュール名だけを書くと、decomposer は**bower.json**に書かれている main ファイルを見つけ出して、それを@import してくれるのだ。
+
+もし main ファイルが複数指定されていたら、`index.sass`や`[モジュール名].sass`、または**main っぽい名前** を持つファイルを@import する。
+
+つまり、
+
+```scss
+@import normalize.sass;
+```
+
+と書けば、
+
+```scss
+@import ../bower_components/normalize.sass/normalize.sass;
+```
+
+という風に解決される。
+
+# まとめ
+
+これでスタイルの@import をすっきり書けるようになった。
+とはいえ、component 対応や Plain CSS のインライン展開や.less 対応など、追加したい機能は色々ある。
+
+もし Contribution に興味があるなら、[Github リポジトリ](https://github.com/uetchy/decomposer)をフォークしてほしい。

source/_posts/2015/2015-03-10-create-icns-from-sketch.md

@@ -0,0 +1,60 @@
+---
+title: Create .icns from .sketch
+date: 2015-03-10 09:00:00 +09:00
+redirect_from: "/blog/2015/03/10/create-icns-from-sketch"
+---
+
+![](/uploads/create-icns-from-sketch/intro.png)
+
+Gulp をつかって .sketch から .icns を生成するために、[gulp-sketch](https://github.com/cognitom/gulp-sketch) の出力結果を.icns へ変換する [gulp-iconutil](https://github.com/uetchy/gulp-iconutil) というプラグインを作りました。
+
+# はじめに
+
+.icns を作るには様々なサイズのアイコン画像を格納した **iconset** をつくり、それを `iconutil` に渡します。ここで面倒なのは iconset です。
+
+iconset の作成には 16×16 ... 512×512 の 6 種類のサイズのアイコンと、さらにそれぞれの Retina 用のアイコンも加えて、計 12 種類ものサイズの画像が必要です。
+
+唯一の救いは、最大サイズの画像だけ用意しておけば、不足している小さいサイズの画像は`iconutil`が自動で生成するということでしょう。
+
+今回作った [gulp-iconutil](https://www.npmjs.com/package/gulp-iconutil) は、Gulp からこの`iconutil`コマンドへの橋渡しをしてくれます。
+
+# アイコンをデザインする
+
+Sketch 上に 512×512 サイズのアートボードを作成し、アプリのアイコンをデザインします。
+
+![](/uploads/create-icns-from-sketch/dock.png)
+
+> Dock 上でアイコンの見栄えをチェックするために、[sketch-dockpreview](https://github.com/fnky/sketch-dockpreview)を使っています。これは本当に便利なプラグインです。
+
+# .sketch から .icns へ
+
+.sketch から iconset を作成するために、[gulp-sketch](https://github.com/cognitom/gulp-sketch) を、そして iconset から .icns へ変換するために今回作った [gulp-iconutil](https://www.npmjs.com/package/gulp-iconutil) を使います。npm からインストール出来ます。
+
+Gulp タスクは以下のように書きます。
+
+```coffee
+gulp     = require 'gulp'
+sketch   = require 'gulp-sketch'
+iconutil = require 'gulp-iconutil'
+
+gulp.task 'icons', ->
+  gulp.src 'icons/sketch/*.sketch'
+    .pipe sketch
+      export: 'artboards'
+      formats: 'png'
+      scales: '1.0,2.0'
+    .pipe iconutil('app.icns')
+    .pipe gulp.dest 'icons/'
+```
+
+icons タスクを実行すると、icons フォルダの中に**app.icns**が生成されます。
+
+![](/uploads/create-icns-from-sketch/result.png)
+
+Electron アプリ開発者はこのアイコンファイルを OS X 向けビルドにそのまま使えます。
+
+# まとめ
+
+デザインデータのポストプロセスの自動化が Gulp と sketchtool のおかげでやりやすくなりました。
+
+[gulp-iconutil](https://github.com/uetchy/gulp-iconutil) は今週リリースしたばかりで若干不安定なので、もしバグを見つけたら[Issue](https://github.com/uetchy/gulp-iconutil/issues)を作るか、[PR](https://github.com/uetchy/gulp-iconutil/pulls)を投げてください!

source/_posts/2015/2015-07-05-hugo-paper.md

@@ -0,0 +1,15 @@
+---
+title: 'Hugo Paper: well-simplified theme for Hugo'
+date: 2015-07-05 09:00:00 +09:00
+redirect_from: "/blog/2015/07/05/hugo-paper"
+---
+
+When I created my blog, there are no well simplified [Hugo](http://gohugo.io) theme around the world. I need to a theme that just don't interrupt reading experience. [Hugo Paper](https://github.com/uetchy/hugo-paper) is made for that.
+
+# How to integrate
+
+Just run following oneliner and you will be ready to start using Hugo Paper.
+
+```bash
+$ git submodule add https://github.com/uetchy/hugo-paper.git themes/hugo-paper && git submodule update
+```

source/_posts/2015/2015-09-07-alfred-qiita-workflow-in-go.md

@@ -0,0 +1,41 @@
+---
+title: Alfred Qiita Workflow in Go
+date: 2015-09-07 09:00:00 +09:00
+redirect_from: "/blog/2015/09/07/alfred-qiita-workflow-in-go"
+---
+
+![Cover](/uploads/alfred-qiita-workflow.png)
+
+Ruby で書かれている [Alfred Qiita Workflow](https://github.com/uetchy/alfred-qiita-workflow) を[バグ修正](https://github.com/uetchy/alfred-qiita-workflow/issues/3)のついでに Go で書き直した。
+
+Qiita API v2 に対応し、ユーザー名とパスワードの代わりとして、[Personal Access Token](https://qiita.com/settings/tokens/new)を使い始めた。
+
+これで、ストックした記事や自分で書いた記事を検索することがより気軽に出来る。
+
+Alfred に返却する XML の生成には[go-alfred](https://github.com/pascalw/go-alfred)というライブラリを利用した。
+
+## go-qiita
+
+Alfred Qiita Workflow の API クライアント部分を切り出して [go-qiita](https://github.com/uetchy/go-qiita) としてリリースした。Workflow で必要だった部分しか実装してないが、記事の検索など基本的なことは出来る。
+
+設計は Google の [go-github](https://github.com/google/go-github) を参考にしている。クライアントの初期化時に、以下のように http.Client 互換の Interface を渡してやれば、それを経由して通信するようになっている。
+
+```go
+// Personal Access Tokenを使ったOAuth2クライアントを作る
+ts := oauth2.StaticTokenSource(&oauth2.Token{AccessToken: "personal access token"})
+tc := oauth2.NewClient(oauth2.NoContext, ts)
+
+// OAuth2クライアントをgo-qiitaに引き渡す
+client := qiita.NewClient(tc)
+
+// 今までに書いた記事を取得
+items, _, _ := client.AuthenticatedUser.Items()
+```
+
+このようにすることで、API クライアントは認証系を気にせず API サーバーとのやりとりを考えることが出来る。このやり方はかなりスマートだと思うのでもっと流行って欲しい。
+
+ちなみに認証をしない場合は`NewClient()`に`nil`を渡せばよい。
+
+```go
+client := qiita.NewClient(nil)
+```

source/_posts/2015/2015-12-07-wallpaper-for-simple-desktop.md

@@ -0,0 +1,11 @@
+---
+title: Wallpapers for simple desktop
+date: 2015-12-07 09:00:00 +09:00
+redirect_from: "/blog/2015/12/07/wallpaper-for-simple-desktop"
+---
+
+![One of my wallpapers](/images/wallpaper/bricks.png)
+
+[There are](/wallpaper) desktop wallpapers by [Sketch](https://www.sketchapp.com/).
+
+You can download all of them and use it for personal use.

source/_posts/2015/2015-12-16-atom-package-diff.md

@@ -0,0 +1,53 @@
+---
+title: Gluing Installed Atom Packages and apm Stars Together
+date: 2015-12-16 09:00:00 +09:00
+redirect_from: "/blog/2015/12/16/atom-package-diff"
+---
+
+Atom にインストールしているパッケージと[Atom.io](https://atom.io/packages)上のスターを同期する CLI ツール [Atom Package Diff](https://www.npmjs.com/package/atom-package-diff) を公開した。
+
+# 導入
+
+npm 経由でインストールする。
+
+```bash
+$ npm install -g atom-package-diff
+```
+
+# インストール済みパッケージとスターの diff
+
+`apd status`コマンドでインストール済みパッケージとスターしているパッケージの diff を見ることができる。
+
+```bash
+$ apd status
+36 packages installed
+30 packages starred
+
+# Packages only in apm
+project-manager react
+
+# Packages only in local machine
+Sublime-Style-Column-Selection atom-fuzzy-grep douglas language-babel language-ini language-swift term3 travis-ci-status
+```
+
+# 同期
+
+`apd sync --local`を実行すると、インストール済みパッケージを全部`apm star`し、それ以外を`apm unstar`する。
+
+`apd sync --remote`でその逆の処理を行う。つまり、スターされているパッケージを全部インストールし、それ以外をアンインストールする。
+
+```bash
+$ apd sync --local
+Unstaring ... project-manager
+Unstaring ... react
+Staring ... Sublime-Style-Column-Selection
+Staring ... atom-fuzzy-grep
+Staring ... douglas
+Staring ... language-babel
+Staring ... language-ini
+Staring ... language-swift
+Staring ... term3
+Staring ... travis-ci-status
+```
+
+ソースコードは [Github](uetchy/atom-package-diff) で公開している。