「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹

[読了時間:1分]

　米Microsoftが運営するMixOnlineが10月12日、アドビ・イラストレーターのファイルをHTML5のCANVAS形式にエクスポートできるプラグイン「Ai→Canvas」を公開した。CANVAS形式で表現されたイラストは拡大縮小はもちろんアニメーションを施すことなどが可能になる。

　プラグインインストール後、イラストレーターの「書き出し」コマンドを実行するとCANVAS形式を選択できるようになる。書き出されるのはHTMLファイルで、ベジェ曲線はそのままビットマップ画像はファイルとして保存される。対応ブラウザで表示することができる。（以下参照）

　上のスナップショットでCANVAS変換したベジェのみで作成されたイラストを以下で公開している。

http://blog.metamix.com/sample/NAOC_LOGO_Illustration.html　

　ソースを見ればわかると思うが、ベジェ曲線はすべて以下のような構文で表現されている。

ctx.beginPath();
ctx.moveTo(17.4, 182.2);
ctx.bezierCurveTo(17.4, 186.6, 13.8, 190.2, 9.4, 190.2);
ctx.bezierCurveTo(5.1, 190.2, 1.5, 186.6, 1.5, 182.2);
ctx.bezierCurveTo(1.5, 177.9, 5.1, 174.3, 9.4, 174.3);
ctx.bezierCurveTo(13.8, 174.3, 17.4, 177.9, 17.4, 182.2);
ctx.closePath();
ctx.lineWidth = 3.0;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.stroke();

　このような構文と併せてHTML5関連コマンドを使用すれば、曲線の一部に加工を加えたり、アニメーションさせることができる。高額なアニメ作成ソフトを使用することなく、美麗なベジェイラストに命を吹き込むことが可能だ。

■ 関連URL
・Ai→Canvas
http://visitmix.com/labs/ai2canvas/index.html

蛇足：僕はこう思ったッス

複雑なファイルではエラーが発生してCANVAS変換が行われないこともあったが、シンプルなオブジェクトならほぼ間違いなく変換できた。再現性はかなりのもので、ウェブコンテンツ作成に役立つし、大きな流れになると感じた。

著者プロフィール：増田(maskin)真樹（twitter:maskin・metamix)

Twitter情報収集術
好評発売中

　アスキーのApple系雑誌でライターデビュー。1990年より執筆およびネットメディアクリエイターとして活動を開始。週刊アスキーを初め、日経BP、インプレス、毎日コミュニケーション、ソフトバンク、日経新聞など多数のIT関連媒体で活躍。
　独立系R&D企業のマーケティング部責任者として教育・研究開発向け製品の輸入企画や開発、マーケティングに関与。専門家向けプロショップ運営。雑誌ライターとして90年代を疾走後、シリコンバレーで証券情報サービス立ち上げに参画。帰国後、ネットエイジでコンテンツディレクターとして複数のスタートアップに関与。関心空間、富裕層SNSのnileport、ニフティやソニーなどのブログ＆SNS国内展開に広く関与。
　現在、TechWaveのスタッフライター1号機として活動する他、書籍などを中心に執筆活動および講演活動を展開。大手携帯キャリア公式ニュースポータルサイト編集デスク。DJやイベントオーガナイザー。スタートアッププロジェクトのアドバイザー等として活動する。ソーシャルメディアやブリック&ブロックのプロ。書き手として、また実業家として長年IT業界に関わる希有な存在。詳しいプロフィールはこちら(お仕事下さい m(_ _)m