![[agilenet-logo]](http://www.nttdata-agilenet.com/product/axure/images/agilelogo-122x70.png)
はじめに
- レクチャー1：
Axure RP Proの概要 - レクチャー2：
アノテーション付きワイヤフレーム - レクチャー3：
基本インタラクション - レクチャー4：
マスタ - レクチャー5：
HTMLプロトタイプ - レクチャー6：
機能仕様書
フロー図
リッチインタラクション
- レクチャー1：
ダイナミックパネル - レクチャー2：
OnMouseEnter、OnMouseOut、およびロールオーバー効果 - レクチャー3：
メニュー - レクチャー4：
アドバンスインタラクションエディタ - レクチャー5：
特定のウィジェット、画像、メニューの書式
豊富な機能
- レクチャー1：
条件ロジック - レクチャー2：
OnChangeイベント - レクチャー3：
OnKeyUpイベント - レクチャー4：
OnFocusとOnLostFocusイベント - レクチャー5：
変数 - レクチャー6：
OnPageLoadイベント
マスタの有効利用
共同作業
リッチインタラクション - レクチャー 1:ダイナミックパネル
- ダイナミックパネルのデモンストレーション
- ダイナミックパネルウィジェット
- ダイナミックパネルの状態の編集
- ダイナミックパネルマネージャ
- ダイナミックパネルの非表示
- インタラクションとダイナミックパネル
- 使用例
1.ダイナミックパネルのデモンストレーション
音声が流れますので、音量を調節して下さい。
2.ダイナミックパネルウィジェット
ダイナミックパネルは、プロトタイプで動的な機能を表示できるウィジェットです。ダイナミックパネルは 1 つ以上の状態を持つことができます。各状態には、ウィジェットの集まりが含まれます。任意の時点で、1 つの状態を可視にしたり、ダイナミックパネル全体を非表示にしたりすることができます。
インタラクションアクションで、ダイナミックパネルを非表示／表示、また状態を変更できます。
ほかのウィジェットと同じく、ダイナミックパネルは、「ウィジェット」ウィンドウ枠からドラッグ & ドロップすることで、ワイヤフレームに追加できます。
3.ダイナミックパネルの状態の編集
ワイヤフレームの中のダイナミックパネルをダブルクリックすると、「ダイナミックパネルの設定ダイアログ」が開きます。このダイアログで、状態を追加、名前の変更、再順序化、削除および編集できます。パネルの最初の状態がパネルのデフォルトの状態です。
「ダイナミックパネルの設定ダイアログ」でパネルの状態を選択し、「編集」をクリックすると、そのパネルの状態を編集するためのワイヤフレームが開きます。
ワイヤフレームが表示されると、ほかのワイヤフレームと同じようにパネルの状態をデザインできます。ワイヤフレームの青い点線の輪郭線は、ダイナミックパネルの境界を示します。
4.ダイナミックパネルマネージャ
※Axure RP Pro 5.5で追加された新機能です。
ダイナミックパネルマネージャは、メインメニューの表示→ダイナミックパネルマネージャを選択することで表示されます。（右下方に表示されます。）ダイナミックパネルマネージャでは、ページ上のダイナミックパネルの管理を行います。
具体的には、ダイナミックパネルの状態を追加したり、削除したり、編集のために開くといった作業が可能です。状態の追加や削除を行うには、ダイナミックパネル名かダイナミックパネルの状態を右クリックして、コンテキストメニューを使用します。
ページ上のダイナミックパネルは、その下にあるウィジェットにアクセスしやすいように、非表示にすることもできます。一つを非表示にするには、そのダイナミックパネル名の右にあるブルーの四角をクリックします。全てを非表示にするには、ページ名を右クリックし全て非表示を選択します。
編集するために状態を開くには、状態をダブルクリックします。ダイナミックパネルの全ての状態を開くには、ダイナミックパネル名を右クリックし、「全て編集」を選択します。
5.ダイナミックパネルの非表示
ダイナミックパネルはデフォルトで非表示の状態に設定できます。こうするには、ダイナミックパネルを右クリックし、「ダイナミックパネルの編集」-「非表示に設定」を選択します。すると、パネルの内容が非表示になり、ダイナミックパネルのマスクが青色から黄色に変化します。
ダイナミックパネルは、以下で説明するようにインタラクションを使用して、プロトタイプで動的に表示できます。
6.インタラクションとダイナミックパネル
インタラクションケースに設定されるアクションの中で、ダイナミックパネルを操作できます。「インタラクションケースプロパティ」ダイアログには、ダイナミックパネルの操作に関連する次のアクションのセットがあります。
- パネルの状態を変更する
- パネルを表示する
- パネルを非表示にする
- パネルの表示・非表示の切り替え
- パネルを移動する
これらのアクションの 1 つを選択した後で、「アクション」記述箇所の中のリンクをクリックすることで、インタラクションを行うパネル、およびパネルに対して設定する状態 (必要に応じて) を指定できます。
ダイナミックパネルを選択するときは、ダイナミックパネルは「アノテーション&インタラクション」ウィンドウ枠で割り当てられたダイナミックパネルのラベルで識別します。ラベルを指定していない場合は、ダイナミックパネルは「ラベルなし」と表示されます。
7.使用例
タブコントロール:
ダイナミックパネルを使ってタブコントロールを作成することができます。タブが 3 つあるタブコントロールの場合、そのタブコントロールは、状態が 3 つあるダイナミックパネルと対応します。（それぞれのタブに 1 つの状態が該当します。） 3 つのタブボタンのそれぞれにインタラクションが 1 つ存在し、クリックされたタブに対応する状態にダイナミックパネルの状態を変化させます。
階層メニュー:
ダイナミックパネルは、カスタムの階層メニューのプロトタイプを作成したり、マウスの動作にしたがってある部分を動的に表示または非表示にしたりするために使用できます。これは、OnMouseEnterイベントと、ダイナミックパネルを表示または非表示にするアクションの組み合わせを使用することで達成できます。
ダイナミックパネルを使用して作成された階層メニューのサンプルをご覧になるには、このブログエントリをお読みください。
基本階層メニューは、「リッチインタラクション - レクチャー 3: メニュー」で説明されているように、メニュー ウィジェットを使用して作成できます。
ページの初期化:
ダイナミックパネルは、OnPageLoadイベントとの組み合わせで、変数値にしたがってページのインターフェイスを初期化するために使用できます。この使用方法の詳細は、「豊富な機能 - レクチャー 6: OnPageLoad」を参照してください。