マニュアル キャンセル

Dreamweaver でのカスタムサーバービヘイビアーの追加

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト
  19. トラブルシューティング
    1. 修正された問題
    2. 既知の問題

 

 

注意:

Dreamweaver 以降では、ユーザーインターフェイスが簡素化されています。そのため、この記事で説明されているオプションの一部が Dreamweaver 以降には存在しない場合があります。詳しくは、こちらの記事を参照してください。

カスタムサーバービヘイビアーについて

Dreamweaver には、サイトに動的な機能を簡単に追加できる組み込みのサーバービヘイビアーのセットが用意されています。開発の目的に合わせて新しいサーバービヘイビアーを作成したり、Dreamweaver Exchange の Web サイトからサーバービヘイビアーをダウンロードしたりすることによって、Dreamweaver の機能をさらに強化することもできます。

独自のサーバービヘイビアーを作成する前に、Dreamweaver Exchange の Web サイトを調べて、Web サイトに追加しようとしている機能と同じ機能を持つサーバービヘイビアーを他のユーザーが既に作成していないか確認してください。用途に合ったサーバービヘイビアーをサードパーティのデベロッパーが既に作成し、テスト済みとなっていることもよくあります。

Dreamweaver Exchange へのアクセス

  1. Dreamweaver では、次のいずれかの操作を行って、Dreamweaver Exchange にアクセスします。
    • ヘルプ/Dreamweaver Exchange を選択します。

    • ウィンドウ/サーバービヘイビアーを選択し、「+」ボタンをクリックして、「サーバービヘイビアーの追加」を選択します。

    Dreamweaver Exchange の Web ページがブラウザーに表示されます。

  2. Adobe ID を使用して Exchange にログオンします。Dreamweaver Exchange ID を取得していない場合は、説明に従って Adobe アカウントを作成します。

Dreamweaver へのサーバービヘイビアーまたはその他の拡張機能のインストール

  1. コマンド/拡張機能の管理を選択して、Extension Manager を起動します。
  2. Extension Manager で、ファイル/拡張機能の管理を選択します。

    詳しくは、『Extension Manager の使用』を参照してください。

カスタムサーバービヘイビアーのワークフロー

ColdFusion、JavaScript、VBScript、または PHP に精通した Web デベロッパーであれば、自分でサーバービヘイビアーを記述することもできます。サーバービヘイビアーを作成する手順は、次のとおりです。

  • 目的のアクションを実行するコードブロックを記述します。

  • ページの HTML コードのどこにコードブロックを挿入するかを指定します。

  • サーバービヘイビアーがパラメーター値の指定を必要とする場合は、ダイアログボックスを作成して、Web デベロッパーが適切な値をビヘイビアーに指定できるようにします。

  • 他のユーザーが使用できるように公開する前に、サーバービヘイビアーをテストします。

サーバービヘイビアービルダーの使用

サーバービヘイビアービルダーを使用すると、ビヘイビアーによってページに挿入されるコードブロックを追加できます。

  1. サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)を開いて「+」ボタンをクリックし、「新規サーバービヘイビアー」を選択します。
  2. ドキュメントタイプポップアップメニューから、開発するサーバービヘイビアーのドキュメントタイプを選択します。
  3. 「名前」ボックスにサーバービヘイビアーの名前を入力します。
  4. 「名前」ボックスにサーバービヘイビアーの名前を入力します。「OK」をクリックします。

    サーバービヘイビアービルダーダイアログボックスが表示されます。

  5. 新しいコードブロックを追加するには、「+」ボタンをクリックし、コードブロック名を入力して 「OK」をクリックします。

    入力した名前がサーバービヘイビアービルダーに表示され、「コードブロック」ボックスには適切なスクリプトタグが表示されます。

  6. 「コードブロック」ボックスに、サーバービヘイビアーの実装に必要なランタイムコードを入力します。
    注意:

    「コードブロック」ボックスにコードを入力する場合、それぞれの名前付きコードブロック(myBehavior_block1myBehavior_block2myBehavior_blockn など)に入力できるタグまたはコードブロックは 1 つのみです。複数のタグまたはコードブロックを入力する場合は、コードブロックを必要な数だけ作成します。コードはページ間でコピー&ペーストできます。

  7. コードブロック内のパラメーターを挿入する場所に挿入ポイントを置くか、パラメーターに置き換えるストリングを選択します。
  8. 「コードブロックにパラメーターを挿入」ボタンをクリックします。
  9. 「パラメーター名」ボックスにパラメーターの名前(例えば、「Session」)を入力し、「OK」をクリックします。

    パラメーターを定義する前に挿入ポイントを置いたコードブロック内の位置に、そのパラメーターが挿入されます。ストリングを選択した場合は、コードブロック内の選択したストリングのすべてのインスタンスがパラメーターマーカーに置き換えられます。例えば、@@Session@@ に置き換えられます。

  10. コードの挿入ポップアップメニューから、コードブロックを埋め込む場所を指定するオプションを選択します。
  11. (オプション)サーバービヘイビアーについての追加情報を指定するには、「詳細設定」ボタンをクリックします。
  12. 複数のコードブロックを作成するには、手順 5 ~ 11 を繰り返します。
  13. サーバービヘイビアーにパラメーターが必要な場合は、ビヘイビアーを適用するユーザーがパラメーターを指定するためのダイアログボックスを作成する必要があります。以下のリンクを参照してください。
  14. サーバービヘイビアーを作成するのに必要な手順を実行したら、「OK」をクリックします。

    サーバービヘイビアーの一覧がサーバービヘイビアーパネルに表示されます。

  15. サーバービヘイビアーが正しく動作するかどうかをテストします。

高度なオプション

各コードブロックにソースコードとその挿入場所を指定すれば、サーバービヘイビアーの定義は完了です。ほとんどの場合、追加情報を指定する必要はありません。

上級ユーザーの方は、必要に応じて、以下のオプションを設定することができます。

識別子

コードブロックを識別子として処理するかどうかを指定します。

初期設定では、すべてのコードブロックは識別子です。ドキュメント内で識別子コードブロックが Dreamweaver により検出されると、サーバービヘイビアーパネルにそのビヘイビアーが表示されます。「識別子」オプションを使用して、コードブロックを識別子として処理するかどうかを指定します。

サーバービヘイビアーのコードブロックのうち少なくとも 1 つは、識別子にする必要があります。ただし、別のサーバービヘイビアーで同じコードブロックが使用される場合、またはコードブロックが非常にシンプルで、ページで普通に使用される可能性が高い場合は、そのコードブロックを識別子にしないでください。

サーバービヘイビアータイトル

サーバービヘイビアーパネルのビヘイビアーのタイトルを指定します。

ページデザイナーがサーバービヘイビアーパネルで「+」ボタンをクリックすると、新しいサーバービヘイビアーのタイトルがポップアップメニューに表示されます。デザイナーがサーバービヘイビアーのインスタンスをドキュメントに適用すると、そのビヘイビアーがサーバービヘイビアーパネルの適用済みビヘイビアーのリストに表示されます。「+」ポップアップメニューのコンテンツと適用済みビヘイビアーのリストを指定するには、「サーバービヘイビアータイトル」ボックスを使用します。

このボックスの初期値は、新規サーバービヘイビアーダイアログボックスで指定した名前です。パラメーターを定義すると、自動的にこの名前が更新され、サーバービヘイビアー名の後のカッコ内にパラメーターが表示されます。

Set Session Variable (@@Name@@, @@Value@@)

ユーザーが初期設定値を受け入れる場合は、カッコの前にあるすべてのコードが「+」ポップアップメニューに表示されます。この例ではセッション変数の設定が表示されます。名前とパラメーターは、適用済みビヘイビアーのリストに表示されます。ここでは、セッション変数の設定("abcd", "5")となります。

選択するコードブロック

ユーザーがサーバービヘイビアーパネルでビヘイビアーを選択したとき、選択された状態で表示するコードブロックを指定します。

サーバービヘイビアーを適用すると、ビヘイビアーのコードブロックの 1 つが「選択するコードブロック」に指定されます。サーバービヘイビアーを適用してからサーバービヘイビアーパネルでそのビヘイビアーを選択すると、指定されたブロックがドキュメントウィンドウで自動的に選択されます。初期設定では、Dreamweaver は html タグより後にあるコードブロックの中で、最初のコードブロックを選択します。すべてのコードブロックが html タグより前にある場合は、その中で最初のコードブロックが選択されます。上級ユーザーの方は、選択された状態にするコードブロックを指定できます。

コードブロックの作成

サーバービヘイビアービルダーで作成したコードブロックは、サーバービヘイビアーにカプセル化され、サーバービヘイビアーパネルに表示されます。コードは、指定されたサーバーモデルに対して有効なランタイムコードになります。例えば、カスタムサーバービヘイビアーのドキュメントタイプとして ColdFusion を選択した場合は、記述するコードは、ColdFusion アプリケーションサーバーで実行可能な ColdFusion コードにする必要があります。

サーバービヘイビアービルダーで直接コードブロックを作成することも、他のソースからコードをコピー&ペーストすることもできます。サーバービヘイビアービルダーで作成するコードブロックは、それぞれが 1 つのタグまたはスクリプトブロックである必要があります。複数のタグブロックを挿入する必要がある場合は、それらを個別のコードブロックに分割します。

コードブロックの条件

Dreamweaver では、条件付きで実行される制御ステートメントを持つコードブロックを作成できます。サーバービヘイビアービルダーでは ifelseif、および else ステートメントを使用します。必要に応じてサーバービヘイビアーパラメーターを含めることもできます。これにより、サーバービヘイビアーパラメーター間の OR 関係の値に基づいて切り替わるテキストブロックを挿入できます。

次の例では、ifelseif、および else ステートメントを示します。角カッコ([])はオプションのコードを表し、アスタリスク(*)は 0 個以上のインスタンスを表します。コードブロックの一部またはコードブロック全体を特定の条件でのみ実行するには、次のシンタックスを使用します。

<@ if (expression1) @>    conditional
text1[<@ elseif (expression2) @>    conditional text2]*[<@ else @> 
    conditional text3]<@ endif @>

条件は、eval() 関数で評価可能な JavaScript の条件式で表し、必要に応じて、@@ によってマークされるサーバービヘイビアーパラメーターを含めます(@@ は、JavaScript の変数とキーワードをパラメーターと区別します)。

条件式の効果的な使用

ifelse、および elseif ディレクティブを insertText XML タグ内で使用する場合、if ディレクティブを特定し、結果にどのテキストを含めるかを決定するために、構成要素テキストが事前に処理されます。if および elseif ディレクティブでは、式が引数として使用されます。条件式は、JavaScript の条件式と同じで、サーバービヘイビアーパラメーターを含めることもできます。このようなディレクティブを使用すると、サーバービヘイビアーパラメーターの値、またはそれらの関係に基づいて代替コードブロックを選択できます。

例えば、次の JSP コードは、条件付きコードブロックを使用する Dreamweaver サーバービヘイビアーのものです。

@@rsName@@.close(); 
<@ if (@@callableName@@ != '') @> 
@@callableName@@.execute(); 
@@rsName@@ = @@callableName@@.getResultSet();<@ else @> 
@@rsName@@ = Statement@@rsName@@.executeQuery(); 
<@ endif @> 
@@rsName@@_hasData = @@rsName@@.next();

条件付きコードブロックは、<@ if(@@callableName@@ != '')@> で始まり、<@ endif @> で終わります。コードに従い、サーバービヘイビアーのパラメーターダイアログボックスで @@callableName@@ パラメーターにユーザーが値を入力すると(つまり、@@callableName@@ パラメーター値がヌルまたは (@@callableName@@ != '') でない場合)、条件付きコードブロックは次のステートメントに置き換えられます。

@@callableName@@.execute(); 
@@rsName@@ = @@callableName@@.getResultSet();

それ以外の場合は、コードブロックは次のステートメントに置き換えられます。

@@rsName@@ = Statement@@rsName@@.executeQuery();

コードブロックの配置

サーバービヘイビアービルダーを使用してコードブロックを作成する場合、ページの HTML コードのどこにコードブロックを挿入するか指定する必要があります。

例えば、コードブロックを <html> 開始タグの前に挿入するには、そのコードブロックの位置を、そのページの HTML コードのセクションにある他のタグ、スクリプト、サーバービヘイビアーに対する相対位置で指定します。典型的な例には、先頭の <html> 開始タグより前のページコードの中にもレコードセットクエリーが存在する場合があるときに、レコードセットクエリーの前または後のどちらにサーバービヘイビアーを配置するかを指定するというのがあります。

コードの挿入ポップアップメニューで挿入位置のオプションを選択すると、相対位置ポップアップメニューで選択できるオプションは、ページのその挿入箇所に関連するオプションを指定するものに変更されます。例えば、コードの挿入ポップアップメニューで「<html> タグの上」を選択すると、相対位置ポップアップメニューでは、ページのその部分に関連した選択項目に変更されます。

次の表は、コードブロックの挿入オプションと、それに対応する相対位置オプションを示しています。

「コードの挿入」オプション

「相対位置」オプション

<html> タグの上

  • ファイルの先頭

  • レコードセットのすぐ前

  • レコードセットのすぐ後

  • <html> タグのすぐ上

  • カスタム位置

</html> タグの下

  • ファイルの終わりの前

  • レコードセットのクローズの前

  • レコードセットのクローズの後

  • </html> タグの後

  • カスタム位置

特定タグに対する相対位置

タグポップアップメニューからタグを選択し、タグの挿入オプションを選択します。

選択範囲に対する相対位置

選択範囲の前

選択範囲の後

選択範囲を置換

選択範囲を囲む

カスタム位置を指定する場合は、コードブロックに「ウェイト」を割り当てる必要があります。複数のコードブロックを特定の順序で挿入する必要がある場合は、「カスタム位置」オプションを使用します。例えば、レコードセットを開くコードブロックの後に 3 つのコードブロックを順に挿入するには、最初のブロックに 60、2 つ目のブロックに 65、3 つ目のブロックに 70 のウエイトを入力します。

Dreamweaver では、<html> タグの前に挿入された、レコードセットを開くコードブロックすべてに初期設定で 50 のウエイトが割り当てられます。2 つ以上のブロックのウエイトが同じ場合は、Dreamweaver によりブロック間の順序がランダムに設定されます。

コードブロックの配置(一般的な方法)

  1. サーバービヘイビアービルダーを使用して、コードブロックを記述します。
  2. サーバービヘイビアービルダーダイアログボックスで、コードの挿入ポップアップメニューからコードブロックを挿入する場所を選択します。
  3. サーバービヘイビアービルダーダイアログボックスで、コードの挿入ポップアップメニューで選択した場所に対する相対位置を選択します。
  4. コードブロックの作成が完了したら、「OK」をクリックします。

    サーバービヘイビアーの一覧がサーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)に表示されます。「+」ボタンをクリックして、サーバービヘイビアーを表示します。

  5. サーバービヘイビアーが正しく動作するかどうかをテストします。

ページの他のタグに対する相対位置へのコードブロックの配置

  1. コードの挿入ポップアップメニューから「特定タグに対する相対位置」を選択します。
  2. 「タグ」ボックスにタグを入力するか、ポップアップメニューからタグを 1 つ選択します。

    タグを入力するときは、山カッコ(< >)を使用しないでください。

  3. 相対位置ポップアップメニューからオプションを選択し、指定済みのタグに対する相対位置を指定します。

ページデザイナーが選択したタグに対する相対位置へのコードブロックの配置

  1. コードの挿入ポップアップメニューから「選択範囲に対する相対位置」を選択します。
  2. 相対位置ポップアップメニューからオプションを選択し、ページデザイナーによる選択範囲に相対位置を指定します。

    選択範囲の直前または直後に、コードブロックを挿入できます。選択範囲をコードブロックに置き換えることも、前後をコードブロックで囲むこともできます。

    選択範囲をコードブロックで囲む場合は、次に示すように、選択範囲には開始タグと終了タグのみがあり、両タグの間には何もないようにします。

    <CFIF Day=”Monday”></CFIF>

    コードブロックの開始タグ部分は選択範囲の開始タグの前に挿入し、コードブロックの終了タグ部分は選択範囲の終了タグの後に挿入します。

ループディレクティブによるコードブロックの繰り返し

コードブロックの一部またはコードブロック全体を繰り返すには、次のシンタックスを使用します。

<@ loop (@@param1@@,@@param2@@) @>    code
block<@ endloop @>

サーバービヘイビアーを作成するときには、ループ構造を使用して、コードブロックを指定された回数繰り返すことができます。<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @> code block <@ endloop @>ループディレクティブでは、引数として、コンマで区切られたパラメーター配列を使用します。この場合、ユーザーはパラメーター配列引数を使用して、1 つのパラメーターに対して複数の値を指定できます。繰り返すテキストは、n 回複製されます。ここで、n はパラメーター配列の引数の長さを表します。複数のパラメーター配列引数を指定する場合は、すべての配列を同じ長さにする必要があります。ループの i 回目の検証で、パラメーター配列の i 番目のエレメントは、コードブロックの関連するパラメーターインスタンスを置換します。

後でサーバービヘイビアーにダイアログボックスを作成するときに、ページデザイナーがパラメーター配列の作成に使用できるコントロールをそのダイアログボックスに追加することができます。Dreamweaver には、ダイアログボックスの作成に利用できる簡単な配列コントロールが用意されています。このコントロールは、テキストフィールドコンマ区切りリストと呼ばれ、サーバービヘイビアービルダーから使用できます。より複雑なユーザーインターフェイスエレメントを作成するには、API マニュアルで、配列を作成するためのコントロール(グリッド コントロールなど)を持つダイアログボックスの作成に関する項目を参照してください。

条件およびループディレクティブは、いくつでも条件ディレクティブ内にネストできます。例えば、ある条件が true であればループを実行するように指定できます。

次の例は、このような繰り返しコードブロックを使用してサーバービヘイビアーを作成する方法を示します。この例は、ストアードプロシージャへのアクセスに使用される ColdFusion ビヘイビアーです。

<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>    code block 
<@ endloop @>
<CFSTOREDPROC procedure="AddNewBook" 
    datasource=#MM_connection_DSN# 
    username=#MM_connection_USERNAME# 
    password=#MM_connection_PASSWORD#> 
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#" 
    cfsqltype="CF_SQL_INTEGER"> 
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" 
    cfsqltype="CF_SQL_VARCHAR"> 
</CFSTOREDPROC>

この例では、CFSTOREDPROC タグの中に CFPROCPARAM タグが含まれますが、条件によってはない場合もあります。ただし、ループディレクティブがない場合は、CFPROCPARAM タグを CFSTOREDPROC タグの中に含めることはできません。ループディレクティブを使用せずに、これをサーバービヘイビアーとして作成する場合には、メインの CFSTOREDPROC タグと、複数のタイプの構成要素を持つ CFPROCPARAM タグの 2 つに分割する必要があります。

ループディレクティブを使用すると、同じプロシージャを次のように記述できます。

<CFSTOREDPROC procedure="@@procedure@@" 
datasource=#MM_@@conn@@_DSN# 
username=#MM_@@conn@@_USERNAME# 
password=#MM_@@conn@@_PASSWORD#> 
<@ loop (@@paramName@@,@@value@@,@@type@@) @> 
    <CFPROCPARAM type="IN" 
    dbvarname="@@paramName@@" 
    value="@@value@@" 
    cfsqltype="@@type@@"> 
<@ endloop @> 
</CFSTOREDPROC>
注意:

"@>" の後の新しい行は無視されます。

ユーザーが、サーバービヘイビアーのダイアログボックスに、次のパラメーター値を入力するとします。

procedure = "proc1" 
conn = "connection1" 
paramName = ["@CategoryId", "@Year", "@ISBN"] 
value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"] 
type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]

この場合、サーバービヘイビアーは、次のランタイムコードをページに挿入します。

<CFSTOREDPROC procedure="proc1" 
datasource=#MM_connection1_DSN# 
username=#MM_connection1_USERNAME# 
password=#MM_connection1_PASSWORD#> 
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#" 
    cfsqltype="CF_SQL_INTEGER"> 
<CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#" 
    cfsqltype="CF_SQL_INTEGER"> 
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" 
    cfsqltype="CF_SQL_VARCHAR"> 
</CFSTOREDPROC>
注意:

パラメーター配列は、条件ディレクティブ式の一部として使用する場合を除き、ループの外では使用できません。

ループディレクティブの _length 変数および _index 変数の使用

ループディレクティブには、埋め込まれた if 条件で使用可能な 2 つの組み込み変数があります。この変数は、_length_index です。変数 _length は、ループディレクティブによって処理される配列の長さを評価します。一方、変数 _index は、ループディレクティブの現在のインデックスを評価します。変数がディレクティブとしてのみ認識され、実際のパラメーターとしてループに渡されないようにするには、どちらの変数も @@ で囲まないでください。

組み込み変数をページディレクティブの属性 import に適用することができます。属性 import では、パッケージをコンマで区切ってください。loop ディレクティブが属性 import 全体にかかる場合、1 回目のループでは属性名 import= のみを出力します。これには、終了の二重引用符(")が含まれます。ループの最後の反復ではコンマは出力されません。組み込み変数を使用して、次のように記述します。

<@loop (@@Import@@)@> 
<@ if(_index == 0)@>import=" 
<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>, 
<@ endif @> 
<@endloop@>

サーバービヘイビアーのパラメーターの要求

多くのサーバービヘイビアーでは、ページデザイナーがパラメーター値を指定する必要があります。この値は、サーバービヘイビアーのコードがページに挿入される前に指定する必要があります。

ダイアログボックスを作成するには、デザイナー指定パラメーターをコードに定義します。次に、サーバービヘイビアーが必要とするパラメーター値をページデザイナーが入力できるようにするダイアログボックスを生成します。

注意:

ページデザイナーが選択した特定のタグに対して相対的にコードが挿入されるように指定した場合、つまり、コードの挿入ポップアップメニューから「特定タグに対する相対位置」を選択した場合は、コードブロックにパラメーターが自動的に追加されます。このパラメーターにより、ビヘイビアーのダイアログボックスにタグメニューが追加され、ページデザイナーがタグを選択できるようになります。

サーバービヘイビアーコードでのパラメーターの定義

  1. 指定されたパラメーター値を挿入するコードに、パラメーターマーカーを入力します。パラメーターのシンタックスは、次のとおりです。
    @@parameterName@@
  2. formParam ストリングをパラメーターマーカー(@@)で囲みます。
    <% Session(“lang_pref”) = Request.Form(“@@formParam@@”); %>

    例えば、サーバービヘイビアーに次のコードブロックが含まれるとします。

    <% Session(“lang_pref”) = Request.Form(“Form_Object_Name”); %>

    Form_Object_Name の値をページデザイナーが指定できるようにするには、パラメーターマーカー(@@)でストリングを囲みます。<% Session(“lang_pref”) = Request.Form(“@@Form_Object_Name@@”); %>

    <% Session(“lang_pref”) = Request.Form(“@@Form_Object_Name@@”); %>

また、ストリングをハイライト表示してから、「コードブロックにパラメーターを挿入」ボタンをクリックすることもできます。パラメーター名を入力して、「OK」をクリックします。Dreamweaver によって、ハイライト表示されたストリングのすべてのインスタンスが、パラメーターマーカー内に指定したパラメーター名に置き換えられます。

Dreamweaver は、パラメーターマーカーで囲まれたストリングを使用して、生成するダイアログボックスのコントロールのラベルを指定します(以下の手順を参照してください)。前述の例では、Dreamweaver は次のラベルを使用してダイアログボックスを作成します。

注意:

サーバービヘイビアーのコードのパラメーター名には、スペースは使用できません。したがって、ダイアログボックスのラベルにはスペースを指定できません。ラベルにスペースを含めるには、生成した HTML ファイルを編集します。

パラメーター名の入力

パラメーター値を要求するサーバービヘイビアーのダイアログボックスの作成

  1. サーバービヘイビアービルダーで「次へ」をクリックします。
  2. ダイアログボックスでのコントロールの表示順を変更するには、パラメーターを選択してから、上向き矢印または下向き矢印をクリックします。
  3. パラメーターのコントロールを変更するには、パラメーターを選択してから、「表示」列で別のコントロールを選択します。
  4. 「OK」をクリックします。

    Dreamweaver によって、定義したそれぞれのデザイナー指定パラメーターに対して、ラベル付きコントロールを持つダイアログボックスが生成されます。

ダイアログボックスの表示

  1. サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)の「+」ボタンをクリックして、ポップアップメニューからカスタムサーバービヘイビアーを選択します。

サーバービヘイビアー用に作成したダイアログボックスの編集

  1. ウィンドウ/サーバービヘイビアーメニューコマンドを選択してサーバービヘイビアーパネルを開き、「+」ボタンをクリックして、ポップアップメニューから「サーバービヘイビアーを編集」を選択します。
  2. リストからサーバービヘイビアーを選択し、「編集」をクリックします。
  3. 「次へ」をクリックします。

    コードで定義したデザイナー指定パラメーターがすべてリストされているダイアログボックスが表示されます。

  4. ダイアログボックスでのコントロールの表示順を変更するには、パラメーターを選択してから、上向き矢印または下向き矢印をクリックします。
  5. パラメーターのコントロールを変更するには、パラメーターを選択してから、「表示」列で別のコントロールを選択します。
  6. 「OK」をクリックします。

サーバービヘイビアーの編集と修正

サーバービヘイビアービルダーで作成したサーバービヘイビアーは、すべて編集可能です。Dreamweaver Exchange の Web サイトからダウンロードしたサーバービヘイビアーや、サードパーティ製のサーバービヘイビアーも同様です。

サーバービヘイビアーをページに適用してから、Dreamweaver でそのビヘイビアーを編集すると、以前のビヘイビアーのインスタンスはサーバービヘイビアーパネルに表示されなくなります。サーバービヘイビアーパネルでは、認識しているサーバービヘイビアーのコードと一致するコードのページを検索します。サーバービヘイビアーのコードを変更すると、そのページ上にある変更前のビヘイビアーは認識されなくなります。

パネルでの変更前と変更後の両方のビヘイビアーの保持

  1. サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)の「+」ボタンをクリックし、「新規サーバービヘイビアー」を選択して、変更前にサーバービヘイビアーのコピーを作成しておきます。

サーバービヘイビアービルダーで作成したサーバービヘイビアーのコードの編集

  1. ウィンドウ/サーバービヘイビアーを選択してサーバービヘイビアーパネルを開き、「+」ボタンをクリックして、ポップアップメニューから「サーバービヘイビアーを編集」を選択します。

    サーバービヘイビアーを編集ダイアログボックスに現在のサーバーテクノロジに対応するビヘイビアーがすべて表示されます。

  2. サーバービヘイビアーを選択し、「編集」をクリックします。
  3. 適切なコードブロックを選択し、コード、パラメーターマーカー、またはページに挿入するコードブロックの位置を修正します。
  4. 修正したコードにデザイナー指定パラメーターが含まれていない場合は、「OK」をクリックします。

    Dreamweaver によりダイアログボックスを表示しないサーバービヘイビアーが再生成されます。サーバービヘイビアーパネルの「+」ポップアップメニューに、この新しいサーバービヘイビアーが追加されます。

  5. 修正したコードにデザイナー指定パラメーターが含まれている場合は、「次へ」をクリックします。

    以前のダイアログボックスに上書きして新しいダイアログボックスを作成するかどうか Dreamweaver によりたずねられます。変更を加え、「OK」をクリックします。

    Dreamweaver によって、すべての変更がサーバービヘイビアーの EDML ファイルに保存されます。

コーディングのガイドライン

一般に、サーバービヘイビアーのコードは、簡潔かつ強固であることが必要です。Web アプリケーションデベロッパーは、自分の作成したページに追加されるコードに対してはきわめて慎重です。ColdFusion、JavaScript、VBScript、PHP などの各ドキュメントタイプの言語で一般的に使用されているコーディング方法に従ってください。コメントを記述する際は、Web デザイナー、インタラクションデザイナー、他の Web アプリケーションデベロッパーなど、別の技術を専門とするユーザーもコードが理解できるように考慮する必要があります。コードの目的を正確に説明するコメント、およびページに設定するための指示を記述します。

サーバービヘイビアーを作成する際、以下に示すコーディングのガイドラインに留意してください。

エラーチェック

重要な要件。エラーに対して適切に対処できるように、サーバービヘイビアーのコードを作成しておく必要があります。あらゆるエラーの可能性を予測する努力が必要です。例えば、パラメーター要求が失敗するとどうなるか、クエリーから何もレコードが戻されない場合はどうなるか、などについて考慮します。

固有の名前

コードを明確に識別できるだけでなく、既存のコードで使用されている名前との競合を避けることができます。例えば、ページに hideLayer() という関数と ERROR_STRING というグローバル変数が含まれている場合、作成したサーバービヘイビアーによってこれらと同じ名前のコードが挿入されると、既存のコード内でサーバービヘイビアーの競合が発生します。

コード接頭辞

作成したランタイム関数やグローバル変数をページ内で容易に識別できます。よく使用される方法として、自分のイニシャルを接頭辞として追加する方法があります。MM_ という接頭辞は、Dreamweaver 専用の接頭辞として割り当てられているので使用しないでください。Dreamweaver では、すべての関数とグローバル変数の前に接頭辞 MM_ を付けて、ユーザーが作成したコードとの名前の競合を回避しています。

var MM_ERROR_STRING = "..."; 
function MM_hideLayer() {

類似したコードブロックを作成しない

自分で作成したコードと他のブロック内のコードが酷似しないようにします。ページの 1 つのコードブロックが他のコードブロックと酷似していると、サーバービヘイビアーパネルで、最初のコードブロックが 2 番目のコードブロックのインスタンスとして(またはその逆として)、誤って識別される可能性があります。この問題を簡単に回避するには、コードブロックにコメントを追加して、他のコードブロックと区別します。

サーバービヘイビアーのテスト

Dreamweaver Exchange では、作成したサーバービヘイビアーごとに、次のテストを実行することをお勧めします。

  • サーバービヘイビアーパネルでビヘイビアーを適用します。ダイアログボックスが表示されたときは、各フィールドに有効なデータを入力し、「OK」をクリックします。ビヘイビアーを適用したときに、エラーが発生しないかどうかを確認します。サーバービヘイビアーのランタイムコードが「コードインスペクター」に表示されていることを確認します。

  • もう一度サーバービヘイビアーを適用し、ダイアログボックスの各フィールドに無効なデータを入力してみます。フィールドを空白のままにする、大きい数値や負の数値を入力する、無効な文字(/、?、:、* など)を入力する、数値フィールドに文字を入力するなどの方法でテストします。無効なデータを処理するフォームバリデートルーチンを記述します。バリデートルーチンにはハンドコーディングが含まれますが、本マニュアルでは取り上げません。

    作成したサーバービヘイビアーが正常にページに適用されたら、次のテストを実行します。

  • サーバービヘイビアーパネルで、サーバービヘイビアー名が、ページに追加されたビヘイビアーのリストに表示されているかどうかを確認します。

  • サーバーサイドスクリプトを使用する場合は、そのアイコンがページに表示されているかどうかを確認します。一般的なサーバーサイドスクリプトのアイコンは、金の盾の形です。アイコンを表示するには、表示/ビジュアルエイドを選択し、「不可視エレメント」を有効にします。

  • コードビュー(表示/コード)で、無効なコードが生成されていないことを確認します。

    また、サーバービヘイビアーで、ドキュメントにデータベースへの接続を確立するコードを挿入している場合は、テスト用データベースを作成し、そのドキュメントに挿入されているコードをテストします。種類やサイズの異なるデータセットを生成するクエリーを定義して、接続が確立できるか確認します。

    最後に、ページをサーバーにアップロードし、ブラウザーでそのページを開きます。ページの HTML ソースコードを表示して、サーバーサイドスクリプトによって無効な HTML コードが生成されていないか確認します。

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

新規ユーザーの場合

Adobe MAX 2025

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

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