マニュアルキャンセル

JavaScript ビヘイビアーの使用（基本操作）

検索

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

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

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

注意：

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

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

アクションは、ブラウザーウィンドウを開く、AP エレメントの表示と非表示を切り替える、サウンドを再生する、Adobe Shockwave ムービーを停止するなどの特定のタスクを実行する、事前に記述された JavaScript コードです。Dreamweaver に用意されているアクションは、異種ブラウザー間で最大の互換性を実現できるように設計されています。

ビヘイビアーをページエレメントに関連付けると、そのエレメントに対するイベントが発生するたびに、そのイベントに関連付けられているアクション（JavaScript コード）がビヘイビアーによって呼び出されます。ただし、指定したアクションを実行するために使用できるイベントは、ブラウザーによって異なります。例えば、リンクに「ポップアップメッセージ」アクションを関連付けて、onMouseOver イベントにより実行されることを指定すると、ポインターがリンク上に配置されるたびにメッセージがポップアップします。

1 つのイベントで複数の異なるアクションを実行することができます。また、アクションの発生順を指定することができます。

Dreamweaver には、約 24 個のアクションが用意されています。それ以外のアクションは、Exchange の Web サイト（www.adobe.com/go/dreamweaver_exchange_jp）およびサードパーティデベロッパーのサイトで確認きます。JavaScript に精通していれば、独自のアクションを記述できます。

注意：

ビヘイビアーとアクションは Dreamweaver の用語であり、HTML の用語ではありません。ブラウザー側からは、アクションは他の JavaScript コードと同じように見えます。

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

ビヘイビアーパネル（ウィンドウ／ビヘイビアー）では、ビヘイビアーをページエレメント（具体的にはタグ）に関連付けたり、以前に関連付けたビヘイビアーのパラメーターを変更したりできます。

現在選択されているページエレメントに既に関連付けられているビヘイビアーは、ビヘイビアーパネルの主要領域のビヘイビアーリストに、イベントごとにアルファベット順に表示されます。同じイベントに対して複数のアクションが表示されている場合、アクションは、リスト内の表示順に実行されます。ビヘイビアーリストにビヘイビアーが表示されない場合は、現在選択されているエレメントに関連付けられているビヘイビアーはありません。

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

イベント設定の表示

現在のドキュメントに関連付けられているイベントのみ表示されます。イベントは、クライアントサイドとサーバーサイドのいずれかのカテゴリに編成されています。各カテゴリーのイベントは折りたたみ式のリストに含まれています。「イベント設定の表示」が初期設定の表示です。

すべてのイベントを表示

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

ビヘイビアーの追加（+）

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

イベントの削除（–）

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

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

特定のイベントに対するビヘイビアーリスト内で、選択したアクションが上または下に移動します。アクションの順序は、イベント別にのみ変更できます。例えば、onLoad イベントに対して発生するアクションの順序を変更できます。ただし、onLoad のすべてのアクションはビヘイビアーリスト内に留まります。矢印ボタンは、リストで上または下に移動できないアクションに対しては使用できません。

イベント

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

注意：

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

イベントについて

各ブラウザーにはイベント群が用意されており、これらのイベントは、ビヘイビアーパネルのアクション（+）メニューに一覧表示されるアクションに関連付けることができます。Web ページのビジターが、ページでイメージをクリックするなどのインタラクティブな操作を行うと、ブラウザーによってイベントが生成されます。これらのイベントは、アクションを実行する JavaScript 関数を呼び出すために使用できます。Dreamweaver には、これらのイベントを使用して実行できる一般的なアクションが多数用意されています。

各ブラウザーがサポートしているイベントの名前と説明については、Dreamweaver サポートセンター（www.adobe.com/go/dreamweaver_support_jp）を参照してください。

イベントメニューに表示されるイベントは、選択したオブジェクトによって異なります。指定したブラウザーのページエレメントでサポートされるイベントを確認するには、ドキュメントにページエレメントを挿入してビヘイビアーを 1 つ関連付けてから、ビヘイビアーパネルのイベントメニューを確認します。初期設定では、イベントは HTML 4.01 イベントリストから抽出され、それらは最新のブラウザーのほとんどでサポートされています。イベントは、関連するオブジェクトがページに存在しない場合、または選択したオブジェクトがイベントを受け取れない場合は、無効（淡色表示）になっていることがあります。目的のイベントが表示されない場合は、選択したオブジェクトが正しいかどうかを確認してください。

