新しい Dreamweaver CC 2014 リリースでは、ライブビューと CSS デザイナーの機能が強化され、Web コンテンツやモバイルコンテンツの作成および更新が容易になりました。新しいエレメントクイックビュー機能で HTML マークアップを簡単に表示、ナビゲート、編集できます。

この記事では、これらの新機能およびその他の様々な機能強化について説明し、詳細なヘルプと学習に役立つリソースへのリンクを示します。

エレメントクイックビュー

静的および動的コンテンツの両方のインタラクティブ HTML ツリーを表示する新しいエレメントクイックビューを使用して、ドキュメントのマークアップを確認します。HTML ツリー内の静的コンテンツの構造を適切に変更します。 

エレメントクイックビュー
エレメントクイックビュー

エレメントクイックビュー(表示/エレメントクイックビュー)は、開発プロセスの効率化を図るために導入されました。以前のバージョンの Dreamweaver では、HTML エレメントをライブビューで強調表示し、コードビューに切り替えてエレメントを編集していました。編集後に変更をプレビューするために、ライブビューに再度切り替えていました。現在は、エレメントクイックビューを使用して、読みやすい 1 つのビューでページのすべてのエレメントを表示し、静的コンテンツを編集できます。

詳しくは、エレメントクイックビューを参照してください。

ライブビューの新しい編集機能

ライブビューで HTML エレメントのプロパティをインスペクトおよび正しく変更し、何も更新せずに、どのように表示されるかを確認できます。

クイックプロパティインスペクター

ライブビューで、ページの HTML エレメントのクイックプロパティインスペクターが表示されるようになりました。クイックプロパティインスペクターでは、選択した HTML エレメントに基づいて、属性またはテキストをライブビューで直接編集できます。

クイック PI でイメージ属性を編集
クイック PI でイメージ属性を編集

ライブビュー PI でテキストを書式設定
クイック PI でテキストを書式設定

詳しくは、クイックビュープロパティインスペクターを参照してください。

エレメントディスプレイ

新しいエレメントディスプレイでは、ライブビューで直接 HTML エレメントとクラスおよび ID を関連付けることができます。エレメントディスプレイに使用可能なクラスと ID が表示されるため、必要なオプションをすばやく表示および選択できます。

エレメントディスプレイでクラスと ID を編集
エレメントディスプレイでクラスと ID を編集

詳しくは、HTML エレメントとクラス/ID の関連付けを参照してください。

テキストのライブ編集

ライブビューでテキストを直接編集して、ビューを切り替えることなく変更をプレビューできるようになりました。

編集モードに切り替えるには、ライブビューのテキストエレメントをダブルクリックします。詳しくは、ライブビューでテキストを直接編集するを参照してください。

ライブビューでテキストを直接編集するテキストのライブ編集
ライブビューでテキストを直接編集する

ライブビュープロパティインスペクター

ライブビューで利用可能になったプロパティインスペクターにより、デザインビューまたはコードビューに切り替えずにページを簡単に編集できるようになりました。

詳しくは、ライブビュープロパティインスペクターを参照してください。

ライブビュープロパティインスペクター
ライブビュープロパティインスペクター

ライブでの挿入

このリリースでは、挿入パネルを使用して、ライブビューに HTML エレメントを直接挿入できます。エレメントは、モードを切り替える必要なくリアルタイムに挿入されます。変更をすばやくプレビューすることもできます。 

詳しくは、ライブビューにエレメントを直接挿入するを参照してください。

挿入パネルからライブビューにドラッグ&ドロップ
挿入パネルからライブビューにドラッグ&ドロップ

CSS デザイナーの機能強化

境界線コントロールのユーザーインターフェイスの強化

簡単で直観的な方法で 4 辺すべての境界線プロパティを設定できるタブ付きのコントロール。

  • タブ付きのコントロールにより一度にすべての値を表示するのを避け、混乱を軽減。
  • 初心者にわかりやすい直観的なアイコン。
  • 設定解除または削除された状態と無効化された状態を示す 2 組のアイコン。
  • すべての境界線プロパティを一括設定できる「すべての辺」タブ。
  • 検査中に最も適切なタブへ移動させるための計算行。 
Dreamweaver CC 2014 リリース以前の境界線のコントロールプロパティ
Dreamweaver CC 2014 リリース以前の境界線のコントロールプロパティ

Dreamweaver CC 2014 リリースの境界線のコントロールプロパティ
Dreamweaver CC 2014 リリースの境界線のコントロールプロパティ

詳しくは、境界線のプロパティを設定を参照してください。

スタイルのコピー&ペースト

1 つのセレクターから別のセレクターに、スタイルをコピーしてペーストできます。すべてのスタイルをコピーすることも、レイアウト、テキスト、境界線などの特定のスタイルのカテゴリーのみコピーすることもできます。

セレクターを右クリックし、使用可能なオプションから選択します。

CSS デザイナーを使用したスタイルのコピー
CSS デザイナーを使用したスタイルのコピー

  • セレクターにスタイルが存在しない場合、「スタイルをコピー」および「すべてのスタイルをコピー」は無効になります。
  • 編集できないリモートサイトでは、「スタイルをペースト」は無効ですが、「スタイルをコピー」および「すべてのスタイルをコピー」は使用できます。
  • セレクターに部分的に存在するスタイル(オーバーラップ)はペーストできます。すべてのセレクターの Union はペーストされます。
  • スタイルのコピー/ペーストは、異なるリンケージの CSS ファイル(読み込み、リンク、インラインスタイル)で使用できます。

クイック編集テキストボックス

Dreamweaver に、マージン、余白、境界線、境界線の半径などのプロパティのショートハンドコードを指定できるクイック編集テキストボックスが追加されました。この変更は、プロパティの指定用にマウスまたはキーボードを使うコードを指定したいユーザーのために行われました。 

クイック編集テキストボックス
クイック編集テキストボックス

プロパティの指定
プロパティの指定

カスタムプロパティのワークフローの機能強化

以前は、「その他」(またはカスタム)のプロパティを追加するには、CSS デザイナーのプロパティペインで「+」をクリックしていました。現在は、プロパティリストの最後で、一連のテキストボックス(プロパティ名と値)がすぐに使用できるようになっています。これらのテキストボックスで、「+」をクリックせずにプロパティ名と値を直接入力することができます。

さらにカスタムプロパティの行を追加するには、Tab キーを押します。

「その他」のプロパティグループの名前が「カスタム」に変更されます。

プロパティ名と値を追加するテキストボックス
プロパティ名と値を追加するテキストボックス

キーボードショートカット

キーボードショートカットを使用して、CSS セレクターおよびプロパティの追加や削除ができるようになりました。また、プロパティペインでプロパティグループ間を移動することもできます。

ショートカット ワークフロー
Ctrl+Alt+[Shift =] キー セレクターを追加(コントロールがセレクターセクションにある場合)
Ctrl+Alt+S キー セレクターを追加(コントロールがアプリケーションの任意の場所にある場合)
Ctrl+Alt+[Shift =] キー プロパティを追加(コントロールがプロパティセクションにある場合)
Ctrl+Alt+P キー プロパティを追加(コントロールがアプリケーションの任意の場所にある場合)
Select+Delete キー セレクターを削除(セレクターが選択されている場合)
Ctrl+Alt+(PgUp または PgDn)キー セクション間をジャンプ(コントロールがプロパティサブパネルにある場合)

セレクターの詳細化/省略化

このリリースでは、Dreamweaver はセレクターを追加する際に最大 3 つのルールヒントを表示します。上向きまたは下向き矢印キーを使用してセレクターを詳細化または省略化できます。

セレクターの詳細化/省略化
セレクターの詳細化/省略化

カテゴリーにスクロール

以前は、CSS デザイナーのプロパティペイン上部にある「背景」または「その他」カテゴリーをクリックすると、そのカテゴリーがペインに表示されるはずでしたが、実際には、カテゴリーはペイン上部には表示されませんでした。

現在は、「背景」および「その他」(カスタムという名前に変更されています)カテゴリーをクリックすると、そのカテゴリーがペイン上部に表示されます。

カテゴリーにスクロール
カテゴリーにスクロール

ID ファイルを使用した SFTP 接続のサポート

Dreamweaver CC 2014 リリースでは、プライベートキーと公開キーのペアおよび ID キーを使用して(パスフレーズを使用することも使用しないこともできます)、SFTP 経由で公開サーバーに接続できます。Dreamweaver へのこの機能強化により、選択できる Web ホスティングサービスプロバイダーの数が増えました。認証にプライベートキーと公開キーのペアを使用する必要があるサービスプロバイダーであれば、いずれのプロバイダーにもサブスクライブできます。

注意:

Dreamweaver は OpenSSH キーファイルのみをサポートします。

詳しくは、SFTP 接続を参照してください。

取り消しとやり直しの機能強化

これまでは、CSS デザイナーパネルで実行した操作の取り消しまたはやり直しを実行するには、CSS ファイル(関連ファイル内)をクリックし、操作の取り消しまたはやり直しをする必要がありました。 

