IPA


開発成果一覧へ

 



2005年度下期 未踏ソフトウェア創造事業  採択案件評価書

 


1.担当PM

   長尾 確 (名古屋大学 情報メディア教育センター 教授)


2.採択者氏名

開発代表者

  神原 啓介 (慶應義塾大学大学院 政策・メディア研究科 修士課程)

共同開発者

  なし


3.プロジェクト管理組織


  株式会社 リオ


4.委託金支払額


  3,909,589


5.テーマ名


  Web上で協同利用するイラストレーションツールの開発

 


6.関連Webサイト


  http://sappari.org/willustrator/


7.テーマ概要


 本プロジェクトではWeb上で利用可能なドローツールの開発を行います。

 Webを利用して誰でも手軽に情報発信や共有ができるようになり、特にBlogWikiを利用して文字情報を編集しやり取りすることは簡単になりました。しかし文字情報と違い、イラストや図を公開し共有するにはPC上でのファイルの編集やアップロードなどに手間がかかるため手軽できません。そのためWeb上で編集可能なBlogWikiに比べて敷居が高く、繰り返し編集することが面倒です。掲示板などで使われるペイントツールもありますが、ラスター画像はテキストやベクター画像に比べて再編集が難しいという問題があります。
 また、PNGJPEGは公開されても、そのオリジナルフォーマットファイルはあまり公開されないため、他の人の描いた絵や図を再編集・再利用することが難しくなっています。
 BlogWikiのようにWeb上で直接イラストや図を編集することができれば、素早く公開や再編集が行えるだけでなく、他の人の描いたイラストを再利用したり、誰かと協同で図を編集するといったコミュニティの力を使った新しい絵の描き方、新しいコミュニケーションも可能になります。また、Web上で利用できることでどの絵がどの絵に利用されたか、といった著作者をたどることや、絵がどのように成長して言ったかを知ることができるなど、新しい絵の利用形態も考えられます。
 本システムを通じて、Web上で・仕事で・研究で、イラストがより効果的に利用されることで、コミュニケーションや知的な生産活動を支援することを目指しています。


8.採択理由


 Web上で発見したイラスト等のイメージを、少し手を加えた後で自分のWebサイトでも利用したいと考えたことのある人は少なからず存在するのではないかと思う。本提案は、そのような要望に応えようとするものである。提案された仕組みによって、ブログ等で、イラストを共有したり、協同で作成したりする活動が促進されるだろう。積極的に創作活動に参加しようとする人はあまり多くはないだろうが、たとえ少数でもクリエイティブな人たちにより多くの機会とツールを提供しようという試みは大変よい。現在、Webにおいて、圧倒的にテキストや写真のコンテンツが多い中で、近い将来に、人間の創作した図的表現の質と量が飛躍的に向上することが期待できる。ただし、あまり欲張って多くの機能を一度に実現するより、単純でも確実に動作し、容易に習熟できるような機能に限定するべきである。そのため、提案された機能のうち、重要度の高いものに限定することを条件に採択とする。

 





9.開発目標


Blog
WikiといったWebアプリケーションによってWeb上でテキストを編集することは楽になったが、未だに絵や図を扱うのは面倒である。そのためテキストに比べて絵や図はWeb上であまり有効利用されていない。テキストはブラウザのフォームで直接編集できるのに対し、絵はデスクトップアプリケーションで作成したファイルをWeb上に置くといった手間が必要である。

また多くの場合、JPGPNGといった画像ファイルはWeb上に置かれても、そのオーサリングフォーマットのファイル (Adobe Illustratorの場合.aiファイルなど) Web上で共有されない。そのため他の人の描いた絵を少し変更したいと思ってもJPGPNGといったラスターデータでは再編集が困難である。

このように、現在のWebでは絵の編集や共有・再利用がうまく行われていない。

 

上記の問題を解決するため、本プロジェクトでは以下のような仕組みを提案・開発する。

 

·          デスクトップアプリケーションを利用せず、Web上で直接的に絵を描けるようにする。

