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


[読了時間:1分]



howitworks

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






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

 上のスナップショットで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:maskinmetamix)

twitter_book_s
Twitter情報収集術
好評発売中

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

Follow me

maskin

Editor In Chief at TechWave.jp
1990年代初頭から国内外のソフトからハードまで50以上のスタートアップ立ち上げを経験。。平行して雑誌ライターとして疾走。シリコンバレーでガレージベンチャーに参画後は、ネットエイジを筆頭にスタートアップに多数関与。ブログやSNSの国内啓蒙、ソニーの社内イノベーション事業など関与。直近では通信キャリアのニュースポータルの立ち上げ期の編集デスクとして数億PV事業に育てた後、TechWaveにジョイン。世界最大のIT系メディアであるスペインの「Softonic」に参加後、2016年からTechWave第三章として新興メディアの開発を再スタート。国内最大規模のスタートアップ&B2Bイベント「アプリ博」のオーガナイザー。

maskin [at] metamix.com
LinkedIn: maskin
bitcoin: 3KnQhwXb2es6nxXUNhQSbKiveJqP1G3TPb
Follow me