ドジっ娘でもかんたん！Bower × Rails Assets

フロントエンドまわりのパッケージを管理するBowerですが、JS, HTMLだけでなくCSS, フォントも管理できるそうです。
ということで先日、Webフォント **[loupe-icon](https://github.com/lo-upe/loupe-icon)** をBower componentとして公開しました。
フォント以外のものを公開するときも参考にできると思います。

また、componentをRails Assetsで使う方法もまとめてみました。

## 準備

GitHubのリポジトリに、component化したいものが上がっている
`npm install bower` 済み

## Step1. Bower

### bower.jsonをつくる

ここでは bower-test という名前のディレクトリで作業することにします。
プロジェクトのディレクトリに移動して

```
$ cd bower-test
$ bower init
```

いくつか質問があるので、答えていくと簡単に`bower.json`が生成されます。

```
? May bower anonymously report usage statistics to improve the tool over time? (Y/n)
# 匿名で統計をとってもいいですか？
```

```
? name: (bower-test)
# componentの名前
```

```
? version: (0.0.0)
# セマンティックバージョンがいいと思います
```

参考: [http://shijimiii.info/technical-memo/semver/](http://shijimiii.info/technical-memo/semver/)

```
? description:
# 説明があれば
```

```
? main file:
# メインになるファイル名
```

```
? what types of modules does this package expose?: (Press <space> to select)
>◯ amd
 ◯ es6
 ◯ globals
 ◯ node
 ◯ yui
# どんなモジュールに公開されますか？（？）
# チェックを付けずにそのままEnter
```

```
? keywords:
# キーワードがあれば
# カンマ区切り
```

```
? authors: (ユーザ名 <メールアドレス>)
# gitに登録しているユーザ名とメールアドレス
```

```
? licence: (MIT)
# ライセンス
```

```
? homepage:
# READMEのような解説ページ（？）
```

```
? set currently installed components as dependencies?: (Y/n)
# 今インストールされているcomponentの依存ファイルもセットしますか？
```

```
? add commonly ignored files to ignore list?: (Y/n)
# いつも無視しているファイルをリストに入れますか？
```

```
? would you like to mark this package as private which prevents it from being accidentally published to the registry?: (y/N)
# 誤ってレジストリに発行されるのを防ぎますか？
```

```
? Looks good?: (Y/n)
# 質問から生成された `bower.json` の中身を見せられるので、これでよければ `Y` で確定します。
```

基本的には(カッコ内のワード)でいいですか？ と聞かれるので、問題なければ `Enter` キーを押します。
ずっと `Enter` や `y` でも大丈夫だったりします。

```
$ ls bower-test
bower.json

$ git add bower.json
$ git commit -m "Add bower.json"
$ git push origin master
```

無事に生成されました。gitにpushします。

ちなみに、[loupe-icon](https://github.com/lo-upe/loupe-icon)の `bower.json` はこんな感じです。

``` bower.json
{
  "name": "loupe-icon",
  "version": "1.0.0",
  "homepage": "https://github.com/lo-upe/loupe-icon",
  "authors": [
    "yamasy1549 <sanae@yamasy.info>"
  ],
  "main": [
    "./css/loupeicons.css",
    "./fonts/*"
  ],
  "license": "MIT",
  "ignore": [
    "*/.*",
    "*.json",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}
```

### tagをつける

versionはタグで決まるようなので、タグ名もセマンティックバージョンにしておきます。

```
$ git tag 0.0.0
$ git push origin --tags
```

### bowerに登録する

```
$ bower register bower-test git://github.com/ユーザ名/リポジトリ名.git
```

`git://` から始まるURLにしないと怒られるみたいです。
うまくいったか見てみます。

```
$ bower info component名
$ bower search component名
$ bower install component名
```

loupe-iconでも確認してみました。

```
% bower search loupe-icon
Search results:
    loupe-icon git://github.com/lo-upe/loupe-icon.git
```

```
% bower info loupe-icon
bower loupe-icon#*              cached git://github.com/lo-upe/loupe-icon.git#0.0.1
bower loupe-icon#*            validate 0.0.1 against git://github.com/lo-upe/loupe-icon.git#*
bower loupe-icon#*                 new version for git://github.com/lo-upe/loupe-icon.git#*
bower loupe-icon#*             resolve git://github.com/lo-upe/loupe-icon.git#*
bower loupe-icon#*            download https://github.com/lo-upe/loupe-icon/archive/1.0.1.tar.gz
bower loupe-icon#*             extract archive.tar.gz
bower loupe-icon#*            mismatch Version declared in the json (1.0.0) is different than the resolved one (1.0.1)
bower loupe-icon#*            resolved git://github.com/lo-upe/loupe-icon.git#1.0.1

{
  name: 'loupe-icon',
  version: '1.0.1',
  homepage: 'https://github.com/lo-upe/loupe-icon',
  authors: [
    'yamasy1549 <sanae@yamasy.info>'
  ],
  main: [
    './css/loupeicons.css',
    './fonts/*'
  ],
  license: 'MIT',
  ignore: [
    '*/.*',
    '*.json',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

Available versions:
  - 1.0.1
  - 1.0.0
  - 0.0.1
  - 0.0.0
You can request info for a specific version with 'bower info loupe-icon#<version>'
```

このように表示されればOKです。

## Step2. Rails Assets

プロジェクトのディレクトリで `bower install component名` をして読み込んでもいいのですが、どうせならもっとスマートに（Railsらしく？）したいときに。
アセットファイルをいい感じにまとめてくれる **Rails Assets** を使います。

Rails Assets: [https://rails-assets.org/](https://rails-assets.org/)

![Rails Assets](https://qiita-image-store.s3.amazonaws.com/0/54805/2a515647-07a4-be07-4b1a-26f7070e9fbc.png)

右上の `Add component` から、さっき作ったcomponentをRails Assetsに追加してもらいます。

![Rails Assets New component](https://qiita-image-store.s3.amazonaws.com/0/54805/12fe7d9a-d905-3056-046a-c262ff3c97c7.png)

`Package name` にcomponent名を、`Version`にバージョン名（任意なのでなくてもOK）を入力してConvertします。

数分待ちます。

Rails Assetsのホームから、作ったcomponent名を入れてみます。

![Rails Assets Search](https://qiita-image-store.s3.amazonaws.com/0/54805/0463aa2e-cc14-a35e-e00a-0494bcb4a0ee.png)

うまくできたみたいです！

##  Step3. Railsで使う

いよいよRailsプロジェクトで使う準備をします。

`Gemfile` にgemを追加して…

``` ruby:Gemfile
gem 'rails-assets-component名'
```

`application.css` や `application.js` で読み込みます。

``` app/assets/stylesheets/applicaiton.css
*= require component名
```

``` app/assets/javascripts/applicaiton.js
//= require component名
```

これで、Bower component をRailsでもシンプルに使うことができました！

## 参考記事
http://qiita.com/fnobi/items/638c3b5be082ee996625
http://qiita.com/oreo3@github/items/eb790fc091aa28af8d33
http://qiita.com/joker1007/items/8d2fa9960f3d53b8cb57

## おまけ

公開したWebアイコンの一覧です。よろしければお使いください。
loupe-icon: [http://lo-upe.com/loupe-icon.html](http://lo-upe.com/loupe-icon.html)