プロトタイプ作成のワークフロー

ページパネルを Fireworks の他の強力な機能と組み合わせて使用することで、インタラクティブな Web やソフトウェアのプロトタイプを作成できます。完成したプロトタイプを実際のサイトに変換するには、Adobe Flash®、Adobe Flex®、Adobe AIR™ または Adobe Dreamweaver® に書き出します。

Fireworks Developer Center に公開されているプロトタイプ作成のワークフローに関する次の記事を参照してください。

アプリケーションインターフェイスのプロトタイプ作成に関するビデオチュートリアルについては、www.adobe.com/go/lrvid4034_fw_jp を参照してください。

ページの作成

ページパネルで、最初のデザイン用として任意の数のページまたは画面を作成します。デザインを進める中で必要に応じてページを追加または削除できます。

共通のデザイン要素の配置

ナビゲーションバーやバックグラウンド画像など、複数のページ間で共有するデザイン要素をカンバスに配置します。要素の位置揃えにはスマートガイドを使用します。柔軟性を最大にするには、CSS を使用してレイアウトを構成します(スマートガイドCSS ベースのレイアウトの作成を参照してください).

複数のページ間で共通の要素を共有

要素を共有した場合、1 箇所を変更すると該当するページがすべて自動的に更新されます。マスターページを使用してこのページに含まれる要素をすべて共有するか、レイヤーを共有して要素のサブセットをコピーします(マスターページの使用レイヤーの共有を参照してください)。

個々のページへの独自要素の追加

各ページに、独自のデザイン、ナビゲーションまたはフォーム要素を追加します。共有ライブラリパネルにあるボタン、テキストボタンおよびポップアップメニューを使用すると、デザインプロセスをスピードアップできます。Flex コンポーネント、HTML、Mac、Win、Web とアプリケーションおよびメニューバーの各フォルダーにあるコンポーネントシンボルには、シンボルインスタンスごとにカスタマイズできるプロパティがあります(コンポーネントシンボルの作成と使用を参照してください)。

リンクを使用したユーザーナビゲーションのシミュレーション

スライス、ホットスポット、ナビゲーションボタンなどの Web オブジェクトから、プロトタイプの様々なページ間をリンクします(Fireworks ドキュメント内のページへのリンクを参照してください)。

完成したインタラクティブなプロトタイプの書き出し

Fireworks では、プロトタイプに複数の出力形式を使用できます。どの出力形式でも、ページナビゲーションのためのハイパーリンクが維持されます。次の記事を参照してください。

CSS ベースのレイアウトの作成

Fireworks ドキュメントで CSS ベースのレイアウトをデザインし、これをレイアウトを反映した CSS ルールを持つ HTML ページに変換できます。CSS ベースのレイアウトは、コードがすべてのブラウザーに対応した、標準ベースのアプローチです。

CSS ベースの HTML ページレイアウトの作成に関するビデオチュートリアルについては、www.adobe.com/go/lrvid4035_fw_jp を参照してください。次のリソースも参照してください。

CSS ページのレイアウトについて

Fireworks では、ページをデザインして、オブジェクトの配置を分析する書き出しエンジンを使用して、簡単に HTML および CSS コードを書き出すことができます。また、ページの配置を設定して、繰り返し表示する背景画像を指定することもできます。

共有ライブラリ内の HTML フォルダーにある HTML 要素を使用することができます。HTML フォルダーには、ボタン、ドロップダウンリストオブジェクトおよびテキストフィールドなどの HTML 要素が含まれています。シンボルプロパティパネルを使用して、これらの要素のプロパティを編集することができます。フォーム要素をページにドラッグすると、書き出しエンジンにより、CSS ベースのレイアウトの書き出し中に <form> タグが挿入されます。

スライスを配置したテキストは、書き出された HTML で画像として表示されます。テキストをテキストとして表示するには、共有ライブラリの HTML コンポーネントを使用します。HTML コンポーネントには、見出し 1 ~ 6 とリンク要素が含まれています。

CSS ベースのレイアウトのルール

予期したとおりの結果を得るには、CSS ベースのレイアウトを作成する際にいくつかのルールに従う必要があります。

ルール 1:書き出す画像にテキストとスライスを書き出すには、長方形を使用する

