tyoshikawa1106のブログ

- Force.com Developer Blog -

Bowerの使い方を勉強しました

f:id:tyoshikawa1106:20150116225448p:plain

いろんなところで名前を見るBowerですが、どのようなものかきちんと理解していなかったので使い方を勉強してみました。とりあえずBowerについて調べてみると『Twitter社が開発したフロントエンド用のパッケージマネージャー』とのこと。Node.jsのnpmコマンドのようにbowerコマンドでパッケージを簡単にインストールできるみたいです。

Bower

Bowerのインストール

Bower自体はnpmコマンドを実行してインストールできるようになっていました。

npm install -g bower

f:id:tyoshikawa1106:20150116225743p:plain


とりあえず実行してみると次のエラーが...。

f:id:tyoshikawa1106:20150116225912p:plain


原因は管理者権限で実行されていなかっただけなので、先頭に『sudo』をつけて再度実行します。

sudo npm install -g bower

イメージしていたよりいろんな処理が実行されましたが、今度は無事にインストールできました。

f:id:tyoshikawa1106:20150116230337p:plain

バージョン確認コマンドの実行

とりあえずバージョン確認コマンドで確認してみます。

$ bower -v

f:id:tyoshikawa1106:20150116230734p:plain


無事にバージョンが表示されました。

installコマンドでjQueryのダウンロード

ここまでは問題なさそうなので、公式サイトで紹介されていたjQueryのインストールコマンドを試してみます。デモ用にフォルダを用意してcdコマンドで移動、そこでインストールコマンドを実行してみました。

$ bower install jquery

f:id:tyoshikawa1106:20150116231231p:plain


こんな感じでダウンロード処理が実行されます。

f:id:tyoshikawa1106:20150116231411p:plain


ダウンロード処理は短時間で行われました。処理終了後、対象フォルダを覗いてみるとjQueryのファイル一式がダウンロードされていました。

f:id:tyoshikawa1106:20150116231721p:plain

GitHubからダウンロード

次のコマンドでGitHubからもダウンロードできるみたいなので確認してみました。

$ bower install git://github.com/user/package.git

このURLはGitHubのSSH Clone URLから確認できました。

f:id:tyoshikawa1106:20150116232459p:plain:w300


実行時にSSHのパスワードを聞かれましたが正常に実行できました。

f:id:tyoshikawa1106:20150116232704p:plain


ダウンロードしたファイル一式はこんな感じです。

f:id:tyoshikawa1106:20150116232920p:plain


こんな感じでbowerコマンドで簡単に必要なファイルをダウンロードできました。

Search Bower packages

Bowerで利用できるパッケージはjQuery以外にもたくさん用意されています。どんなパッケージがあるかは『Search Bower packages』のページで確認できるみたいです。

f:id:tyoshikawa1106:20150116233355p:plain

このページはヘッダーのSearch Packagesのリンクから表示できます。例えば次のパッケージが用意されていました。

  • bootstrap
  • angular-latest
  • d3
  • animate.css
  • chosen
  • normalize.css
  • ionic
  • jquery-mobile

確認したときには全部で738ページ分用意されていました。

f:id:tyoshikawa1106:20150116233720p:plain:w300

欲しいものが決まっている場合、検索ボックスから探すこともできます。

f:id:tyoshikawa1106:20150116233910p:plain


インストールするときはjQueryと同じようにコマンドを実行します。例えばBootstrapの場合はこんな感じです。

$ bower install bootstrap

f:id:tyoshikawa1106:20150116234736p:plain


Bowerコマンドでダウンロードしたファイルは『bower_components』フォルダにまとめられるみたいです。

f:id:tyoshikawa1106:20150116235735p:plain


とりあえず基本的な使い方はこんな感じでした。すごく便利なのできちんと活用していけるようになりたいと思います。