·          描いた絵をWeb上でそのまま公開・共有できるようにする。その際にできるだけファイルやサーバを意識させず、絵を描くことに集中できるようにする。

·          再編集しやすいよう、ラスターデータではなくベクターデータを編集・共有する。すなわちペイントツールではなくドローツールで絵を描く。

·          描いた絵は他の人と共有し、手軽にそれらのデータを再利用できるようにする。

 

以上の提案を一言で言うならば「絵のオープンソース化」である。

プログラムのソースコードが公開・共有され、他の人の手によって自由に改変できるようになったことで優れたオープンソースソフトウェアが多く生まれた。絵もソースが公開・共有され、自由に改変できるようになることで、優れた絵を生まれ、より多くの人が絵を活用できるようになることを目指している。


10.進捗概要


Web
上で使えるドローツール「Willustrator」を開発した。Web上で直接絵を描けることでBlogWikiなどで手軽に絵を扱えるようになると同時に、絵のベクターデータをWeb上で保存・共有することで、他の人の絵を再利用して新しい絵を描くといったこともできるようになる。またドローツールであるためペイントツールに比べて絵の再編集が容易であり、再利用性も高い。

成果物はhttp://willustrator.org/にて公開されサービス運用中である。


11.成果


1 絵を描くまで(ログインや画像の新規作成)

Willustratorにアクセスし、ログインすると絵を描ける(図1−1)。認証には「はてな認証API」を利用しており、はてなのアカウントを持っているユーザーであればユーザー登録なしで利用できる。

図 1−1:フロントページ

 

ログインすると自分の画像一覧ページに行く(図1−2)。ここで「Create New Image」ボタンを押すと新しい絵を描ける。

図 1−2:ユーザーホーム

 

 

2 絵を描く

 

Willustratorのドローツールは下図1−3のようになっている。

画面中央に絵を描くキャンバスがあり、そのキャンバスの左上に選択や丸、四角、文字そしてベジェ曲線などのツールがある。またツールの横に保存ボタンがある。キャンバスの左下のコンボボックスでキャンバスの表示拡大率を設定したり、キャンバス全体をスクロールすることもできる。

キャンバスや図形を選択すると画面右側にプロパティペインが現れ、選んだ図形などの設定を変更できる。例えば四角を選択するとその四角の線の色や太さ、塗りの色や透明度などを変えることができる。下図3ではベジェ曲線を選んでいるためベジェ曲線に関するプロパティが表示されている。

 

図1−3:ドローエディタ

 

 

 

各種ツール

ユーザーが使えるツールは下図1−4のようなものがある。

図1−4:各種ツール

 

選択ツール

選択ツールで図形を選択することができる(図1−5)。クリックで選択するほかに、ドラッグによる矩形選択やShiftキーを押しながら複数の図形を選択することができる。

図1−5:選択ツール

 

Boxツール

丸ツールと四角ツールを合わせてBoxツールと呼ぶ。丸ツールでは丸を、四角ツールでは四角を描くことができるが、描いたあとお互いに変換することができる(図1−6)。

あえてBoxツールと呼んでいるのは、箱のサイズ(幅と高さ)と位置が指定できれば中の図形は丸でも四角でも星(現在は描けないが)でもよく、将来的には丸や四角以外の図形にも自由に相互変換できるようにしたいと考えているためである。

図1−6Boxツール

 

テキストツール

