Bower とは

BOWER – THE BROWSER PACKAGE MANAGER html, css, and javascript

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

---

BowerはWeb開発向けのパッケージマネージャーです。画像・CSS・JavaScriptといったリソースを簡単にインストールする事ができ、依存関係を管理してくれます。

新しいプロジェクトをスタートする度に毎回jQuery等のリソースを複製して設置するのは面倒です。 そこでBowerを利用する事で、コマンドラインから簡単に最新のパッケージを、依存リソースと一緒にインストールする事ができます。

また、プロジェクトの設定ファイル（bower.json）を作成して依存リソースを記しておけば、 コマンド一発で全てダウンロード、あるいはアップデートする事ができます。 プロジェクトに必要なライブラリがチームメンバーにとって一目瞭然になるのもメリットですね。

見ての通り、Twitter開発陣プレゼンツのリソースです。 リリース当初小耳には挟んでいたのですが、実用するまでには至らず。実際使ってみたら大変便利でした。

インストール

まずは Bower をインストールします。必要に応じて、sudoなどしましょう。 （node.jsを先にインストールしておく必要があります）

$ npm install -g bower

Windowsユーザーの場合は、Gitがコマンドプロンプトから呼べないと上手く動作しないそうです。 公式にあるように、msysgitインストール時に “Run Git from the Windows Command Prompt”のチェックを入れるか、 あるいは Git CUIの環境でnode.jsへのパスを通しておけば使えます。

cf) 公式ドキュメント参照 (“Windows users”の項)

簡単な使い方

パッケージをインストールする

まずはコマンドラインからパッケージ単体をインストールしてみます。”install” コマンドでパッケージ名を指定します。

$ bower install jquery

すると、カレントディレクトリに「bower_components」ディレクトリが作成され、その中にパッケージがインストールされます。 こんなかんじに。

ProjectRoot/
└ bower_components/
    └ jquery/
         ├ jquery.js
         ├ jquery.min.js
         ├ component.json
         └ composer.json

デフォルトの名前が”components”から変更になっています – 2013/09/05

パッケージ名を連記する事で複数のパッケージを一度にインストールする事もできます。

$ bower install jquery modernizr mustache

バージョンを決め打ちしてインストールするにはシャープ記号で区切って指定することができます。

$ bower install jquery#1.8.2
$ bower install jquery#1.8.x
$ bower install jquery#1.8
...

パッケージをアップデートする

インストールしたパッケージは “update” コマンドでアップデートできます。

$ bower update

欲しいパッケージを探す

欲しいパッケージがBowerに登録されているかどうかは “search” コマンドで探すことができます。

$ bower search mustache

    - mustache git://github.com/janl/mustache.js
    - grunt-mustache git://github.com/jonschlinkert/grunt-mustache.git

欲しいパッケージが見つからないんだけど？

Bowerに登録されていないパッケージをインストールするにはいくつかの方法があります。 例えば、headjsをインストールしたい場合。

$ bower install https://github.com/headjs/headjs
$ bower install headjs/headjs
$ bower install https://raw.github.com/headjs/headjs/master/dist/head.js
$ bower install ../../the/path/to/head.js

それぞれ次の物を指定してインストールしています。2番目が楽でいいですね。

1. GitHubのリポジトリURL
2. GitHubのショートハンド
3. リソースの直接URL
4. リソースのローカルパス

“register” コマンドでパッケージを新規登録する事も出来ますが、特定の条件が必要になる為、ここでは詳しく触れないでおきます。

プロジェクトを作成する

プロジェクトの設定ファイル “bower.json” を作っておく事で、 必要なパッケージを一括してインストール・アップデートする事ができます。

プロジェクトのルートディレクトリに”bower.json”を作成し、次のような要領で入力します。

設定ファイル名が”component.json”から変更になっています – 2013/09/05

{
    "name" : "My Awersome Project",
    "version" : "1.0.0",
    "dependencies" : {
        "jquery" : "1.8",
        "modernizr" : null,
        "mustache" : null
    }
}

基本的に “dependencies” に必要なリソースを追加していく形になります。 見ての通り、キーにパッケージ名、値にバージョンを記載するオブジェクトリテラルになっており、 バージョンが “null” になっている場合は最新版をインストールします。

後は、引数なしで “install” コマンドを実行するだけで、依存リソースが一括してダウンロードされます。便利。

$ bower install

また、「見つからないパッケージ」をインストールするためには、バージョンの代わりに前述の例のようなURLあるいはパス等を入力します。

"dependencies" : {
    ...
    "headjs" : "headjs/headjs"
}

インストール先ディレクトリをカスタマイズする

Bowerは “.bowerrc” というファイルでカスタマイズする事ができます。

例えば、パッケージのインストール先を “bower_components” ディレクトリから他の場所に移したい場合、 プロジェクトルートに “.bowerrc” ファイルを作成して次のように入力しておきます。

{
        "directory" : "assets/vendors"
}

また、 “.bowerrc” を自分のホームディレクトリに置いておく事で、自分が作る全てのプロジェクトにカスタマイズを適用する事ができますが、 そのプロジェクトを誰かと共有する際に問題が生じそうなので、基本的にはプロジェクトに同梱しておいた方が良いと思います。

Nettuts+ のチュートリアル動画

A RequireJS, Backbone, and Bower Starter Template

Nettuts+ によるチュートリアル動画です。 Bowerの基本的な使い方に加えて、RequireJSとBackboneによるスタートアップについて解説しています。 参考に、是非。

まとめ

node.js が出てから、JSベースの便利ツールが沢山出て来ましたね。 有り難りつつも、しっかり楽をさせてもらいましょう。

2013/09/05

bowerバージョンアップによる設定ファイルとディレクトリ名の変更について記載

@anywhere

