Dreamweaver CC の 2014 リリース向け最新アップデートに用意された Extract との統合により、Dreamweaver で直接 PSD カンプからモバイルサイトやデスクトップサイトを構築できるようになります。新しいライブガイドでは HTML エレメントをより簡単かつ正確に配置または再配置でき、強化されたライブビューの編集機能ではリアルタイムに変更を加えることができます。

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

Adobe Dreamweaver CC 2014.1.1(2015 年 2 月)

新しいスタートアップスクリーン

Dreamweaver を初めて使用しますか? Dreamweaver を使用したことがあっても、スキルアップする必要がありますか? 以前のバージョンからの変更点について知る必要がありますか? 初心者もベテランユーザーも、または新しいバージョンの Dreamweaver を評価する場合でも、スタートアップスクリーンにある重要なすべての学習リソースに簡単にアクセスできるようになりました。

Dreamweaver CC 2014 リリース向け最新アップデートにより、ビデオ(新機能を含む)、実践チュートリアル、ヒントとテクニックなどにスタートアップスクリーンからすばやくアクセスできるようになります。

スタートアップスクリーン
スタートアップスクリーン

注意:

この新しいスタートアップスクリーンは、ロケールが英語の場合のみ使用できます。それ以外のロケールでは、Dreamweaver CC 2014.1 のスタートアップスクリーンおよび新機能のウォークスルーが表示されます。

Extract パネルの機能強化

Extract パネルから画像をドラッグしたときに、ライブガイドとエレメントクイックビューのアイコンがライブビューに表示されるようになりました。これらのビジュアルエイドを使うと、画像を目的の場所にすばやく正確に配置できるようになります。

Extract パネル
Extract パネル

ライブビュー編集の機能強化

エレメントのドラッグ&ドロップ

関連付けられたタグ名をドラッグして、ライブビュー内でエレメントを移動できるようになりました。タグ名をマウスでポイントすると、エレメントをドラッグできることを示す手の形のカーソルが表示されます。ドロップした後エレメントがどこに配置されるかを視覚的に示すライブガイドを参考に、ドラッグしたエレメントをドロップできます。

マーキー選択

タグ内のテキスト、画像、その他のエレメントをタグ内の任意の場所をクリックおよびドラッグして選択できるようになりました(マーキー選択)。マーキー選択を使うと、タグ内で複数のエレメントを簡単に選択できます。

注意:

マーキー選択では、ブラウザーでサポートされている操作のみがライブビューでサポートされます。

エレメントディスプレイの機能強化

エレメントディスプレイで、クラスまたは ID を指定できることを明瞭に示すヒントテキスト「クラス/ID」が表示されるようになりました。

また、エレメントディスプレイで行った変更が「+」をクリックすることで保存できるようになりました。以前のバージョンの Dreamweaver 同様、Enter または Return キーを押して変更を保存することもできます。 

新しいコードビューのテーマ

コードビューに新たに 10 個のカラーテーマが追加されています。

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

コードビューのテーマについて詳しくは、コードビューのカラーテーマの設定を参照してください。

CSS デザイナーの機能強化

このアップデートには、CSS デザイナーのユーザーインターフェイスに対するいくつかの変更や「セットを表示」チェックボックスの初期設定における変更が含まれています。

起動時は、「セットを表示」チェックボックスが初期設定でオンになっており、このオプションに対する変更は Dreamweaver の全セッションで維持されます。例えば、このオプションをオフにすると、次回の Dreamweaver セッションでもその設定が維持され、オプションはオフで表示されます。

ユーザーインターフェイスの変更点は以下のとおりです。

  • プロパティ追加時の CSS デザイナーパネルのスクロール:プロパティセクションで「+」をクリックすると、「プロパティを追加」の行がプロパティパネルのほぼ中央に来るようにパネルがスクロールします。プロパティセクションが小さすぎると、パネルはスクロールして、セクションの下部にある「プロパティを追加」の行を表示します。
  • 背景ハイライト:フォーカスが「新しいプロパティを追加」テキストボックスにあるとき、行がグレーの背景で強調表示されます。
  • 「+」および「-」ボタンの位置:CSS デザイナーパネルの各セクション(ソース、セレクター、メディアクエリー、プロパティ)に表示される「+」および「-」ボタンが目立つように、最右端から左側に移動しました。
  • 「カスタム」カテゴリーの名称は、「その他」になりました。

