WEB Tips デザイン・コーディング

Dreamweaverでリアルタイムプレビューできない場合の解決方法

2017-10-27

本記事にはプロモーションが含まれています。

Dreamweaverでリアルタイムプレビューできない場合の解決方法

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

Dreamweaverを使っている時にF12でブラウザプレビューして確認するのが昔からの操作方法だったのですが、CCから?リアルタイムプレビューという機能になっています。

Browsersyncみたいに修正と同時に自動的に更新されるんですよねきっと。

このリアルタイムプレビューがWindow10環境でなぜか表示されない。。。

おそらくアンチウィルスソフトやファイヤーウォールの影響かなと思っているのですが、明確な原因はわかっていません。

でもこの記事の手順でリアルタイムプレビューが表示されるようになりました。Adobeのサポートページにも載っていますが、リアルタイムプレビューされない問題を解決する手順は以下の通りです。

Adobe CCのプランを比較するなら

Adobe CC コンプリートプランと単体プラン、どちらを選ぶべき?
Adobe Creative Cloud プランの比較

1)NodePort.jsonファイルを作成

NodePortという名前のjsonファイルを作成し、リアルタイムプレビューで使用するポートを記述します。

{
"previewport" : portナンバー
}

使用するポートが8000番の場合は以下のようになります。

{
"previewport" : 8000
}

2)NodePort.jsonの保存場所

作成したNodePort.jsonをDreameweaverの設定関連のディレクトリへ保存します。

Windowsの場合:

%appdata%\Adobe\Dreamweaver CC 2017\ja_JP\Configulation

Macの場合:

~/Library/Application Support/Adobe/Dreamweaver CC 2017/ja_JP/Configuration

3)Dreamweaverを再起動する

ドリームウィーバーを再起動してリアルタイムプレビューを確認してみます。

表示されるようになりました!

今回の対処法で必ず解決するわけではないと思いますので予めご承知おきください。
こちらの方法も含めて詳しくはAdobeサポートページに記載があります。

こちらもおすすめ 2024年最新 Adobe CC コンプリートプランを安く更新できる!一番安い購入方法

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, デザイン・コーディング
-,