NAVER JAPAN:Flashを活用した新しい検索体験

最終回 フォトエディター_FP10の新機能を活用したオンライン画像編集ツール

本連載は今回が最終回、最後に紹介するのは「フォトエディター」です。フォトエディターは、レベル補正や色調補正などのような基本的な画像編集機能だけでなく、テキスト機能やドローイング機能も実装しています。これらの多彩な機能を実現するために活用しているのが、ローカルファイルアクセスや Pixel Bender といった Flash Player 10 の新機能です。これらの機能がフォトエディターでどのように利用されているのかを解説します。

UI 概要

NAVER フォトエディターは、インストール型画像編集ソフトの機能を、Web ブラウザ上で簡単に利用できるオンライン写真編集ツールです。Flash Player 10 以上がインストールされていれば、特別なインストール・会員登録をする必要無く、簡単な操作で皆さんの写真のサイズを変えたり、様々なエフェクトを適用したりするなど、多様なイメージの編集ができます。またFlickrなどの外部サービスと連動してFlickr上にアップロードした写真を編集することもできます。

それでは下記にてフォトエディターを説明します。

フォトエディター

主要機能

1) 充実した基本編集機能

簡単な写真編集のために、アプリケーションを起動したり高機能すぎるソフトウェアを利用したりするのは面倒です。NAVER フォトエディターでは基本的な編集機能を提供しつつ、利用者にとって使いやすい環境を提供するために様々な工夫を施しました。

一般のユーザが複雑なイメージ編集処理をするのは、かなり難易度が高く、面倒な作業です。NAVER フォトエディターでは、普遍的な写真の編集スタイルを分析し、レベル補正、色調補正、ホワイトバランスなど利用ニーズが高い機能をすぐ使えるように構成しました。

また、切り取り、回転、サイズ調整のような基本的なイメージ変形機能も充実させつつ、UI の利便性とのバランスを考慮しながら開発しました。

2) 選択機能

NAVER フォトエディターでは、インストール型画像編集ソフトと同様、イメージの特定領域を選択して編集できます。この機能を利用することにより、例えば写真を合成したり、イメージの一部領域のみを編集したりすることが可能です。

具体的には、人物写真の顔部分だけにモザイク処理を適用したり、選択された領域を特定の色で塗りつぶしたりすることができます。また、選択領域周辺にストロークを描くことや、選択部分だけコピーして新しいイメージに貼り付けることもできます。

このような高機能なイメージ編集は、一般的な Web ブラウザベースで作動するオンライン写真編集ソフトでは提供されていないケースが多い一方、インストール型画像編集ソフトでは提供されている機能であり、ユーザニーズも高いと考え、実装いたしました。

3) テキスト機能

NAVER フォトエディターは特別なテキスト処理方法を使用しています。
一般的には、テキストの処理に使われることが予想されるフォントを Flash 内に含めるケースが多いのですが、日本語の場合、フォントのサイズ容量が大きいため Web サービスには現実的ではない、という問題点がありました。

この問題を解決するため、NAVER フォトエディターではシステムフォントを使用しながら、テキスト境界の階段現象(イメージの境界が階段のようにデコボコする現象)を和らげる処理をしました。その結果、表示を美しく保ったまま容量の小さいテキスト機能を実装することができました。

テキスト機能
左:処理前 右:処理後

4) その他の機能

NAVER フォトエディターは、イメージの編集機能以外にも、絵を描いたり写真の上に面白い落書きをしたりするドローイング機能を提供しています。また、ドローイング機能に付随して様々なフィルター機能、自動補正機能なども提供しており、ユーザの多様なイメージ編集・加工ニーズを満たしています。

Flash Player 10 の機能使用

NAVER フォトエディターは、最新バージョンの Flash Player 10(以下 FP10)を基盤に制作・開発した実験的なプロジェクトです。

NAVER フォトエディターを提供するための必須機能が FP10 でないと実装できなかったため、FP10 を選択する必要がありました。その結果、強力で使いやすいイメージエディターを作ることができました。

1) ローカルファイルアクセス

NAVER フォトエディターは、サーバーを使用せずクライアント側ですべての処理が可能です。
これはローカル PC のファイルを保存してロードする機能が FP10 に追加されたため実現できました。
FP9 では、ユーザのローカル PC にあるファイルを Flash に読み込ませるために、(1)ファイルをサーバーにアップロードする、(2)さらにそれを Flash が読み込む、というプロセスが必要でした。しかし、FP10 ではローカルファイルアクセス機能が追加されたため、そのような面倒な作業がなくなりました。

2) ピクセルベンダー(Pixel Bender)の使用

FP10 はグラフィックとイメージプロセシング処理において、以前のバージョンに比べて多様かつ効果的な方法を提供しています。その中で、ピクセルベンダー(Pixel Bender)という強力な技術を NAVERフォトエディターに適用しました。

ピクセルベンダーは、これまで処理できなかったプロセシングを簡単に処理できるようにしてくれます。例えば、複雑なフィルターやブレンドを、GPU または CPU を利用することにより、素早く処理することができます。

NAVERフォトエディターの開発の中で、境界をぼかすオプションを使用して選択部分に効果を適用すると、選択部分の周りにアルファが的確に適用されないという問題がありました。なぜなら、これは既存のブレンド方式では解決できない部分であり、直接処理することになるとたくさんの演算が必要だからです。
しかし、ピクセルベンダーを利用して新しいブレンドを制作することにより、簡単に解決できました。

また、NAVERフォトエディターがサポートしているフィルター効果についても、ピクセルベンダーを利用して素早い処理ができるようになりました。

3) FP10 のその他の有用な機能

3D変形機能を利用すると、Flash のすべての要素の三次元変形が可能です。既存バージョンでは、システムフォントを使用するテキストフィールドを回転させるとテキストが無くなってしまうという問題がありましたが、Z軸回転(rotateZ)を利用して回転させるとその問題が解決できます。NAVER フォトエディターのテキスト機能はこれを利用して実現しました。

また、FP10 では、グラフィック・ウィンディング(winding)・ルールのオプションを提供しています。ウィンディング・ルールとは、ベクターパスで絵を描くときに閉じられた領域の順番とパスの方向によって、どのように塗りつぶすかを決定するルールを指します。他のベクターツールでは基本的に提供していますが、Flash では初めてサポートされる機能です。NAVERフォトエディターで自由選択ツール(Lasso)を実装する際、既存バージョンでは使用できなかった Non-zero ウィンディング・ルールを適用することにより、既存のインストール型画像編集ソフトの自由選択ツールと同じ利用体験を提供することができました。

3D変形機能

最後に

これまで4回にわたり NAVER の Flash を利用した各種サービスを皆さまに紹介することができました。

Flash を利用したサービスを制作することで、NAVER を利用するユーザには従来の検索サービスでは得られなかった利用体験を、少しずつではありますがご提供できているのではないかと思います。NAVER という検索サービスはここでとどまることなく、これからもずっと、今までにない新しい検索サービス、もっと楽しい経験を与える検索サービスであり続けるために頑張ります。その中で、これまで提供できなかった価値を提供するためにも Flash が重要なカギを握っていると考えています。

ありがとうございました。