ライブビューのリモートデバッグ

Google Chrome の開発ツールを使用して、ライブビューで開いた Dreamweaver ドキュメントをリモートでデバッグできるようになりました。Google Chrome では、ポート 5471 を使用できます。このポートを有効化するには、次の手順を実行します。

  1. 次のコマンドを実行して Dreamweaver を起動します。

    • Windows<installation_path> -enableRemoteDebugging
    • Macopen <installation_path> --args -enableRemoteDebugging

    注意:引数の前にハイフンを 2 つ入力してください。

  2. ポート 5471 がデバッグのため有効になったことを示すダイアログボックスで「OK」をクリックします。

    Dreamweaver を起動します。

    ダイアログボックスで「OK」をクリックして、Dreamweaver を起動します。
    ダイアログボックスで「OK」をクリックして、Dreamweaver を起動します。

  3. ライブビューでデバッグを実行するドキュメントを開きます。

  4. デバッグを開始するには、Google Chrome を開き、localhost:5471 を参照します。Dreamweaver で開いているすべてのドキュメントへのリンク一覧が表示されます。 

    注意:新しいスタートアップスクリーンと Extract パネルで Chromium Embedded Framework(CEF)が使用されるため、これらの機能に関連するエントリも表示されます。

    Google Chrome の開発ツールを使用して、必要なドキュメントをデバッグできるようになりました。

  5. デバッグを中止し、通常モードで Dreamweaver を開くには、Dreamweaver を終了して、再起動します。

その他の機能強化

「環境設定をリセット」ワークフローにおける変更

キーボードショートカットを使用して環境設定をリセットしたときに、Dreamweaver で Adobe Dreamweaver CC 2014.1 Backups フォルダーに環境設定のバックアップが作成されるようになりました。このフォルダーは、Windows および Mac の Dreamweaver の環境設定の元のフォルダーと同じフォルダーに自動的に作成されます。

バックアップフォルダーの完全パスは、環境設定をリセットダイアログボックスに表示されます。

環境設定をリセット
環境設定をリセット

動的ドキュメントのビューモードにおける変更

デフォルトで動的ドキュメント(PHP、CFM、ASP など)がコードビューから開かなくなりました。最後に閉じられたドキュメントまたは最後にフォーカスがあったドキュメントと同じモード(コード/ライブ/分割)で開かれます。

Adobe Dreamweaver CC 2014.1(2014 年 10 月)

Dreamweaver 内の Extract

Extract と Dreamweaver の統合により、Web デザイナーおよびデベロッパーは、デザイン情報や Web 用に最適化されたアセットをコーディング環境に直接適用/抽出できます。Extract に、PSD カンプからスタイル情報やアセットを抽出するための完全な自己完結型のソリューションが用意されているため、Photoshop と Dreamweaver 間を行ったり来たりする必要が減ります。

Dreamweaver 内の Extract パネルでは、CSS、画像、フォント、カラー、グラデーション、測定値を Web ページに直接抽出できます。これらの主要な Extract の機能に加え、Dreamweaver によっても次の固有の機能が提供されます。

  • Creative Cloud 上にある、また共同作業用フォルダーで共有している PSD ファイルへの直接アクセス
  • 状況に応じたコードヒントを使用したフォント、カラー、グラデーションの簡単な定義
  • ドラッグ&ドロップを使用した PSD レイヤーからのイメージタグの作成
  • ライブビュー(CSS デザイナーやエレメントディスプレイなど)にスタイルを直接ペースト

Dreamweaver の初期設定のワークスペース(Extract と呼ばれます)では、すぐに操作を開始できるように Extract パネルが左側に表示されます。Dreamweaver の初回起動時に、Extract パネルに Extract ワークフローの理解に役立つ簡単なチュートリアルが表示されます。Extract の使用を開始するには「開始」をクリックします。

Extract パネルのデフォルトワークスペース
Extract パネル

