WebDesigner's Memorandumウェブデザイナーの備忘録

PNG画像の圧縮をpngquantとAutomatorを使って右クリックメニューからできるようにする

PNG画像の圧縮をpngquantとAutomatorを使って右クリックメニューからできるようにする

MacにはAutomatorという、色んな操作を自動化するアプリがデフォルトで入っています。

今回はそのAutomatorと、pngquantというコマンドライン上でPNG画像を最適化するツールを組み合わせて右クリックメニューからPNG画像の最適化ができるように設定します。

pngquantをインストール

まずはpngquantをインストールします。
panquantをコマンドライン上で動作するPNG画像の圧縮ツールです。インストールにはHomebrewを使用します。

Homebrewが何か分からない方は過去に詳しい記事を書いているので参考にしてください。

$ brew install pngquant

panquantのインストール

Automatorの設定

Automatorではどんな状態にどんなアクションを実行するのか設定していくのですが、今回は細かいことは置いておいて、とりあえず手順を追って進めていけば完成するように書いていきます。

まずはAutomatorを開いて[ファイル]→[新規]を選択します。
すると書類の種類を選択する画面が表示されるので、「クリックアクション」をクリックして「選択」ボタンをクリックします。

クイックアクションの追加

[ワークフローが受け取る現在の項目:]を「イメージファイル」に変更します。これで画像を右クリックした時にだけメニューが出てくるようになります。

イメージファイルに設定

次にアクションの登録です。左上の検索バーに「シェルスクリプト」と入力して検索し、[シェルスクリプトを実行]というアクションを右のグレーの場所にドラッグします。

シェルスクリプトの追加

[シェル:]は「/bin/zsh/」で[入力の引き渡し方法:]は「引数として」を選択。
その下の入力欄には下記のコマンドを入力します。このコマンドがpngquantを実行するためのコマンドになります。

/usr/local/bin/pngquant --ext .png --force "$@"

コマンドの追加

あとは[ファイル]→[保存](command + S)でファイルに名前を付けて保存します。ちなみにこのファイル名がそのまま右クリックした時に表示される項目名になるので注意しましょう。

これであとはFinder上でPNG画像を右クリックすれば下の方に、先ほど保存したファイル名が表示されているはずです(項目が多い場合は隠れていることもあります)。

右クリックから画像の圧縮

少し設定に手間がかかりますが、これで右クリックからすぐにPNG画像の圧縮ができるようになりました。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね