JavaScript ビヘイビアーの使用(基本操作)

最終更新日 : 2021年4月27日

Adobe Dreamweaver で JavaScript ビヘイビアーを使用して、JavaScript コードをドキュメントに配置することで、訪問者が web ページを変更したり、特定のタスクを開始したりできるようになります。

Adobe Dreamweaver ビヘイビアーを使用して JavaScript コードをドキュメントに配置すると、ビジターが Web ページを多様に変更したり、特定のタスクを開始したりできます。 ビヘイビアーとは、イベントと、そのイベントが実行するアクションの組み合わせです。 ビヘイビアーは、ビヘイビアーパネルでアクションとそのアクションを実行するイベントを指定することによってページに追加します。

メモ

ビヘイビアーコードはクライアントサイド JavaScript コードです。つまり、サーバーではなく、ブラウザーで実行されます。

Events は、実際にはブラウザーによって生成されるメッセージで、ページの訪問者が何らかの操作を行ったことを示します。例えば、訪問者がリンクの上にポインターを移動したとき、ブラウザーはそのリンクに対して onMouseOver イベントを生成します。その後、ブラウザーは応答として、何らかの JavaScript コード(表示されているページで指定されたもの)を呼び出す必要があるかどうかを確認します。異なるイベントが異なるページ要素に対して定義されています。例えば、ほとんどのブラウザーでは onMouseOveronClick はリンクに関連付けられたイベントですが、onLoad は画像やドキュメントの body セクションに関連付けられたイベントです。

action は、ブラウザーウィンドウを開く、AP 要素を表示または非表示にする、サウンドを再生する、Adobe Shockwave ムービーを停止するなどのタスクを実行するために事前に記述された JavaScript コードです。Dreamweaver で提供されるアクションは、最大限のクロスブラウザー互換性を提供します。

ページ要素にビヘイビアーを添付した後、その要素でイベントが発生するたびに、ビヘイビアーはイベントに関連付けられたアクション(JavaScript コード)を呼び出します。(特定のアクションをトリガーするために使用できるイベントは、ブラウザーによって異なります。)例えば、ポップアップメッセージアクションをリンクに添付し、onMouseOver イベントによってトリガーされるように指定した場合、誰かがそのリンクにポインターを合わせるたびにメッセージがポップアップ表示されます。

単一のイベントで複数の異なるアクションをトリガーでき、これらのアクションが発生する順序を指定することができます。

Dreamweaver では約 24 のアクションが提供されています。追加のアクションは、www.adobe.com/go/dreamweaver_exchange の Exchange web サイトやサードパーティデベロッパーサイトで見つけることができます。JavaScript に熟練している場合は、独自のアクションを作成することができます。

メモ

ビヘイビアーアクションは Dreamweaver の用語であり、HTML の用語ではありません。 ブラウザーの観点から見ると、アクションは他の JavaScript コードの一部に過ぎません。

ビヘイビアーパネルの概要

ビヘイビアパネル(ウィンドウ/ビヘイビア)を使用して、ページ要素(より具体的にはタグ)にビヘイビアを添付し、以前に添付されたビヘイビアのパラメーターを変更します。

現在選択されているページ要素に既に添付されているビヘイビアーは、ビヘイビアリスト(パネルのメイン領域)にイベント別にアルファベット順で表示されます。同じイベントに対して複数のアクションがリストされている場合、それらはリストに表示される順序で実行されます。ビヘイビアリストにビヘイビアーが表示されない場合、現在選択されている要素にはビヘイビアーが添付されていません。

ビヘイビアーパネルには、次のオプションがあります。

イベント設定の表示

現在のドキュメントに添付されているイベントのみを表示します。イベントは、クライアントサイドとサーバーサイドのいずれかのカテゴリに編成されています。 各カテゴリーのイベントは折りたたみ式のリストに含まれています。 「セットイベントを表示」がデフォルトのビューです。

すべてのイベントを表示

指定したカテゴリーのすべてのイベントがアルファベット順で表示されます。

ビヘイビアーの追加(+)

現在選択されている要素に添付できるアクションのメニューを表示します。このリストからアクションを選択すると、そのアクションのパラメーターを指定できるダイアログボックスが表示されます。すべてのアクションが淡色表示されている場合、選択された要素ではイベントを生成できません。

イベントの削除(–)

選択したイベントとアクションがビヘイビアーリストから削除されます。

上矢印ボタンと下矢印ボタン

特定のイベントのビヘイビアリストで選択されたアクションを上下に移動します。特定のイベントに対してのみアクションの順序を変更できます。例えば、onLoadイベントに対して複数のアクションが発生する順序を変更できますが、すべてのonLoadアクションはビヘイビアーリストで一緒に保持されます。リスト内で上下に移動できないアクションでは、矢印ボタンが無効になります。

イベント

そのアクションを実行できるすべてのイベントがポップアップメニューに表示されます。このメニューは、イベントが選択されていないときには表示されません。選択されているイベント名の隣の矢印ボタンをクリックすると表示されます。 表示されるイベントは、選択したオブジェクトによって異なります。 目的のイベントが表示されない場合は、選択したページエレメントまたはタグが正しいかどうかを確認してください。 特定のタグを選択するには、ドキュメントウィンドウの左下隅にあるタグセレクターを使用します。

メモ

カッコに囲まれたイベント名は、リンクのみに使用できます。これらのイベント名の 1 つを選択すると、選択したページエレメントにヌルリンクが自動的に追加され、エレメントではなくリンクにビヘイビアーが関連付けられます。 ヌルリンクは、HTML コードでは、href="javascript:;" と記述されます。

イベントについて

各ブラウザーは、ビヘイビアーパネルのアクション(+)メニューにリストされているアクションに関連付けることができるイベントのセットを提供します。webページの訪問者がページとやり取りする際(例:画像をクリックする)、ブラウザーがイベントを生成します。これらのイベントを使用して、アクションを実行するJavaScript関数を呼び出すことができます。Dreamweaverは、これらのイベントでトリガーできる多くの一般的なアクションを提供します。

各ブラウザーが提供するイベントの名前と説明については、www.adobe.com/go/dreamweaver_supportのDreamweaverサポートセンターをご覧ください。

選択したオブジェクトによって、イベントメニューに表示されるイベントが異なります。特定のブラウザーが特定のページ要素に対してどのイベントをサポートしているかを確認するには、ドキュメントにページ要素を挿入してビヘイビアーを添付し、ビヘイビアーパネルのイベントメニューを参照してください。(デフォルトでは、イベントはHTML 4.01イベントリストから取得され、ほとんどの最新ブラウザーでサポートされています。)関連するオブジェクトがページ上にまだ存在しない場合、または選択されたオブジェクトがイベントを受信できない場合、イベントが無効(グレー表示)になることがあります。期待されるイベントが表示されない場合は、正しいオブジェクトが選択されていることを確認してください。

画像にビヘイビアーを添付する場合、一部のイベント(onMouseOverなど)が括弧内に表示されます。これらのイベントはリンクでのみ利用できます。これらのいずれかを選択すると、Dreamweaverが画像を<a>タグで囲んでヌルリンクを定義します。ヌルリンクは、プロパティインスペクターのリンクボックスでjavascript:;として表示されます。別のページへの実際のリンクに変更したい場合はリンク値を変更できますが、JavaScriptリンクを別のリンクで置き換えずに削除すると、ビヘイビアーが削除されます。

特定のブラウザーで特定のイベントで使用できるタグを確認するには、Dreamweaver/Configuration/Behaviors/Eventsフォルダー内のファイルのいずれかでイベントを検索してください。

ビヘイビアーの適用

ドキュメント全体(つまり、<body>タグ)またはリンク、画像、フォーム要素、およびその他のいくつかのHTML要素にビヘイビアーを添付できます。

選択するターゲットブラウザーによって、特定の要素でサポートされるイベントが決まります。

各イベントに対して複数のアクションを指定できます。アクションは、ビヘイビアーパネルのアクション列にリストされている順序で発生しますが、その順序を変更できます。

画像やリンクなど、ページ上の要素を選択します。

ページ全体にビヘイビアーを添付するには、ドキュメントウィンドウの左下隅にあるタグセレクターの<body>タグをクリックします。

ウィンドウ/ビヘイビアーを選択します。
プラス(+)ボタンをクリックして、ビヘイビアー追加メニューからアクションを選択します。

メニューで淡色表示になっているアクションは選択できません。 現在のドキュメントに必要なオブジェクトが存在しないため、グレー表示になることがあります。例えば、ドキュメントに Shockwave または SWF ファイルが含まれていない場合、Control Shockwave または SWF アクションは淡色表示されます。

アクションを選択すると、ダイアログボックスが表示され、そのアクションのパラメーターと手順が表示されます。

アクションのパラメーターを入力して、「OK」をクリックします。

Dreamweaver に用意されているアクションはすべて、最新のブラウザーで動作します。 一部のアクションは古いブラウザーでは動作しませんが、エラーの原因にはなりません。

メモ

ターゲットエレメントには一意の ID が必要です。 例えば、イメージに「スワップイメージ」ビヘイビアーを適用する場合、そのイメージには ID が必要です。 エレメントに ID が指定されていない場合、Dreamweaver により自動的に指定されます。

アクションをトリガーするデフォルトイベントが Events 列に表示されます。これが希望するトリガーイベントでない場合は、Events ポップアップメニューから別のイベントを選択してください。(Events メニューを開くには、Behaviors パネルでイベントまたはアクションを選択し、イベント名とアクション名の間に表示される下向きの黒い矢印をクリックします。)

ビヘイビアーの変更または削除

ビヘイビアーを添付した後、アクションをトリガーするイベントの変更、アクションの追加や削除、アクションのパラメーターの変更ができます。

ビヘイビアーが関連付けられているオブジェクトを選択します。
ウィンドウ/ビヘイビアーを選択します。
変更を加えます。
  • アクションのパラメーターを編集するには、その名前をダブルクリックするか、選択して Enter(Windows)または Return(Macintosh)を押し、ダイアログボックスでパラメーターを変更して「OK」をクリックします。

  • 特定のイベントに対するアクションの順序を変更するには、アクションを選択して上矢印または下矢印をクリックします。または、アクションを選択してカットし、他のアクション間の希望する場所に貼り付けることもできます。

  • ビヘイビアーを削除するには、それを選択してマイナス(–)ボタンをクリックするか、Delete キーを押します。

ビヘイビアーの更新

ビヘイビアーが添付されている要素を選択します。
ウィンドウ>ビヘイビアーを選択し、ビヘイビアーをダブルクリックします。
変更を行い、ビヘイビアーのダイアログボックスで「OK」をクリックします。

このページのこのビヘイビアーのすべてのオカレンスが更新されます。 サイトの他のページにそのビヘイビアーがある場合は、ページごとに更新する必要があります。

サードパーティのビヘイビアーをダウンロードしてインストールする

多くの拡張機能が Exchange for Dreamweaver web サイト(www.adobe.com/go/dreamweaver_exchange)で利用できます。

ウィンドウ/Behaviors を選択し、Add Behavior メニューから Get More Behaviors を選択します。

プライマリブラウザーが開き、Exchange のサイトが表示されます。

パッケージを参照または検索します。
必要な拡張機能パッケージをダウンロードおよびインストールします。

詳細については、Dreamweaver での拡張機能の追加と管理を参照してください。