はじめに
マルチデバイス ウェブをターゲットとするウェブ デベロッパーの場合、さまざまなデバイスや構成でサイトとウェブアプリをテストする必要があります。同期テストはこのような場合に役立ちます。また、多くのデバイスやブラウザで同時に同じインタラクションを自動的に実行する効果的な方法です。
同期テストは、特に時間のかかる次の 2 つの問題の解決に役立ちます。
- すべてのデバイスとテストする URL の同期を維持する。各デバイスに手動で読み込むのはこれまでの作業であるため、時間がかかり、リグレッションを逃すことが簡単になります。
- インタラクションを同期する。ページの読み込みが可能なことは視覚的テストには適していますが、インタラクション テストではスクロール、クリック、その他の動作を同期できるのが理想的です。
幸いなことに、ターゲット デバイスの一部にアクセスできる場合は、パソコンからモバイル デバイスへのフローを改善するためのさまざまなツールがあります。この記事では、Ghostlab、Remote Preview、Adobe Edge Inspect、Grunt について説明します。
ツール
GhostLab（Mac）
Ghostlab は商用 Mac アプリケーション（$49）で、複数のデバイスでサイトとウェブアプリのテストを同期するために設計されています。最小限の設定で、次のデータを同時に同期できます。
- クリック数
- ナビゲーション
- スクロール数
- フォームの入力（ログイン フォーム、登録など）
これにより、複数のデバイスでのサイトのエンドツーエンドのユーザー エクスペリエンスを非常に簡単にテストできます。デバイスのブラウザでページを開いた後、ナビゲーションに変更（更新を含む）があると、接続されている他のデバイスもすぐに更新されます。Ghostlab はローカル ディレクトリの監視をサポートしているため、この更新はローカル ファイルに編集内容を保存する場合も行われ、常に同期が維持されます。
Ghostlab の設定は簡単なプロセスだと思いました。開始するには、試用版（購入する場合は完全版）をダウンロードしてインストールし、実行します。次に、Mac とテスト対象のデバイスを同じ Wi-Fi ネットワークに接続して、検出可能にする必要があります。
Ghostlab を実行したら、[+] をクリックしてテスト用の URL を追加するか、ブラウザのアドレスバーからドラッグします。または、テストするローカル フォルダをメイン ウィンドウにドラッグすると、新しいサイトエントリが作成されます。この記事では、http://html5rocks.com のライブ バージョンをテストします。、）
サイト名の横にある再生ボタンをクリックすると、新しい Ghostlab サーバーを起動できます。これにより、ネットワークに固有の IP アドレス（例: http://192.168.21.43:8080）で利用可能な新しいサーバーが起動します。
ここでは Nexus 4 を接続し、Chrome for Android で Ghostlab から提供された IP アドレスにアクセスしています。必要な作業はこれだけです。Ghostlab では、他のソリューションのようにデバイスごとに専用のクライアントをインストールする必要はなく、より迅速にテストを開始できます。
Ghostlab の URL に接続するデバイスは、Ghostlab のメイン ウィンドウの右側にあるサイドバーの接続済みクライアントのリストに追加されます。デバイス名をダブルクリックすると、画面サイズや OS などの詳細が表示されます。これで、クリックの移動と同期をテストできるようになりました。イェイ。
Ghostlab は、UA 文字列、ビューポートの幅と高さ、デバイスのピクセル密度、アスペクト比など、接続されたデバイスに関する統計情報を表示することもできます。エントリの横にある設定の歯車アイコンをクリックすることで、検査するベース URL をいつでも手動で変更できます。以下のような構成ウィンドウが開きます。
これで、接続された他のデバイスのいずれかを選択し、HTML5Rocks の別のリンクをクリックすると、パソコンの Chrome（同じ Ghostlab URL を入力した場所）とすべてのデバイスの両方でナビゲーションが同期されます。
さらに、Ghostlab には、ネットワーク経由ですべてのリンクをプロキシできるオプションがあり、http://192.168.21.43:8080/www.html5rocks.com ではなく www.html5rocks.com/en/performance に完全に移動できる点です。
有効にするには、[Content Loading] タブで [Load all content through Ghostlab] をオンにします。
実例:
Ghostlab は、サポートされている任意のブラウザで、任意の数のサイトやウィンドウを読み込むことができます。これにより、サイトをさまざまな解像度でテストできるだけでなく、さまざまなブラウザやプラットフォームでコードがどのように動作するかをテストできます。正解です。
Ghostlab では、プレビューするプロジェクト ワークスペースの設定を構成できます。また、ディレクトリに対する変更を検出し、監視して更新するかどうかを指定できます。つまり、変更すると、接続されているすべてのクライアントが更新されます。手動での更新が不要に
また、Ghostlab では他にどのようなサポートがあるのか気になっている方もいるかもしれません。確かにスイス製のナイフではありませんが、コネクテッド デバイスでのリモートコード検査もサポートしています。メイン インターフェースでデバイス名をダブルクリックすると「デバッグ」オプションが表示されます。これにより、Chrome DevTools が起動します。
Ghostlab では、バンドルの Weinre リモート ウェブ インスペクタを使用してこれを行うことができます。これにより、スクリプトをデバッグし、接続されたデバイスでスタイルを調整できます。Chrome for Android で利用できるリモート デバッグと同様に、要素を選択し、パフォーマンス プロファイリングやデバッグ スクリプトを実行できます。
全体として、Ghostlab を使用すると、デバイスをまたいだ日常的なテストを迅速に行えることに感銘を受けました。フリーランスの場合、商用ライセンスのコストが少し高くなる可能性があります（その他のオプションについては以下をご覧ください）。そうでなければ Ghostlab をおすすめいたします
Adobe Edge Inspect CC（Mac、Windows）
Adobe Edge Inspect は Adobe Creative Cloud サブスクリプション パッケージに含まれていますが、無料トライアルとしても利用できます。（Chrome 拡張機能の Edge Inspector を使用して）複数の iOS デバイスや Android デバイスを Chrome で操作できます。これにより、特定の URL にアクセスしても、接続されているすべてのデバイスが同期された状態を維持できます。
設定するには、まず Adobe Creative Cloud アカウントに登録するか、既存のアカウントにログインします（すでにお持ちの場合）。次に、Adobe.com から Edge Inspector をダウンロードしてインストールします（現時点では Mac と Windows で利用可能ですが、Linux では利用できません）。Edge Inspect のdocsは、管理しておくと便利です。
インストールが完了したら、Chrome 用の Edge 検査拡張機能を入手して、接続されたデバイス間でブラウジングを同期できるようにします。
また、アクションを同期するデバイスごとに Edge Inspect クライアントをインストールする必要があります。幸いなことに、クライアントは iOS、Android、Kindle で利用できます。
インストール プロセスが済んだので、ページの検査を開始できます。 そのためには、すべてのデバイスが同じネットワークに接続されている必要があります。
パソコンで Edge Inspect を起動し、Chrome で Edge Inspect 拡張機能を起動してから、デバイス上のアプリを開きます（以下を参照）。
これで、パソコンで HTML5Rocks.com などのサイトに移動でき、モバイル デバイスでも自動的に同じページに移動します。
また、下のスクリーンショットのように、拡張機能にはデバイスの横に <> 記号が表示されます。これをクリックすると Weinre のインスタンスが起動し、ページの検査とデバッグを行うことができます。
Weinre は DOM のビューア兼コンソールであり、JavaScript のデバッグ、プロファイリング、ネットワーク ウォーターフォールといった Chrome DevTools の機能はありません。これは必要最小限のデベロッパー ツールですが、DOM や JavaScript の状態のサニティ チェックには便利です。
Edge Inspect 拡張機能では、接続されているデバイスからスクリーンショットを簡単に生成することもできます。レイアウト テストや、ページのキャプチャを取得して他のユーザーと共有する場合に便利です。
すでにクレジット カードの料金を支払っているデベロッパーにとって、Edge Inspect は優れたソリューションです。ただし、各デバイスに専用のクライアントのインストールが必要な点や、Ghostlab のような代替手段では見つからないような追加のセットアップ作業など、いくつかの注意点があります。
リモート プレビュー（Mac、Windows、Linux）
リモート プレビューは、HTML ページとコンテンツを複数のデバイスで表示できるオープンソース ツールです。
リモート プレビューは 1,100 ミリ秒ごとに XHR 呼び出しを実行し、構成ファイル内の URL が変更されているかどうかを確認します。タグがある場合、スクリプトは各デバイスのページに読み込まれた iframe の src 属性を更新し、ページを読み込みます。変更が検出されない場合、変更が行われるまでスクリプトはポーリングを続行します。
これは、デバイスをチェーン接続して、すべてのデバイスで URL を簡単に変更する場合に便利です。手順:
- リモート プレビューをダウンロードし、すべてのファイルをローカルのアクセス可能なサーバーに移動します。Dropbox や開発用サーバーなどです
- すべての対象デバイスで、このダウンロードから「index.html」を読み込みます。このページはドライバとして使用され、iframe を使用してテストするページが読み込まれます。
- 「url.txt」（ダウンロードに含まれ、サーバーで提供されるようになった）を、プレビューする URL で編集します。このファイルを保存します。
- リモート プレビューは url.txt ファイルが変更されたことを認識し、接続されているすべてのデバイスを更新して URL を読み込みます。
ローファイ ソリューションである一方、リモート プレビューは無料で機能します。
Grunt + ライブリロード（Mac、Windows、Linux）
Grunt（および Yeoman）は、フロントエンドでプロジェクトのスキャフォールディングとビルドを行うためのコマンドライン ツールです。これらのツールをすでに使用していて、ライブリロードを設定している場合は、ワークフローを簡単に更新してクロスデバイス テストを有効にできます。これにより、エディタで変更を加えるたびに、ローカルアプリを開いたいずれかのデバイスで再読み込みが発生します。
grunt server は、おそらく使い慣れているでしょう。プロジェクトのルート ディレクトリから実行すると、ソースファイルの変更が監視され、ブラウザ ウィンドウが自動的に更新されます。これは、サーバーの一部として実行する grunt-contrib-watch タスクのおかげです。
Yeoman を使用してプロジェクトをスキャフォールドアウトした場合は、デスクトップでライブリロードを動作させるのに必要なものがすべて入った Gruntfile が作成されます。クロスデバイスで機能させるには、1 つのプロパティ（デスクトップの hostname）を変更するだけです。これは connect の下に表示されるはずです。hostname が localhost に設定されている場合は、0.0.0.0 に変更します。次に grunt server を実行すると、通常どおり新しいウィンドウが開き、ページのプレビューが表示されます。URL は http://localhost:9000 のようになります（9000 がポートです）。
新しいタブまたはターミナルを起動し、ipconfig | grep inet を使用してシステムの内部 IP を検出します。192.168.32.20 のようになります。最後に、ライブリロードの同期先となるデバイスで Chrome などのブラウザを開き、この IP アドレスと前のポート番号を入力します（例: 192.169.32.20:9000）。
これで、ライブ リロードにより、パソコンでソースファイルを編集すると、パソコンのブラウザとモバイル デバイスのブラウザの両方で再読み込みがトリガーされるようになりました。うまくできました。
Yeoman では、このワークフローを簡単に設定できるモバイル ジェネレータも提供されています。
エメット・ライブスタイル
Emmet LiveStyle は、開発ワークフローでライブ CSS 編集を行うためのブラウザおよびエディタ プラグインです。現在は Chrome、Safari、Sublime Text で使用でき、双方向（エディタからブラウザへ、またはその逆）の編集をサポートしています。
Emmet LiveStyle は、変更時にブラウザを完全に更新するのではなく、DevTools のリモート デバッグ プロトコル全体で CSS の編集をプッシュします。つまり、デスクトップ エディタで行った変更は、パソコンの Chrome でも Android 版 Chrome でも、接続されているどのバージョンの Chrome でも確認することができます。
LiveStyle には「マルチビュー モード」と呼ばれる機能があります。これは、複数のウィンドウやデバイスをまたいでレスポンシブ デザインをテストして調整する場合に最適です。マルチビュー モードでは、同じページの DevTools の更新と同様に、エディタの更新がすべてすべてのウィンドウに適用されます。
LiveStyle パッケージをインストールして、ライブ CSS 編集を開始するには:
- Sublime Text を起動して、プロジェクトの CSS ファイルを開く
- Chrome を起動し、編集する CSS のページに移動します。
- DevTools を開き、[LiveStyle] パネルに移動します。[LiveStyle を有効にする]に チェックを入れます注: スタイルの更新を適用するには、各ウィンドウのライブ編集セッションの間、DevTools を開いたままにする必要があります。
- これを有効にすると、スタイルシートのリストが左側に、エディタ ファイルのリストが右側に表示されます。ブラウザに関連付けるエディタ ファイルを選択します。これで、ブーム。
ファイルを編集、作成、開いたり閉じたりすると、エディタ ファイルのリストが自動的に更新されるようになりました。
まとめ
クロスデバイス テストは、今も急速に動き続ける新しい分野であり、多くの新しい候補が開発中です。幸いなことに、幅広いデバイスセットで互換性を確保し、テストを行うための無料または商用のツールが多数存在します。
とはいえ、この分野にはまだ多くの改善の余地があるため、デバイスをまたいだテストに使用するツールをさらに改善する方法を検討することをおすすめします。セットアップ時間を短縮し、クロスデバイス ワークフローを改善できれば、成功につながります。
問題
おそらく、これらのツールでのテスト中に遭遇した最大の問題は、デバイスが定期的にスリープ状態になることでした。これは問題ではありませんが しばらくすると煩わしいものになります回避策としては、デバイスをスリープ状態にしないことをおすすめします。ただし、常に電源に接続していないとバッテリーが消耗する可能性があるので注意してください。
GhostLab については、個人的に大きな問題は見当たりませんでした。49 ドルというと、価格がやや高すぎると感じる人もいますが、定期的に使用している場合は、多かれ少なかれ費用になることを覚えておいてください。セットアップの利点の一つは、ターゲット デバイスごとにクライアントのインストールと管理について心配する必要がないことです。どこでも同じ URL が機能していたのです。
Adobe Edge Inspect では、各デバイスに特定のクライアントをインストールして使用する作業が少し面倒だと思いました。また、接続されているすべてのクライアントが一貫して更新されないこともわかりました。つまり、Chrome 拡張機能から自分で更新しなければならないこともわかりました。また、Creative Cloud のサブスクリプションが必要です。また、サイトの読み込みは、デバイス上の選択したブラウザではなく、クライアントでのみ行われます。これにより、正確なテストが制限される可能性があります。
リモート プレビューは宣伝どおりに機能しましたが、非常に軽量です。つまり、デバイスをまたいでサイトを更新するだけでは、より高度なツール オプションが必要になります。たとえば、クリックやスクロールは同期されません。
推奨事項
無料のクロスプラットフォーム ソリューションをお探しの場合は、リモート プレビューの使用をおすすめします。有料のソリューションを探している企業で働く人にとって、GhostLab は私のエクスペリエンスに一貫して非常に優れていますが、Mac でのみ利用可能です。Windows ユーザーには、Adobe Edge Inspect が最適です。ただし、特異点は除くと、通常は問題なく機能します。
Grunt と LiveStyle は、開発中のライブイテレーションを強化するのにも優れています。