Help us understand the problem. What is going on with this article?

Macで起動したDreamweaverのデバイスプレビューにWindows10のEdgeで接続できない時の解決法

Dreamweaverのデバイスプレビュー機能を使ってスマホなどからWebページの表示確認ができますが、私はMacでコーディング作業しているため、EdgeやIEでの表示をテストしたいときは、別のWindows10パソコンから自宅のWi-Fi経由でMacのDreamweaverに接続して表示確認していました。ところが、Edge立ち上げてデバイスプレビューのURLを入力しても、自分の環境ではほぼ確実に「404 error page」になってしまいます。そこで、いろいろ試して解決法が見つかったので書きます。ただし、根本的な原因は未だ不明です。※Firewallの設定を疑いましたが、それが原因ではなかったみたいです。

動作環境:
* macOS Mojave
* Windows 10 Home
* 対象バージョン: Dreamweaver 2019, CC2018

再現手順

Mac側
1. Dreamweaverでサイトのソースコードを開き、右下の「プレビュー」ボタンをクリック
2. Popupされた「デバイスでプレビュー」記載のURL: https://adobe.ly/●●● を表示したままにしておく

Windows10側
1. Edgeを起動する
2. アドレスバーにプレビュー用のURL(https://adobe.ly/●●●)を入力する
3. Adobeのサインイン画面が表示された場合、Adobe IDでサインインする

結果、
www.adobe.com からの応答「404 ERROR PAGE」画面が表示されて、プレビューできない!

解決法

Edgeが「404 ERROR PAGE」を返された時は、IE11からサインインするとEdge側でもデバイスプレビューできるようになります。その手順は、

Windows10側
1. 「スタートメニュー」右クリック、「検索」を選択
2. 検索項目の入力欄に「Internet Explorer」と入力し、検索結果に表示されたIEをクリックしてIE11を起動する。
3. プレビュー用のURL(https://adobe.ly/●●●)をIE11のアドレスバーに入力する。これでIE11はプレビューできます!
4. Edgeの画面に戻り、IE11のアドレスバーに表示されているhttp://192.168.xx.xx:port/preview/app/index.html 形式のURLをEdgeのアドレスバーにコピペする

これでEdgeでもプレビューできるようになりました!

困った点としては、Edgeを一旦終了させてしまうと、次にEdgeを起動した時にまた上記の手順をやり直さなければならないことです。しかも、Adobe CCは最近、2段階認証するようになったので(無効化しない限り)、サインインの度にSMSに送信されてくる確認コードを画面に入力しなければなりません。

デバイスプレビューに代わるお手軽な手段

毎回これではあまりに効率悪いので、私は最近、EdgeやIE11でサイトの表示を確認する時は、デバイスプレビューを経由せず、MacでApache起動して普通にブラウザにプライベートIPアドレス打ち込んでWebサーバー経由でアクセスすることにしています。Macには最初からApacheが入っているので、httpd.confを設定するだけですぐ使えるようになります。最低限の設定は、ターミナルから

$ cd /etc/apache2/
$ sudo vi httpd.conf

編集箇所は、

  • DocumentRoot
  • <Directory "上記で決めたhtdocsのパス">
  • User ログイン名 (/users/のパスに出てくる名前)
  • ServerName localhost に設定(しないと/var/log/apache2/error_logがうるさい)
  • LoadModule php7_module libexec/apache2/libphp7.so (PHPも有効にしておくと後で役立つ)

Apacheの起動

$ sudo /usr/sbin/apachectl start

Apacheの終了

$ sudo /usr/sbin/apachectl stop

スマホ実機やXcodeのiOSシミュレーターでの表示確認も同様に、Apache経由の方が遥かに簡単です。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away