BETA

画像圧縮を右クリックで簡単にできるようにAutomatorに設定した

投稿日:2019-01-09
最終更新:2019-01-21

タイトルの通りです。
今回の対象はpngとjpgの圧縮になります。


こんなことありませんか?


  • 通常はgulpで圧縮タスクを用意している。

    • 古めかしいプロジェクトに途中入りした場合にgulp自体が導入されていない
    • かといって別に圧縮タスクを持っておいて毎回実行するのも面倒だな・・
  • tinypngjpeg圧縮にお世話になっている

    • 扱う画像によっては、サイト公開前に外に出したくない。。
    • 消されるとわかっていてもなんか気持ち悪い
  • コマンドもそれなりに面倒

    • ”ッターン!” へのこだわりもない

↑自分はこんな状況で、暇な時にMacのAutomatorに登録してみたところ劇的にスムーズになったので備忘録としてここに記載します。

Automatorとは


ようこそMacのAutomatorへ

繰り返し作業を Mac に実行してもらう
ファイル名の変更やイメージのサイズ変更など、複数のファイルに対して同じ変更を実行する必要がある場合や、重要なファイルのアーカイブまたはバックアップを行う必要がある場合は、カスタムワークフローを作成して、Mac に作業を実行してもらうことができます。

→ Excelのマクロみたいなもんかなと勝手に解釈しています。そんなに間違ってないと思う。
  MacのLaunchpadの中に密かにいます。ロボットみたいなやつです。




流れ


  1. 圧縮用パッケージをインストール

    • homebrew経由
  2. Automatorに画像圧縮サービスとして圧縮手順を登録する

    • 圧縮手順:本来圧縮するときに実行するコマンド
  3. 対象画像を右クリックで圧縮を実行する

    • 複数選択可なのでまとめての画像圧縮も可能です




準備


今回はpngquantとjpegoptimを使って圧縮するタスクを登録します。

1. homebrew経由でpngquantとjpegoptimをインストール

$ brew install pngquant

$ brew install jpegoptim


※補足

homebrewが入っているか確認する

$ brew -v //homebrewのバージョンを表示

入ってなかったらhomebrew入れてね



作成


1. MacのAutomatorを起動する

起動するとこんな画面が表示されます。
書類の種類から”サービス”を選ぶのです。



2. スクリプト登録前の準備をする

  • 2カラム目の下の方にあるので折れずに探し出し、”シェルスクリプトを実行”を選択します。
  • ”サービス”は次の選択項目を受け取る:で”イメージファイル”を選択します。
  • 再び、2カラム目の”シェルスクリプトを実行”をダブルクリックすると青枠部分が表示されます。



3. スクリプトを記述する

自分は以下の内容を登録しました。
圧縮率をtinypngjpeg圧縮に寄せています。

for f in "[email protected]"  
do  
  # PNG  
  [`basename "$f" .png` = `basename "$f"` ] || {  
    /usr/local/bin/pngquant --force --ext .png 256 --quality=65-80 "$f"  
  }  

  # JPG  
  [ `basename "$f" .jpg` = `basename "$f"` ] || {  
    /usr/local/bin/jpegoptim --strip-all --max=60 "$f"  
  }  
done

入力の引き渡し方法を”引数として”に設定します。



こんな感じ。

4. 保存して処理に名前をつける

自分は”画像を圧縮”という処理名にしました。

確認


1. 実行してみる

pngかjpg画像で右クリックしてみると・・・?



いた・・・!!
実行してみてください。圧縮後の画像は自動的に上書きされます。



圧縮した画像を比較してみたのですが、tinypngやjpeg圧縮とそこまでクオリティも変わらず、
サイズも同じくらいまで軽くできておりました◎
気になる方はいろいろとパラメーターを調整してみてください。

お疲れ様でした。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

自分用メモだけど誰かの役に立つとうれしい。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう