Dreamweaver CC 2015 リリース（7 月リリース）のパッチにより、Dreamweaver で Adobe Creative Cloud デスクトップアプリケーションで指定されるプロキシサーバーの設定を利用できるようになります。詳しくは、プロキシサーバー設定の指定を参照してください。
最終更新日 :
2021年4月28日
複数のデバイスでの Web ページのプレビュー、Bootstrap 統合、コードビューの改善、Dreamweaver におけるその他の機能強化について説明します。
Dreamweaver CC の 2015 リリースでは、レスポンシブデザイン、コード編集機能の改善、デバイス上での Web ページのプレビュー、および Photoshop カンプの複数の解像度による Web 用に最適化された画像のバッチ抽出に重点が置かれています。Bootstrap フレームワークとの統合により、モバイルファーストのレスポンシブ Web サイトをビルドできます。ビジュアルメディアクエリーは様々なブレークポイントでのデザインの視覚化、変更により、Web デザインの操作をさらに補完します。
このリリースには、ライブビューと CSS デザイナーの編集機能に関する機能強化もいくつか含まれています。この記事では、これらの新機能と機能強化について説明し、詳細なヘルプや学習に役立つリソースへのリンクを示します。
デバイスプレビュー
Dreamweaver で、複数のデバイスで同時に Web ページを実稼働環境でテストできるようになりました。様々なフォームファクターで Web ページのフローを確認できるだけでなく、ページ上のインタラクティブな機能もテストできます。モバイルアプリをインストールしたり、デバイスをデスクトップに物理的に接続したりする必要はありません。自動生成された QR コードをデバイスでスキャンして、デバイスで Web ページをプレビューするだけです。
ライブインスペクトは、デスクトップでトリガーされると、接続されたすべてのデバイスに反映され、様々なエレメントを検証したり、必要に応じてデザインを調整したりできます。
詳しくは、複数のデバイスでの Web ページのプレビューと検証を参照してください。
ビジュアルメディアクエリー
ビジュアルメディアクエリーバーは、ページに存在するメディアクエリーを視覚的に表現したものです。これらのバーにより、様々なブレークポイントでの Web ページを表示したり、Web ページの各コンポーネントが異なるビューポートでどのように表示されるかを確認できます。ページを様々なビューポートで表示しながら、そのビューポートに固有のデザイン変更を、他のビューポートのページデザインに影響することなく行えます。
ビジュアルメディアクエリーは、それぞれがメディアクエリーのカテゴリーを表す水平の次の 3 つのバーで構成されます。
緑：max-width 条件付きメディアクエリー
青：min-width および max-width 条件付きメディアクエリー
紫： min-width 条件付きメディアクエリー
詳しくは、ビジュアルメディアクエリーを参照してください。
構文チェックコードのサポート
この新しいバージョンの Dreamweaver では、構文チェックを使用して一般的なエラーがないかコードをデバッグできるようになりました。構文チェックは、潜在的なエラーや、コードの疑わしい使用を特定するコードを解析するプロセスです。Dreamweaver では、HTML、CSS、JavaScript ファイルに対して、その読み込み時、保存時、編集時に構文チェックを実行できます。実行後、エラーや警告が新しい出力パネルに一覧表示されます。
詳しくは、構文チェックコードを参照してください。
Emmet のサポート
Dreamweaver を愛好してコード記述している開発者様の場合、Emmet 省略コードを使用することで時間を節約できます。記憶と入力が簡単なこれらの省略コードは、Tab キーを押したときに、コードビューで完全なコードに展開されます。
詳しくは、Emmet を使用したコードの挿入を参照してください。
コードビューでのプレビュー
分割ビューで作業した場合、画像またはカラーに行った変更をライブビューまたはデザインビューで瞬時に確認できますが、コードビューでのみ作業した場合、画像はファイル名のみが表示され、通常直感的な方法での作業は難しくなります。また、カラー（定義済みのカラーを除く）についても、わかりにくい一連の数字が表示されます。このバージョンの Dreamweaver では、コードビューで直接、画像やカラーを素早くプレビューできます。これにより、画像ファイル名やカラー形式と、それぞれが表す実際の画像やカラーとの関連性を視覚的に確認できます。その結果、デザインの決定を迅速に行って、開発時間を大幅に削減できます。
詳しくは、コードビューでの画像とカラーのプレビューを参照してください。
コードビューでは、エラープレビューも表示されます。エラーが含まれたコード行が赤でハイライト表示されます。数字をマウスでポイントすると、エラーの簡単な説明が表示されます。
注意：行内の最初のエラーのみが表示されます。行に警告のみが含まれる場合、警告の説明が表示されます。行に警告とエラーがあると、エラーの説明のみが表示されます。
新しくなったコードスニペット
スニペットは、プロジェクトで繰り返し再利用できるコードの特定部分です。このリリースの Dreamweaver では、新しい、また更新されたコードスニペットが提供されます。
- Boostrap スニペット
- CSS アニメーションおよびトランジション
- CSS 効果
- CSS スニペット
- HTML スニペット
- JavaScript スニペット（更新）
- PHP スニペット
- Preprocessor スニペット
- Responsive Design スニペット
コードスニペットの仕様について詳しくは、コードスニペットの操作を参照してください。
また、クラウドの同期機能を使用して、Dreamweaver のすべてのインストール間でコードスニペットを常に最新の状態に保てるようになりました。Creative Cloud やその他の Dreamweaver インストールでのコードスニペットの同期については、Dreamweaver 設定と Creative Cloud の同期を参照してください。
Bootstrap 統合
Bootstrap は、モバイルファーストのレスポンシブ Web サイトを開発するための最も一般的な無料の HTML、CSS、JavaScript フレームワークです。このフレームワークには Web ページで使用できるボタン、テーブル、ナビゲーション、画像カルーセルおよびその他のエレメント用のレスポンシブな CSS、HTML テンプレートが含まれています。また、オプションの JavaScript プラグインもいくつか含まれているため、コーディングの基本的な知識しか持たない開発者でも優れたレスポンシブ Web サイトを開発できます。
Dreamweaver では Bootstrap ドキュメントを作成できるだけでなく、Bootstrap を使って作成された既存の Web ページの編集も行えます。新規ドキュメントダイアログボックス（スターターテンプレート／Bootstrap Templates）でいずれかの Bootstrap スターターテンプレートを選択して、Bootstrap Web サイトのデザインを開始できます。
- Bootstrap-エージェンシー
- Bootstrap-eコマース
- Bootstrap-ポートフォリオ
- Bootstrap-製品
- Bootstrap-不動産
- Bootstrap-履歴書
新規ドキュメントダイアログボックス（新規ドキュメント／Bootstrap）からカスタムの Bootstrap ドキュメントを作成することもできます。次に、Dreamweaver の挿入パネルでアコーディオン、カルーセルなどの Bootstrap コンポーネントを使用して、Web サイトを 1 つずつ構築します。または、Photoshop カンプがある場合は、Extract を使って画像、フォント、スタイル、テキストなどを Bootstrap ドキュメントに取り込みます。
完全に設計された Bootstrap ファイルであるか制作中の設計であるかを問わず、Dreamweaver で開いて、コードの編集だけでなく、ライブビューでの編集、ビジュアル CSS デザイナー、ビジュアルメディアクエリー、Extract などの視覚的な編集機能を使用して編集できます。
注意：
Bootstrap フレームワークバージョン 3 以前を使用して作成した Web サイトの場合、エレメントの表示および非表示用のビジュアル編集ツールや、編集行および列（追加、サイズ変更、オフセット）は Dreamweaver では使用できません。
詳しくは、Bootstrap ファイルの作業を参照してください。
ライブビューでのテーブル編集のサポート
次のオプションのいずれかまたは組み合わせを使用して、ライブビューでテーブルを編集できます。
- エレメントディスプレイの「書式設定」オプション
- 修正／テーブルメニュー
詳しくは、テーブルのサイズ変更およびテーブルおよびセルのフォーマットを参照してください。
ライブビューの新しいメニュー
ライブビューの編集機能が改善されました。ライブビューで次のメニューを使用できるようになりました。
- 修正
- フォーマット
- コマンド
- サイト
- 「編集」およびコンテキストメニューの「ペーストスペシャル」
ライブビューでの jQuery UI エレメントのサポート
挿入パネルを使用して、ライブビューに jQuery Widget を直接挿入できるようになりました。挿入パネルからライブビューに必要なエレメントをドラッグし、マウスを長押しして、次の機能を使用して挿入します。
- ライブガイド：挿入パネルから必要なエレメントをドラッグした後、ライブビューでエレメントにカーソルを合わせると表示されます。ライブガイドでは、フォーカスがあるエレメントの上、下、左、または右にエレメントを挿入できます。
- DOM アイコン：ライブガイドの表示中に動作をしばらく停止すると DOM アイコンが表示されます。アイコンをクリックしてポップアップに DOM 構造を表示し、ドキュメント構造内の正確な位置にエレメントをドロップします。
- 配置サポート機能：エレメントを（ライブビュー内の）フォーカスがあるエレメントの前または後ろに挿入するか、内部にネストすることができます。
注意：
上記の機能が表示されるかどうかは、挿入するエレメントによって異なります。
詳しくは、ライブビューにエレメントを直接挿入するを参照してください。
DOM パネル
エレメントクイックビューは DOM パネルに変わりました（Windows／DOM）。DOM パネルは、エレメントクイックビューのすべての機能を備えるだけでなく、さらに機能が追加されています。このパネルはすべてのワークスペースで使用でき、また永続的です。つまり、2 つのドキュメントを開いたとき、それぞれの DOM パネルも開いて同時にアクセスできます。
DOM パネルでは、次の操作を実行できます。
- 挿入パネルからエレメントをドラッグして、ドキュメント構造に正確に挿入
- ドキュメントに構造エレメントをコピー、ペースト、複製、移動、または削除
- ドキュメント構造の文脈でページ上のエレメントを表示 - フォーカスがあるエレメントは DOM パネルでハイライト表示されます。
DOM パネルの使用方法やパネルを使用した HTML 構造の編集方法については、DOM パネルを参照してください。
HTML ドキュメントでの SVG コードヒント
HTML ドキュメントで SVG エレメントおよび属性すべてのコードヒントを利用できるようになりました。これらのコードヒントを使用して、SVG ドキュメントに追加するのと同じように、HTML ドキュメントのコードビューで SVG エレメントを追加できます。
テクノロジープレビュー
このリリース以降、Dreamweaver チームは特定の機能のプレビューを実施して、お客様からのフィードバックを収集します。フィードバックに基づいて、これらの機能はさらに改善され、Dreamweaver の主力機能として組み込まれます。こうした機能には、環境設定ダイアログボックスのテクノロジープレビューカテゴリーからアクセスできます。
このリリースのプレビュー機能はコードハイライトです。この機能は、コードビューで選択されているテキストのすべての出現箇所をハイライト表示します。
この機能を使用するには、次の手順を実行します。
-
環境設定／テクノロジープレビューに移動します。
-
「コードハイライト」を有効にします。次に、「適用」、「閉じる」の順にクリックし環境設定ダイアログボックスを閉じます。
-
コードハイライトを使用するドキュメントを開きます。HTML、JS、CSS、LESS など任意のドキュメントタイプでコードハイライトを使用できます。
-
コードビューでハイライト表示するテキスト（タグ、単語、句など）をダブルクリックします。
選択したテキストのすべての出現箇所がコードビューでハイライト表示されます。
次のキーボードショートカットを使用して、ハイライト表示されたテキスト間を移動できます。
- 次の出現箇所を選択します：F3（Windows）、Command+G（Mac）
- 前の出現箇所を選択します：Shift+F3（Windows）、Command+Shift+G（Mac）
ShowPreview API を使用したコードビューでのカスタムプレビュー
このリリースの Dreamweaver では、コードビューのコードをマウスでポイントしたときに表示されるカスタムプレビューポップアップを生成できます。カスタマイズしたプレビューを実装するには、新しい API である showPreview を既存の mm:browsercontrol API とともに使用します。例えば、これらの API を使用して、関数の名前の上にマウスポインターを置いたときに JavaScript 関数のすべてのパラメーターのプレビューを表示することができます。
詳しくは、Dreamweaver API リファレンス：コードビュー関数を参照してください。
コードの折りたたみ
以前のバージョンの Dreamweaver では、コードビューでコードブロックを選択して、折りたたむ必要がありました。このバージョン以降では、行番号をマウスでポイントし、表示された三角形をクリックするだけで、コードブロックを折りたためます。
コードの折りたたみは HTML、CSS、LESS、Sass、SCSS、JS、PHP、XML、SVG ファイルで、タグブロックベースで利用できます。
コピー、カット、ペースト、およびドラッグ＆ドロップ操作でコードの折りたたみ状態が保持されます。例えば、折りたたまれているコードブロックをコピーした場合、ペースト操作を実行すると、コピーされるテキストはブロックが折りたたまれた状態でペーストされます。
HTML ファイルでは、以前のコード折りたたみ機能と異なり、折りたたまれたコンテンツに閉じタグが含まれるようになり、レンダリングも以前と異なります。また、折りたたまれたコードブロックに表示される文字数が増えました。これにより、属性の初期値（ある場合）をプレビューできます。
詳しくは、コードの折りたたみを参照してください。
Extract の強化
デバイス向け Extract
デバイスごとにサイズも違えば、解像度も異なります。レスポンシブ Web デザインの計画では、様々な解像度の画像がデバイスで適切にレンダリングされることを考慮する必要があります。ただし、プロジェクトのすべての画像で多数の解像度バージョンを作成することは非常に根気の要る作業になる場合があります。
Dreamweaver の Extract なら、この作業を大幅に効率化できます。Dreamweaver の 2015 リリースで Photoshop カンプから画像を抽出するときに、その画像の各種バージョンの解像度も抽出できます。Photoshop の画像は抽出時に、事前に定義された様々な解像度で自動的に拡大縮小されます。
次に、これらの画像を JavaScript またはメディアクエリーで呼び出して、各デバイスに基づいて表示することができます。例えば、高密度の Retina ディスプレイの場合は、2X バージョンの画像を使用できます。
詳しくは、PSD ファイルから画像を抽出を参照してください。
％単位のサポート
Extract パネルで、画像の幅と高さを％値とピクセルで表示できるようになりました。計測値％を使って表示することもできます。
Extract パネルでアセットをクリックすると、ポップアップが表示され、％とピクセルを切り替えるオプションを指定できます。このポップアップで選択した単位は、アセット全体の測定値の表示で維持されます。
ライブビューの編集の強化
ライブビューでの挿入のネスト
ライブビューでエレメントを他のエレメント内に挿入できるようになりました。挿入パネル、アセットパネル、またはライブビュー内からエレメントをドラッグし、ページ上の様々なエレメントにカーソルを合わせると、エレメントのネストに関する視覚的なフィードバック（前と後のガイドと共に）が表示されることがわかります。
- 前／後ガイド：エレメントの上部と下部の30％範囲内をマウスでポイントすると表示されます。
- ネストに関する視覚的なフィードバック：エレメントの中央40％範囲内をマウスでポイントすると表示されます。
エレメントディスプレイで直接セレクターを編集する
エレメントディスプレイでセレクターの名前をクリックするだけで、簡単にセレクターを編集できるようになりました。ページ内の任意の場所をクリックして変更を確定できます。
コーディングツールバーの変更
CSS デザイナーの改善
「すべて」および「現在」モード
CSS デザイナーに CSS プロパティの表示および編集のための 2 つのモードが加わりました。
- すべて：現在のドキュメントのすべての CSS、メディアクエリー、セレクターが一覧表示されます。このモードは、デザインまたはライブビューの選択内容とは関係ありません。
このモードは、CSS、メディアクエリー、セレクターの作成に適しています。
- 現在：デザインまたはライブビューで選択したすべてのエレメントの計算されたスタイルが一覧表示されます。CSS ファイルでセレクターをポイントすると、そのセレクターのプロパティが表示されます。
プロパティ値のヒント
CSS デザイナーでコードビュー同様コードヒントが、新しいプロパティの設定用に表示されるようになりました。
メディアクエリーのカラーコーディング
CSS デザイナーパネルのメディアクエリーが、ビジュアルメディアクエリーに対応してカラーコード化されます。
- 緑：max-width 条件付きメディアクエリー
- 青：min-width および max-width 条件付きメディアクエリー
- 紫： min-width 条件付きメディアクエリー
その他の変更
- 「セットを表示」オプション：プロパティセクションで「セットを表示」チェックボックスが、Dreamweaver の初回起動時にデフォルトでオンに設定されるようになりました。このオプションに対する変更（オンまたはオフ）は、後続の Dreamweaver の全セッションで維持されます。
- パネルをスクロールして「プロパティの追加」を中央に表示：プロパティセクションで「+」をクリックすると、「プロパティの追加」行がパネルの中央に来るようにセクションがスクロールされます。プロパティセクションが小さすぎると、「プロパティの追加」行はパネルの下部に表示されます。
- 新しいプロパティの追加時に背景をハイライト表示：フォーカスが「新しいプロパティを追加」テキストボックスにあるとき、行がグレーの背景で強調表示されます。
- 「+」および「-」ボタンの位置の変更：CSS デザイナーパネルの各ペインに表示される「+」および「-」ボタンが目立つように、右端から左端に移動されました。
- カスタムカテゴリーの名前変更：カスタムプロパティのカテゴリー名が「その他」に変わりました。
テストサーバーのワークフローの変更
このリリースでのテストサーバーのワークフローは、サーバー側のコードを使用したライブビューでのドキュメント編集を簡単かつシームレスにすることを目的として改善されています。
サーバーのセットアップにおける変更
以前のバージョンの Dreamweaver とは異なり、特定のサーバーをテストサーバーまたはリモートサーバーのいずれかとして指定できるようになりました（両方を指定することはできません）。サーバー設定のユーザーインターフェイスのチェックボックスが、サーバーの仕様を強化する目的でラジオボタンに置き換えられました。
以前のバージョンの Dreamweaver で作成されたサイトを開いたり、その設定を読み込んだ場合、サイトにテストサーバーとリモートサーバーの両方として指定された 1 つのサーバーがあると、サーバーの重複したエントリが作成されます。1 つはリモートサーバーとして（_remote を末尾に付加）、もう 1 つはテストサーバーとして（_testing を末尾に付加）マークされます。
動的ファイルの自動プッシュ
Dreamweaver で、動的ドキュメントの表示時、作成時、また行った変更の保存時に、動的ドキュメントがテストサーバーに自動的に同期されるようになりました。テストサーバーのワークフローで「テストサーバーを更新」または「依存ファイルをプッシュ」ダイアログボックスは表示されなくなりました。
詳しくは、動的ファイルの自動プッシュを参照してください。
Business Catalyst のワークフローの変更点
Business Catalyst 拡張機能は終了し、Dreamweaver CC 2015 リリース以降で使用できなくなります。Dreamweaver CC 2014.1.1 が Business Catalyst 拡張機能と互換性のある最後のリリースです。
Business Catalyst と Dreamweaver CC 2015 リリースを併用するには、Dreamweaver で SFTP 接続オプションを使用します。詳しくは、Business Catalyst ドキュメントを参照してください。
この変更の公式発表については、Business Catalyst Web サイトをご覧ください。
その他の変更
- 挿入パネルが、一般、レイアウト、およびメディアカテゴリーのすべてのオプションをより論理的なカテゴリー、HTML にグループ化するよう再構成されました。
- ミニツアーのビデオと、ヘルプメニューからそれらを起動するリンクは削除されます。このオプションは英語以外のロケールでも使用できません。
- ページの下部にあるドキュメントバーのドロップダウンで「方向」、「フルサイズ」、「サイズの編集」オプションのみが利用できるようオプションが整理されました。
