どうも、まさとらん（@0310lan）です！

今回は、ネット上にアップロードした画像ファイルに、「編集ソフト」を一切使わないでトリミングやエフェクト・フィルターなどを適用して加工ができるサービスをご紹介しようと思います！

【 Scaley.io 】

■基本的な使い方！

それでは、「Scaley.io」がどのようなサービスなのか、実際に画像編集をしていきながら試してみたいと思います！


まず、サイトにアクセスするとこんなURLが表示されています。
もう少し分かりやすくするとこんな感じです！

https://i.scaley.io/【オプション】/【ファイルのURL】


「オプション」のところに、「トリミング」「回転」「エフェクト」など編集したいことを記述して、「ファイルのURL」にアップロードした画像ファイルのURLを記述します。
そして、このURLをブラウザで開くと「編集済みの画像」が表示されるというわけです。

基本的な使い方は、たったこれだけです！


例えば、私がGitHubにアップロードした「サンプル画像」のURLは以下のとおりです。

【サンプル画像のリンク】
https://raw.githubusercontent.com/appgiga-code/freeimg/master/street2.jpg


【サンプル画像】

この画像は「1280px × 890px」のサイズなのですが、これを「300px × 300px」の正方形に縮小してトリミングしたい場合は、このようなURLになります。

https://i.scaley.io/300×300/raw.githubusercontent.com/appgiga-code/freeimg/master/street2.jpg


サイズを変更する場合は、そのままダイレクトに「300×300」という感じでサイズを指定すればOKです！（「x」はアルファベットの「エックス」を入力します）

そして、画像ファイルのURLは「https://」の部分を削除したモノをコピペするだけです。


最終的に、画像はこの通り「正方形」に編集されて表示されるのです！
https://i.scaley.io/300×300/raw.githubusercontent.com/appgiga-code/freeimg/master/street2.jpg


他にも、画像に「ぼかし効果」を適用したければ、「b」というキーワードと一緒に「1〜100」までの数値を組み合わればOK！
https://i.scaley.io/b10/raw.githubusercontent.com/appgiga-code/freeimg/master/street2.jpg


ネガフィルムのような「階調反転」の効果を適用したければ「invert」というキーワードを記述します。
https://i.scaley.io/invert/raw.githubusercontent.com/appgiga-code/freeimg/master/street2.jpg


水平方向に反転する時は「flip-h」と記述し、垂直方向に反転する場合は「flip-v」となります。
https://i.scaley.io/flip-v/raw.githubusercontent.com/appgiga-code/freeimg/master/street2.jpg

グレースケールを適用したければ、そのまま「grey」と記述すればOK！
https://i.scaley.io/grey/raw.githubusercontent.com/appgiga-code/freeimg/master/street2.jpg

他にも、画像を「90度」回転したければ「r90」と記述したり、「ぼかし」の反対で「シャープ」にしたければ「s30」にするなど、さまざまなオプションが用意されているので、多彩な画像編集が出来るようになっています。


さらに、画像URLだけで編集できるということは、以下のようにHTMLの「imgタグ」として活用することも可能なので便利です！

■オプションの組み合わせによる応用技！

さて、ここまでの解説で「画像URL」を使った加工編集が出来るようになったわけですが、実はもう1つ便利な使い方があります。

それは、複数のオプションを「連結」して使う方法です！

つまり、これまでは「400×300」のようにサイズを変更したり、「b10」と記述して「ぼかし効果」を適用したりしてきましたが、これらのオプションを1度にまとめて実行することが出来るというわけです。


例として、こちらのサンプル画像を使ってみましょう。
https://raw.githubusercontent.com/appgiga-code/freeimg/master/cat2.jpg

この画像に…、

・「300px × 300px」のサイズに変更
・グレースケールを適用
・水平方向に反転


というオプションを1度にまとめて実行するとこうなります！
https://i.scaley.io/300×300-grey-flip-h/raw.githubusercontent.com/appgiga-code/freeimg/master/cat2.jpg

URLと見ると分かりますが、オプションを連結する場合は「-（ダッシュ）」を付与して繋いでいきます。

そのため、「300×300-grey-flip-h」という感じに組み合わせることが出来るわけです。


このように「連結技」を覚えると、さらに多彩な画像編集が行えるようになるので、その可能性はまさに無限大と言えるでしょう。

ちなみにですが、ユニークなオプションとして「https」というキーワードが用意されています。
これを利用すると、SSLに対応していない「http」から始まる画像URLでも、「https」から始まるURLとして利用することが出来るようになります。

自分のサーバーがSSL対応している場合には、とても有効に活用できるオプションだと思います。


今回利用したサンプル画像は、以下のリンクから使えますので、ぜひみなさんも「Scaley.io」を実際に試してみてください！

【サンプル画像｜GitHub】

■おまけ

最後に、「Scaley.io」よりもさらに高度な機能が搭載された画像編集エディタを、自分のWebサイトやサービスなどに組み込めるツールがあるので合わせてご紹介しておきます。

【わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ！】

わずか数行のJavaScriptを書くだけで、自分のWebサイトやアプリなどへ無料で組み込むことができる高機能な画像編集エディタの紹介記事です。

豊富な機能に加えて、エディタ自体のカスタマイズも自在に可能なので、ご興味ある方はぜひ一読してみてください！

■まとめ

「Scaley.io」の利用は無料のうえ、ユーザー登録も不要で「2000画像／月」をオンラインで編集可能というのが大きな魅力だと思います。
また、一度変換された画像はキャッシュされるようになっているので、次回からは非常に高速なレスポンスで表示可能な設計になっています。

ブラウザのアドレスバーからお手軽に試すことができるので、ぜひみなさんも一度トライして画像編集を楽しんでみてください！


＜参考＞
・「Scaley.io」公式サイト


written by まさとらん（@0310lan）