独立アプリとして生まれ変わりました！

4月末に私のブログ記事として画像を一括してリサイズ・圧縮できるComp ResizrというWebツールを作成して無料公開しました。

ブログの一つの記事にしておくのももったいないなと思い、使い勝手を向上させてブラウザ上だけで動くWebアプリへと昇華させて再公開することにしました！こちらももちろん無料です！

Comp Resizrはこちら

機能の紹介

Comp Resizrの主な機能について紹介していきたいと思います。

まず、一言で言えば無料で画像を一気に選んで一発で圧縮して画質の綺麗なままサイズを下げることができるツールです！

できる事をまとめてご紹介！

• PCやスマホから画像を一括で取込む事ができます！


• 取り込まれた画像の最大容量や画像の縦・横の最大幅を一括で指定できます！


• 取り込まれた画像を選択すると個別に画像の圧縮の設定する事ができます！


• 画像のトリミングや回転など簡単な編集もできます


• 画像の圧縮はボタン1つでOK！


• 圧縮された画像はZIPファイルで一括でダウンロードできますし、1枚1枚保存もOK！


• 圧縮された画像のビフォー・アフターをその場で確認して気に入らなければ再圧縮できます！

検証は最新のChrome、iOS Safariで行いました。IEとかでは動かないと思います。

使い方

大まかな流れとはTwitterにて動画で紹介していますので、ご参考にどうぞ。

GW中に画像一括圧縮サービスComp Resizr作りました。ブラウザだけで使えちゃいます！また近いうちにブログかnoteに説明やら色々と書きます😪 https://t.co/LcbauuNxoE pic.twitter.com/RYfWdkGV3o

— しゃけごん (@syakegon) May 9, 2021

1. 画像の読み込み

圧縮したいファイルを画像を選択するボタンから選択することができます。

指定できる画像はjpgファイルとpngファイルです。

Mac・PCの場合はShiftキーを押しながら選択する事で画像を複数一気に読み込ませることができます。

エクスプローラーやFinderからファイルを画像を選ぶボタンにドラッグ＆ドロップしてもファイルを読み込むことができます。

iPhoneやiOS、Androidなども画像を選択する際に複数枚選択して読み込むことができます。

画像はブラウザで読み込まれますが、サーバ等に保存することは一切ありませんので安心してご利用ください。

2. 圧縮・画像幅の設定

読み込まれた画像は一括・個別で画像の圧縮サイズ、幅サイズを決めることができます。

ターゲットファイルサイズ

ターゲットファイルサイズとは、圧縮後の画像の容量を指定します。その容量になるよう画像は圧縮されます。

読みこんだ画像の縦横サイズや解像度や圧縮されたアルゴリズムによって指定サイズより大きくなる事がありますので、必ずしもそのサイズにはならない事をご留意ください。

縦横の長い方のサイズ

縦横の長い方のサイズとは、画像の縦・横のどちらかの長い方のサイズをどのサイズにまで縮めるかを指定します。

例えば、2000px x 3000pxの画像に対して、縦横の長い方のサイズを1500pxと指定した場合は、1000px x 1500pxの画像が出力されます。

画像のサイズを変更したくない場合は、変更しないを選択すればサイズはそのままに画像の容量だけを決めて圧縮することができます。

3.個別設定

個別に画像の圧縮率や幅を変えたい場合や、画像の一部を切り出し（トリミング）や回転させたい場合は、読み込まれた画像をクリックします。



画像をクリックするとモーダルウインドウ画面が表示され、初期値では一括設定で指定されたターゲットファイルサイズと縦横の長いサイズが表示されています。

個別でサイズを変更したい場合は一括設定を使用するのチェックを外して新たに指定してください。

画像編集

画像編集のボタンを押すと、画像を切り出せるモードにかわります。

十字矢印ボタンを押すとドラッグモードとなり、画像を自由に動かすことができます。

クロップボタンを押すとクロップモードとなり、画像の切り取りたい部分をドラッグ＆ドロップで選ぶことができます。

Mac/PCの場合はマウスのホイールで、スマホ・タブレットは二本指での縮小・拡大の動きをすると画像がズームイン・アウトされます。

ズームリセットボタンは、ズームイン・アウトされた画像を100%に戻すことができます。

1:1ボタンはクロップモードのクロップ枠の四角形の比率が1:1の指定となり正方形で画像を切り抜くことができます。

freeボタンはクロップ枠の四角形の比率指定がなくなり、自由な比率でクロップできます。

回転ボタンは画像を90度回転することができます。右回転です。

切り抜くボタンはクロップ枠の部分で画像を切り取って画像編集モードを終了します。

閉じるボタンは画像の切り抜きや回転をせずに画像編集モードを終了して戻ります。

一旦編集した画像を再度編集した時は元に戻すボタンが表示されます。押下すると読み込み時の画像に戻すことができます。

モーダルウインドウは適用ボタンが押される事でそれぞれの設定を適用して一覧画面の戻ります。キャンセルを押下すると編集せずに戻ります。（画像の編集は適用されたままとなりますので、画像を戻したい場合は再度画像編集モードに入り元に戻すボタンを押下して戻しして対応となります）

圧縮する

設定が済みましたら、圧縮するボタンを押してください。モーダルが表示され、処理が始まります。

圧縮はファイルのサイズや量によって変わりますが、ある程度サクッと終わると思います。

圧縮が終了するとモーダルのボタンが処理中から処理完了となり、ボタンを押下すれば、ZIPのダウンロードをするかどうかのボタンが表示されます。ボタンを押下すれば圧縮したファイルがひとまとめになった画像をダウンロードすることができます。

仕上がりを見る

ZIPのダウンロードモーダルを閉じると、今回圧縮した画像のBefore/Afterが一覧で表示されます。

画像のファイル名と圧縮前のサイズと圧縮後のサイズと画像の中央にスライダーがあり左側が圧縮前の画像、右側が圧縮後の画像をスライダーで確かめることができます。

画像の縦横幅を変更していればスライダーの表示がおかしくなります。仕様です。

画像のファイル名をクリックすると圧縮後の画像をダウンロードすることができます。

以上が使い方となります！

開発についていろいろ

画像の圧縮にはオープンソースのWASMライブラリbrowser-image-compressionを使用しています。JSでここまで高速に画像圧縮ができる素晴らしいライブラリです。

今をときめくVue.jsやReactなどは使用しておらず、ゴリゴリにJavaScript + JQueryで作成しております。

jQueryは体に馴染んでるので使いやすいのですが、状態の管理が面倒なので、とりあえず一括して画像のオブジェクトを持ちIDを付けて管理できるようなオブジェクトを作って対応しました。

Vue.jsなどのデータが変更すればビュー側がレンダリングされるObservebaleな仕組みが流行るのも理解できますね。大人数で開発するのならフレームワークは必要だろうなと思います。一人だからまぁいいやって感じですね。

Bootstrap5も使用してみました。Bootstrap4を主に使っていて移行自体は容易いかなって思ったのですが、地味にtext-leftがtext-startに変わっていて、CSS Flexに合わせてクラス名が強制的に変更されてるのは果たしてどうなのかと思います。突然のdeprecatedです。text-leftでもいいじゃんって思います。

何かまた思いついたらサービス化していきたいなって思います。

Comp Resizrはこちら



Fender Japanの新テレキャス Hybrid II(Hybrid2)を買いました！仲間募集中です〜♪