Adobe Dreamweaverでビルトイン JavaScript ビヘイビアを適用する方法を理解するために、このトピックを使用してください。
組み込みビヘイビアーの使用
Dreamweaverに含まれているビヘイビアは、モダンなブラウザーで動作するように作成されています。古いブラウザーでは、ビヘイビアーはエラーを報告せずに終了します。
Dreamweaverアクションは、可能な限り多くのブラウザーで動作するように注意深く作成されています。Dreamweaverアクションからコードを手動で削除したり、独自のコードに置き換えたりすると、クロスブラウザー互換性が失われる可能性があります。
Dreamweaver アクションはクロスブラウザー互換性を最大化するように作成されていますが、一部のブラウザーは JavaScript を全くサポートしておらず、web を閲覧する多くのユーザーがブラウザーで JavaScript をオフにしています。最適なクロスプラットフォーム結果を得るために、<noscript>タグで囲まれた代替インターフェイスを提供し、JavaScriptを使用できないユーザーがサイトを使用できるようにしてください。
「JavaScript の呼出し」ビヘイビアーの適用
Call JavaScript ビヘイビアは、イベントが発生したときにカスタム関数または JavaScript コードを実行します。(スクリプトを自分で作成することも、webで自由に利用できる様々なJavaScriptライブラリで提供されているコードを使用することもできます。)
例えば、「戻る」ボタンを作成するには、「if (history.length > 0){history.back()}」と入力します。 コードを関数にカプセル化している場合は、関数名のみを入力してください(例:hGoBack())。
「プロパティの変更」ビヘイビアーを適用します。
Change Property ビヘイビアを使用して、オブジェクトのプロパティのうち 1 つの値を変更します(例:div の背景色やフォームのアクション)。
HTMLとJavaScriptに非常に精通している場合にのみ、このビヘイビアを使用してください。
「プラグインのチェック」ビヘイビアーの適用
Check Plugin ビヘイビアを使用して、指定されたプラグインがインストールされているかどうかに応じて、訪問者を異なるページに誘導します。例えば、訪問者にShockwaveがある場合は1つのページに、ない場合は別のページに移動してもらいたい場合があります。
JavaScriptを使用してInternet Explorerで特定のプラグインを検出することはできません。ただし、FlashまたはDirectorを選択すると、WindowsのInternet Explorerでこれらのプラグインを検出するための適切なVBScriptコードがページに追加されます。プラグインの検出は、Mac OS の Internet Explorer では実行できません。
Netscape Navigator の About Plug‑ins ページで太字で指定されているとおり、プラグインの正確な名前を使用する必要があります。(Windows では、Navigator の「ヘルプ」>「About Plug‑ins」コマンドを選択します。Mac OS では、Apple メニューから「About Plug‑ins」を選択します。)
リモート URL を指定する場合は、アドレスに http:// 接頭辞を含める必要があります。フィールドを空白のままにすると、訪問者は同じページにとどまります。
このオプションは Internet Explorer にのみ適用されます。Netscape Navigator では常にプラグインを検出できます。
「AP エレメントをドラッグ」ビヘイビアーの適用
Drag AP Element ビヘイビアーを使用すると、訪問者は絶対配置(AP)エレメントをドラッグできます。このビヘイビアーを使用して、パズル、スライダーコントロール、その他の移動可能なインターフェイスエレメントを作成します。
訪問者が AP エレメントをドラッグできる方向(水平方向、垂直方向、または任意の方向)、訪問者が AP エレメントをドラッグするターゲット、AP エレメントがターゲットの特定のピクセル数以内にある場合に AP エレメントをターゲットにスナップするかどうか、AP エレメントがターゲットにヒットしたときの動作などを指定できます。
Drag AP Element ビヘイビアーは訪問者が AP エレメントをドラッグする前に呼び出される必要があるため、Drag AP Element をbodyオブジェクト(onLoadイベント)に添付する必要があります。
「Drag AP Element」が使用できない場合、おそらく AP エレメントが選択されています。
制約のない移動は、パズルやその他のドラッグ&ドロップゲームに適しています。スライダーコントロールやファイル引き出し、カーテン、ミニブラインドなどの移動可能な装飾には、制約された移動を選択します。
値は AP エレメントの開始位置に対する相対値です。長方形の領域内で移動を制約するには、4 つのボックスすべてに正の値を入力します。垂直方向の移動のみを許可するには、 上下に正の値を入力し、左右に0を入力します。 水平方向の移動のみを許可するには、左右に正の値を入力し、上下に0を入力します。
ドロップターゲットは、訪問者にAP要素をドラッグしてもらいたい場所です。AP要素は、その左と上の座標が「左」と「上」のボックスに入力した値と一致したときに、ドロップターゲットに到達したと見なされます。値はブラウザーウィンドウの左上隅を基準とします。「現在の位置を取得」をクリックすると、AP要素の現在位置がテキストボックスに自動的に入力されます。
値が大きいほど、訪問者がドロップターゲットを見つけやすくなります。
このオプションは、AP要素内の画像にタイトルバーや引き出しハンドルなど、ドラッグを示唆する要素が含まれている場合に便利です。訪問者がAP要素内のどこでもクリックしてドラッグできるようにしたい場合は、このオプションを設定しないでください。
ドラッグ中にAP要素が積み重ね順序の前面に移動する必要がある場合は、「要素を前面に移動」を選択します。このオプションを選択した場合は、ポップアップメニューを使用して、AP要素を前面に残すか、積み重ね順序の元の位置に復元するかを選択します。
AP要素のドラッグ中にコードまたは関数を繰り返し実行するには、Call JavaScriptボックスにJavaScriptコードまたは関数名(例:monitorAPelement())を入力します。たとえば、AP要素の座標を監視し、「近づいています」や「ドロップターゲットから遠く離れています」などのヒントをテキストボックスに表示する関数を作成できます。
ドラッグ可能な AP エレメントについての情報収集
AP要素をドラッグビヘイビアーをオブジェクトに添付すると、DreamweaverはドキュメントのheadセクションにMM_dragLayer()関数を挿入します。(この関数は、以前のバージョンのDreamweaverで作成されたレイヤーが編集可能なまま残るように、AP要素の古い命名規則(つまり「Layer」)を保持しています。)この関数は、AP要素をドラッグ可能として登録することに加えて、各ドラッグ可能なAP要素に対して3つのプロパティ(MM_LEFTRIGHT、MM_UPDOWN、MM_SNAPPED)を定義します。これらのプロパティは独自のJavaScript関数で使用して、AP要素の相対的な水平位置、AP要素の相対的な垂直位置、およびAP要素がドロップターゲットに到達したかどうかを判断できます。
ここで提供される情報は、経験豊富なJavaScriptプログラマーのみを対象としています。
たとえば、次の関数は、curPosFieldと呼ばれるフォームフィールドにMM_UPDOWNプロパティ(AP要素の現在の垂直位置)の値を表示します。(フォームフィールドは、動的であるため、継続的に更新される情報の表示に便利です。つまり、ページの読み込みが完了した後でも内容を変更できます。)
function getPos(layerId){
var layerRef = document.getElementById(layerId);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
MM_UPDOWNまたはMM_LEFTRIGHTの値をフォームフィールドに表示する代わりに、これらの値を他のさまざまな方法で使用することもできます。 例えば、値がドロップゾーンにどれくらい近いかに応じてフォームフィールドにメッセージを表示する関数を書いたり、値に応じてAP要素を表示または非表示にする別の関数を呼び出したりできます。
ページに複数のAP要素があり、訪問者が次のページまたはタスクに進む前に、すべてがターゲットに到達する必要がある場合、MM_SNAPPEDプロパティを読み取ることは特に便利です。 例えば、MM_SNAPPED値がtrueのAP要素の数をカウントする関数を書いて、AP要素がドロップされるたびにそれを呼び出すことができます。 スナップされた数が所定の数に達したら、訪問者を次のページに移動させたり、お祝いのメッセージを表示したりできます。
「URL に移動」ビヘイビアーの適用
Go To URLビヘイビアーは、現在のウィンドウまたは指定されたフレームで新しいページを開きます。 このビヘイビアーは、1回のクリックで2つ以上のフレームの内容を変更するのに便利です。
「開く場所」リストには、現在のフレームセット内のすべてのフレームの名前とメインウィンドウが自動的に一覧表示されます。 フレームがない場合、メインウィンドウが唯一のオプションです。
フレームの名前がtop、blank、self、またはparentの場合、このビヘイビアーは予期しない結果を生じる可能性があります。 ブラウザーは、これらの名前を予約されたターゲット名と間違えることがあります。
「ジャンプメニュー」ビヘイビアーの適用
挿入/フォーム/ジャンプメニューを使用してジャンプメニューを作成すると、Dreamweaverはメニューオブジェクトを作成し、そのオブジェクトにジャンプメニュー(またはジャンプメニューGo)ビヘイビアーを適用します。 通常、ジャンプメニュービヘイビアーを手動でオブジェクトに適用する必要はありません。
既存のジャンプメニューは、次の2つの方法のいずれかで編集できます。
ビヘイビアーパネルで既存のジャンプメニュービヘイビアーをダブルクリックすると、メニュー項目の編集と並べ替え、ジャンプ先のファイルの変更、それらのファイルを開くウィンドウの変更ができます。
メニューを選択してプロパティインスペクターの「リスト値」ボタンを使用することで、他のメニューの項目を編集するのと同じようにメニューの項目を編集できます。
「ジャンプメニュー移動」ビヘイビアーの適用
ジャンプメニューGoビヘイビアーは、ジャンプメニュービヘイビアーと密接に関連しています。ジャンプメニューGoを使用すると、Goボタンをジャンプメニューに関連付けることができます。(このビヘイビアーを使用する前に、ドキュメント内にジャンプメニューが既に存在している必要があります。)Goボタンをクリックすると、ジャンプメニューで選択されているリンクが開きます。ジャンプメニューには通常Goボタンは必要ありません。ジャンプメニューから項目を選択すると、一般的にはユーザーによる追加のアクションを必要とせずにURLが読み込まれます。ただし、訪問者がジャンプメニューで既に選択されているのと同じ項目を選択した場合、ジャンプは発生しません。一般的には問題ありませんが、ジャンプメニューがフレーム内に表示され、ジャンプメニュー項目が他のフレーム内のページにリンクしている場合、Goボタンがあると便利なことがよくあります。これにより、訪問者はジャンプメニューで既に選択されている項目を再選択できます。
ジャンプメニューでGoボタンを使用する場合、Goボタンはメニュー内の選択に関連付けられたURLにユーザーを「ジャンプ」させる唯一のメカニズムになります。ジャンプメニューでメニュー項目を選択しても、ユーザーが自動的に別のページまたはフレームにリダイレクトされなくなります。
「ブラウザーウィンドウを開く」ビヘイビアーの適用
ブラウザーウィンドウを開くビヘイビアーを使用して、新しいウィンドウでページを開きます。新しいウィンドウのプロパティ(サイズ、属性(サイズ変更可能かどうか、メニューバーがあるかどうかなど)、名前など)を指定できます。例えば、このビヘイビアーを使用して、訪問者がサムネイル画像をクリックしたときに別のウィンドウでより大きな画像を開くことができます。このビヘイビアーを使用すると、新しいウィンドウを画像の正確なサイズにできます。
ウィンドウに属性を指定しない場合、そのウィンドウを開いた元のウィンドウのサイズと属性で開きます。ウィンドウの属性を指定すると、明示的にオンにされていない他のすべての属性が自動的にオフになります。例えば、ウィンドウに属性を設定しない場合、1024 x 768ピクセルで開き、ナビゲーションバー(戻る、進む、ホーム、リロードボタンを表示)、ロケーションツールバー(URLを表示)、ステータスバー(下部にステータスメッセージを表示)、メニューバー(ファイル、編集、表示などのメニューを表示)が表示される場合があります。幅を640、高さを480に明示的に設定し、他の属性を設定しない場合、ウィンドウは640 x 480ピクセルで、ツールバーなしで開きます。
「ポップアップメッセージ」ビヘイビアーの適用
ポップアップメッセージビヘイビアーは、指定したメッセージでJavaScriptアラートを表示します。JavaScriptアラートにはボタンが1つ(OK)しかないため、このビヘイビアーは選択肢を提示するのではなく、ユーザーに情報を提供するために使用します。
テキストには、任意の有効なJavaScript関数呼び出し、プロパティ、グローバル変数、またはその他の式を埋め込むことができます。JavaScript式を埋め込むには、波括弧({})内に配置します。波括弧を表示するには、 バックスラッシュを前に付けます(\{)。
例:
このページの URL は {window.location} で、今日は {new Date()} です。
ブラウザーがアラートの外観をコントロールします。外観をより詳細にコントロールしたい場合は、 ブラウザーウィンドウを開くビヘイビアーの使用を検討してください。
「イメージのプリロード」ビヘイビアーの適用
画像プリロードビヘイビアーは、ページが最初に表示されるときに表示されない画像(例えば、ビヘイビアーやスクリプトで入れ替わる画像)をキャッシュすることで表示時間を短縮します。
画像のスワップビヘイビアーでは、画像のスワップ ダイアログボックスで画像をプリロードオプションを選択すると、 すべてのハイライト画像が自動的にプリロードされるため、画像のスワップを 使用する際に画像をプリロードを手動で追加する必要はありません。
「フレームテキストを設定」ビヘイビアーの適用
フレームテキストを設定ビヘイビアを使用すると、フレームのテキストを動的に設定し、フレームのコンテンツと書式を指定したコンテンツに置き換えることができます。コンテンツには、任意の有効なHTMLコードを含めることができます。このビヘイビアーを使用して、情報を動的に表示します。
フレームテキストを設定ビヘイビアはフレームの書式を置き換えますが、背景色を保持を選択して、ページの背景とテキストカラー属性を保持することができます。
テキストには、任意の有効なJavaScript関数呼び出し、プロパティ、グローバル変数、またはその他の式を埋め込むことができます。JavaScript式を埋め込むには、中括弧({})で囲みます。中括弧を表示するには、バックスラッシュを前に付けます(\{)。
例:
このページのURLは {window.location} で、今日は {new Date()} です。
コンテナテキストを設定ビヘイビアを適用します
Set Text Of Container ビヘイビアは、 ページ上の既存のコンテナ(つまり、テキストまたは他の要素を 含むことができる任意の要素)のコンテンツと書式を、指定した コンテンツに置き換えます。 コンテンツには、有効な HTML ソースコードを含めることができます。
テキスト内に有効な JavaScript 関数の呼び出し、プロパティ、グローバル変数、 またはその他の式を埋め込むことができます。JavaScript 式を埋め込むには、 中括弧({})で囲みます。中括弧を表示するには、 バックスラッシュを前に付けます(\{)。
例:
このページの URL は {window.location} で、今日は {new Date()} です。
Set Text Of Status Bar ビヘイビアの適用
Set Text Of Status Bar ビヘイビアは、ブラウザーウィンドウの左下隅にある ステータスバーにメッセージを表示します。例えば、このビヘイビアを使用して、リンクに関連付けられた URL を表示する代わりに、ステータスバーにリンクの 移動先を説明することができます。訪問者はステータスバーのメッセージを無視したり見落としたりすることが多く (すべてのブラウザーがステータスバーテキストの設定を 完全にサポートしているわけではありません)、メッセージが重要な場合は、 ポップアップメッセージまたは AP 要素のテキストとして 表示することを検討してください。
Dreamweaver で Set Text Of Status Bar ビヘイビアを 使用する場合、一部のブラウザーではステータスバーテキストを変更する際に 特別な調整が必要なため、ブラウザーのステータスバーの テキストが変更されることは保証されません。例えば、Firefox では、JavaScript がステータス バーテキストを変更できるようにする 詳細オプションを変更する必要があります。詳しくは、ご使用のブラウザーのマニュアルを参照してください。
テキスト内に有効な JavaScript 関数の呼び出し、プロパティ、グローバル変数、 またはその他の式を埋め込むことができます。JavaScript 式を埋め込むには、 中括弧({})で囲みます。中括弧を表示するには、 バックスラッシュを前に付けます(\{)。
例:
このページの URL は {window.location} で、今日は {new Date()} です。
メッセージは簡潔にします。 メッセージがステータスバーに 収まらない場合、ブラウザーはメッセージを切り捨てます。
Set Text Of Text Field ビヘイビアの適用
Set Text Of Text Field ビヘイビアは、 フォームのテキストフィールドのコンテンツを、指定した コンテンツに置き換えます。
テキスト内に有効な JavaScript 関数の呼び出し、 プロパティ、グローバル変数、またはその他の式を埋め込むことができます。JavaScript 式を埋め込むには、中括弧({})で囲みます。 波カッコを表示するには、前にバックスラッシュを付けます(\{)。
例:
このページの URL は {window.location} で、今日は {new Date()} です。
名前の付いたテキストフィールドの作成
Dreamweaver でフォームタグを追加するかどうか確認を求められたら、 「はい」をクリックします。
「テキストフィールドのテキストを設定」の適用
「エレメントの表示 - 非表示」ビヘイビアーの適用
エレメントの表示/非表示ビヘイビアは、1つまたは複数のページ要素の 表示、非表示、またはデフォルトの表示の復元を行います。 このビヘイビアは、ユーザーがページを操作する際に 情報を表示するのに便利です。例えば、ユーザーが植物の画像の上にポインターを移動すると、その植物の生育時期や地域、必要な日照量、どのくらい大きく育つかなどの詳細を示すページ要素を表示できます。このビヘイビアは関連する要素の表示または非表示のみを行い、非表示の際にページのフローから要素を実際に削除することはありません。
エレメントの表示/非表示が利用できない場合は、 AP 要素を選択している可能性があります。AP 要素は 4.0 ブラウザーの両方でイベントを受け付けないため、 <body> タグやリンク(<a>)タグなど、別のオブジェクトを選択する必要があります。
このビヘイビアは Dreamweaver CS5 で非推奨になりました。
「スワップイメージ」ビヘイビアーの適用
Swap Imageビヘイビアは、<img>タグのsrc属性を変更することで、ある画像を別の画像に入れ替えます。このビヘイビアを使用して、ボタンのロールオーバーやその他の画像効果を作成します(一度に複数の画像をスワップすることも含む)。繰り越し画像を挿入すると、ページに 画像のスワップビヘイビアが自動的に追加されます。
このビヘイビアは src 属性のみに影響するため、 元の画像と同じ寸法(高さと幅)の画像に スワップする必要があります。そうしないと、スワップされる画像が 元の画像の寸法に合わせて縮小または拡大されます。
また、画像のスワップ復元ビヘイビアもあり、 最後にスワップされた画像セットを以前の ソースファイルに復元します。このビヘイビアは、画像のスワップビヘイビアをオブジェクトにアタッチするたびに自動的に追加されます。画像のスワップをアタッチする際に復元オプションを選択したままにしておけば、画像のスワップ復元ビヘイビアを手動で選択する必要はありません。
画像に名前を付ける必要はありません。オブジェクトにビヘイビアーを添付すると自動的に名前が付けられます。ただし、すべての画像にあらかじめ名前を付けておくと、画像の入れ替えダイアログボックスで画像を区別しやすくなります。
これにより、画像が表示されるタイミングでのダウンロード遅延を防ぐことができます。
「検査フォーム」ビヘイビアーの適用
フォームの検証ビヘイビアーは、指定されたテキストフィールドの内容をチェックして、ユーザーが正しいタイプのデータを入力していることを確認します。このビヘイビアーをonBlurイベントで個々のテキストフィールドに添付すると、ユーザーがフォームを記入している間にフィールドを検証できます。また、onSubmitイベントでフォームに添付すると、ユーザーが送信ボタンをクリックしたときに複数のテキストフィールドを一度に評価できます。このビヘイビアーをフォームに添付すると、無効なデータを含むフォームの送信を防ぐことができます。
追加のテキストフィールドを挿入するには、この手順を繰り返します。
ユーザーがフォームを記入している間に個々のフィールドを検証するには、テキストフィールドを選択して「ウィンドウ」>「ビヘイビアー」を選択します。
ユーザーがフォームを送信するときに複数のフィールドを検証するには、ドキュメントウィンドウの左下角にあるタグセレクターの<form>タグをクリックして、「ウィンドウ」>「ビヘイビアー」を選択します。
個々のフィールドを検証している場合は、フィールドリストからドキュメントウィンドウで選択したのと同じフィールドを選択します。
複数のフィールドを検証している場合は、フィールドリストからテキストフィールドを選択します。
すべて
必須フィールドにデータが含まれているかチェックします。データはどのタイプでも構いません。
電子メールアドレス
フィールドに @ 記号が含まれているかどうかチェックされます。
数字
フィールドに数字だけが含まれているかどうかチェックされます。
数字の範囲
フィールドに特定の範囲の数値が含まれているかチェックします。
ユーザーがフォームを送信するときに複数のフィールドを検証している場合、onSubmitイベントがイベントメニューに自動的に表示されます。
どちらのイベントも、ユーザーがフィールドから離れるときにフォームの検証ビヘイビアーをトリガーします。違いは、onBlurはユーザーがフィールドに入力したかどうかに関係なく発生し、onChangeはユーザーがフィールドのコンテンツを変更した場合にのみ発生することです。onBlurイベントは、フィールドが必須の場合に推奨されます。