[macOS General] Ai->Canvas: ai ファイルを HTML5 Canvas へ変換する

Ai->Canvasは、aiファイルを HTML5 Canvas を使った（JavaScript を含む）HTMLファイルとして出力する Illustrator 用のプラグイン。

[markdown]
> * [IllustratorファイルをCanvasタグで出力する「Ai->Canvas」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ](http://www.moongift.jp/2010/10/201010210000/)

## 動作環境

* Adobe Illustrator CS5 で紹介されているが、CS3/CS4 でも大丈夫らしい。
* 出力されたファイルは、Internet Explorer 9, Firefox 3.6, Chrome 6, Safari 5, and Opera 10 以上で動作するよう。

> * [MIX Online:Ai to Canvas Plug-In](http://visitmix.com/labs/ai2canvas/documentation.html)

## インストール

ダウンロードしたファイルを解凍すると、Ai2Canvas.aip というプラグインがあらわれるので、下記に移動します。

“`prettyprinted
/Applications/Adobe Illustrator CS3/Plug-ins.localized/Ai2Canvas.aip
“`

> * [MIX Online:Ai to Canvas Plug-In](http://visitmix.com/labs/ai2canvas/index.html)

## つかいかた

チュートリアルの一部をCS3でやってみる。

* [フリーのロケット画像](http://www.clker.com/clipart-rocket.html)を、SVGフォーマットでダウンロードして利用する。
* レイヤーの名前を「`rocket();`」に変更する。
* エクスポート機能に「Canvas（HTML）」という項が追加されているので、これで出力する。

### 出力されたHTMLファイル

* 3714 byte [pitr_Rocket_icon.html](https://www.d-wood.com/demo/20131217/pitr_Rocket_icon.html)

“`html














“`

## 配置した画像ファイルの扱い

png ファイルを配置したところ、下記のように埋め込み画像として定義されました。
画像ファイルも HTML とともに出力されました。

“`html















“`
[/markdown]