「Advent Calendar in 信州松本（だけじゃなくてもいいよ） 」に参加させていただきました。22日目、宜しくお願いします。自分は最近検証環境で覚えたツールを紹介します。

Adobe Edge Inspect
Webサイト制作において、画面の高解像度化やレスポンシブ化に伴い、サイト制作において『実機検証』というものが非常に重要になってきたかと思います。しかし、複数のデバイスでURLを打ち、繰り返し閲覧する作業は検証機の数分手間がかかり下手すると作業工数にも影響が出かねません。このような複数のデバイスをペアリングさせてサイトをプレビューする機能を持つのがAdobe Edge Inspectです。

利用する条件
Creative Cloudの無償メンバーシップでも利用可能ですが、同時に利用出来るデバイスが1台と制限されています。正規メンバーシップになるか、サブスクリプションを購入する事で無制限で複数のデバイスを利用する事ができます。

設定手順

1. Adobe Edge InspectをデスクトップPCにインストールします。
2. 上記PC内のChromeに拡張機能をインストールします。
3. 検証対象とするデバイスにEdge Inspectアプリをインストールします。右のようにアプリケーションは機能拡張のタイトルから設定する事が可能です。

操作手順

• PC上のEdge InspectやChromeを起動します。
• 各デバイスが同一のWi-Fi上にあるかを確認し、それぞれにインストールしたEdge Inspectを起動します。自動的にネットワーク状のホストを検索しますが、初回時には各デバイスのEdge Inspectの［Connections］に接続用のパスコードが表示されますので、そのコードをChromeの機能拡張設定に入力しますと画面の同期が完了します。
• あとは、Chrome上で目的のWebサイトを表示しますと、各デバイスも同期的にブラウジングします。
• ChromeのEdge Inspect機能拡張設定内では、各デバイスのキャッシュのクリア、フルスクリーン表示機能が用意されています。
• 開発者であれば、JS Binが組み込まれたデバッグ機能がありがたいようです。ブラウザー上でリアルタイムにHTML／CSS／JavaScriptのコーディングと検証がおこなえます。
• 接続されたデバイスのスクリーンショットを取得する事も可能です。撮影するとデバイスの情報（URL、サイズ、OS、端末の種類、画面ピクセル密度）と共にPC内に収集されます。

VIDEO
Introducing Adobe Edge Inspect


JS Bin & Adobe Shadow



Chrome User Agent
最近のChromeには、Safariの開発ツールのように、User Agentを切り替える機能が実装しています。



Expression Web SuperPreview
Windowsだけのツールとなりますが、IEのバージョン毎のチェックではExpression Web SuperPreviewなどもあります。使い方はIE Testerと同じですが、2つの画面を重ねて微妙な位置のズレなどを数値化するなどユニークな機能を持っています。


では、「Advent Calendar in 信州松本（だけじゃなくてもいいよ） 」23日目の方、よろしくお願いします。