Dreamweaver での Extract のワークフローについて詳しくは、Dreamweaver と Extract の統合を参照してください。

64-bit アーキテクチャ

64 ビット版の Dreamweaver が提供され、32 ビット版と同じ機能をすべてサポートするようになりました。この追加に伴い、Adobe Creative Cloud アプリケーションから次の Dreamweaver ビルドをダウンロードできるようになりました。

OS デフォルトのインストール場所 アプリケーション環境設定フォルダー
32 ビット版 Windows C:¥Program Files¥Adobe¥Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
64 ビット版 Windows C:¥Program Files¥Adobe¥Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
64 ビット版 Mac /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

FAQ

  • 64 ビット版アプリケーションを 32 ビット版 Windows で実行できますか。- いいえ
  • 32 ビット版と 64 ビット版を同じ Windows マシンにインストールできますか。- できません。
  • 32 ビット版と 64 ビット版のどちらの Dreamweaver を実行しているかは、どうすれば確認できますか。
    • Windows:Dreamweaver を起動します。タスクマネージャーを開き、Dreamweaver プロセスを検索します。起動した Dreamweaver ビルドが 64 ビットの場合、プロセスの名前は「Dreamweaver.exe」になります。起動したビルドが 32 ビットの場合、プロセスの名前は「Dreamweaver.exe *32」になります。
    • Mac:アクティビティモニターを開き、表示/列/種類を確認します。アクティビティモニターで Dreamweaver を探し、「種類」列を調べます。Dreamweaver が 64 ビットの場合は、「種類」列に「64 ビット」と表示されます。

64 ビット版 Dreamweaver のインストール

  1. お使いのコンピューターで 64 ビット OS が実行されていることを確認します。

    コンピューターが 64 ビットかどうかを確認するには、以下の記事で説明されている手順に従ってください。

  2. Creative Cloud から Dreamweaver 64 ビット版をダウンロードし、ビルドをインストールします。

ライブビューの機能強化

ライブガイド

ライブガイドは、次のシナリオでエレメントを挿入できる位置を示す、ライブビューの視覚的なフィードバックです。

  • 挿入パネルからドラッグする場合
  • アセットパネルからドラッグする場合
  • ライブビュー内のエレメントをドラッグ(移動)する場合

注意:

ライブガイドは、可変グリッドドキュメントではサポートされません。

ライブガイドは、エレメントをドロップする前にページ上の様々なエレメントをマウスでポイントすると表示されます。マウスでポイントしたエレメントの上、下、左または右に表示されます。

  • 上下 - インラインタグ以外のタイプのエレメント/タグをマウスでポイントしているときに表示されます。エレメントの上半分をマウスでポイントすると、ポイントしたエレメントの上にガイドが表示されます。エレメントの下半分をマウスでポイントすると、ポイントしたエレメントの下にガイドが表示されます。
マウスでポイントしたエレメントの上下に表示されたライブガイド
マウスでポイントしたエレメントの上下に表示されたライブガイド

  • 左右 - <a>、<span> などのインラインタグや、「フロートプロパティ」セットを持つタグをマウスでポイントしているときに表示されます。
マウスでポイントしたエレメントの左右に表示されたライブガイド
マウスでポイントしたエレメントの左右に表示されたライブガイド

構造エレメントの正確な挿入

エレメントクイックビューとライブガイドを使用すると、ドキュメント構造内に HTML エレメントをより正確に挿入できます。 

エレメントをドロップする前にしばらく停止すると、エレメントクイックビューアイコン(</>)が表示されます。このアイコンをマウスでポイントすると、エレメントクイックビューが開き、エレメントクイックビュー内にエレメントをドロップできます。

エレメントクイックビューアイコン
正確な挿入を支援するエレメントクイックビューアイコン

ライブビューのコンテキストメニュー

ライブビューで、右クリックのコンテキストメニューを使用してエレメントをカット、コピー、ペースト、削除できるようになりました。また、ライブビューのコンテキストメニューを使用してエレメントの複製や、親タグまたは子の選択を実行できるようになりました。

注意:

ライブビューでキーボードショートカット(例えば Windows で、Ctrl+x、Ctrl+c、Ctrl+v、Ctrl+d、Delete キーなど)も使用できます。

まず、ライブビューでエレメントを選択して、エレメントディスプレイを表示します。次に、タグ領域内を右クリックして、上記のコンテキストメニューオプションを表示します。オプションはタグレベルで機能します。 

エレメントディスプレイでの変更

エレメントディスプレイでは、エレメントにセレクターを適用できるだけでなく、目的の CSS ソースにセレクターを作成したり、メディアクエリーを割り当てたりできるようになりました。任意のスタイルシートにないセレクターを入力し Enter キーを押すと、エレメントディスプレイで CSS ソースやメディアクエリーを選択するためのオプションを使用できるようになります。

エレメントディスプレイの CSS ソースおよびメディアクエリーのオプション
エレメントディスプレイの CSS ソースおよびメディアクエリーのオプション

CSS ソースまたはメディアクエリーを選択しない場合は、Esc キーを押してオプションを閉じます。

適用したセレクターを右クリックして、対応するコードへの移動(「コードへ移動」オプション)や、コピーしたスタイルのペースト(「スタイルをペースト」オプション)も行えるようになりました。

エレメントディスプレイの「コードへ移動」オプションと「スタイルをペースト」オプション
エレメントディスプレイの「コードへ移動」オプションと「スタイルをペースト」オプション

注意:

同じセレクターが複数のメディアクエリーに追加されると、「コードへ移動」オプションにサブオプションが表示されます。コピーされたセレクターが擬似または複合セレクターである場合、「スタイルをペースト」オプションにサブオプションが表示されます。

ライブビューでのエレメントの移動

Dreamweaver で、ライブビューでのエレメントの移動(タグレベル)がサポートされるようになりました。ライブビューでエレメントを選択して、任意の位置にドラッグ&ドロップできます。

  1. 移動するエレメントをクリックし、エレメントディスプレイ(エレメントの周囲の青いボックス)が表示されたらエレメントをドラッグします。「ドラッグ」が開始されるとマウスカーソルが変わり、エレメントを移動する準備ができたことを示します。

  2. リファレンスエレメント(ドラッグしたエレメントを配置する際の基準となるエレメント)が青い枠線で強調表示されます。リファレンスエレメントに対してドロップできる位置を示すライブガイド(緑色)が表示されます。

注意:

ライブビューで移動できるのは静的エレメントのみです。PHP などの動的コンテンツタグは移動できません。

エレメントをドロップする前にしばらく停止すると、エレメントクイックビューアイコン(</>)が表示されます。このアイコンをマウスでポイントすると、エレメントクイックビューが開き、エレメントクイックビュー内にエレメントをドロップできます。 

ライブビューでのキーボード操作

キーボード愛好ユーザーの便宜を図り、Web デザインプロセスを効率化するために、キーボードによるページエレメントの操作が Dreamweaver でサポートされるようになりました。次の操作を実行できます。

  • 上向き矢印キーと下向き矢印キーを使用したページエレメント間の移動。ライブビューでのキーボード操作により、ネストされたエレメントやラップされたエレメントに簡単にアクセスできます。
  • Tab キーを使用したエレメントディスプレイ内のセレクター間の移動。

詳しくは、ライブビューでのキーボード操作を参照してください。

ライブビューでのクイックタグ編集

ライブビューで Ctrl+T(Windows)または Command+T(Mac)キーを押すと、選択したエレメントのクイックタグ編集が起動します。クイックタグ編集には、タグの編集、折り返しタグ、HTML の挿入の 3 つの状態があります。Ctrl/Command+T キーを使用して、これらの状態を切り替えることができます。

ライブビューでのクイックタグ編集
ライブビューでのクイックタグ編集

Dreamweaver ワークスペースの変更点

ドキュメントツールバーの変更点

ドキュメントツールバーが変更され、使いやすくなりました。

  • デザインビューとライブビューのオプションが 1 つのコントロール(ドロップダウン)に統合されました。
「デザイン」および「ライブ」ビューオプション(Dreamweaver CC)(2014 年 10 月)
最新のアップデートに含まれた「デザイン」および「ライブ」ビューオプション - Dreamweaver CC(2014 年 10 月)

以前のバージョンのドキュメントツールバー内の「デザイン」および「ライブ」ビューボタン
以前のバージョンのドキュメントツールバー内の「デザイン」および「ライブ」ビューボタン

  • ドキュメントタイトルフィールドはプロパティインスペクターに移動しました。
ドキュメントツールバー(Dreamweaver CC)(2014 年 10 月)
最新のアップデートのドキュメントツールバー - Dreamweaver CC(2014 年 10 月)

プロパティインスペクターに移動されたドキュメントタイトルフィールド(Dreamweaver CC)(2014 年 10 月)
最新のアップデートでドキュメントタイトルフィールドがプロパティインスペクターに移動 - Dreamweaver CC(2014 年 10 月)

以前のバージョンのドキュメントツールバーのタイトルフィールド
以前のバージョンのドキュメントツールバーのタイトルフィールド

  • インスペクトボタンとライブコードボタンがアイコンに置き換えられました。
ライブコードアイコンとインスペクトアイコン(Dreamweaver CC)(2014 年 10 月)
最新のアップデートのライブコードアイコンとインスペクトアイコン - Dreamweaver CC(2014 年 10 月)

以前のバージョンの「ライブコード」ボタンと「インスペクト」ボタン
以前のバージョンの「ライブコード」ボタンと「インスペクト」ボタン

  • アドレスバーで「戻る」、「進む」、「更新」オプションがグループ化され、ドキュメントツールバーの中心に配置されました。
「戻る」、「進む」、「更新」オプションを含んだアドレスバー(Dreamweaver CC)(2014 年 10 月)
最新アップデートのアドレスバーに配置された「戻る」、「進む」、「更新」オプション - Dreamweaver CC(2014 年 10 月)

以前のバージョンのアドレスバーに配置された「戻る」、「進む」、「更新」オプション
以前のバージョンのアドレスバーに配置された「戻る」、「進む」、「更新」オプション

  • ブラウザーでのプレビュー/デバッグ、ライブビューオプション、ファイル管理アイコンがグループ化され、ドキュメントツールバーの右側に配置されました。
ブラウザーでのプレビュー/デバッグ、ライブビューオプション、ファイル管理アイコン(Dreamweaver CC)(2014 年 10 月)
最新のアップデートの、ブラウザーでのプレビュー/デバッグ、ライブビューオプション、ファイル管理アイコン - Dreamweaver CC(2014 年 10 月)

以前のバージョンの、ブラウザーでのプレビュー/デバッグ、ライブビューオプション、ファイル管理アイコン
以前のバージョンの、ブラウザーでのプレビュー/デバッグ、ライブビューオプション、ファイル管理アイコン

初期設定のワークスペースの変更点

Dreamweaver に組み込まれたワークスペースは、次のように変更されました。

  • コード
  • デザイン
  • Extract
ワークスペース
ワークスペース

初期設定のワークスペースは Extract になりました。このワークスペースでは、左側に Extract パネル、右側に Web ページが表示されます。Dreamweaver の初回起動時に、Extract パネルに Extract ワークフローの理解に役立つ簡単なチュートリアルが表示されます。Extract の使用を開始するには「開始」をクリックします。

Extract ワークスペース
Extract ワークスペース

HTML ドキュメントの初期設定のビューは、ライブビューとコードビューに上下に分割された分割ビューになりました。以下のような動的ファイルは、デフォルトでコードビュー全体に開きます。ビューを分割した場合、これらのドキュメントはデザインビューとコードビューで表示されます。

  • PHP
  • PHP テンプレート(Example.dwt.php)
  • ASP
  • ASP テンプレート(Example.dwt.asp)
  • JSP
  • JSP テンプレート(Example.dwt.jsp)
  • CFM
  • CFM テンプレート(Example.dwt.php)
ライブビューとコードビューが表示された HTML ドキュメントの初期設定ビュー
ライブビューとコードビューに表示された HTML ドキュメントのデフォルトビュー

コードビューに全画面表示された動的ドキュメントのデフォルトビュー
コードビューに全画面表示された動的ドキュメントのデフォルトビュー

ヒント:デザインビューに切り替えるには、「ライブ」の隣のドロップダウンリストをクリックして、「デザイン」をクリックします。上下分割を左右分割に変更するには、表示/左右に分割を選択します。ライブ/デザインビューが左側に表示されます。ライブ/デザインビューを右側に表示するには、表示/ライブビューを左に表示またはデザインビューを左に表示を選択解除します。

Dreamweaver で HTML ドキュメント用に選択したライブビューの状態が記憶され、同じビューが以降に開くすべての HTML ドキュメントに適用されるようになりました。例えば、HTML1 ドキュメントを最初に開いたとします。ドキュメントのビューは、コードビューとライブビューに分割されます。このドキュメントのビューをライブビューでの全画面表示に変更したとします。すると、次に開くドキュメント、仮に HTML2 は、ライブビューに全画面表示されます。 

可変グリッドドキュメントの変更点

ライブビューの編集のサポート

前のバージョンの Dreamweaver CC では、ライブビューの新しい編集機能が導入されました。今回のリリースでは、それらのライブビューの編集機能を可変グリッドドキュメントでも使用できるようになりました。ライブビューの編集機能を使用すると、同じビューで即座に変更を編集およびプレビューできるので、可変 Web ページの開発時間を短縮できます。

ライブビューでは、次の機能を使用して可変グリッドドキュメントを編集できます。

また、エレメントクイックビューを使用して、可変グリッドドキュメントの HTML DOM 構造を表示できるようになりました。

注意:可変グリッドレイアウト内のエレメントクイックビューでは、HTML エレメントをコピー、ペースト、複製または再配置することはできません。

ライブビューの編集機能に対応して、可変グリッドドキュメントを表示および編集するためのユーザーインターフェイスが変更されました。可変グリッドドキュメントでエレメントを選択すると、エレメントディスプレイが「エレメントの非表示」、「新しい行に移動」などの他のコントロールとともに表示されます。

以前のバージョンの「可変グリッド」オプション
以前のバージョンの「可変グリッド」オプション

リリースの可変グリッドオプションとエレメントディスプレイ(Dreamweaver CC)(2014 年 10 月)
最新のアップデートの「可変グリッド」オプションとエレメントディスプレイ - Dreamweaver CC(2014 年 10 月)

また、可変グリッドドキュメントをライブビューで直接開けるようになりました。デザインビューでは可変グリッドドキュメントの表示または編集を実行できなくなりました。

ドキュメントツールバー(Dreamweaver CC)(2014 年 10 月)
最新のアップデートのドキュメントツールバー - Dreamweaver CC(2014 年 10 月)

以前のバージョンの可変グリッドドキュメントのドキュメントツールバー
以前のバージョンの可変グリッドドキュメントのドキュメントツールバー

可変グリッドドキュメントについて詳しくは、可変グリッドレイアウトによるレスポンシブデザインを参照してください。

挿入ワークフローの変更点

可変グリッドドキュメントの挿入ダイアログボックスに「配置サポート機能」が含まれるようになりました。配置サポート機能により、挿入するエレメントを(ライブビュー内の)フォーカスがあるエレメントの前または後ろに挿入するか、内部にネストすることができます。可変グリッドエレメントの挿入について詳しくは、可変グリッドエレメントの挿入を参照してください。

「非表示のエレメントを管理」オプションの変更点

「非表示のエレメントを管理」オプション(ドキュメントツールバーの目のボタン)が、可変グリッドドキュメントのコンテキストメニューに移動しました。


非表示のエレメントを管理するには、可変グリッドページを右クリックし、「非表示のエレメントを管理」を選択して非表示のエレメントを表示します。これらのエレメントを非表示にするには、HUD にある目のアイコンをクリックします。

右クリックメニューに表示された「非表示のエレメントを管理」オプション(Dreamweaver CC)(2014 年 10 月)
最新アップデートの右クリックメニュー内の「非表示のエレメントを管理」オプション - Dreamweaver CC(2014 年 10 月)

以前のバージョンでの非表示のエレメントを管理する目のアイコン
以前のバージョンでの非表示のエレメントを管理する目のアイコン

コードビュー用の組み込みカラーテーマ

コードビュー用に次のいずれかの組み込みカラーテーマを選択できるようになりました。

  • Classic(初期設定、以前のバージョンの Dreamweaver と同じ)
  • Raven
  • Slate
  • Blanche
  • Geneva
Classic、Raven、Slate、Blanche および Geneva テーマ
Classic、Raven、Slate、Blanche および Geneva テーマ

コードビューのテーマを指定するには、コードカラーリング環境設定を使用します。背景、前景、非表示の文字に個別のカラースキームを選択して、テーマをカスタマイズできます。

リストされているドキュメントタイプごとに、タグやコードエレメントの様々なカテゴリー(フォーム関連のタグや JavaScript 識別子など)のカラーをカスタマイズできます。例えば、すべてのドキュメントタイプに Raven テーマが適用されているときに、HTML ドキュメントでのみフォーム関連のタグを青色にするよう選択できます。

テーマのすべてのカスタム設定は「適用」をクリックすると保存され、カスタマイズしたテーマは Dreamweaver セッション全体で使用できるようになります。

注意:

カスタマイズされたコードテーマを「環境設定」の「同期の設定」オプションを使用して、Dreamweaver のインスタンス間で同期を維持できます。詳しくは、Dreamweaver 設定と Creative Cloud の同期を参照してください。

詳しくは、コードビューのカラーテーマの設定を参照してください。

コードビューのライブビューへの同期

コードビューのライブビューへの同期により、コードに対する変更をライブビューで即座にプレビューできます。以前のバージョンの Dreamweaver とは異なり、ライブビューで変更をプレビューするために「更新」をクリックする必要はありません。

次のワークフローで、コードビューからライブビューへの同期の動作を確認できます(コードビューにフォーカスがある場合)。

  • カット/コピー/ペースト/削除、取り消し/やり直しなどのテキスト操作。
  • コードビューにフォーカスがあるときの、エレメントクイックビューでのエレメントの移動。
  • コードビューでの入力。
  • エレメントクイックビューでの削除/複製/コピー/ペーストアクション(右クリックオプション)。
  • プロパティインスペクターでの、テキストフォーマットの変更(ボールド/イタリック)、クラス、ID、フォーマット、ページプロパティの変更、フォントの適用などの操作。
  • コードビューでのコードヒントを使用したクラスまたは ID の追加/削除。
  • 挿入パネルからコードビューへの Div、画像、ハイパーリンク、構造エレメントなどのエレメントの挿入。
  • <style> タグ内での CSS スタイルの追加/編集。 
  • CSS ファイルでのコードの編集。

注意:

JavaScript コードを変更した場合は、ライブビューで変更を反映するためにページの完全更新またはリロードを行う必要があります。  

ライブビューのアセットパネル

ライブビューでアセットパネル(Windows/アセット)を利用できるようになりました。アセットパネルを使用して、次のタスクを簡単に管理できます。

  • アセットパネルのプレビューペインまたはリストビューからの、アセット(画像、URL、カラー、メディア)のドラッグまたは挿入。

注意:Mac ではプレビューペインからのみアセットをドラッグできます。

  • CSS デザイナープロパティ、コードビュー、カラーピッカーなどの Dreamweaver のテキストフィールドのカラー値、またはメモ帳などの他のアプリケーションへのカラー値をコピーしてペーストします。

注意:

 

  • 「スクリプト」、「テンプレート」および「ライブラリ」カテゴリーはコードビューへの関連性がより高いため、ライブビューのアセットパネルでは非表示になっています。
  • このリリースの Dreamweaver CC では、「Flash」カテゴリーと「ムービー」カテゴリーが「メディア」と呼ばれる 1 つのカテゴリーにまとめられています。
         

ライブビューのアセットパネル
ライブビューのアセットパネル

デザインビューとコードビューのアセットパネル
デザインビューとコードビューのアセットパネル

アセットパネルの使用方法について詳しくは、アセットの操作を参照してください。

新しいスターターテンプレート

Dreamweaver に、レスポンシブな Web サイトの作成を迅速に開始するための新しいテンプレートが追加されました。新規ドキュメントダイアログボックス(ファイル/新規/スターターテンプレート)で、次のいずれかのテンプレートを選択できます。

  • バージョン情報ページ
  • ブログ投稿
  • eコマース
  • Email
  • ポートフォリオ
新しいレスポンシブなスターターテンプレート
新しいレスポンシブなスターターテンプレート

新規ドキュメントダイアログボックスでテンプレートを選択して「作成」をクリックすると、新しいドキュメントを保存するように求めるメッセージが Dreamweaver によって表示されます。ドキュメントを保存するとテンプレートのコピーが作成され、後で要件に合わせてカスタマイズできます。

起動時の環境設定のリセット

Dreamweaver の問題のトラブルシューティングを行っているときに、すべてのカスタム設定が格納された環境設定フォルダーを削除する必要が生じることがあります。以前のリリースでは、コンピューターの環境設定フォルダーに手動で移動し、フォルダーを削除する必要がありました。今回のリリースでは、ダイアログボックスを使用して環境設定を削除するためのワンクリックオプションが用意されています。

環境設定をリセット
環境設定をリセット

Dreamweaver の起動時に、次のキーボードショートカットを押すと、環境設定をリセットダイアログボックスを表示できます。

  • (Windows)Windows+Ctrl+Shift キー
  • (Mac)Command+Option+Shift キー

注意:

「環境設定をリセット」オプションは慎重に使用してください。環境設定や設定をリセットすると、ワークスペースのすべてのカスタム設定、キーボードショートカット、拡張機能およびアプリケーションの環境設定が失われます。

Mac OS では、Command+Option+Shift キーを押したまま Dreamweaver を起動(ドックの Dreamweaver アイコンをクリック)します。

Windows では、次の手順を実行します。

  1. インストールフォルダーに移動し、Dreamweaver.exe を探してファイルをクリックします。

  2. Windows+Ctrl+Shift キーを押しながら、Dreamweaver.exe をダブルクリックします。

ユーザーアカウント制御(UAC)ダイアログボックスが表示された場合でも、前述のショートカットキーを押しながら実行します。 

その他の機能強化

同期設定の変更点

環境設定ダイアログボックスを使用して、Creative Cloud に保存された以前のバージョンの Dreamweaver から設定を読み込めるようになりました。Cloud から読み込んだ設定はすべてのローカル設定を上書きし、次回の Dreamweaver の起動時に適用されます。

以前のバージョンの Dreamweaver からの設定の読み込み
以前のバージョンの Dreamweaver からの設定の読み込み

また、このリリース以降、以前のバージョンで同期されていた設定に加え、次の設定も Creative Cloud と同期されるようになりました。

  • 新たに追加されたコードカラーテーマ
  • Mac のアプリケーションバー、アプリケーションフレームの各設定。

CSS デザイナーの変更点

このバージョンの Dreamweaver では、CSS デザイナーのユーザー操作性に多くの改善が加えられています。また、CSS デザイナーパネルには、ワークフローをすばやく開始するためのオンボーディングエクスペリエンスも備わりました。

スタートアップスクリーンの変更点

スタートアップスクリーンの「サイトテンプレート」オプションがスターターテンプレートに置き換えられました。サイトテンプレートには、新規ドキュメントダイアログボックス(ファイル/新規作成)からアクセスできます。

jQuery バージョンの更新

Dreamweaver では、次のように jQuery ライブラリ更新されています。

  • jQuery - 1.8.3 が jQuery - 1.11.1 に更新されました
  • jQuery UI - 1.9.2 が jQuery UI - 1.10.4 に更新されました

jQuery スターターページは削除されました。 

PhoneGap のアップデート

Dreamweaver と PhoneGap Build の直接統合によるアプリケーションのパッケージ化は、Dreamweaver CC 2014 リリース(2014 年 10 月)の最新のアップデートまたはそれ以降ではサポートされません。

ただし、PhoneGap Build オンラインサービスに直接アクセスし、最新の機能アップデートを使用して、Web アプリケーションをネイティブモバイルアプリケーションとしてパッケージ化できます。

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

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