Comments
Transcript
第1章: HTML5 Pack for Adobe Illustrator CS5 の使い方
HTML5 Pack for ADOBE® ILLUSTRATOR® CS5 ユーザーガイド 2 目次 第1章: HTML5 Pack for Adobe Illustrator CS5 の使い方 パラメータ化されたSVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 マルチスクリーンSVG .........................................................................6 SVG内のcanvasオブジェクト . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 7 文字スタイルのCSS書出し . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . .. . . . . . . . . . 8 アピアランスのCSS書出し . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . 8 グラフィックスタイルのCSS書出し . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 3 第1章: HTML5 Pack for Adobe Illustrator CS5 の使い方 HTML5 は、Webデザイナーやマークアップエンジニアが、過去何年にも渡り決して望ましいとは言えない 方法でページ制作を行わなければならなかった、という状況の改善を図るものです。同様に、次世代のCSS であるCSS3の登場は、HTML5と共にWebの開発のみならず閲覧体験の改善を約束します。CSS3は、Webコ ンテンツのスタイル設定のため、数多くの新しいセレクターと属性を導入します。 HTML5 Pack for Adobe Illustrator CS5はデザイナーとエンジニアの間を取り持ちます。Adobe Illustratorの 機能を活用しつつ、デザインデータをマークアップエンジニアが最も使いやすいフォーマットに変換しま す。しかも、デザイナーは特に新しいことを学ぶ必要はありません。 HTML5 Packを使うと以下の事ができます: • パラメータ化されたSVG • マルチスクリーンSVG • SVG内のcanvasオブジェクト • 文字スタイルのCSS書出し • アピアランスのCSS書出し • グラフィックスタイルのCSS書出し 注：HTML5とCSS3はまだ仕様が最終化されていませんが、既にサポートするブラウザーであれば使用する 事ができます。主要なブラウザーの最新版は、少なくともいくつかのHTML5やCSS3の機能をサポートして います。 パラメータ化されたSVG Illustrator の中で、オブジェクトの任意の属性を変数と指定する事ができます。これにより、マークアップ エンジニアはHTMLページの中で変数に値を割り当てて、オブジェクトをカスタマイズできます。 例えば、ボタンの塗りの色を変数と宣言してからSVGに書き出します。そして、エンジニアはSVGをページ に組み込み、塗りの色を値として設定します。さらに、同じSVGを複数個それぞれ違う値を指定して使うこ ともできます。このように、エンジニアは見た目を変えるためスキンを使えるようになります。 HTML5 Pack for Adobe Illustrator CS5は、オブジェクトの基本的なアピアランス属性を変数化することが できます。現在、以下がサポートされます： • 塗りの色 • 塗りの透明度 • 線の色 • 線の透明度 • 線の幅 • オブジェクトの透明度 4 アピアランス属性を変数として定義 アピアランス属性を変数として活用するには、以下の作業をします 1 Adobe Illustrator CS5で新しいドキュメントを開く 2 線を引き、選択した状態にする。レイヤーパネルで線に意味のある名前をつける 3 アピアランスパネルを開き（ウインドウ→アピアランス）、線と塗りを適用する 4 オブジェクトが選択された状態であることを確認し、パネル内の変数にしたい属性を選ぶ 5 パネル下部のToggle Variabilityアイコンをクリックし、属性に変数の印をつける。Xマークが属性の 横に表示される 6 書類を保存する SVGへの書出し アピアランス属性に変数として印をつけたら、プレゼンテーション属性を選択して、デザインをSVGに書き 出します 1 ファイルをSVGとして保存します 2 CSSプロパティの値として、プレゼンテーション属性を選択します 5 3 OKをクリックします。 SVGファイルが保存されます。同じフォルダーにParams.jsというJavaScriptファイルも生成されます SVGのWebデザインへの使用 これでSVGをHTMLページに埋め込む準備が整いました。埋め込む際、変数には値を指定します。 1 HTMLページを開きます 2 Param.jsへのリンクを<head>セクション内に記述します 3 SVGをオブジェクトタグを使い<body>セクションに埋め込みます 4 <param>タグを使って変数に値を割り当てます。変数名は <オブジェクト名>_<属性名> の形式です <div> <object type="image/svg+xml" data="Button.svg"> <param name="CustomButton_FillColor" value="#F58AA0" /> </object> </div> 5 必要であれば、複数のSVGを同様の手順で埋め込みます 6 HTMLファイルを保存し、表示を確認します ヒント: 複数のオブジェクトの同じ変数に同じ値を設定したい場合は、レイヤーバネルを使いそれらのオブ ジェクトにglobalと名を付けます 6 追加情報 • この機能は、Chrome, FireFox, Opera, Safariで動作します • SVGがIllustratorの編集データ無しで保存された場合、再度Illustratorで開いても属性の変数指定は再 現されません。ラウンドトリップを実現するにはIllustratorの編集データを保存します • 現在は、単純な線のみサポートされます。複合パスなどはサポート外です マルチスクリーンSVG 今日、デザイナーが直面している最も大きな挑戦のひとつは増え続けるモバイルデバイスです。様々なデバ イスが異なる画面サイズを持ち、全てのデバイスにフィットするデザインをつくることがどんどん難しく なっています。Adobe Illustrator CS5 と HTML5 Packは、この問題に対する解決策を提供します。 まず、対象となるデバイスの画面サイズそれぞれに応じて複数のアートボードをつくります。アートボード ごとにデザインを最適化したらSVGとして書き出すと、HTML5 Packはアートボードの数だけSVGファイル を生成します。HTML5 Packは、SVGをページに組み込むのが容易にできるように、CSSとHTMLファイルも 生成します。 例えば、スマートフォン、タブレット、デスクトップモニター用のデザインをつくる場合、3つのアート ボードを用意します 1 新しいドキュメントをつくり、対象のデバイスと同じ数のアートボードを作成します。アートボード には対象にちなんだ名前をつけます 2 アートボードの大きさを対象のデバイスの画面サイズに合わせます 3 それぞれのアートボードにデザインを作成します。これは、基本デザインを大きさに合わせて最適化 したものでも、それぞれ異なるデザインでも構いません 4 「ファイル」→「別名で保存」と選択し、ダイアログボックソを表示します 5 ファイル名と保存場所を指定します 6 フォーマットのドロップダウンからSVGを選択します 7 「各アートボードごと」をチェックし、「すべて」を選択します 8 「保存」をクリックします。ダイアログが表示されたら「OK」をクリックします SVGとしてそれぞれのアートボードを保存する際、 <ファイル名>_<アートボード名>.svg という名前になり ます。同時にHTMLとCSSファイルも生成されます。HTMLファイルはウインドウ幅を検知し、適切なSVG ファイルを表示します。 例えば、DemoGraph.aiという名前のファイルでは、以下のファイルが保存されます。 • DemoGraph_Preview.html • DemoGraph.css • DemoGraph_Desktop.svg • DemoGraph_Tablet.svg • DemoGraph_Mobile.svg HTMLファイルを対象のデバイスで開けば、適切なグラフィックが表示されます。 7 ヒント：HTMLファイルを開いてブラウザーのウインドウ幅を変えると、簡単に表示を確認することができ ます。Safariでは表示する大きさをドロップダウンから選択することもできます。 追加情報 • HTMLファイルはChrome, Safari, Operaでサポートされます。SVGはFirefoxでも表示することができ ます • ドロップダウンからの選択が機能しない場合、ブラウザーの幅を変えると異なる大きさでの表示を確 認できます SVG内のcanvasオブジェクト Webでは、ベクターグラフィックスとインタラクションが必要なとき、SVGが良い選択肢になります。しか し、デザインをピクセルレベルでコントロールする場合は、canvasが最適な選択です。 両方の利点を使えるように、Illustratorでオブジェクトをcanvasと指定することができます。canvasと指定 されたオブジェクトは、SVGへの書出し時にラスタライズされ、SVG内のcanvas要素として書き出されま す。 マークアップエンジニアはこのSVGを使い、canvasを通してオブジェクトをピクセルレベルで操作できま す。 1 Illustratorドキュメントを生成する 2 canvasとして書き出すオブジェクトを選択する 3 「オブジェクト」→「HTML5 Canvas」→「Make」と選択する。レイヤーパネルのオブジェクトの欄 に、canvasオブジェクトであることを示すアイコンが表示される 4 ドキュメントをSVGとして保存する このSVGはWebレイアウトに組み込んで、JavaScriptや他のスクリプト言語からcanvasのデータにアクセス できます。 8 注：canvasと印の付けられたオブジェクトはラスタライズされPNGファイルとして生成されます。SVGファ イルの場所を移動する場合は、これらのファイルも一緒に移動します。 文字スタイルのCSS書出し Illustratorを使って再利用可能な文字スタイルをつくれます。通常WebデザイナーはデザインをWebに適用 するためにスタイルシートとしてCSSファイルを作成しなければなりません。HTML5 Packがあれば、文字 スタイルをCSS3ファイルとして書き出せます。あとは、生成されたCSSファイルをHTMLページからリンク するだけです。 1 デザインをIllustratorで開く 2 文字スタイルパネルを開く（ウインドウ→書式→文字スタイル） 3 文字スタイルを編集または追加する ヒント：全ての文字スタイルに適切な名前を付けると、Webに組み込む際に分かりやすくなります 4 書き出すスタイルを選択し「Export Selected Styles as CSS」を選ぶ 5 CSSファイル名を入力し「保存」をクリックする。 このCSSをHTMLからリンクすると、適当なCSSクラスをテキストのスタイルとして適用できます。 アピアランスのCSS書出し HTML5 Pack for Adobe Illustrator CS5を使うと、塗り、線、透明度、グラデーションといったオブジェク トのアピアランス属性や位置/座標をCSSとして保存できます。 1 ドキュメントを開く 2 CSSとして書き出したい属性を選択する 3 オブジェクト名が分かり易い名前になっていることを確認する。必要であればレイヤーパネルから名 前の変更を行う 9 4 アピアランスパネルのプルダウンメニューから「Export Selected as CSS」を選ぶ 5 CSSファイル名を入力し「保存」をクリックする このCSSをHTMLからリンクすると、生成されたCSSクラスをWebのスタイルとして適用できます。 CSS書出しオプション グラフィックのスタイルをCSSに書き出す際、いくつかのオプションを指定できます。 アピアランスパネルのプル団メニューから「CSS Export Options」を選択します。 ダイアログボックス内で、CSS Units, Object Appearances, 強調表示（これはposition and sizeの誤訳）を選 択し、「OK」をクリックします。 注：このダイアログはアピアランス属性用の選択です。文字スタイルの単位を変更するには、Illustratorの 環境設定から単位を変更します。 10 グラフィックスタイルのCSS書出し 注：この機能は日本語版では動作しません。 グラフィックスタイルをCSSスタイルとしてSVG書出しに含めることができます。Webページでは、これら のスタイルを使いオブジェクトの外観を条件に応じて修正することが可能です。 使用していないスタイルでもSVGに含めることができます。Webページではスクリプトを使い、必要に応じ てオブジェクトに適用します。 スタイルの書出し手順は、 1 グラフィックスタイルパネルを開く（「ウインドウ」→「グラフィックスタイル」） 2 SVGに含めたいグラフィックスタイルをパネル内から選択 3 グラフィックスタイルパネルのプルアウトメニューから「Include CSS Style in SVG」を選ぶ 4 ドキュメントをSVGとして保存、CSSオプションダイアログでCSSプロパティの値としてスタイル属性 を選ぶ 生成されたグラフィックスタイルを含むSVGをWebページに組み込んで、スクリプトから条件付きスタイル を適用できます。 追加情報 • サポートされるブラウザーはSafari, Chrome, Firefoxです。 • SVGの基本的なアピアランス属性のみがサポートされます。クリッピングパス、エフェクトなどの複 雑な属性はサポートされません。