シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
注目記事ピックアップ
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2017/02/10 19:10

編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!

scaley-01
どうも、まさとらん(@0310lan)です!

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

【 Scaley.io 】
scaley-02

■基本的な使い方!

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


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

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


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

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


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

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


【サンプル画像】
scaley-04
この画像は「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://」の部分を削除したモノをコピペするだけです。


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


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


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


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

グレースケールを適用したければ、そのまま「grey」と記述すればOK!
scaley-09 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度にまとめて実行することが出来るというわけです。


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

この画像に…、

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


というオプションを1度にまとめて実行するとこうなります!
scaley-11 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」がヤバイ!】
scaley-12
わずか数行のJavaScriptを書くだけで、自分のWebサイトやアプリなどへ無料で組み込むことができる高機能な画像編集エディタの紹介記事です。

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


■まとめ

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

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


<参考>
「Scaley.io」公式サイト


written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る