Bowerに自作のライブラリを公開
Bowerでは自作のライブラリを公開する仕組みが用意されています。自分のライブラリを使いやすく管理したり、世界中の開発者に自分のライブラリを公開したりできます。以下ではBowerに自作ライブラリを追加する方法を説明していきます。
今回公開するライブラリ
今回Bowerに登録するサンプルとして、jQueryセレクタで指定した要素にCodeZine Webサイトへのリンクを挿入する簡単なjQueryプラグイン「jquery-sample-codezine-linker」を用意しました。プラグインの実装をリスト7に示します。
(function($){
$.fn.codezine = function() {
// マッチした要素それぞれに対して実行 ...（1）
this.each(function(){
var $this = $(this);
// HTML内容を書き換え ...（2）
$this.html("<a href='http://www.codezine.jp'>Go to Codezine!!</a>");
})
};
})(jQuery);
処理内容はjQueryセレクタでマッチした要素のそれぞれに対して（1）、そのHTML内容を書き換える（2）ものです。リスト8のように記述して実行できます。
$(function(){
$(".codezine").codezine();
});
リスト8を実行すると図3のように、codezineクラスの要素に対してCodeZine Webサイトへのリンクが挿入されます。
プラグインおよび実行用Webページのソースコードはサンプルコードに含まれています。
ライブラリ公開するためのbower.json記述
Bowerにライブラリを公開するためには、bower.jsonファイルにライブラリの内容を記述する必要があります。今回使用するbower.jsonファイルをリスト9に示します。
{
"name": "jquery-sample-codezine-linker",
"version": "1.0.0",
"authors": [
"Eiichi YOSHIKAWA"
],
"description": "jQuery Plugin Sample for CodeZine",
"main": "js/jquery.sample.codezine.js",
"keywords": [
"Bower",
"jQuery",
"CodeZine"
],
"license": "MIT",
"homepage": "http://codezine.jp",
"ignore": [
"index.html", ...除外リストに追加（1）
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.1.4" ...依存ライブラリを定義（2）
}
}
主な記述項目を表3に示します。なおここでは動作確認用のindex.htmlを除外リストに追加し（1）、依存ライブラリの定義としてjQueryを指定しています（2）。
| 項目名 | 内容 |
|---|---|
| name | 名称 |
| version | バージョン |
| authors | 作者 |
| description | ライブラリの説明 |
| main | ライブラリとして参照させるメインのファイル |
| keywords | キーワード |
| license | ライセンス形態 |
| homepage | ホームページ |
| ignore | 公開時に除外するファイルのリスト |
| dependencides | ライブラリが依存する他のライブラリ |
| devDependencies | ライブラリが開発時に依存する他のライブラリ |
ライブラリをGitHubに公開
次に、bower.jsonを含めたライブラリ一式をGitHubのリポジトリにアップロードします。GitHubのWebページでリポジトリを作成後、ライブラリのフォルダでリスト10のように実行します。タグは「1.0.0」のように「＜メジャーバージョン＞.＜マイナーバージョン＞.＜パッチ番号＞」というSemantic Versioning型式で指定します。
# Gitリポジトリ初期化 git init # リポジトリにファイルを追加 git add --all #コミット git commit -m 'Initial Commit' #タグ git tag 1.0.0 # リモートリポジトリ設定 git remote add origin https://github.com/<ユーザー名>/<リポジトリ名>.git #プッシュ git push -u origin master #タグをプッシュ git push --tags
ライブラリをBowerに登録
最後にリスト11のコマンドで、ライブラリ（GitHubのリポジトリ）をBowerに登録します。
#登録 bower register <ライブラリ名> git://github.com/<ユーザー名>/<リポジトリ名>.git
Bowerから登録解除する場合は、まずbower loginコマンドを実行してGitHubアカウントでログインしてから、bower unregisterコマンドを実行します。
#ログイン bower login ? Username #GitHubアカウントのユーザー名を入力 ? Password #GitHubアカウントのパスワードを入力 #登録解除 bower unregister <ライブラリ名>
登録したライブラリは「bower install <ライブラリ名>」でインストールできます。
なお今回のサンプルは「jquery-sample-codezine-linker」というライブラリ名でBowerに登録されているので、実際にリスト13のコマンドでダウンロードできます。
bower install jquery-sample-codezine-linker
リスト9の（2）で依存ライブラリにjQueryを登録しているため、リスト13を実行するとjquery-sample-codezine-linkerライブラリとQueryが一緒にダウンロードされます。
まとめ
本記事では、HTML／JavaScript開発を主なターゲットにしたパッケージ管理ツールBowerの応用的な利用法として、Grunt連携と自作ライブラリの登録について紹介しました。Gruntと連携することでライブラリのダウンロード処理をGruntタスクとして自動実行させることができます。Gruntの他のタスクとうまく組み合わせれば、環境構築などの定形作業を自動的に行えるようになります。
自作ライブラリをBowerに登録すれば、ライブラリを世界中に公開し、他のライブラリと同じ手順でダウンロードできるようになります。自作ライブラリを公開してオープンソースコミュニティへ貢献するのもよし、そこまで大げさでなくても自分でダウンロードしやすくするためだけに公開するというのも「あり」ではないでしょうか。
