jQuery不要の画像の遅延読み込みライブラリを作ってbowerで公開してみた

# 初めに

今回画像の遅延読み込みライブラリを作成して、bowerで公開したので
公開までの一連の流れを書いていきたいと思います。

# 画像の遅延読み込みライブラリの作成

今回、自分が作成したライブラリは画像の遅延読み込みのライブラリです。

GitHub
[delayLoadImage](https://github.com/tiwuofficial/delayLoadImage)

画像の遅延読み込みをしているwebサイト、webアプリは昨今とても多いです。
比較的簡単に導入でき、効果も大きいのが理由かと思います。

多くの画像の遅延読み込みライブラリがありますが、今回下記のようなコンセプトで作成しました。


## コンセプト

- jQueryを利用しない
- ある程度のカスタマイズをユーザーができる
- 名前空間を意識する


## インストール

bowerで公開しているため下記コマンドでインストールできます。

`$ bower install delayLoadImage --save`

## 使い方

delayLoadImage.jsとdelayLoadImage.cssを読み込みます。

```html
<link rel="stylesheet" type="text/css" href="delayLoadImage.css">
```
```html
<script src="delayLoadImage.js"></script>
```

delayLoadImage.jsを読み終わったら下記init()メソッドを呼びます。

```html
<script>
    DELAYLOADIMAGE.init();
</script>
```

あとは、画像の遅延読み込みを行いたい画像のimgタグのclassに`delayLoadImage`を付与し、data-srcに画像のパスを指定します。

例

```html
<img src="" data-src="hoge.jpg" class="delayLoadImage">
```

これで、ページが読み込まれ、表示された後、画像の読み込みが実行されます。

読込中は下記のようにロードgifがくるくる回ります。

![Demo.gif](https://qiita-image-store.s3.amazonaws.com/0/81308/08ba50c7-86ba-a99a-799d-99965293f81c.gif)



## カスタマイズ

`DELAYLOADIMAGE.init()`を呼ぶ際に第一引数に成功時の関数、第二引数に失敗時の関数を渡すことで、読み込み成功時、読み込み失敗時に任意の関数を実行させることができます。


```html
<script>
    DELAYLOADIMAGE.init(function() {
        console.log('success');
    }, function() {
        console.log('error');
    });
</script>
```


# bowerでの公開

今回作成したライブラリの公開ということでbowerを利用しました。
bowerはTwitter社が作成しているフロントエンド用パッケージマネージャーです。
jQueryを始め多くのライブラリがbowerを利用してインストールすることができます。

では、ライブラリを公開していこうと思います。

## GitHub

まずbowerで公開するためにはGitHubで公開する必要があります。

GitHubにリボジトリを作成しファイルをpushします。

## ファイルの圧縮

公開に必須ではありませんが、今回ファイルを圧縮しています。

コードを書く際は可読性を意識して、インデントなどコードを綺麗にすると思います。
しかしwebで実際に利用する際はインデントなどは意味が無いため、それらを削除して1行にし、byte数を減らしたファイルを利用するのが一般的です。

利用されることを考えファイルを圧縮します。
圧縮に利用したのはSublime Text のプラグインの「YUI Compressor」です。

### 使い方

1. Sublime Text のパッケージコントローラーからYUI Compressorをインストール
2. 圧縮したいJS,CSSファイルを開き、Tools -> Build System -> YUI Compressorを指定
3. Build( ⌘ + B )を実行

実行するとファイルと同じ階層に「xxxx.min.js」や「xxxx.min.css」が作成されます。


## README.mdの記述

GitHubにプッシュする際にREADME.mdを記述します。
公開に必須ではありませんが、このREADME.mdにライブラリの利用方法を記述するのが一般的です。

今回は折角ということで英語でREADME.mdを記述しました。

## bower.jsonの作成

bowerで公開するためにはbower.jsonが必須です。
内容は下記のとおりです。

* nameにライブラリ名
* versionにバージョン
* mainにメインのファイルのパス
* ignoreにbower install した際に無視されるファイル、ディレクトリ

今回ライブラリを公開するために書いたbower.jsonは下記のとおりです。

```json
{
    "name": "delayLoadImage",
    "version": "1.0.0",
    "main": "src/js/delayLoadImage.js",
    "ignore": [
        "demo",
        "README.md"
    ]
}

```

書いたらbower.jsonをGitHubにプッシュします。

## 公開

最後にbowerコマンドを叩いて公開します。

まず、bowerは作成したGitHubのリポジトリのバージョンにひも付きます。

そのため、作成したらライブラリのリポジトリにバージョンを指定します。

`$ git tag 1.0.0`

`$ git push --tags`

tagのあとの1.0.0は最初なので1.0.0としましたが0.0.0でも問題無いです。
tagを設定したらgitにpushします。

その後、bowerの登録をします。

`$ bower register ライブラリ名 ライブラリのgitリポジトリのurl`

今回自分のライブラリを登録した際は下記コマンドです。

`$ bower regist delayLoadImage git://github.com/tiwuofficial/delayLoadImage.git`

ライブラリ名は早い者勝ちのようで、被ってはいけないそうです。

これで登録完了です。

# ライブラリの更新

登録完了後、ライブラリの改修しリポジトリにpushしただけでは、bowerには反映されません。
bowerはリポジトリのtagのバージョンを見ているためtagのバージョンを更新する必要があります。


`$ git tag 1.0.1`

`$ git push --tags`



# 終わりに

簡単にライブラリの作成からbowerによる公開をまとめてみました。

簡単に公開できる仕組みがあるので、もっと活用できていければと思います。