Dreamweaver Web ページでのメディアオブジェクトの挿入と編集、デザインノートの使用などを行う方法について説明します。

Dreamweaver ドキュメントには、SWF ファイルや FLV ファイルだけでなく、その他のオーディオオブジェクトやビデオオブジェクトを追加することもできます。メディアオブジェクトのアクセシビリティ属性を挿入してあれば、HTML コードでアクセシビリティ属性の設定と属性値の編集を行うことができます。

  1. ドキュメントウィンドウ内でオブジェクトを挿入する場所に挿入ポイントを置きます。
  2. オブジェクトを挿入するには、以下のいずれかの操作を行います。
    • 挿入パネルの「HTML」カテゴリー内で、挿入するオブジェクトタイプのアイコンを選択します。

    • 挿入/HTML サブメニューから、適切なオブジェクトを選択します。

    • ソースファイルの選択と当該メディアオブジェクトに対するパラメーターの指定を行うダイアログボックスが表示されます。

    注意:

    このダイアログボックスを表示しないようにするには、編集/環境設定/一般(Windows)または Dreamweaver/環境設定/一般(Mac OS)を選択して、「オブジェクト挿入中にダイアログを表示」オプションをオフにします。ダイアログボックスの表示に関して設定されているあらゆる環境設定を無効にするには、Ctrl キー(Windows)または Option キー(Mac OS)を押しながらオブジェクトを挿入します。 

  3. ファイルの選択ダイアログボックスの入力を完了させ、「OK」をクリックします。

    注意:

    編集/環境設定ダイアログボックスでメディアを挿入するときに、属性の表示を選択した場合は、<挿入メディア> のアクセシビリティ属性ダイアログボックスが表示されます。

  4. アクセシビリティ属性の設定

    注意:

    また、オブジェクトを選択してコードビューで HTML コードを編集するか、オブジェクトを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)して「タグコードの編集」を選択することにより、メディアオブジェクト属性を編集することもできます。

    タイトル

    メディア オブジェクトのタイトルを入力します。

    アクセスキー

    テキストボックスに、ブラウザーでフォームオブジェクトを選択する際に使用するキーボードの文字(1 文字)を入力します。これにより、サイトのビジターは Ctrl キー(Windows)とアクセスキーを同時に押すことでオブジェクトを選択できるようになります。例えば、アクセスキーとして「B」を入力すると、Ctrl+B キーでブラウザー内のオブジェクトを選択できます。

    タブインデックス

    フォームオブジェクトのタブ順序の番号を入力します。タブ順序を設定しておくと、ページに他のリンクやフォームオブジェクトがある場合に、Web サイトのビジターは、Tab キーを使用して特定の順序でオブジェクト間を移動できます。1 つのオブジェクトに対してタブ順序を設定したら、他のすべてのオブジェクトについてもタブ順序を設定するようにしてください。

  5. 「OK」をクリックしてメディアオブジェクトを挿入します。

    注意:

    Dreamweaver で「キャンセル」をクリックすると、メディアオブジェクトのプレースホルダーがドキュメント内に表示されますが、アクセシビリティタグや属性はこのプレースホルダーに関連付けられません。

    ソースファイルを指定する場合、または次元およびその他のパラメーターと属性を設定する場合は、各オブジェクトのプロパティインスペクターを使用します。オブジェクトのアクセシビリティ属性を編集できます。

メディアファイルに使用する外部エディターの起動

ほとんどのメディアファイルは、Dreamweaver から外部エディターを起動して編集できます。ファイルの編集用に Dreamweaver から起動するエディターを指定することもできます。

  1. メディアファイルのタイプが、使用しているシステムのエディターに関連付けられていることを確認します。

    ファイルタイプに関連付けられているエディターを調べるには、Dreamweaver で編集/環境設定を選択し、カテゴリリストから「ファイルタイプ/エディター」を選択します。「拡張子」列でファイルの拡張子をクリックすると、関連付けられているエディターが「エディター」列に表示されます。ファイルタイプに関連付けられているエディターを変更することができます。

  2. ファイルパネルでメディアファイルをダブルクリックして、外部エディターで開きます。

    ファイルパネルでファイルをダブルクリックしたときに起動するエディターをプライマリエディターといいます。例えば、イメージファイルをダブルクリックすると、Dreamweaver によって Adobe Fireworks などのプライマリ外部エディターが起動され、このイメージファイルが開かれます。

  3. ファイルの編集にプライマリ外部エディターを使用しない場合は、以下のいずれかの操作で、システムにある別のエディターを使用してファイルを編集できます。
    • ファイルパネルでファイル名を右クリックするか(Windows)、Control キーを押しながらクリックし(Mac OS)、コンテキストメニューから「ツールを指定して開く」を選択します。

    • デザインビューで現在のページ内のデザインエレメントを右クリックするか(Windows)、Control キーを押しながらクリック(Mac OS)し、コンテキストメニューから「エディターを指定して編集」を選択します。

Dreamweaver から起動するエディターの指定

Dreamweaver でファイルタイプを編集する際に使用するエディターを指定できます。また、Dreamweaver によって認識されるファイルタイプを追加または削除できます。

特定のファイルタイプについて起動する外部エディターの明示的な指定

  1. 編集/環境設定を選択し、カテゴリリストから「ファイルタイプ/エディター」を選択します。

    例えば、.gif、.wav、.mpg などのファイル名の拡張子が「拡張子」の左下に一覧表示されます。選択した拡張子に関連付けられている外部エディターが「エディター」の右下に一覧表示されます。

  2. 拡張子リストでファイルタイプの拡張子を選択し、以下のいずれかの操作を行います。
    • ファイルタイプに新しいエディターを関連付けるには、エディターリストの上にある「+」ボタンをクリックして表示されたダイアログボックスに情報を入力します。

      例えば、ファイルタイプに Acrobat を関連付けるには、Acrobat のアプリケーションアイコンを選択します。

    • あるエディターをファイルタイプのプライマリエディター(ファイルパネルでそのファイルタイプをダブルクリックした時に起動するエディター)にするには、エディターリストからそのエディターを選択して「プライマリエディターに設定」をクリックします。

    • エディターとファイルタイプの関連付けを解除するには、エディターリストでそのエディターを選択し、エディターリストの上にある「-」ボタンをクリックします。

新しいファイルタイプの追加とエディターの関連付け

  1. 拡張子リストの上にある「+」ボタンをクリックしてファイルタイプの拡張子(拡張子の前に付くピリオド(.)を含む)を入力します。複数の拡張子を関連付けるには、それぞれをスペースで区切って入力します。

    例えば、システムにインストールされている XML エディターに .xml と .xsl を関連付けるには、「.xml .xsl」と入力します。

  2. エディターリストの上にある「+」ボタンをクリックして表示されたダイアログボックスに情報を入力し、そのファイルタイプのエディターを選択します。

ファイルタイプの削除

  1. 拡張子リストでファイルタイプを選択し、拡張子リストの上にある「-」ボタンをクリックします。

    注意:

    ファイルタイプは、一度削除すると元に戻せないので、よく確認してから削除してください。

メディアオブジェクトでのデザインノートの使用

Dreamweaver の他のオブジェクトと同様に、デザインノートをメディアオブジェクトに追加できます。デザインノートとは、特定のファイルに関連付けられたノートで、そのファイルとは別のファイルに格納されています。デザインノートを使用すると、イメージソースファイル名やファイル状態のコメントなどの、ドキュメントに関連付けられた付加ファイル情報を継続的に管理できます。

  1. ドキュメントウィンドウで、オブジェクトを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)します。

    注意:

    オブジェクトにデザインノートを追加する前に、サイトを定義する必要があります。

  2. コンテキストメニューから「ページのデザインノート」を選択します。
  3. デザインノートに、必要な情報を入力します。

    注意:

    ファイルパネルでファイルを選択し、コンテキストメニューを表示して、コンテキストメニューから「デザインノート」を選択することによって、デザインノートをメディアオブジェクトに追加することもできます。

