編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
ANGIE / 2017年2月10日 10時10分
どうも、まさとらん(@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/300x300/raw.githubusercontent.com/appgiga-code/freeimg/master/street2.jpg
サイズを変更する場合は、そのままダイレクトに「300x300」という感じでサイズを指定すればOKです!(「x」はアルファベットの「エックス」を入力します)
そして、画像ファイルのURLは「https://」の部分を削除したモノをコピペするだけです。
最終的に、画像はこの通り「正方形」に編集されて表示されるのです!
https://i.scaley.io/300x300/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つ便利な使い方があります。
それは、複数のオプションを「連結」して使う方法です!
つまり、これまでは「400x300」のようにサイズを変更したり、「b10」と記述して「ぼかし効果」を適用したりしてきましたが、これらのオプションを1度にまとめて実行することが出来るというわけです。
例として、こちらのサンプル画像を使ってみましょう。
https://raw.githubusercontent.com/appgiga-code/freeimg/master/cat2.jpg
この画像に...、
・「300px × 300px」のサイズに変更
・グレースケールを適用
・水平方向に反転
というオプションを1度にまとめて実行するとこうなります!
https://i.scaley.io/300x300-grey-flip-h/raw.githubusercontent.com/appgiga-code/freeimg/master/cat2.jpg
URLと見ると分かりますが、オプションを連結する場合は「-(ダッシュ)」を付与して繋いでいきます。
そのため、「300x300-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)
外部リンク
この記事に関連するニュース
-
Excelをノーコードで自動化しよう! パワークエリの教科書 第7回 「ステップ」と「M言語」の関係とは? エラー処理を理解する
マイナビニュース / 2024年6月24日 11時0分
-
PDFエディター付きONLYOFFICE Docs 8.1がリリース!
PR TIMES / 2024年6月20日 11時15分
-
PDFを改ざんや流用から守る「PDFロック」リリース。編集不可・コピー禁止のセキュリティPDFを簡単作成
PR TIMES / 2024年6月20日 10時10分
-
「Adobe Lightroom」の生成AI機能はこう活用しよう! - アドビがセミナーを開催
マイナビニュース / 2024年6月14日 11時38分
-
外出先で原稿修正。プレスリリース専用のエディターツール「PR Editor」にスマホ編集機能が追加
PR TIMES / 2024年6月6日 15時15分
ランキング
-
1定年後に、見落とすと厄介な出費「3選」とは?
オールアバウト / 2024年7月3日 21時40分
-
210位寝言、6位歯ぎしり、3位常夜灯をつけた…40~60代1012人調査で判明「早死にした人の睡眠特徴ワースト10」
プレジデントオンライン / 2024年7月3日 17時15分
-
3Q. 納豆をより健康的に食べるには、どのような食べ合わせがおすすめですか? 【管理栄養士が解説】
オールアバウト / 2024年7月2日 20時45分
-
4痩せたい人は注目!実は有能なきゅうりの痩せ効果&食べ方
つやプラ / 2024年7月3日 12時0分
-
5お金が貯まらない人が何気なくやってしまう習慣3つ
オールアバウト / 2024年7月3日 20時30分
記事ミッション中・・・
記事にリアクションする
記事ミッション中・・・
記事にリアクションする
エラーが発生しました
ページを再読み込みして
ください