スマホかカメラで撮った写真を縮小して圧縮、最適化（ロスレス圧縮）してWeb用の画像をつくる……。

Webメディア/サービス、ブログをやっているのであれば必ず必要な作業で、TOACHでももちろんポチポチやっていた。

過去形なのは、1ファイルづつ手でやることに音を上げてしまったから。「やってられるかー！」ってなわけです。

しかしながらやらないわけにはいかない。そこでTOACHは画像の圧縮と最適化を自動化し、コマンドファイルをぽちっとするだけでOKにしました。

今回はmacで自動化する方法をご紹介。windowsは別記事で。めちゃめちゃ快適ですよ。

 

自動化する方法

前々から、この類の定型作業はコマンドファイル化して自動化できるんだろうな〜と思っていたんですが、ついつい他のタスクに追われて後回しに……。

ところが今回、中年太りの兆しを見せ始めた重い腰を上げてやってみて、今までなんでやってこなかったんだ！というぐらい快適になりました。

しかも、これがやってみると簡単すぎるのなんのって。もっと早くやっていればよかった。

 

Web用に画像を編集するには、大きく分けて画像の縮小、圧縮、最適化という3つのプロセスがあり、今までは縮小と圧縮をGimpで、最適化をイメージオプティムを使っていました。

自動化するにあたり、縮小と圧縮はOS X備え付けのコマンドラインツールsipsで、最適化はイメージオプティムのCLIバージョンを使いました。

 

前半では、このプロセスに必要なツールの紹介とインストール方法、最後にTOACHで使っているコマンドファイルを公開しているので、コマンドだけ知りたい！って人は最後までスクロールしてくれたまえよ。

 

縮小と圧縮 – sips

アパレルブランドのようなオシャレネームのコマンドラインツールがOS Xには元から備わっています。やるじゃんジョブズ。

このツールは、画像の編集に使えるツールで、縮小と圧縮はもちろん、回転などの変形もできます。

TOACHでは、画像を1200*1200px前後に縮小し、jpgで70%圧縮している。これをsipsでやるなら、ターミナルで二行を打ち込むだけで出来る。

※事前に画像のあるディレクトリにcdコマンドで移動しておくこと。

1行目は、拡張子がjpgのファイルを、縦横比を維持しながら横幅を1200pxにするコマンド。

2行目では、その縮小画像を70%の圧縮率でjpg画像として上書きしている。

 

最適化 – ImageOptim CLI

画像を放り込むだけでロスレス圧縮してくれる豪快かつ簡単便利なGUIツール ImageOptimには、コマンドラインで使えるCLIバージョンがある。

ImageOptim CLIは、npmという、Node.jsのパッケージマネージャーでインストールできるから、まずはnpmをいれる。

npmってなに？と思うかもしれないけれど、そこは気にしなくてOK。そのうちわかるさ。人生ってそういうものさ。

 

まずはNode.jsのサイトにアクセスし、Download for OSXをポチっとしてインストーラーを落としてくる。

ダウンロードしたdmgファイルを叩いて、指示どおりにポチポチすればインストール完了。

 

インストールが終わったら、念のためnpmのアップデートをかけておこう。macのターミナルを開いて、このコマンドを打つべし。

 

npmがない？

npm updateをして、そんなコマンドあらへんで〜って言われたら、ターミナルで、npmを動かすために必要な設定（パス）がちゃんとしているかを確認する。

と打ち込み、ズラズラ〜と出てくる文字列の中から、/usr/local/binがあるかを探す。目を皿にして頑張ってください。

もし無ければ、おお、不運な勇者よ、面倒くさいが踏ん張りどころじゃ。

まずはhome directoryに移る。

そして、手持ちのテキストエディターで.bash_profileというファイルを作るか、既にあるならファイルを開く。

※例ではatomを使っています。

.bash_profileに、設定を書き込んで終わり！

 

ImageOptim CLIのインストールと使い方

ここまで来たらあとは簡単。ImageOptim CLIのインストールをnpmに指示するだけで、コーヒーをいれてくる間にコトは済んでいる。

ほんと、npmを入れる手間に比べると、なんなのってくらい簡単ですな。

非エンジニアの人にとってはnpmを入れるのに敷居を感じると思うけれど、そこはグッとこらえて、スマートな自動化ライフを歩んでほしい。

 

ImageOptimの使い方も簡単で、いくつかのオプションと、画像ファイルがあるディレクトリを指定するだけ。例えばTOACHではこうしている。

※今いるディレクトリの画像ファイルに対して最適化をかけています。

 

sipsとImageOptim CLIをコマンドファイルで連携させよう

無事にImageOptim CLIを入れられたら、いよいよ自動化のためのコマンドファイルを作ろう。

お手持ちのテキストエディターで、拡張子が.commandなファイルを作り、それぞれのツールを使うコマンドを書き込む。

一行目の見慣れないコマンドは、ファイルのある場所に移動することを表している。

このファイルは、編集したいファイルのあるディレクトリに置いて、ダブルクリックして使うことを想定しているから、一旦そのディレクトリに移動しなければいけない。それが一行目の意味。

あとは、sipsとImageOptim CLIで縮小と最適化をした画像ファイルがformattedフォルダに出力してあるので、それを使えばいい。

もし、横幅を1200px以外にしたい場合は sips –resampleWidth の数字を好みに書き換えればOK。

 

このままだとcommandファイルの実行権限が足りないので、ターミナルでファイルのある場所に行き、コマンドを打ち込むべし。

resize.commandはファイル名にあたるから、他の名前でファイルを作っているならそれで置き換える。

 

commandファイルが出来上がったら、好きな画像を好きなディレクトリに置いて、そこにファイルも置き、ダブルクリックしてみよう。

画像の大きさとサイズが思い通りになっていればばっちりですぞ！

 

Webマガジン

最後に宣伝をば。

TOACH土井が運営するビールマガジンhipahipaはこちらから↓

 

 

 

 

 

 

 

 

 

 

京都の飲食店を中心に、「中の人」を紹介するWebマガジン White Horsesはこちらから↓