デバイスを Dreamweaver デスクトップアプリケーションに接続し、様々なデバイスで Web ページをプレビュー、検証、テスト、およびデバッグします。
Web ページのプレビューと検証

Dreamweaver で、複数のデバイスで同時に Web ページを実稼働環境でテストできるようになりました。様々なフォームファクターで Web ページのフローを確認できるだけでなく、ページ上のインタラクティブな機能もテストできます。モバイルアプリをインストールしたり、デバイスをデスクトップに物理的に接続したりする必要はありません。自動生成された QR コードをデバイスでスキャンして、デバイスで Web ページをプレビューするだけです。

ライブインスペクトは、デスクトップでトリガーされると、接続されたすべてのデバイスに反映され、様々なエレメントを検査したり、必要に応じてデザインを調整したりできます。

前提条件

QR コードスキャナーがデバイスにインストールされていることを確認します。
コンピューターおよびモバイルデバイスがインターネットに接続されており、同じネットワーク上にあることを確認します。
Adobe ID の資格情報があることを確認します。プレビュー中にデバイスにログインするには、コンピューターで Dreamweaver を使用するときの Adobe ID が必要です。
企業のお客様の場合は、デバイスプレビューサービスへのアクセスに必要なアクセス許可があるかどうかを確認します。
デバイス上のブラウザー設定で JavaScript と Cookie が有効になっていることを確認します。

サポート対象デバイス

すべての Android と iOS のデバイス

デバイスでの Web ページのプレビュー

  1. デスクトップコンピューターで Dreamweaver を起動して、デバイスでプレビューする Web ページを開きます。

  2. ドキュメントツールバーのリアルタイムプレビューアイコンをクリックします。

    デバイスのリアルタイムプレビュー
    デバイスのリアルタイムプレビュー

    デバイスプレビューポップアップに QR コードと短い URL が表示されます。

     

  3. Web ドキュメントをプレビューするモバイルデバイスで QR コードをスキャンします。複数のデバイスを接続するには、それぞれのデバイスで QR コードをスキャンします。

  4. デバイスにログイン画面が表示されます。自身の Adobe ID 資格情報でログインします。Dreamweaver や Creative Cloud を使用するときと同じ Adobe ID を使用してください。

    デバイス上のログイン画面
    デバイス上のログイン画面

  5. ログインに成功すると、接続されたデバイスの名前がデバイスプレビューポップアップに表示されます。これで、接続したデバイス上で Web ページのプレビューを確認できます。

    デバイスプレビューポップアップで表示される接続されたデバイス
    デバイスプレビューポップアップで表示される接続されたデバイス

注意:

ポップアップのデバイス名を実際のデバイスとマッピングするには、デバイス名にマウスポインターを置きます。対応するデバイスにフィードバック画面が表示されます。

デバイスでの Web ページの検証

接続されたすべてのデバイスで Web ページを検証するには、Dreamweaver ツールバーのインスペクトアイコンをクリックします。

ツールバーのインスペクトオプション
ツールバーのインスペクトオプション

特定のデバイスで Web ページを検証するには、デバイスプレビューポップアップで対応するデバイス名のインスペクトアイコンをクリックします。Dreamweaver のビューポートが対応するデバイスのビューポートと一致するように設定され、その特定のデバイスと Dreamweaver で検証が実行されます。

インスペクトモードを終了するには、Dreamweaver でもう一度インスペクトアイコンをクリックします。

デスクトップで行った Web ページに対する編集は、確定後すぐにデバイスに反映されます。

デバイスプレビューに関する問題のトラブルシューティング

デバイスへの接続中、またはデバイスでの Web ページのプレビュー中に問題が発生した場合は、デバイスプレビュー - トラブルシューティング内の情報を参照してください。

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

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