書き出しエンジンは、長方形内に配置されているテキストを書き出します。長方形スライスに入っている画像だけが書き出されるため、画像を書き出すには、画像の上にスライスを配置します。これらのスライスにより、書き出しエンジンは画像の場所を認識します。

ルール 2:オブジェクトが重ならないようにする

書き出しエンジンは、テキスト、画像、および長方形を長方形のブロックとして処理します。そして、これらのオブジェクトのサイズと位置を確認して、それらをレイアウトに配置するための論理的な行と列を決定します。オブジェクトは、境界線が重ならないように注意して配置してください。

ルール 3:行および列のレイアウトを計画する

書き出しエンジンは、オブジェクトまたはオブジェクトのグループ間に、何にも遮られない直線を配置できる論理的な仕切りを探します。列のレイアウトを長方形で囲んで、書き出しエンジンによって列のレイアウトを分断する論理行が挿入されないようにしてください。

ルール 4:ドキュメントを 2 次元として処理する

ページをデザインするときには、長方形を使用して、長方形の子として処理するオブジェクトを囲みます。書き出しエンジンは、そのような親子関係を検出します。書き出しエンジンは、ルール 3 の場合と同様に、子要素で論理行および列をスキャンします。

これらのルールに加え、次のことに従ってください。

  • 書き出しエンジンは、基本の長方形のみを書き出します。角丸長方形を書き出すには、その上に長方形スライスを配置します。

  • 長方形のストロークを書き出すには、ストロークがある長方形の上に長方形スライスを配置します。

  • シンボルを書き出すには、その上に長方形スライスを配置します。

  • テキストまたは長方形に適用したフィルターを書き出すには、その上に長方形スライスを配置します。

CSS レイアウトの書き出し

Fireworks では、作成するレイアウトを CSS ベースのファイルとして書き出すことができます。書き出した CSS ベースのファイルは、Dreamweaver やその他の CSS 対応エディターで開いて編集できます。

  1. ファイル/書き出しを選択します。

  2. 書き出しポップアップメニューから「CSS と画像」を選択します。

  3. 「オプション」をクリックして、HTML ページのプロパティを設定します。

  4. 「参照」をクリックして、背景画像を指定し、背景画像の並べ方を設定します。

    • 画像を 1 回だけ表示する場合は、「no-repeat」を選択します。

    • 画像を垂直方向と水平方向で繰り返す(並べる)場合は、「repeat」を選択します。

    • 画像を水平方向に並べる場合は、「repeat-x」を選択します。

    • 画像を垂直方向に並べる場合は、「repeat-y」を選択します。

  5. ブラウザーでのページの配置(left、center、right)を選択します。

  6. 添付を固定するかスクロールさせるかを選択します。

  7. 「OK」をクリックしてから、「保存」をクリックします。

ドキュメントのデモの作成

作業中の Fireworks ドキュメントのデモを作成できます。デモはブラウザーで開き、機能を確認したり、ページ間を移動したりできます。

  1. コマンド/現在のドキュメントのデモを表示を選択します。

  2. デモを作成するページを選択し、「デモを作成」をクリックします。

  3. フォルダーを選択して、「開く」をクリックします。

Flex アプリケーションのプロトタイプ作成

Flex のプロトタイプ作成のプロセスは、Web サイトやソフトウェアインターフェイスに使用するワークフローに似ています(プロトタイプ作成のワークフローを参照してください)。Fireworks では、Flex コンポーネントをカンバス上にドラッグし、プロパティを指定して、完成したユーザーインターフェイスを MXML に書き出すことができます。その後、そのユーザーインターフェイスを Flex Builder で調整できます。

Flex ユーザーインターフェイスの作成

ページパネルで、最初のデザイン用として任意の数のインターフェイス画面を作成します。

レイアウトへの Flex デザインコンポーネントの挿入

カンバス上で、共有ライブラリパネル内の Flex フォルダーから Flex コンポーネントを挿入します。これらのコンポーネントシンボルは、具体的には MXML への書き出しにおいて、期待どおりの結果を実現します。ドキュメントを MXML として書き出すと、シンボルはそれぞれ対応する MXML タグに変換されます。Flex コンポーネントとして認識できないオブジェクトは、<mx:Image> タグによって MXML にリンクされるビットマップとして書き出されます(コンポーネントシンボルの作成と使用)を参照。

注意:

