はじめに - レクチャー 5:HTMLプロトタイプ

1.プロトタイプのデモンストレーション

音声が流れますので、音量を調節して下さい。

2.HTMLプロトタイプ

Axure RP でアノテーション付きワイヤフレームとインタラクションをデザインしたら、インタラクティブなブラウザベースのプロトタイプを生成できます。Axure RP のプロトタイプは HTML と JavaScript ファイルであり、Internet Explorer バージョン 6 以上、Mozilla や Firefox で表示できます。

3.プロトタイプの設定と生成

プロトタイプを設定し、生成するには、メインメニューで「生成」-「プロトタイプ」 (F5) を選択するか、メインツールバーの「プロトタイプ」ボタンをクリックします。すると、「HTMLプロトタイプの設定」ダイアログが表示され、その中にデフォルトのプロトタイプ設定が表示されます。このダイアログで、プロトタイプを設定できます。

オプションは次のセクションに分かれています。

全般:

プロトタイプを生成する生成先フォルダを入力します。プロトタイプは多数のファイルで構成されるために、そのプロトタイプ専用のフォルダを指定することをお勧めします。

ノート:

プロトタイプで表示されるページレベルノートを選択して整理します。

アノテーション:

プロトタイプで表示するアノテーションフィールドを選択して整理します。

インタラクション:

インタラクションの動作方法を指定します。つまり、ケースの説明が常に表示されるようにするか、複数のケースが存在する場合にのみ表示されるようにするかを指定します。

配布:

プロトタイプを含む CHM ファイルを生成する場合に選択します。

詳細:

テキストパネルを画像としてレンダリングする場合に選択します。これはレガシ機能であり、特殊なケースでのみ使用します。

プロトタイプの構成が終わったら、「生成」ボタンをクリックしてプロトタイプを作成します。

4.プロトタイプの使用

プロトタイプは 3 つのフレームに分かれています。

サイトマップフレーム (左)

サイトマップの中のページをクリックすることで、プロトタイプの中のページにナビゲートします。

ページノートフレーム (下)

このフレームには、ページノートが表示されます。

メインフレーム (中央)

メインフレームにはワイヤフレームと図が表示されます。ワイヤフレームでのインタラクションはデザインされた通りに機能します。Axure RP の「インタラクション」ウィンドウ枠で定義されたインタラクションはすべて、プロトタイプの中で、定義された通りに動作します。

また、アノテーション付きウィジェットの横のノートアイコンをクリックすると、ウィジェットのアノテーションを表示できます。

5.プロトタイプの配布

Axure RP のプロトタイプは HTML、JavaScript および画像ファイルであり、Internet Explorer バージョン 6 以上や Firefox などの一般的なブラウザで表示できます。顧客やチームメンバーは、プロトタイプを表示するために Axure RP やリーダーをインストールする必要がありません。

プロトタイプの配布には何通りもの方法があります。

共有サーバーや Web サーバーへの配置

最初のオプションは、生成したプロトタイプを共有サーバーや Web サーバーに置いておくことです。こうすることで、誰でも (サーバーに対するアクセス権があれば) プロトタイプをブラウザでブラウズできます (または、作成者が送信したリンクをクリックできます)。

圧縮 zip ファイル

2 番目のオプションは、プロトタイプファイルを含むフォルダを圧縮し、その zip ファイルを送信してローカルで展開して表示することです。

Windows エクスプローラで zip ファイルを作成するには、プロトタイプを生成したフォルダに移動します。フォルダを右クリックして、「送る」-「圧縮 (zip 形式) フォルダ」を選択します。

CHM ファイル

3 番目のオプションは、プロトタイプを含む CHM ファイルを生成することです。zip ファイルの場合と同じく、このオプションで 1 つにまとめたファイルを配布することができ、ほとんどの場合受け取った人は表示のためにソフトウェアをインストールする必要がありません。フォルダを展開する必要がないため、受け取った人にとっては楽な方法です。CHM は Microsoft の HTML ヘルプファイルのフォーマットなので、ほとんどの Windows コンピュータにはすでにビューアがインストールされており、ユーザーはダブルクリックするだけでファイルを表示できます。

この設定をするには、「HTMLプロトタイプのコンフィギュレーション」ダイアログ (F5) の「配布セクション」をクリックし、CHM ファイルを生成するオプションをオンにします。

まだ Microsoft の HTML Help Workshop をインストールしていない場合は、CHM ファイルを生成するためにインストールする必要があります。このソフトはマイクロソフトのサイトから無料でダウンロードできます。インストールしたら、インストールしたフォルダに hhc.exe ファイルが現れます。「hhc.exe の検索」をクリックすると、Axure RP がコンピュータ上にあるこのプログラムの位置を認識します。

プロトタイプと .chm ファイルを生成したら、プロトタイプと同じフォルダに .chm ファイルが現れます。これで .chm ファイルを配布して、HTML Help ビューアで表示できます。