スニペットでコードを再利用する

コードブロックを複数回繰り返す場合は、コードスニペットを使用して、コードを記述するプロセスを効率化できます。一度コードを記述して、スニペットとして保存しておくと、スニペットパネルでそれをダブルクリックして複数の場所に挿入できます。

スニペットパネルを使用して作成したスニペットはサイト固有のものではないので、サイト間で再利用できます。同期設定を使用して、異なるデバイス間、および異なるバージョンの Dreamweaver 間でスニペットを使用することもできます。

Dreamweaver には複数のコードスニペットが付属しています。ただし、独自のコードスニペットを作成して保存することもできます。

次の使用事例を参照して、ワークフローのどの段階でスニペットを使用できるかを確認してください。

• 特定のデザインの標準に従う組織に勤務している場合、または複数のプロジェクトに携わっているフリーランスのデザイナーの場合。どちらの場合でも、コードスニペットを使用すれば、共通するコードの一部をスニペットとして保存してコードに挿入することで、デザインの統一性を実現できます。
• いくつかのコーディングの標準を定義、維持および適用する必要がある場合は、コードスニペットが役立ちます。
• Web ページでレスポンシブなエレメントをハンドコーディングする作業には時間がかかることがあります。スニペットパネルの「Bootstrap_Snippets（Bootstrap スニペット）」または「Responsive Design スニペット」セクションで、いくつかのスニペット（例えば、レスポンシブテーブルのコードスニペット）を使用します。1 回クリックするだけで、レスポンシブテーブルに約 20 行のコードが挿入されました。
  必要に応じて、テーブルを編集します。列や行を結合または追加したり、お好みのスタイルを指定したりできます。さらに、コードを選択して新しいスニペットとして保存し、作成するその他のすべてのページで再利用できます。コードスニペットの作成について詳しくは、スニペットの作成を参照してください。
• JavaScript ビヘイビアー、CSS 効果および CSS スタイルもコードの再利用に最適な候補です。

スニペットパネル

Dreamweaver では、スニペットパネル（ウィンドウ／スニペット）を使用してコードスニペットを管理できます。

スニペットパネルは、コードの一部を集めたものです。

スニペットパネルの機能

スニペットパネルを使用すると、次のタスクを実行できます。

フォルダーを展開してコードスニペットに移動し、スニペットをダブルクリックするか、または挿入アイコンをクリックしてカーソル位置にスニペットを挿入します。コードスニペットの既存のテキストを折り返すには、テキストを選択してスニペットを挿入します。これにより、テキストがコードスニペット内で折り返されます。詳しくは、スニペットの挿入を参照してください。

直感的な命名規則を使用してスニペットをフォルダーに格納することでスニペットを管理します。スニペットフォルダーを作成するには、新規フォルダーアイコンをクリックします。新しいスニペットフォルダーは、選択したノード内に作成されます。スニペットフォルダーの場所を変更するには、目的の場所にフォルダーをドラッグします。詳しくは、スニペットフォルダーの作成を参照してください。

事前にパッケージ化されたスニペットを使用し、それらを編集して独自のコードスニペットを作成します。または独自のスニペットを新規に作成し、後で再利用するためにスニペットパネルに保存します。詳しくは、スニペットの作成を参照してください。

既存のスニペットを編集するには、スニペットを選択して、編集アイコンをクリックします。詳しくは、スニペットの編集を参照してください。

不要なスニペットを削除します。スニペットを削除するには、スニペットを選択して、削除アイコンをクリックします。

スニペットの名前を変更するには、スニペットを右クリックしてコンテキストメニューを開きます。「Rename snippet（スニペットの名前を変更）」を選択し、新しいスニペットの名前を入力します。

トリガーキーを使用すると、直感的な短いコードを作成できます。このコードを入力すれば、スニペットパネルで特定のスニペットに移動して、そのスニペットを挿入する必要がなくなります。トリガーキーを定義済みの場合は、コード内の目的の位置にカーソルを置きます。次に、トリガーキーのテキストを入力して、Tab キーを押します。コードスニペットがコードに挿入されます。詳しくは、トリガーキーの追加およびトリガーキーを使用したコードスニペットの挿入を参照してください。

スニペットの挿入

コード内のカーソルを置いた位置にコードスニペットを挿入できます。

スニペットの作成

スニペットの編集

既存のスニペットを変更するには、次の操作を実行できます。

• スニペットを右クリックして、Edit Snippet（スニペットを編集）ダイアログを開きます。
• スニペットを選択して、パネルの下部にある Edit Snippet（スニペットを編集）アイコンをクリックします。

スニペットを編集する場合、ドキュメント内のスニペットの既存のインスタンスは更新されません。

スニペットダイアログ内のすべてのフィールド（名前、説明、トリガーキー、コードなど）を編集できます。

スニペットフォルダーの作成

トリガーキーの追加およびトリガーキーを使用したコードスニペットの挿入

コードスニペットを簡単に追加するには、トリガーキーを使用します。

最初に、よく使用されるすべてのスニペットにトリガーキーを割り当てます。次に、コードビューでトリガーキーのテキストを入力して Tab キーを押すと、カーソル位置にスニペットが追加されます。

複数のデバイス間でスニペットを配布する方法

Dreamweaver のクラウドの同期機能を使用すると、2 台のコンピューター間でスニペットの同期を維持できます。

Dreamweaver の同期設定機能を使用して、Dreamweaver のあるインスタンスを使用して作成したスニペットを、Dreamweaver を実行している別のコンピューターに移植します（例えば、オフィスと自宅にある Dreamweaver のインストール環境）。 

設定を同期するには、次の操作を実行します。