Welcome to @Anywhere | dev.twitter.com

Twitterの機能がどのサイトでも活用出来るようになるJavaScriptリソース。
認証からタイムライン読み込み、パーツのレンダリングまで。
連携サービスを組むならおさえておきたい。

• ブログで@anywhereを試してみた！ ～ どこでもTwitter | Mach3.laBlog
• @anywhereで認証してみる備忘録 | Mach3.laBlog

jsLint

JSLint, The JavaScript Code Quality Tool

JavaScriptをストリクトに書く為のチェックツール。
前はWSH版がダウンロード出来たんですけど見つからなくなってますね。
Githubのを使ってなんやかんやするんでしょうか。こんど試してみよう。

• JSLintでストリクトなJavaScriptを書く | Mach3.laBlog

LESS

LESS – Leaner CSS

変数に代入したり、ネストしたり、ミックスインしたり…
CSSコーディングが素晴らしくスピードアップするCSS開発キット。
エディタからも簡単に呼び出せるので重宝しています。
似たようなプロジェクトに「Sass」というのもあります。

• ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション | Mach3.laBlog
• CSS3対応の為のLESSスニペットメモ | Mach3.laBlog

jsDoc Toolkit

jsdoc-toolkit – Project Hosting on Google Code

JavaScript版のドキュメント生成ツール。
こちらもエディタから使うと大変便利。

• エディタ（Notepad++）からJSDoc Toolkitを使ってみる | Mach3.laBlog

Modernizr

Modernizr

HTML5の新機能等が使用可能かどうかを判別してくれるライブラリ。
判別の結果はhtml要素のクラスとして出力してくれる他、
メンバを直接参照する事でも結果を知ることが出来ます。

便利なスクリプトなのですが、最近Head.jsに持って行かれた感が…
こちらは未検証なのでまた後ほどレポートを。

• 「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト | Mach3.laBlog

Raphael / gRaphael

gRaphaël—Charting JavaScript Library

Raphaelは、ベクターグラフィックを簡単に扱うためのJavaScriptライブラリ。
gRaphaelはそれをグラフ描画用に拡張する為のプラグインです。
投稿した時はまだドキュメントが不備でしたが…今見に行きましたがまだありませんでした！

• 実験室: gRaphaëlでインタラクティブなグラフを描いてみる | Mach3.laBlog

IE9.js

ie7-js – Project Hosting on Google Code

プロジェクト名としては「IE7.js」ですが、
その中に含まれるIE8.js、IE9.jsやie7-squish.jsが結構便利。
JavaScriptが動く事が前提になりますが、擬似クラスやHTML5の新要素の対応もしてくれます。

• IE9.jsで実現するシンプルなclearfixとその他の恩恵 | Mach3.laBlog

YUI Compressor

YUI Compressor

Yahoo!がおくる、JavaScriptやCSSを圧縮するツール。
Webページのパフォーマンス向上を図るのに欠かせません。
ご一緒にYSlow（Firebugプラグイン）も是非。

• YUI Compressorをお手軽にするバッチファイルを書いてみる | Mach3.laBlog
• 今すぐ出来る、ちょこざいなサイトパフォーマンスアップ | Mach3.laBlog

mustache

{{ mustache }}

マルチランゲージテンプレートエンジン！（言い切った！）
様々な言語に対応する、シンプルで使いやすいテンプレートエンジンです。

• どこでも活躍できるテンプレートエンジン「Mustache」 | Mach3.laBlog

Sammy.js

Sammy.js

Ajaxコンテンツのセッションを操る為のjQueryプラグイン。
要するに、location.hashによるルーティングをウマイこと処理してくれるスクリプトです。

• Sammy.jsでAjaxコンテンツのセッションを操る | Mach3.laBlog

jQueryMobile

• jQuery Mobile | jQuery Mobile

jQueryの作者が送る、スマートフォン向けのjQueryUIのようなもの。
ルールに従ったマークアップをするだけで、各要素をそれっぽくレンダリングしてくれます。
1月に正式版がリリースされる予定。

• はじめてのjQueryMobile | Mach3.laBlog

結構色々ありましたね、2010年。
来年もまた素晴らしい技術に出会えますように。

皆様よいお年を！

またもや特化型サーチエンジンの紹介となりますが、
今度は30万超のアイコンデータから検索可能な「FindIcones.com」。

Free Icon Search Engine – FindIcons.com (301,039 free icons in 2,157 icon packs)

これまたシンプルで使いやすい感じですね。
各ソーシャルネットワークで共有しやすく配慮もされています。

「twitter」で検索してみました。沢山でてきて壮観です。
ICNS、ICON、PNGデータでダウンロードが可能。

アイコンパック単位でも探す事ができます。

他にもConvertメニューで画像をアップロード＞アイコンに変換してくれるみたいです。

Webサービスに限った話ではないですが、
目的がフォーカスされていると使い勝手が向上しますね。
deviantArtのような汎用的なサービスもブラウズしてて楽しいですが、
こういったサイトもツールとしておさえておきたいです。

1万以上のフリーのPhotoshopブラシの中から検索できる
「Findbrushes.com」がなんだかよさげです。

Findbrushes.com – Free photoshop brushes – Search engine

不要なものが全くないシンプルイズベストなインターフェイス。
2010年3月18日現在、12988のブラシが登録されている様子。
ブラシの登録はSubmit Brushから簡単に出来るのでさらに増えていくのでは？

広告枠にはまだ広告は入っていないようです。
シンプルに感じるのはそのせいもあるのでしょうね。

「light」で検索してみました。検索結果もシンプルすぎるぐらいスッキリしています。
ログインしたりお気に入りにいれたり他ユーザと共有したり、といった機能は全くついていませんが、
今後どうなっていくのでしょうか、気になるところです。