Dreamweaver CC 2017 リリース

Dreamweaver CC 2017 リリースは、コーディングをおこなう Web デザイナー向けに再構成されました。

Dreamweaver では、機能の集約化、効率化、高速化がかつてないほど進められ、まったく新しいコードエディター、ダークテーマを選択できるより直感的なユーザーインターフェイス、新しいワークフローのサポート(CSS プリプロセッサーなど)を含む機能強化が図られています。

これらの新機能と機能強化について以下に簡単に説明します。

Dreamweaver CC の以前のリリースで導入された機能の概要については、機能の概要 | Dreamweaver CC(2015 リリース)を参照してください。


Adobe Dreamweaver CC 2017.1 リリース

Dreamweaver CC 2017.1 では、以下の機能を含めることにより、追加のコーディングサポートが実現されます。

これらの機能強化について以下に簡単に説明します。

PHP 7.1 のサポート

以前のバージョンの Dreamweaver では、PHP 5.6 のコードヒントとパーサーチェックにアクセスできました。Dreamweaver 17.1 は、PHP バージョン 5.6 および 7.1 用に設定されます。

サイト設定ダイアログボックスを使用するか、編集/環境設定から、サイトの PHP ファイルを 5.6 または 7.1 でコンパイルすることができます。

PHP 7.1 のサポートについて詳しくは、次の記事を参照してください。

検索と置換の強化

このリリースでは、検索と置換機能に重要な機能強化が行われています。

検索と置換ダイアログボックス(検索/ファイルを横断して検索/置換)を使用して、属性やタグを検索できるようになりました。このボックスは、Dreamweaver に開いているファイルがない場合でも使用できます。

また、クイック検索および置換バー(検索/検索および置換)が Dreamweaver ワークスペースの下部に移動しました。このパネルを使用すると、現在のドキュメント内のテキスト、タグ、属性の検索および置換をすばやくおこなえます。

検索と置換について詳しくは、テキスト、タグ、属性の検索と置換を参照してください。

新しい検索と置換のショートカットキー:

  • 現在の文書内を検索:Ctrl + F(Windows)、Command + F(Mac)
  • ファイルを横断して検索/置換:Ctrl + Shift + F(Windows)、Command + Shift + F(Mac)
  • 現在の文書内で置換:Ctrl + H(Windows)、Command + Alt + F(Mac)

検索と置換のキーボードショートカットの一覧は、検索と置換のショートカットキーを参照してください。

Dreamweaver CC 2017 リリースのアップデート(17.0.2)

Dreamweaver と Campaign を使用して電子メールキャンペーンを作成する

Dreamweaver 用 Campaign 拡張機能を使用して、パーソナライズされた電子メールキャンペーンを作成できるようになりました。

パーソナライズされたコンテンツの作成は、リーダーとのすばやい接続のために非常に重要で、電子メールマーケティングでの成功率を高めます。

Dreamweaver を使用して電子メールキャンペーンを作成した場合、さらにもう一歩進んで、Adobe Campaign のデータを使用してパーソナライズされたコンテンツ(リーダーの名前、パーソナライズ顧客の行動の誘導など)を追加できます。

作業を開始するには、ウィンドウ/拡張機能/拡張機能を参照をクリックして Campaign 拡張機能をダウンロードし、新しい電子メールニュースレターを作成するか、既存のニュースレターを編集します。デザインが完了したら、Campaign のパーソナライゼーションフィールドとコンテンツブロックを使用してコンテンツをパーソナライズするだけです。

Dreamweaver は Campaign と自動的に同期するため、Dreamweaver でのコンテンツの変更が Campaign でも有効になります。実行する必要があるのは、電子メールアドレスを入力し、パーソナライズされたキャンペーンを電子メールの受信者に送信することだけです。

詳しくは、パーソナライズされた電子メールキャンペーンの作成を参照してください。

Dreamweaver CC 2017 リリースのアップデート(17.0.1)

組み込みのコードカラーリングサポート

初期設定の明るめのテーマと暗めのテーマに基づいて、コードテーマを作成およびカスタマイズできるようになりました。さらに、テーマファイル内で適切なセレクターを変更して、コードカラーリングをカスタマイズできます。