FLV 以外のビデオの追加

Web ページには、異なるフォーマットを使用して、いくつかの方法でビデオを追加することができます。ビデオは、ユーザーの PC にダウンロードしたり、ダウンロード中に再生するようにストリーミングすることが可能です。

  1. サイトフォルダーにクリップを置きます。

    このようなクリップは通常、AVI または MPEG ファイル形式で作成されています。

  2. クリップへのリンクを作成するか、ページにクリップを埋め込みます。

    クリップへのリンクを作成するには、"クリップのダウンロード" などのリンクテキストを入力します。そのテキストを選択して、プロパティインスペクターでフォルダーアイコンをクリックします。ビデオファイルを選択します。

    注意:

    Real Media、QuickTime、Windows Media などの一般的なストリーミングフォーマットを表示するには、対応するアプリケーション(プラグイン)をダウンロードする必要があります。

プラグインコンテンツの挿入

ブラウザープラグイン用の QuickTime ムービーなどのコンテンツを作成し、Dreamweaver を使用してそのコンテンツを HTML ドキュメントに挿入できます。よく使用されるプラグインとしては RealPlayer と QuickTime がありますが、コンテンツファイルの中には MP3 ムービーと QuickTime ムービーが組み込まれているものがあります。

ブラウザープラグインで実行するムービーやアニメーションをドキュメントウィンドウのデザインビューで直接プレビューできます。一度にプラグイン要素すべてを再生して、ページがユーザーに対してどのように表示されるかを確認することも、プラグイン要素を 1 つずつ再生して、適切なメディア要素が埋め込まれていることを確認することもできます。

注意:

ActiveX コントロールで実行するムービーやアニメーションはプレビューできません。

プラグインのコンテンツを挿入した後、プロパティインスペクターを使用して、そのコンテンツのパラメーターを設定します。プロパティインスペクターで、以下のプロパティを表示するには、プラグインオブジェクトを選択します。

最初、プロパティインスペクターには、最も一般的に使用するプロパティが表示されます。右下隅にある縮小の三角形をクリックすると、すべてのプロパティが表示されます。

プラグインコンテンツの挿入とプロパティの設定

  1. ドキュメントウィンドウのデザインビューで、コンテンツの挿入ポイントを配置してから、次のいずれかの操作を行います。
    • 挿入パネルの「一般」カテゴリで「メディア」ボタンをクリックし、メニューからプラグインアイコン をクリックします。

    • 挿入/メディア/プラグインを選択します。

  2. 表示されるダイアログボックスで、 プラグインのコンテンツファイルを選択し、「OK」をクリックします。
  3. プロパティインスペクター内のプラグインオプションを設定します。

    名前

    スクリプト処理に使用するプラグインを識別する名前を指定します。プロパティインスペクターの左端にあるラベルの付いていないテキストボックスに名前を入力します。

    幅および高さ

    ページ上のオブジェクトに割り当てる幅と高さをピクセル単位で指定します。

    ソース

    ソースデータファイルを指定します。フォルダーアイコンをクリックして、ファイルを参照するか、ファイル名を入力します。

    プラグイン URL

    pluginspace 属性の URL を指定します。ユーザーがプラグインをダウンロードできるサイトの完全な URL を入力します。ページを表示するユーザーがプラグインを持っていない場合、ブラウザーはこの URL からプラグインをダウンロードしようとします。

    行揃え

    ページ上のオブジェクトの整列方法を指定します。

    縦間隔と横間隔

    それぞれプラグインの上部と下部、左と右に残すホワイトスペースの量をピクセル単位で指定します。

    ボーダー

    プラグインの周囲にある境界線の幅を指定します。

    パラメーター

    プラグインに渡す追加のパラメーターを入力するためのダイアログボックスが表示されます。多くのプラグインは、特別なパラメーターに対応します。

    また、「属性」ボタンをクリックすると、選択したプラグインに割り当てられている属性を表示できます。このダイアログボックスで、幅や高さなどの属性の編集、追加、および削除ができます。

