今回のテーマは「画像編集」
さまざまなアプリケーションがWeb化し、ブラウザさえあれば動作する便利なツールが増えてきた。メーラー、カレンダー、プロジェクト管理などジャンルは多数存在する。だが、あまり進んでいない分野がある。それはデザインが関連するツールだ。たとえば、ドロー系や画像編集系ソフトウェアだ。
この手のソフトウェアは処理が重たく、ブラウザベースでの動作には向いていないと思われている。だが、この分野でもっとも有名なAdobe Systemsであっても、Webアプリケーション化を推進している。数年後にはデザインすらWebベースで行なうことが当たり前になっているかもしれない。
今回は「画像編集」に注目してWebアプリケーション、オープンソース・ソフトウェア(OSS)をご紹介したい。すでに実用的と思わせるレベルに達しているものや、今後の開発を期待させるものなどさまざまだ。ぜひ試してみてほしい。
今回紹介するOSS・Webアプリ
『Adobe Photoshop Express』 デジカメ画像の管理と編集
『Splashup』 ローカルアプリ並みの高度な画像編集アプリ
『Bevel.js』 JavaScriptで画像加工表示
『Kropper』 画像の一部をスムーズに切り出す
あのPhotoshopがWebアプリに!?
| 名称 | Adobe Photoshop Express |
|---|---|
| URL | https://www.photoshop.com/express/ |
『Adobe Photoshop Express』はAdobe Systemsが提供する画像編集ソフトウェアだ。Photoshopというとプロ向けの印象があるが、本ソフトウェアは高機能な画像編集を行なうというよりも、デジカメで撮った写真の簡単な補正を行なうといった使い方がメインになりそうだ。そのため赤目補正や切り抜きといった処理がボタンひとつで簡単に実行できるようになっている。
|
Adobe Photoshop Expressのトップページ。加工サンプルなども紹介されている |
Flashベースで作られたWebアプリケーションであり、画像の編集と管理機能とが合わさっている。Adobe AIR製のアップローダも提供されており、Adobe Photoshop Express上で写真を管理することもできるようになっている。
|
切り抜き加工を行う所。左のメニューから簡単に選択できる |
簡単な画像補正のほか、写真をイラスト調に変換したり、スライドショーを再生したりする機能も搭載。写真の加工のみならず、見て楽しむのにも向いたアプリケーションだ。
|
イラスト調に変換しているところ |
高機能Webベース画像編集アプリケーション
| 名称 | Splashup |
|---|---|
| URL | http://www.splashup.com/ |
『Splashup』はまさに画像編集を行なうためのアプリケーションだ。新規でイメージを作成することもでき、これまでのローカルアプリケーションで実現されてきたような画像編集機能がほとんどそろっている。レイヤー/文字追加/切り抜き/グラデーションなど機能は豊富だ。
|
Splashupのトップページ。トータルな画像編集が可能 |
Splashupは、flickrやPicasa、facebookの画像を取り込んで編集、アップロードすることが可能。写真の閲覧には既存の写真共有サービスを使い、その加工をSplashupで行なうという形式をとっている。インタフェースは、画像編集用ウィンドウとは別に、各種ツールがフローティングウィンドウとなっており、まさにローカルの画像編集ソフトウェアと変わらない作りと言えるだろう。
|
新規が画像を作成することもできる |
Flashベースであるために、若干の重たさは感じられる。だが、簡易的な編集はもちろん、今後のバージョンアップ次第では問題なく使えるようになっていくと思われる。
JavaScriptで画像を加工できるライブラリ
| 名称 | Bevel.js |
|---|---|
| URL | http://www.netzgesta.de/bevel/ |
一枚の画像を加工するならよいが、何百枚もの画像を修正しなければならないとしたら、手作業ではなく、サーバサイドで一括処理したほうが効率的だろう。ただ、一枚の画像を元にしてさまざまな加工バリエーションを作るとしたらどうだろうか。処理が重さを考えると、処理の重さを考えると、いっそのことクライアントサイドで実行してしまうのも一つの手だ。
そうしたニーズに応えられそうなのが『Bevel.js』。JavaScriptで画像に対してエフェクトを与えるライブラリだ。アップロードした画像に対し、JavaScriptで角丸やフレーム、ドロップシャドーといったエフェクトを与えることができる。加工した画像をアップロードしているわけではない点がポイント。ひとつの画像から何パターンもレタッチ画像を生成する作業は面倒だが、このようなライブラリを使うことで、クライアントサイドで見栄えだけ変更するという手段もあるわけだ。
|
画像変更パターン。実際の画像は加工せず、枠などを追加して表示している |
対応ブラウザは、Internet Explorer(IE)6以上/Firefox1.5以上/Opera9以上/Safariとなっている。なお、Bevel.jsは元々Public Domainだったが、現在は個人利用に限り無償で利用できるようになっているのでご注意いただきたい。
|
枠のパターンは数多い |
画像の一部だけを切り出す
| 名称 | Kropper |
|---|---|
| URL | http://kropper.captchr.com/ |
画像共有サイトやWebサイトのサムネイルを表示するサービスは、全体を縮小して表示するものが多い。これでは全体のイメージは分かるが、特徴的な部分がどこなのか分かりづらい。これでは画像の価値が損なわれてしまう可能性がある。
『Kropper』を使うと画像をアップロードし、その画像の指定場所だけを切り出すことができる。その作業はマウスで画像を動かして、切り抜きたい場所と枠を合わせるだけだ。対応ブラウザはIE6以上/Firefox 1.5以上/Safari 2.0.4以上となっている。
|
加工中。枠の中に切り取りたい部位を入れる |
画像は拡大・縮小することもでき、それらはJavaScriptを使ってブラウザ上だけで完結する。画像を切り抜くだけという、決して多機能ではないが、さまざまなシステムで応用がきく技術だ。
|
完成図。背景色は変わってしまうが、表示した場所がそのまま切り取られる |
いかがでしたか?
Webサイトのサムネイルやスクリーンショット、デジカメの写真などコンピュータ上で画像を扱うケースは数多い。そしてそれらの画像はそのままでは扱わず、文字を追加したり、色をつけたりすることも多い。そうした時に使われるのが画像編集ソフトウェアだ。
トータルな画像編集機能を提供するものもよいが、ライブラリとして利用できる単機能を提供するタイプのほうが利用ケースは多いのではないだろうか。Webシステムの開発、サイトの構築を手がける中で知っておくときっと役に立つはずだ。
高度な画像編集機能はまだ難しいかもしれないが、実際に利用される機能はそれほど多くないことが多い。今後、さらに機能が追加されていけば、画像編集さえもブラウザベースが当たり前になっているだろう。
著者プロフィール
MOONGIFT 中津川 篤司(なかつがわ あつし)
1978年生まれ。オープンソース紹介サイト「MOONGIFT」管理人。プログラマ、SE、ITマネージャを経て、オープンソースのビジネス活用を推進する。現在は独立し、Webサービスのコンサルティング、プロデュースを行う。