編集/環境設定/インターフェイスで初期設定の明るめまたは暗めのコードテーマを選択し、コードカラーリングを変更する場合は、新しい名前でテーマを保存して、テーマファイルの編集を開始します。

コードカラーリングのカスタマイズについて詳しくは、コードカラーリングのカスタマイズを参照してください。

注意:

このリリースでは、多くの不具合が修正されています。修正された不具合について詳しくは、Dreamweaver CC 2017 リリースの既知の問題と修正された不具合を参照してください。

Dreamweaver CC 2017 リリース(17.0)

Dreamweaver CC 2017 リリースでは、一新したコードエディター、暗めのテーマと明るめのテーマを選択できる直観的なユーザーインターフェイス、CSS プリプロセッサーなどの新しいワークフローのサポートを含むいくつかの機能強化を利用できるようになりました。

Dreamweaver CC 2017 の新機能と変更された機能の一覧を以下に示します。

新しくなったコードエディター

Dreamweaver のコードエディターは、生産性の面からいくつかの機能強化が実施され、迅速、簡単かつ効率的にコーディングタスクをおこなえるようになりました。

コードヒントは初心者が HTML、CSS、その他の Web 標準を学習するのに役立ちます。自動インデントやコードの色分けなどのビジュアルコンポーネント、サイズ変更可能なフォントを利用することで、エラーが減り、コードが読みやすくなります。

コードヒント

Dreamweaver のコードヒント機能が強化され、選択したコードに関する有用な情報が表示されるようになりました。

以前のバージョンの Dreamweaver では、開始山形カッコを入力すると、関連するコードのドロップダウンリストが表示されていました。

今回のリリースでは、関連コードだけではなく、その他の役立つ情報も表示されます。そのため、Dreamweaver 単独で、HTML や CSS などの Web テクノロジーを使用して作業を迅速に進めることができます。

コードヒントの強化
コードヒントの強化

詳しくは、コードヒントとコード補完機能を参照してください。

コード表示機能を強化

コード全体がより読みやすく表示されるように改良されました。コードのフォーマット、コードの色付けが改善されています。

コードのフォーマット

コードの記述時、Dreamweaver は、コードを自動インデントを実行するため、手動インデントによる誤りが防止され、読みやすさも向上します。

コードの色付け

Dreamweaver では、コードの色付けがサポートされたファイルタイプの数が増えました。

コードの色付けは、次のコードでサポートされるようになりました:HTML、JS、CSS、PHP、XML、LESS、Sass、SCSS、SVG、Bash、C、C#、C++、clojure、CoffeeScript、Dart、Diff、EJS、Embedded Ruby、Groovy、Handlebars、Haskell、Haxe、Java、JSON、Lua、Markdown、Markdown(GitHub)、Perl、Properties、Python、RDF Turtle、Ruby、Scala、SQL、Stylus、Text、VB、VBScript、XML、YAML。

様々なファイルタイプのシンタックスハイライトは、コードビューのステータスバーから直接変更できます。

これらのすべての変更については、Dreamweaver のコーディング環境を参照してください。

CSS プリプロセッサーに対応

Dreamweaver では、コードカラーリング、またコンパイルの機能をすべて備えた一般的な CSS プリプロセッサー(Sass、LESS、SCSS など)がサポートされるようになりました。そのため、作業時間を節約しながら、より見やすいコードを作成できます。

Dreamweaver の CSS プリプロセッサーのサポートについて詳しくは、CSS プリプロセッサーを参照してください。

ブラウザーでのリアルタイムプレビュー

コードの変更をブラウザーですばやくリアルタイムにプレビューできます。ブラウザーを手動で更新する必要はありません。Dreamweaver をブラウザーに接続できるようになったので、ページをリロードしなくてもすぐに変更がブラウザーに表示されます。

ブラウザーでの変更のリアルタイムプレビュー
ブラウザーでの変更のリアルタイムプレビュー

詳しくは、ブラウザーでのリアルタイムプレビューを参照してください。

関連するコードファイルを迅速に編集可能(クイック編集)

コードをすばやく変更するには、特定のコードスニペットにカーソルを置き、コンテキストメニューを使用するか、Ctrl+E キー(Windows)または Command+E キー(Mac)を押して、クイック編集にアクセスします。

Dreamweaver は、コンテキスト固有のコードオプションとインラインツールを備えています。