ドキュメントウィンドウでのプラグインコンテンツの再生

  1. 前のセクションで説明した方法のいずれかを使用し、1 つまたは複数のメディア要素を挿入します。
  2. 次のいずれかの操作を実行します。
    • 挿入したメディア要素の 1 つを選択し、表示/プラグイン/再生を選択するか、プロパティインスペクターの「再生」ボタンをクリックします。

    • 表示/プラグイン/すべて再生を選択すると、選択したページにある、プラグインで実行するメディア要素をすべて再生できます。

    注意:

    「すべて再生」は、現在のドキュメントだけに適用されます。例えば、フレームセットの他のドキュメントには適用されません。

プラグインコンテンツの再生の停止

  1. メディア要素を選択して、表示/プラグイン/停止を選択するか、プロパティインスペクターの「停止」ボタンをクリックします。

    表示/プラグイン/すべて停止を選択すると、すべてのプラグインコンテンツの再生を停止できます。

プラグインのトラブルシューティング

ドキュメントウィンドウでプラグインコンテンツを再生するための手順に従っても、プラグインコンテンツの一部が再生されない場合は、次の操作を試みます。

  • 関連するプラグインがコンピューターにインストールされていることと、使用しているプラグインのバージョンとコンテンツが互換性のあることを確認します。

  • テキストエディターで Configuration/Plugins/UnsupportedPlugins.txt ファイルを開き、問題のあるプラグインが一覧表示されているかどうかを確認します。このファイルには、Dreamweaver で不具合が発生するためにサポートされていないプラグインが記録されています。特定のプラグインによって問題が生じた場合は、そのプラグインをこのファイルに追加します。

  • 十分なメモリ容量があることを確認します。一部のプラグインには、実行のためにさらに 2 ~ 5 MB のメモリ容量が必要です。

ビヘイビアーを使用したメディアの制御

ビヘイビアーをページに追加して、様々なメディアオブジェクトを開始および停止することができます。

Shockwave および Flash のコントロール

Shockwave ムービーまたは SWF ファイルで再生、停止、巻き戻し、フレームへの移動を行います。

サウンドの再生

サウンドを再生します。例えば、ユーザーがマウスのポインターをリンク上で移動させるたびに、サウンドエフェクトを再生することができます。

プラグインのチェック

サイトのビジターが、必要なプラグインをインストールしているか確認できます。ビジターが適切なプラグインを持っているかどうかによって、ビジターを異なる URL へ導きます。この処理は プラグインにのみ適用されます。これは、「プラグインのチェック」ビヘイビアーでは ActiveX コントロールに対しては確認を行わないためです。

パラメーターを使用したメディアオブジェクトの制御

SWF ファイルやプラグインを制御するための特別なパラメーターを定義できます。パラメーターは、objectembedapplet の各タグと組み合わせて使用します。パラメーターによって、オブジェクトの様々なタイプ固有の属性が設定されます。例えば、SWF ファイルの場合、object タグに対して quality パラメーター <paramname="quality"value="best"> を使用できます。パラメーターダイアログボックスは、プロパティインスペクターからアクセスできます。使用するオブジェクトに必要なパラメーターについて詳しくは、そのオブジェクトのマニュアルを参照してください。

注意:

ActiveX コントロールのデータファイルを識別するために、一般的に使用されているような標準パラメーターはありません。どのパラメーターを使用するかについては、使用している ActiveX コントロールのマニュアルを参照してください。

パラメーターの名前および値を入力します。

  1. ドキュメントウィンドウで、パラメーターを含めることのできるオブジェクトを選択します。

  2. プロパティインスペクターが開いていない場合は開いて、プロパティインスペクターの下半分に表示されている「パラメーター」ボタンをクリックします。ただし、プロパティインスペクターが展開されていることを確認してから実行します。

  3. 「+」ボタンをクリックし、該当する列にパラメーター名と値を入力します。

パラメーターの削除

  1. パラメーターを選択して、「–」ボタンを押します。

パラメーターの並び替え

  1. パラメーターを選択して、上向き矢印と下向き矢印のボタンを使用します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー