１ 絵を描くまで（ログインや画像の新規作成）
Willustratorにアクセスし、ログインすると絵を描ける（図１−1）。認証には「はてな認証API」を利用しており、はてなのアカウントを持っているユーザーであればユーザー登録なしで利用できる。
図 １−1：フロントページ
ログインすると自分の画像一覧ページに行く（図１−2）。ここで「Create New Image」ボタンを押すと新しい絵を描ける。
図 １−2：ユーザーホーム
２ 絵を描く
Willustratorのドローツールは下図１−3のようになっている。
画面中央に絵を描くキャンバスがあり、そのキャンバスの左上に選択や丸、四角、文字そしてベジェ曲線などのツールがある。またツールの横に保存ボタンがある。キャンバスの左下のコンボボックスでキャンバスの表示拡大率を設定したり、キャンバス全体をスクロールすることもできる。
キャンバスや図形を選択すると画面右側にプロパティペインが現れ、選んだ図形などの設定を変更できる。例えば四角を選択するとその四角の線の色や太さ、塗りの色や透明度などを変えることができる。下図3ではベジェ曲線を選んでいるためベジェ曲線に関するプロパティが表示されている。
図１−3：ドローエディタ
各種ツール
ユーザーが使えるツールは下図１−4のようなものがある。
図１−４：各種ツール
選択ツール
選択ツールで図形を選択することができる（図１−5）。クリックで選択するほかに、ドラッグによる矩形選択やShiftキーを押しながら複数の図形を選択することができる。
図１−５：選択ツール
Boxツール
丸ツールと四角ツールを合わせてBoxツールと呼ぶ。丸ツールでは丸を、四角ツールでは四角を描くことができるが、描いたあとお互いに変換することができる（図１−6）。
あえてBoxツールと呼んでいるのは、箱のサイズ(幅と高さ)と位置が指定できれば中の図形は丸でも四角でも星（現在は描けないが）でもよく、将来的には丸や四角以外の図形にも自由に相互変換できるようにしたいと考えているためである。
図１−6：Boxツール
テキストツール
テキストツールを使うと図のように文字を書ける。（図１−7）
図１−7：テキストツール
図形内テキスト
図１−8,9のように図形の中央に文字を書くことができる。文字を書きたい図形をダブルクリックすると図形内のテキスト編集をできるようになる。
この機能は例えば文字列を丸や四角で囲みたいときなどに使うと便利である。また、丸と四角は相互変換できるので、「四角で囲んでいたものをやっぱり丸で囲むようにしたい」といったとき簡単に変更することができる。
図１−8：図形内テキスト
図１−9：図形内テキスト（ベジェ曲線の場合）
ポリゴン・ベジェ曲線ツール
他のドローツールと同様、Willustratorでもポリゴン（多角形）や３次ベジェ曲線を編集し複雑な図形を描くことができる。アンカーポイントやハンドルの操作など、基本的な編集方法は似ているが、ハンドルの伸ばし方や折れ線/なめらかな線の切り替えなどが他のツールと少し異なっている。
新しいハンドルを伸ばして線を曲げるには以下のようにする。
アンカーポイント（四角）を選択すると
その側に半透明のコントロールポイント（丸）が現れる
そのコントロールポイントをドラッグして動かすと曲線になる
Ctrlキーを押しながらハンドルを伸ばすと
もう片方のハンドルも対称に延びる
線を鋭く折り曲げたい場合や、反対に折れた線をなめらかにしたい場合は以下のようにする。
単純にハンドルを動かすと折れた線になる
Ctrlキーを押しながらハンドルを動かすと
両ハンドルが一直線になり、なめらかな線になる
線の途中に新しいアンカーポイントを追加したい場合は以下のようにする。
[a]キーを押しながら線上をクリックすると
新しいアンカーポイントが追加される
図１−10のようにベジェ曲線の始点と終点がつながっているものが「閉じた線」で、図１−11のようにつながっていないものが「開いた線」である。両者はベジェ曲線のプロパティで切り替えることができる（図１−12）。
 
図１−10：閉じた線
図１−11：開いた線
図１−12：ベジェ曲線のプロパティで開閉の切り替え
フリーハンドツール
フリーハンドツールを使うと図のように手描きの線がベジェ曲線に変換される（図１―13）。
図１−13：フリーハンドツール
ベジェ曲線ツールで思い通りの線を描くにはある程度の慣れが必要だが、フリーハンドツールを使えばベジェ曲線に不慣れなユーザーでも素早く思い通りの線を描くことができる。そしてフリーハンドで描いた線もベジェ曲線なのであとから線を変化させることも容易である。
図１−14：フリーハンドツール
図１−14のように丸っこいなめらかな線を描くと、ベジェ曲線もなめらかな線になる。図のようにカクカクと折れ曲がった線を描くとベジェ曲線の頂点も折れ曲がったものになる。
図形の拡大縮小
ベジェ曲線で描いた図や複数図形を選択した場合、図１−15のように拡大縮小できる。Shiftを押しながら拡大縮小すると等比で拡大縮小される。もちろんベクターデータなのでいくら拡大縮小しても劣化しない。
図１−15：図形の拡大縮小
グリッドとスナッピング
キャンバスのプロパティで「Grid」にチェックを入れると、図１−16のようにグリッド線が現れ、そのグリッド線に対してスナップが効く（図形や点をドラッグ時にグリッド線に吸い付く）ようになる。図１−16のように左右対称の図形や、水平・垂直な線、または等間隔の図形などを描く際にスナッピングを使うと便利である。
図１−16：グリッドとスナッピング
キャンバスのズームやスクロール
画面左下の％を変えることで表示倍率を変えることができる（図１−17）。細かい部分の編集をするときは表示倍率を上げるとよい。
図１−17：キャンバスの拡大率
コピー＆ペースト
図形を選択して「右クリック＞Copyを選択」すると図形をコピーできる（図１−18）。そしてキャンバス上で「右クリック＞Pasteを選択」するとコピーした図形を貼り付けられる。コピーした図形は同じ絵の中だけでなく他の絵の中に貼り付けることもできる。
図１−18：コピー＆ペースト
また、Ctrlキーを押しながら図形をドラッグすることで選択中の図形を複製できる。
保存・書き出し
ドローエディタの保存ボタンを押すと、サーバ上にデータ(XML)を保存すると同時にSVGとPNG形式に書き出される。書き出しの手順は、まずクライアント(Flash)側でSVGの生成を行い、それをサーバ上にファイルとして保存し、そのSVGファイルをPNGに変換している。SVGからPNGへの変換はlibrsvgを利用した。
図１−19：生成されたHTMLタグ
書き出された画像ファイルはそのまま使うこともできるが、図１−19のようにHTMLタグが自動生成されるので、それをコピーしてBlogやWikiに貼り付けると手軽である。
３ 絵の再利用
Willustratorの特徴の一つは「他の絵を手軽に再利用できる」ことである。手軽に再利用できることで、他の人の描いた絵に何か付け加えたり、画像素材の色や大きさを変えて自分の好みに変えて利用するといった新しい絵の利用をすることができる。
実際に他の人の描いた絵を加工して新しい絵を作るには、絵の下のほうにある「Copy」というボタンを押す（図１−20）。すると絵が自分のものとして複製され、編集できるようになる。
図１−20：絵の派生
他の絵を元に絵を描く（派生する）と、図のようにその絵から派生した絵がリンクとして表示され、辿ってみることができる。
図１−21：絵の派生
逆に派生先の絵には、その元になった絵が表示されており、元の絵をリンクで辿ってみることができる。（図１−21）
４ Creative Commonsの利用
Willustratorでは自由に絵を派生して新しい絵を作ることができるが、派生した絵の著作権は派生元の絵の作者が持っており、その著作者の権利を守る必要がある。そこで絵のライセンスとしてCreative Commonsを利用した。Creative Commonsは絵や音楽、動画といったコンテンツのためのライセンスであり、最近ではWeb上で広く認知・使用されている。
Creative Commonsにはいくつかの条件の組み合わせパターンがあり、そのうちWillustratorでは以下の２つの条件に固定することにした。
l 帰属（Attribution）：クレジットさえつければ自由に派生できる
l 同一条件許諾（Share Alike）：派生した絵も同じライセンスになる
この2つの条件によって、自由な派生を許可しながら、勝手にライセンスを変更されない（派生した絵の著作権が放棄されたり派生禁止になったりしない）ため著作者の権利を保護することができる。
絵を作成・派生した場合、Creative Commonsライセンスロゴや、原著作者と改変者のクレジットが自動で表記され、Creative CommonsのRDFも自動的にページ内に埋め込まれるため、普通にWillustratorを使用するのであれば特別ユーザーが何かを意識したり操作をする必要はない。
|