詳しくは、クイック編集を参照してください。

複数のファイルまたはやタブを開かずに関連するコードを迅速に編集
複数のファイルまたはやタブを開かずに関連するコードを迅速に編集

文脈に応じた CSS ドキュメント(クイックドキュメント)

Dreamweaver では、CSS プロパティの文脈に応じたドキュメントが表示されます。このドキュメントはコードビュー内で直接確認できます。

これにより、CSS プロパティを調べたり、参照したりするために、Dreamweaver の外部の Web ページに移動する必要がなくなりました。CSS のヘルプを表示するには、Ctrl+K キー(Windows)または Command+K キー(Mac)を押します。

Dreamweaver のコードビューインターフェイス内の CSS のクイックドキュメントヘルプ
Dreamweaver のコードビューインターフェイス内の CSS のクイックドキュメントヘルプ

複数カーソルによるコードの記述と編集

複数のコード行を同時に記述するには、マルチカーソルを使用します。

この機能を使用すると、同じコード行を何度も記述する必要がないので、生産性が大幅に向上します。

マルチカーソルを起動するには、次の操作を実行します。

  • カーソルを複数の連続する行に追加するには:Alt キーを押しながらクリックして、垂直方向にドラッグします。
  • 連続しない複数の行にカーソルを追加するには:Ctrl キーを押しながら、カーソルを配置する行を個々にクリックします。
  • 複数の連続する行のテキストを選択するには:Alt キーを押しながら斜め方向にドラッグします。
  • 連続しない複数行のテキストを選択するには:いずれかのテキストを選択した後、Ctrl キー(Windows)または Command キー(Mac OS)を押しながら、さらにテキストの選択を続けます。

新しくなったユーザーインターフェイス

Dreamweaver が再設計されました。インターフェイスは直感的に操作しやすく、カスタマイズ機能が向上しました。メニューとパネルは見つけやすく、設定可能なコンテキストツールバーには必要なツールのみが表示されます。

また、新しいインターフェイスでは、コード行の読み取りと編集がしやすいように、ライトからダークまで 4 段階にインターフェイスのコントラストを切り替えることができます。

新しいユーザーインターフェイスの変更前のスナップショットと変更後のスナップショットを次に示します。

ユーザーインターフェイス - 2015 年リリースの Dreamweaver

新しいユーザーインターフェイス - Dreamweaver CC 2017 リリース


今回のリリースでは、Dreamweaver のメニュー、ツールバーおよびワークスペースも再設計されています。これらの変更に関する詳細情報をお読みください。

ワークスペースの変更点

Dreamweaver インターフェイスは、次の初期設定のワークスペースに対応するように最適化されました。

  • 開発者ワークスペース

このワークスペースは、必要最小限のパネルから構成されています。デフォルトでは、ファイルパネルやスニペットパネルなど、Web サイトをコーディングする開発者にとって最も重要なパネルのみが含まれています。

  • 標準ワークスペース

このワークスペースには、コードとデザインの両方を処理するときに必要なすべてのパネルが含まれています(ファイルパネル、CC ライブラリパネル、CSS デザイナーパネル、挿入パネル、DOM パネル、アセットパネル、スニペットパネルなど)。

注意:

ワークスペースを選択した後、パネルを追加または削除してカスタマイズできます。ワークスペースのカスタマイズについて詳しくは、カスタムワークスペースの作成を参照してください。

ここでは、Dreamweaver CC 2015 と Dreamweaver CC 2017 のワークスペースの違いを簡潔に示します。

Dreamweaver CC 2015

  • 初心者
  • コード
  • 指定なし
  • デザイン
  • Extract

Dreamweaver CC 2017

  • 開発者
  • 標準

ワークスペースの変更について詳しくは、Dreamweaver ワークスペースを参照してください。

メニューの変更点

アプリケーションメニューが改良されました。頻繁に使用されないメニュー項目が削除され、また、より直感的な場所に移動された項目もあります。

Dreamweaver のアプリケーションメニューの変更点について詳しくは、再設計されたメニューを参照してください。

ツールバーの変更点

ツールバーがすべてのビューで共通になりました。現在作業しているビューに必要なツールのみが表示されます。

ただし、必要なツールセットを表示するようツールバーをカスタマイズすることもできます。 

詳しくは、ツールバーの概要を参照してください。

ステータスバーの変更点

コードビューで作業しているときに、ステータスバーに役立つ情報が表示されるようになりました。

以下の操作を実行できます。

  • INS(挿入)モードと OVR(上書き)モードの切り替え
  • 画面の下部に行と列の番号を表示します。これらの番号は、マウスがある行と列を示します。
  • 各種のコードファイルに対して、コードの色付けを適切に選択します。

詳しくは、ステータスバーの概要を参照してください。

スニペットパネルの変更点

新しいスニペットパネルは、外観の見やすさが向上しました。また、スニペットをより簡単に挿入できるように再設計されています。

以下の図は、スニペットパネルの主要な変更点を示しています。

スニペットパネルの UI の変更点
スニペットパネルの UI の変更点

Dreamweaver の以前のリリースでは、キーボードショートカットを使用してスニペットを挿入する必要がありました。

キーボードショートカットを使用したスニペットの挿入は、次の理由により、効率的な手順ではありませんでした。

  • 直感的でないショートカットを覚えておく必要がある
  • 製品のキーワードショートカットと競合する場合がある

今回のバージョンの Dreamweaver では、トリガーキーを使用してコードスニペットを挿入できます。

トリガーキーは、コードスニペットに割り当てられた使いやすいテキスト文字列です。例えば、mailto リンクを作成するコードスニペットの場合、トリガーキーとして "mailto" と入力します。

トリガーキーを割り当てた後、ドキュメントにカーソルを合わせ、"mailto" と入力し Tab キーを押します。Dreamweaver により、関連するコードスニペットがドキュメントに挿入されます。

スニペットパネルについて詳しくは、スニペットでコードを再利用するを参照してください。

ファイルパネルの変更点

ファイルパネルが再設計され、より使いやすく、直感的になりました。

最も単純な状態の場合、ファイルパネルには、コンピューターのローカルファイルのリストのみが表示されます。サイトの設定、リモートサーバーへの接続設定、チェックインとチェックアウトの有効化など、様々な作業をおこなうと、それにつれてファイルパネルに表示されるオプションは増えていきます。

ファイルパネルの変更点について詳しくは、新しくなったファイルパネルを参照してください。

「ようこそ」画面とオンボーディングエクスペリエンスの変更点

Dreamweaver を起動するか、すべての Dreamweaver ドキュメントを閉じたとき、新しい開始ワークスペースが表示されます。開始ワークスペースにより、最近使用したファイル、ライブラリ、スターターテンプレートにすばやくアクセスできます。

以前のダイアログボックスに慣れている場合は、Ctrl/Command+O を押して開くダイアログを起動するか、Ctrl/Command+N で新規ドキュメントダイアログを引き続き起動できます。  

Dreamweaver CC 2017 ワークスペースの変更点を簡単に克服するには、オンボーディングエクスペリエンスが役立ちます。カスタマイズエクスペリエンスを一通り簡単に体験したところで、ユーザーに合ったワークスペースおよびテーマオプションが表示されます。 

詳しくは、Dreamweaver ワークスペースを参照してください。

検索と置換でのライブハイライト

ウィンドウの上部にある新しい検索および置換ツールバーは、邪魔にならないようにデザインされており、画面のどの部分も遮りません。

全体として、検索および置換は、以前のバージョンの Dreamweaver と比べて速度と効率性が向上しています。Dreamweaver では、検索パネルに入力した文字列が検索され、その文字列のすべてのインスタンスが現在のドキュメントでハイライトされるようになりました。

詳しくは、テキストの検索と置換を参照してください。

Creative Cloud ライブラリの改善

Creative Cloud に保存されたアセットはすべてアーカイブ、復元、注釈の追加、バージョン履歴の確認ができます。これには、Creative Cloud ライブラリのファイル、CC デスクトップ製品で作成したアセット、モバイルプロジェクトが含まれます。

クラッシュ後のファイルの自動復元

Dreamweaver がシステムエラー、停電、その他の問題で予期せずシャットダウンした場合、編集中のファイルで保存されていなかった変更を復元できます。

詳しくは、ファイルの自動復元を参照してください。

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

法律上の注意   |   プライバシーポリシー