現在は、取り消しとやり直しの機能が強化され、操作の取り消しまたはやり直しをドキュメントのライブビューまたは CSS デザイナーパネルから直接実行できるようになりました。これらの変更は、関連付けられた CSS ファイルに自動的に反映されます。関連ファイルが変更されたことを知らせるために、影響を受けるファイルのタブがしばらくの間、強調表示されます(約 8 秒)。

  • CSS デザイナーパネルからアクションの取り消しまたはやり直しを行うと、ライブビューは自動的に更新されます。
  • ソースコードを使用してドキュメントを編集し、ライブビューからその変更を取り消すと、表示が分割ビューに変更され、関連するソースコードにフォーカスが置かれます。

取り消しとやり直しのアクションはすべて、HTML ファイルレベルで記録されます。そのため、CSS ファイルへの手動での変更は、関連するどのファイルからでも取り消すことができます。例えば、style1.css と style2.css が index.html に関連しているとします。style1.css で .h1 のスタイルを追加し、style2.css から取り消しを行うと、style1.css から .h1 スタイルが削除されます。 

注意:

JavaScript ファイルの変更の取り消しまたはやり直しを行うには、それぞれの JS ファイルに切り替えてから取り消しまたはやり直しを実行してください。 

Business Catalyst および PhoneGap Build のワークフローの変更点

Business Catalyst および PhoneGap Build を Dreamweaver のアドオンとして使用できるようになりました。Business Catalyst と PhoneGap Build を拡張機能としてインストールした後、これらのサービスを従来どおりに使用できます。

Business Catalyst および PhoneGap Build の拡張機能をインストールするには、管理/アドオンを参照に移動し、拡張機能を検索して、インストールします。

Dreamweaver の拡張機能へのアクセスの変更点

Adobe Creative Cloud を使用して、Dreamweaver の拡張機能を表示およびインストールできるようになりました。拡張機能は「アドオン」と呼ばれます。

Adobe Creative Cloud のアドオンを参照するには、Dreamweaver のウィンドウ/アドオンを参照をクリックします。Adobe Creative Cloud アドオンページが表示されます。 

Dreamweaver CC 13.0 のウィンドウ/拡張機能
Dreamweaver CC 13.0 のウィンドウ/拡張機能

Dreamweaver CC 2014 のウィンドウ/アドオンを参照
Dreamweaver CC 2014 リリースのウィンドウ/アドオンを参照

アドオンのインストールについて詳しくは、アドオンを参照してください。

同期設定の変更点

Dreamweaver の同期設定機能により、コンピューターと Creative Cloud との間で Dreamweaver インスタンスの設定の同期を維持できます。以前のバージョンの Dreamweaver の同期設定を有効にし、Creative Cloud からこれらの設定を読み込めるようにしている場合、その設定が Dreamweaver CC 2014 リリースで自動的に検出されます。

Dreamweaver CC 2014 リリースをインストール後、最初に起動したときに、次のダイアログボックスが表示されます。

同期設定を読み込む
同期設定を読み込む

  • Creative Cloud に保存した設定を読み込むには、「同期設定を読み込む」をクリックしてください。

注意:このオプションは、後で選択することはできません。

  • 現在の Dreamweaver インスタンスの設定を Creative Cloud と同期するには、「ローカルで同期」をクリックします。
  • 設定を自動的に同期するには、「常に設定を自動的に同期」を選択します。
  • 高度な同期設定オプションを表示するには、「詳細設定」をクリックします。

Dreamweaver からバグ/機能リクエストを直接送信

Dreamweaver 内のほしい物リストフォームやバグレポートに直接アクセスできるようになりました(ヘルプ/不具合の報告/製品への要望)。

ヘルプメニューの「バグ/機能リクエストを送信」
ヘルプメニューの「バグ/機能リクエストを送信」

ヘルプセンター

新しくなったヘルプセンターで、新機能の使用方法や、Dreamweaver 内から一般的なタスクを実行する方法を学ぶことができます。

以前のリリースとは異なり、Dreamweaver を初めて起動したときに新機能や有効なワークフローが簡単にわかるようになりました。新機能のツアーをスキップしたり、アプリ内ヘルプメッセージをいつでも無効にすることができます。必要に応じて、再び有効にすることもできます。

新機能のウォークスルー

Dreamweaver の最新リリースには、新機能のミニツアーが追加されました。
このツアーでは、新機能の紹介のほか、新機能の動作を確認できるビデオギャラリー
も用意されています。

Dreamweaver を起動するとすぐに新機能のウォークスルーやミニツアーのオプションが
表示されます。ツアーをスキップし、スタートアップスクリーンに移動して作業を進める
こともできます。

注意:新機能のウォークスルーは、Dreamweaver をインストールまたは更新したとき、
または環境設定を削除して Dreamweaver を再起動したときに表示されます。

新機能ツアー
新機能ツアー

新機能のウォークスルーでは、主に以下の内容が表示されます。

  • 「ようこそ」メッセージ。また、操作性を適切にカスタマイズできるように、以前に Dreamweaver CC を使用したことがあるかどうかを指定するよう求められます。
  • 各機能の紹介と簡単な説明(ツアーをスキップするオプション付き)。
  • 新機能に関連するビデオを含むビデオギャラリー。

ビデオギャラリー

新機能のウォークスルーの最後に、新機能に関連するビデオを含むビデオギャラリーが
表示されます。サムネールをマウスでポイントすると、そのビデオの簡単な説明が表示されます。

ビデオギャラリー
ビデオギャラリー

注意:

新機能のウォークスルーとビデオギャラリーには、Dreamweaver の使用中にいつでも
アクセスできます。これを行うには、ヘルプメニューまたはスタートアップスクリーンに移動し、必要なオプションをクリックします。

アプリケーション内メッセージ

Dreamweaver でプロジェクトの作業中に、生産性を向上させるヒントが表示されるように
なりました。現在実行中のタスクの効率化に役立つヒントです。

ヒントは特定の「トリガー」に基づいて表示されます。例えば、任意のビューでタグ
セレクター
をクリックするか、エレメントを右クリックしてインスペクトすると、エレメント
クイックビューのプロンプトが表示されます。エレメントクイックビューは、実行した他の方法(トリガー)より簡単に HTML マークアップを表示および編集できるまったく新しい機能です。

表示された提案に従って作業すると、次に同じトリガーが発生してもアプリケーション内のプロンプトは表示
されません。ただし、他のトリガーが識別されると再びプロンプトが表示されます。

アプリケーション内メッセージは、環境設定によって表示を無効にすることができます。詳しく
は、アプリケーション内と製品内のメッセージの無効化またはリセットを参照してください。

アプリケーション内メッセージの例:

エレメントクイックビュー

トリガー:

  • タグセレクター(すべてのビュー)がクリックされた
  • ライブ + インスペクトまたはエレメントを右クリック + インスペクト

メッセージ:

エレメントクイックビューメッセージ
エレメントクイックビューメッセージ

クラスと ID のライブビュープロパティインスペクター

トリガー:

  • デザインビューで PI を使用して ID を編集

メッセージ:

ライブビューメッセージ
ライブビューメッセージ

製品内メッセージ

Dreamweaver は、Creative Cloud 上の他のアプリケーションの多くとシームレスに統合します。
このような統合ワークフローについては、製品内メッセージで紹介されます。これらのワークフローを
使用すれば、Adobe Creative Cloud とそのサービスをさらに有効活用できます。

製品内メッセージは、識別された「トリガー」に基づいて表示されます。例えば、
CSS トランジションを使用しようとすると、製品内メッセージで「Edge Animate」のワークフローが推奨されます。

製品内メッセージには、特定のシナリオで使用できる代替の(より優れた)ワークフローの簡単な説明が含まれています。
ワークフローを説明するビデオのサムネールも含まれており、これをクリックするとビデオを閲覧できます。
詳細」ボタンは、詳細が記載された記事やブログにリンクしています。


製品内メッセージは、識別されたトリガーが発生したときの 1 回のみ表示されます。

注意:

メッセージを再び表示するには、環境設定でアプリケーション内ヘルプの設定をリセットします。
詳しくは、アプリケーション内と製品内のメッセージの無効化またはリセットを参照してください。

製品内メッセージの例:

Edge Animate

トリガー:

  • CSS トランジションをクリックして「+」をクリック

メッセージ:

Edge Animate メッセージ
Edge Animate メッセージ

Parfait

トリガー:

  • イメージの挿入イメージ設定の編集

メッセージ:

イメージ設定の編集
イメージ設定の編集

アプリケーション内と製品内のメッセージの無効化またはリセット

環境設定アクセシビリティダイアログボックスで、次の操作を行います。

  • メッセージを無効にするには、「アプリ内ヘルプを表示」チェックボックスの選択を解除します。

メッセージを再び有効にした場合、以前に表示されたメッセージは表示されません。
以前に表示されたことのないメッセージのみ表示されます。

  • 以前に表示されたメッセージを表示するには、「リセット」をクリックします。
ヒントを無効にします。アプリ内メッセージを無効にします。
環境設定でアプリ内ヘルプを無効化またはリセット

ヘルプメニューの変更点

ヘルプメニューが再構成され、新機能のウォークスルー、ビデオギャラリー、ヘルプおよび学習リソース、バグ/機能リクエストの送信フォームにすぐにアクセスできるようになりました。

Dreamweaver CC 2014 以前のヘルプメニュー
Dreamweaver CC 2014 リリース以前のヘルプメニュー

Dreamweaver CC 2014 のヘルプメニュー
Dreamweaver CC 2014 リリースのヘルプメニュー

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

リーガルノーティス   |   プライバシーポリシー