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サイトへのリンクが挿入されます。
![図3 jquery-sample-codezine-linkerの実行例](http://cz-cdn.shoeisha.jp/static/images/article/8956/8956_003.gif)
プラグインおよび実行用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が一緒にダウンロードされます。
![図4 自作ライブラリとjQueryが一緒にダウンロードされる](http://cz-cdn.shoeisha.jp/static/images/article/8956/8956_004.gif)
まとめ
本記事では、HTML/JavaScript開発を主なターゲットにしたパッケージ管理ツールBowerの応用的な利用法として、Grunt連携と自作ライブラリの登録について紹介しました。Gruntと連携することでライブラリのダウンロード処理をGruntタスクとして自動実行させることができます。Gruntの他のタスクとうまく組み合わせれば、環境構築などの定形作業を自動的に行えるようになります。
自作ライブラリをBowerに登録すれば、ライブラリを世界中に公開し、他のライブラリと同じ手順でダウンロードできるようになります。自作ライブラリを公開してオープンソースコミュニティへ貢献するのもよし、そこまで大げさでなくても自分でダウンロードしやすくするためだけに公開するというのも「あり」ではないでしょうか。