Fireworks で Flex デザインコンポーネントを編集するとき、変更した XML コードを Flex プロジェクトにコピーできます。この方法を使用すると、変更したコンポーネントのビヘイビアーをプロジェクトに複製したい場合に時間を節約できます。

カーソル、スクロールバー、タブおよびツールヒントの各シンボルは MXML 出力時に無視されます。これらのコンポーネントは Fireworks から MXML に直接変換できません。例えば、スクロールバーシンボルは、Flex コンテナのインスタンスの内容をスクロールできるときに自動的に表示されます。Fireworks では、これらのシンボルは、単にインターフェイスデザインの各部の機能を示すためにあります。

注意:

画像スライス、ロールオーバーおよびホットスポットは、HTML ベースのプロトタイプだけに適用されます。Flex プロトタイプを作成するときは、これらの Web オブジェクトは使用しないでください。

複数のページ間で共通の Flex コンポーネントを共有

1 つの Flex コンポーネントを複数のページで共有している場合は、1 回の変更で、すべてのページ(画面)が自動的に更新されます。マスターページを使用してこのページに含まれる Flex コンポーネントをすべて共有するか、レイヤーを共有してコンポーネントのサブセットをコピーできます(マスターページの使用レイヤーの共有を参照してください)。

Flex コンポーネントのプロパティの指定

シンボルプロパティパネル(ウィンドウ/シンボルプロパティ)で、カンバスに挿入した各 Flex コンポーネントのプロパティとイベントを指定します。

Flex レイアウトの MXML への書き出し

Flex ユーザーインターフェイスレイアウトを書き出し、その MXML ファイルを Flex で開きます。Fireworks では、スタイルと絶対位置指定を維持しながら、必要な MXML がすべて書き出されます。Flex の開発者は、Flex でレイアウトを再作成せずにこのインターフェイスを使用できます。

Flex コンポーネントプロパティの編集

Flex コンポーネントのプロパティとイベントは、シンボルプロパティパネルで編集できます。

  1. カンバス上で Flex コンポーネントを選択します。

  2. シンボルプロパティパネルを開きます(ウィンドウ/シンボルプロパティ)。

  3. シンボルプロパティパネルでコンポーネントのプロパティとイベントを設定します。

Fireworks ドキュメントの MXML への書き出し

Fireworks では、共有ライブラリアセットを Adobe Flex Builder で使用できる既知のコンポーネントとして書き出すことができるので、リッチインターネットアプリケーション(RIA)のレイアウトに役立ちます。Fireworks では、スタイルと絶対位置指定を維持しながら、必要な Flex コード(MXML)が書き出されます。

Flex アプリケーションのプロトタイプが完成したら、MXML に書き出し、Flex Builder でさらに編集できます。デザインビューでは、プロトタイプは Fireworks と同じように表示されます。ただし、カーソルやスクロールバーなどのコンポーネントは書き出されません。

  1. ファイル/書き出しを選択します。

  2. 書き出しポップアップメニューから「MXML と画像」を選択します。

  3. MXML コードとは別のフォルダーに画像を保存する場合は、「サブフォルダーに画像を置く」を選択します。

  4. 現在選択されているページのみ書き出すには、「現在のページのみ」を選択します。

  5. 「保存」をクリックして書き出しを完了します。

    プロトタイプに関連する画像はすべて画像フォルダーに書き出されます。また、完全な MXML ページの画像も、他の画像ファイルを使用して作成されます。MXML ページにはこれらのプレビュー画像は必要ないので、これらの画像は削除して構いません。

Flex スキンの作成と書き出し

Flex コンポーネントのスキンを Fireworks で作成し、これらを書き出して Flex ベースの Web サイトやアプリケーションのインターフェイスの構築に使用できます。

Flex コンポーネントのスキン

Flex スキンテンプレートをベースにして、様々な Flex コンポーネントのスキンを作成し、それらを Fireworks で編集することができます。

  1. コマンド/Flex スキン/新規 Flex スキンを選択します。

  2. 次のいずれかの操作を行います。

    • 利用可能なすべてのコンポーネントの Flex スキンを作成するには、「複数のコンポーネント」を選択します。

      利用可能なすべての Flex コンポーネントが含まれた 1 つのドキュメントが作成されます。

    • スキンを作成するコンポーネントを指定するには、「特定のコンポーネント」を選択します。

      特定のスタイルが割り当てられているコンポーネントのみを選択するか、コンポーネントのすべてのインスタンスを選択します。

  3. 「OK」をクリックします。

