読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

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

f:id:sitk:20160723161528p:plain

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

www.kobatatakayuki.com

今回は、その詳細を。

 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分で完了しますw

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']);

こちらの設定が完了したら、gulpを実行させます。

これで、画像ファイルの圧縮をgulp側で制御できるようになりました!

楽ちんですね。

ヘビーユーザーの方は、無料の範囲だとすぐに上限行ってしまいますね。。。

その時は、ぜひ課金をw

詳しくは、こちらのサイトもご参考に。

kuroeveryday.blogspot.jp

さいごに

いかがでしたでしょうか。

意外と簡単にAPI Keyが取得できるのです。

Gulp側の設定も簡単、らくちん。

あとは、課金の範囲内でやるのか、上限超えそうなら、課金するのか。。。

そこは、各自の判断でお願いします(๑´ڡ`๑)

やっぱり、これ欲しい。

おわり。