TinyPngのAPI Keyを1分で取得するための覚え書き

f:id:sitk:20160723161528p:plain

前回の記事「ブロガー必見！なんと83%の容量削減ができたよ！プロ御用達の画像圧縮サービス「TinyPing」が使いやすくなっていたので覚え書き」のさいごに、APIとGulpの連携ができますよ〜って書きました。

www.kobatatakayuki.com

今回は、その詳細を。

TinyPng API の概要
TinyPngのAPI Keyを取得する
gulp-tinypng-compressのインストール
gulpfile.jsの設定
さいごに

TinyPng API の概要

tinypng.com

こちらのページでAPI Keyを取得します。

APIの利用は、処理するファイルの枚数によって料金が異なります。

f:id:sitk:20160723161617p:plain

右側のスライダーで、シミュレーションもできますね。

月に500枚以内であれば、無料で利用できます。

月9,500枚までなら、1枚あたり0.009ドル。

なんだかイメージがつきませんね(；´∀｀)

右側のスライダーでシミュレーションしてみると、、、

月2,000枚処理するならば、13.50ドルとなります。

今現在（2016年7月23日）のレートだと、だいたい1,432円ですね(๑´ڡ`๑)

ご参考まで。。。

TinyPngのAPI Keyを取得する

料金体系がわかったところで、早速APIを取得してみましょう。

英語ですが、怖くなんてありません！

簡単ですから！

1分で完了しますｗ

f:id:sitk:20160723161606p:plain

名前とメールアドレスを入力して、「Get your API key」ボタンを押します。

f:id:sitk:20160723161543p:plain

登録したメールアドレスにメールが届きます。

f:id:sitk:20160723161554p:plain

届いたメールの「Visit your Dashboard now」ボタンを押すと、、、

API Keyが書いてあるページに遷移します。

f:id:sitk:20160723161624p:plain

これで、APIの取得は完了です！

ほら、簡単でしょ！

これで、あなたもデベロッパーの仲間入り♪

早速、API Kyeをメモしておきましょう。

gulp-tinypng-compressのインストール

続きまして。

gulp-tinypng-compressをインストールします。

www.npmjs.com

npm install gulp-tinypng-compress

と、呪文を唱えましょう。

gulpfile.jsの設定

API Keyの取得ができて、「gulp-tinypng-compress」のインストールもできたら、実際にgulpfile.jsに記載してみましょう。

以下、参考コードです。

//
// TinyPng
// 

// gulpプラグインの読みこみ
var gulp = require('gulp');
var tinyping = require('gulp-tinypng-compress');

gulp.task('tinypng', function () {
    gulp.watch("img/**", function() { // imgフォルダ以下を監視
    gulp.src('./img/**/*.{png,jpg,jpeg}')
        .pipe(tinyping({

            key: ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // TinyPNGのAPI Key
        }))
        .pipe(gulp.dest('./dist/tinypng/img'));
    });
});

gulp.task('default', ['tinypng']);