テキストツールを使うと図のように文字を書ける。(図1−7

図1−7:テキストツール

 

図形内テキスト

図1−8,9のように図形の中央に文字を書くことができる。文字を書きたい図形をダブルクリックすると図形内のテキスト編集をできるようになる。

この機能は例えば文字列を丸や四角で囲みたいときなどに使うと便利である。また、丸と四角は相互変換できるので、「四角で囲んでいたものをやっぱり丸で囲むようにしたい」といったとき簡単に変更することができる。

 

図1−8:図形内テキスト

図1−9:図形内テキスト(ベジェ曲線の場合)

 

ポリゴン・ベジェ曲線ツール

他のドローツールと同様、Willustratorでもポリゴン(多角形)や3次ベジェ曲線を編集し複雑な図形を描くことができる。アンカーポイントやハンドルの操作など、基本的な編集方法は似ているが、ハンドルの伸ばし方や折れ線/なめらかな線の切り替えなどが他のツールと少し異なっている。

 

新しいハンドルを伸ばして線を曲げるには以下のようにする。

 

アンカーポイント(四角)を選択すると

その側に半透明のコントロールポイント(丸)が現れる

そのコントロールポイントをドラッグして動かすと曲線になる

Ctrlキーを押しながらハンドルを伸ばすと

もう片方のハンドルも対称に延びる

 

 

線を鋭く折り曲げたい場合や、反対に折れた線をなめらかにしたい場合は以下のようにする。

単純にハンドルを動かすと折れた線になる

Ctrlキーを押しながらハンドルを動かすと

両ハンドルが一直線になり、なめらかな線になる

 

 

線の途中に新しいアンカーポイントを追加したい場合は以下のようにする。

[a]キーを押しながら線上をクリックすると

新しいアンカーポイントが追加される

 

図1−10のようにベジェ曲線の始点と終点がつながっているものが「閉じた線」で、図1−11のようにつながっていないものが「開いた線」である。両者はベジェ曲線のプロパティで切り替えることができる(図1−12)。

図1−10:閉じた線          図1−11:開いた線

 

 

図1−12:ベジェ曲線のプロパティで開閉の切り替え

 

 

フリーハンドツール

フリーハンドツールを使うと図のように手描きの線がベジェ曲線に変換される(図1―13)。

図1−13:フリーハンドツール

 

ベジェ曲線ツールで思い通りの線を描くにはある程度の慣れが必要だが、フリーハンドツールを使えばベジェ曲線に不慣れなユーザーでも素早く思い通りの線を描くことができる。そしてフリーハンドで描いた線もベジェ曲線なのであとから線を変化させることも容易である。

図1−14:フリーハンドツール

 

図1−14のように丸っこいなめらかな線を描くと、ベジェ曲線もなめらかな線になる。図のようにカクカクと折れ曲がった線を描くとベジェ曲線の頂点も折れ曲がったものになる。

 

図形の拡大縮小

ベジェ曲線で描いた図や複数図形を選択した場合、図1−15のように拡大縮小できる。Shiftを押しながら拡大縮小すると等比で拡大縮小される。もちろんベクターデータなのでいくら拡大縮小しても劣化しない。

図1−15:図形の拡大縮小

 

グリッドとスナッピング

キャンバスのプロパティで「Grid」にチェックを入れると、図1−16のようにグリッド線が現れ、そのグリッド線に対してスナップが効く(図形や点をドラッグ時にグリッド線に吸い付く)ようになる。図1−16のように左右対称の図形や、水平・垂直な線、または等間隔の図形などを描く際にスナッピングを使うと便利である。

図1−16:グリッドとスナッピング

 

 

キャンバスのズームやスクロール

画面左下の%を変えることで表示倍率を変えることができる(図1−17)。細かい部分の編集をするときは表示倍率を上げるとよい。

図1−17:キャンバスの拡大率

 

コピー&ペースト

図形を選択して「右クリック>Copyを選択」すると図形をコピーできる(図1−18)。そしてキャンバス上で「右クリック>Pasteを選択」するとコピーした図形を貼り付けられる。コピーした図形は同じ絵の中だけでなく他の絵の中に貼り付けることもできる。

図1−18:コピー&ペースト

 

また、Ctrlキーを押しながら図形をドラッグすることで選択中の図形を複製できる。

 

保存・書き出し

ドローエディタの保存ボタンを押すと、サーバ上にデータ(XML)を保存すると同時にSVGPNG形式に書き出される。書き出しの手順は、まずクライアント(Flash)側でSVGの生成を行い、それをサーバ上にファイルとして保存し、そのSVGファイルをPNGに変換している。SVGからPNGへの変換はlibrsvgを利用した。

図1−19:生成されたHTMLタグ

 

書き出された画像ファイルはそのまま使うこともできるが、図1−19のようにHTMLタグが自動生成されるので、それをコピーしてBlogWikiに貼り付けると手軽である。

 

3 絵の再利用

 

Willustratorの特徴の一つは「他の絵を手軽に再利用できる」ことである。手軽に再利用できることで、他の人の描いた絵に何か付け加えたり、画像素材の色や大きさを変えて自分の好みに変えて利用するといった新しい絵の利用をすることができる。

実際に他の人の描いた絵を加工して新しい絵を作るには、絵の下のほうにある「Copy」というボタンを押す(図1−20)。すると絵が自分のものとして複製され、編集できるようになる。

図1−20:絵の派生

 

他の絵を元に絵を描く(派生する)と、図のようにその絵から派生した絵がリンクとして表示され、辿ってみることができる。

図1−21:絵の派生

 

 

逆に派生先の絵には、その元になった絵が表示されており、元の絵をリンクで辿ってみることができる。(図1−21

 

4 Creative Commonsの利用

Willustratorでは自由に絵を派生して新しい絵を作ることができるが、派生した絵の著作権は派生元の絵の作者が持っており、その著作者の権利を守る必要がある。そこで絵のライセンスとしてCreative Commonsを利用した。Creative Commonsは絵や音楽、動画といったコンテンツのためのライセンスであり、最近ではWeb上で広く認知・使用されている。

Creative Commonsにはいくつかの条件の組み合わせパターンがあり、そのうちWillustratorでは以下の2つの条件に固定することにした。

 

l        帰属(Attribution):クレジットさえつければ自由に派生できる

l        同一条件許諾(Share Alike):派生した絵も同じライセンスになる

 

この2つの条件によって、自由な派生を許可しながら、勝手にライセンスを変更されない(派生した絵の著作権が放棄されたり派生禁止になったりしない)ため著作者の権利を保護することができる。

 

絵を作成・派生した場合、Creative Commonsライセンスロゴや、原著作者と改変者のクレジットが自動で表記され、Creative CommonsRDFも自動的にページ内に埋め込まれるため、普通にWillustratorを使用するのであれば特別ユーザーが何かを意識したり操作をする必要はない。


12.プロジェクト評価


本プロジェクトで開発されたWillustratorは、Web上でイラストを容易に作成し、そのソースコードと呼べるようなイラストの内部データを共有し、部分的な修正や改変等の操作を自由に行えるようにしたシステムを開発し、Webサービスとして公開した。Web上で発見したイメージを、少し手を加えた後で自分のWebサイトでも利用したいと考えたことのある人は少なからず存在するのではないかと思う。本システムは、そのような要望に十分に応えることができる。この仕組みによって、ブログ等で、イラストを共有したり、協同で作成したりする活動が促進されるだろう。多くのクリエイティブな人たちに、より多くの機会とツールを提供しようという試みは非常に高く評価できる。

 


13.今後の課題


ドローツールとして満足のいく機能を実現することが本プロジェクトを通して最大の課題であり、今後の課題でもある。今後開発すべき具体的な機能としては「ベクターデータの合成や加工」「ドロップシャドウやグラデーションのようなエフェクト」がある。

WillustratorはすでにWeb上で公開しているものの、絵の数やユーザー数はまだまだ少ない。普及や宣伝のための特別な活動は行っていないが、他のWebアプリケーションや多くのユーザーに利用してもらえるようになることが一番効果的な宣伝活動であると考えられる。そうなるためには「わざわざデスクトップ上のドローツールを使わなくてもWillustratorで十分」と思えるようなツールにすることがなにより重要である。




  ページトップへ   

 

 

 


  Copyright(c) Information-technology Promotion Agency, Japan. All rights reserved 2004