Flex スキンの書き出し

  1. コマンド/Flex スキン/Flex スキンを書き出しを選択します。

  2. Fireworks ドキュメントの書き出し先とするフォルダーを選択して、「開く」をクリックします。

MXML 書き出しの制限事項

Flex MXML 書き出し機能を使用する前に、その機能と制限について知っておく必要があります。

MXML への書き出し時にコンポーネントのスキンは作成されない

Fireworks で Flex コンポーネントを変更しても、MXML への書き出し時に Flex コンポーネントのスキンは作成されません。MXML への書き出し時には、Flex で使用できる MXML ドキュメントが生成されるだけです。これらのドキュメントには、MXML タグに変換できない Fireworks オブジェクトのリンクされた画像も含まれる場合があります。これらの画像は <mx:Image> タグを使用して MXML ドキュメントに追加されます。

MXML への書き出し時にスライスが無視される

MXML への書き出し機能は、Flex で使用できるタグベースのドキュメントを生成するように設計されているので、画像やテーブルのセルの作成時にスライスは考慮されません。MXML への書き出し時に画像が作成されるとき、ドキュメントの最適化設定を使用して、画像の形式と圧縮方法が決定します。

MXML のプロパティはリッチシンボルプロパティに限定される

MXML への書き出し機能では、MXML タグのプロパティは Fireworks 内の Flex コンポーネントに基づきます。Fireworks には、プロパティ数が限られた Flex コンポーネントのサブセットが用意されています。

スタイルは埋め込まれる

スタイルとして認識されるプロパティは、作成される MXML タグから分離されますが、同じ MXML ドキュメント内の <mx:Style> タグに保持されます。Fireworks では、スタイルを外部 CSS ファイルに定義できません。

フレームはサポートされない

MXML 出力用のデザインとレイアウトを作成するときにフレームを使用しないでください。1 つのドキュメントに複数のデザインが必要な場合は、ページを使用するようにします。

Adobe AIR アプリケーションのプロトタイプ作成

Adobe® AIR™ for Fireworks を使用して、Fireworks のプロトタイプをデスクトップアプリケーションに変換できます。例えば、一部のプロトタイプページは相互に作用してデータを表示します。Adobe AIR を使用すると、この一連のページを、ユーザーのコンピューターにインストールできる小さなアプリケーションにパッケージ化できます。ユーザーがデスクトップからアプリケーションを実行すると、アプリケーションが読み込まれ、ブラウザーから独立した専用のアプリケーションウィンドウにプロトタイプが表示されます。ユーザーは、インターネット接続がなくてもコンピューター上でプロトタイプを表示できます。

Adobe AIR とエクスペリアンスブランドに関する Ethan Eismann の記事を参照してください:http://www.adobe.com/go/learn_fw_airexperiencebrand_jp

Adobe AIR マウスイベントの追加

定義済みの Adobe AIR マウスイベントをドキュメント内のオブジェクトに追加することができます。Fireworks には、ウィンドウを閉じる、ウィンドウのドラッグ、ウィンドウの最大化、ウィンドウの最小化の 4 つの定義済みのマウスイベントが用意されています。

  1. マウスイベント動作を適用するオブジェクトをカンバス上で選択します。

  2. コマンド/AIR マウスイベントを選択して、イベントを選択します。

Adobe AIR アプリケーションのプレビュー

Adobe AIR アプリケーションパラメーターを設定することなく、Adobe AIR アプリケーションをプレビューすることができます。

  1. コマンド/AIR パッケージを作成を選択して、「プレビュー」をクリックします。

