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側
- Dreamweaverでサイトのソースコードを開き、右下の「プレビュー」ボタンをクリック
- Popupされた「デバイスでプレビュー」記載のURL:
https://adobe.ly/●●●を表示したままにしておく
Windows10側
- Edgeを起動する
- アドレスバーにプレビュー用のURL(
https://adobe.ly/●●●)を入力する - Adobeのサインイン画面が表示された場合、Adobe IDでサインインする
結果、
www.adobe.com からの応答「404 ERROR PAGE」画面が表示されて、プレビューできない！
解決法
Edgeが「404 ERROR PAGE」を返された時は、IE11からサインインするとEdge側でもデバイスプレビューできるようになります。その手順は、
Windows10側
- 「スタートメニュー」右クリック、「検索」を選択
- 検索項目の入力欄に「Internet Explorer」と入力し、検索結果に表示されたIEをクリックしてIE11を起動する。
- プレビュー用のURL(
https://adobe.ly/●●●)をIE11のアドレスバーに入力する。これでIE11はプレビューできます！ - Edgeの画面に戻り、IE11のアドレスバーに表示されている
http://192.168.xx.xx:port/preview/app/index.html形式のURLをEdgeのアドレスバーにコピペする
これでEdgeでもプレビューできるようになりました！
困った点としては、Edgeを一旦終了させてしまうと、次にEdgeを起動した時にまた上記の手順をやり直さなければならないことです。しかも、Adobe CCは最近、２段階認証するようになったので（無効化しない限り）、サインインの度に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経由の方が遥かに簡単です。