ビヘイビアーをイメージに関連付ける場合に、onMouseOver など一部のイベントがカッコに囲まれて表示されます。これらのイベントはリンクでのみ使用できます。Dreamweaver では、これらのイベントの 1 つを選択すると、イメージが <a> タグで囲まれ、無効なリンクが定義されます。無効なリンクは、プロパティインスペクターの「リンク」テキストボックスで、javascript:; と表されます。リンク値を変更して、ヌルリンクを、別のページへの実際のリンクに変換することができます。ただし、JavaScript リンクを別のリンクに置き換えずに削除すると、ビヘイビアーが削除されます。

指定したブラウザーの特定のイベントで使用できるタグを確認するには、Dreamweaver¥Configuration¥Behaviors¥Events フォルダーに保存されているファイルの中から該当するイベントを検索してください。

ビヘイビアーの適用

ビヘイビアーはドキュメント全体（つまり、<body> タグ）、リンク、イメージ、フォームエレメント、およびその他一部の HTML エレメントに関連付けることができます。

選択するターゲットブラウザーによって、特定のエレメントに対してサポートされるイベントが決定します。

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

ページ上で、イメージまたはリンクなどのエレメントを選択します。

ビヘイビアーをページ全体に関連付けるには、ドキュメントウィンドウの左下にあるタグセレクターで <body> タグをクリックします。
ウィンドウ／ビヘイビアーを選択します。
「+」ボタンをクリックして、ビヘイビアーの追加メニューでアクションを選択します。

メニューで淡色表示になっているアクションは選択できません。淡色表示になっている原因として、必要なオブジェクトが現在のドキュメントに存在しないことが考えられます。例えば、ドキュメントに Shockwave または SWF ファイルがない場合は、「Shockwave および SWF のコントロール」アクションが淡色表示になります。

アクションを選択すると、そのアクションのパラメーターと使い方の説明を示すダイアログボックスが表示されます。
アクションのパラメーターを入力して、「OK」をクリックします。

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

注意：

ターゲットエレメントには一意の ID が必要です。例えば、イメージに「スワップイメージ」ビヘイビアーを適用する場合、そのイメージには ID が必要です。エレメントに ID が指定されていない場合、Dreamweaver により自動的に指定されます。
アクションを実行する初期設定のイベントは、「イベント」列に表示されます。これが必要なトリガーイベントでない場合は、イベントポップアップメニューで別のイベントを選択します。イベントメニューを開くには、ビヘイビアーパネルでイベントまたはアクションを選択して、イベント名とアクション名の間に表示される下向きの黒い矢印をクリックします。

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

ビヘイビアーを関連付けると、アクションを実行するイベントの変更、アクションの追加または削除、およびアクションのパラメーターの変更ができます。

ビヘイビアーが関連付けられているオブジェクトを選択します。
ウィンドウ／ビヘイビアーを選択します。
変更を加えます。
- アクションのパラメーターを編集するには、アクション名をダブルクリックするか、アクションを選択して Enter キー（Windows）または Return キー（Mac OS）を押します。さらに、ダイアログボックスでパラメーターを変更して、「OK」をクリックします。
- 特定のイベントに対するアクションの順序を変更するには、アクションを選択して、上矢印または下矢印をクリックします。または、アクションを選択して、そのアクションを他のアクション間の目的の場所にカット＆ペーストすることもできます。
- ビヘイビアーを削除するには、そのビヘイビアーを選択して「-」ボタンをクリックするか、Delete キーを押します。

ビヘイビアーの更新

ビヘイビアーが関連付けられているエレメントを選択します。
ウィンドウ／ビヘイビアーを選択し、ビヘイビアーをダブルクリックします。
ビヘイビアーのダイアログボックスで変更を行い、「OK」をクリックします。

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

サードパーティのビヘイビアーのダウンロードおよびインストール

Exchange for Dreamweaver の Web サイト（www.adobe.com/go/dreamweaver_exchange_jp）では、多くの拡張機能が提供されています。

ウィンドウ／ビヘイビアーを選択し、ビヘイビアーの追加メニューから「ビヘイビアーの追加」を選択します。

プライマリブラウザーが開き、Exchange のサイトが表示されます。
パッケージを参照または検索します。
必要な拡張機能パッケージをダウンロードおよびインストールします。

詳しくは、Dreamweaver の拡張機能を追加および管理するを参照してください。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る