Adobe AIR アプリケーションの作成

  1. コマンド/AIR パッケージを作成を選択し、次のオプションを設定します。

    アプリケーション名

    ユーザーがアプリケーションをインストールするときにインストール画面に表示する名前を指定します。拡張子は、初期設定で Fireworks サイトの名前になります。

    アプリケーション ID

    アプリケーションの固有な ID を入力します。ID にスペースや特殊文字は使用しないでください。使用できる文字は 0 ~ 9、a ~ z、A ~ Z、.(ピリオド)、-(ハイフン)です。この設定は必須です。

    バージョン

    アプリケーションのバージョン番号を指定します。この設定は必須です。

    プログラムメニューフォルダー

    Windows のスタートメニュー内でアプリケーションのショートカットを作成するフォルダーを指定します(Mac OS には当てはまりません)。

    説明

    ユーザーがアプリケーションをインストールするときに表示するアプリケーションの説明を追加します。

    著作権情報

    Mac OS にインストールされる Adobe AIR アプリケーションの「バージョン情報」に表示する著作権情報を指定します。この情報は、Windows にインストールされるアプリケーションには使用されません。

    パッケージの内容

    ファイルの取り込み元フォルダーが自動的に選択されるようにするには、「現在のドキュメント」を選択します。

    ルートコンテンツ

    「参照」ボタンをクリックし、ルートコンテンツとして表示するページを選択します。「現在のドキュメント」を選択した場合は、ルートコンテンツは自動的に設定されます。

    含まれるファイル

    アプリケーションに含めるファイルまたはフォルダーを指定します。HTML ファイルと CSS ファイル、画像ファイルおよび JavaScript ライブラリファイルを追加できます。ファイルを追加するにはプラス(+)記号ボタン、フォルダーを追加するにはフォルダーアイコンをクリックします。ファイルまたはフォルダーをリストから削除するには、ファイルまたはフォルダーを選択し、マイナス(-)記号ボタンをクリックします。Adobe AIR パッケージに含めるのに選択するファイルまたはフォルダーは、ルートコンテンツフォルダーに属している必要があります。

    システムクロム、透明

    ユーザーがコンピューターでアプリケーションを実行するときに使用するウィンドウスタイル(クロム)を指定します。「システムクロム」を選択すると、オペレーティングシステムの標準ウィンドウコントロールでアプリケーションが囲まれます。「透明」クロムを選択すると、標準のシステムクロムが破棄され、アプリケーションに独自のクロムを作成できます。透明機能では、長方形ではない形状のアプリケーションウィンドウを作成できます。

    幅、高さ

    アプリケーションウィンドウが開くときのサイズをピクセル単位で指定します。

    アイコン画像を選択

    アプリケーションアイコン用のカスタム画像をクリックして選択します。アイコンサイズのフォルダーを選択し、使用する画像ファイルを選択します。アプリケーションのアイコン画像としてサポートされているのは PNG ファイルだけです。

    注意:

    選択するカスタム画像はアプリケーションのサイトにある必要があります。また、そのパスはサイトのルートからの相対パスである必要があります。

    デジタル署名

    アプリケーションにデジタル署名を適用するには「設定」をクリックします。この設定は必須です。詳しくは、この後の節を参照してください。

    パッケージファイル

    新しいアプリケーションのインストーラー(.air ファイル)を保存するフォルダーを指定します。初期設定では、この場所はサイトのルートです。別の場所を選択するには「参照」ボタンをクリックします。初期設定のファイル名は、サイト名に拡張子 .air を付けたものです。この設定は必須です。

デジタル証明書を使用した Adobe AIR アプリケーションの署名

デジタル署名を使用すると、ソフトウェアが作成された後にアプリケーションのコードが改ざんされたり、壊れたりしていないことを保証できます。Adobe AIR アプリケーションにはデジタル署名が必須で、デジタル署名がないアプリケーションはインストールできません。

  1. AIR パッケージを作成ダイアログボックスで、「デジタル署名」オプションの横の「設定」ボタンをクリックします。

  2. デジタル署名ダイアログボックスで、次のいずれかの操作を行います。

    • 事前に購入したデジタル署名でアプリケーションに署名するには、「参照」ボタンをクリックし、証明書を選択し、対応するパスワードを入力して「OK」をクリックします。

    • 自分で署名した独自のデジタル証明書を作成するには、「作成」ボタンをクリックし、ダイアログボックスで設定を行います。証明書の「キーの種類」オプションは、証明書のセキュリティレベルを示します。1024-RSA は 1024 ビットの鍵(低セキュリティ)を使用し、2048-RSA は 2048 ビットの鍵(高セキュリティ)を使用します。完了したら、「作成」をクリックします。デジタル署名ダイアログボックスに対応するパスワードを入力し、「OK」をクリックします。

      注意:コンピューターに Java® Runtime Environment(JRE)がインストールされている必要があります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー