超簡単で超便利!Adobe Edge Inspectの使い方

Other 投稿日:2015.4.1  更新日:

PCブラウザとスマホをリアルタイムに連携してプレビューを見ることができる超便利ツール「edge inspect 」。最初だけ手順を踏んで設定する必要がありますが、一度設定してしまえば次からは簡単に使用できるので、スマホサイト等を作成する方は設定しておくとなにかと便利かと思います。edge-inspect-1 https://creative.adobe.com/ja/products/inspect

 

PCブラウザにはGoogle Chromeを使用します。 スマホはAndroidにも対応していますが、今回はIOSを搭載したiPhoneを例に設定していきます。

※この方法では同じネットワーク上にPCとスマホが接続されている必要があります。自宅の場合なら無線LAN環境にスマホが接続されているか確認しておいてください。

 

 PCにEdgeInspectをインストールする。

https://creative.adobe.com/ja/products/inspect

上記のURLにアクセスして、Adobe IDでログインしてください(Creative Cloudにユーザー登録しておく必要があります)。

edge-inspect-2

「ダウンロード」ボタンが表示されますので、クリックしてダウンロードしてください。

ダウンロードファイルを実行するとインストーラが立ち上がりますので、画面の指示にしたかってアプリをインストールします。 インストールが完了したらアプリを立ち上げます。

 Google Chromeに拡張機能をインストールする。

次にGoogle Chromeに拡張機能をインストールします。Googleを立ち上げ、Chrome Webストアにアクセスします。

https://chrome.google.com/webstore/

[edge inspect]と検索するとアプリケーション名が表示されるので、[+無料]ボタンをクリックしてインストールします。

edge-inspect-3

スマホにアプリをインストールする。

最後に、スマホにアプリをインストールします。iPhoneの場合はApp Storeで[edge inspect]と検索し、アプリをインストールしてください。

インストールが完了したらアプリを起動します。ここまで準備がうまくいっていればコンピュータ名が表示されるので、接続したいコンピュータ名をタップします。

すると、6ケタの番号のパスコードが表示されるので、先程インストールしたGoogle Chrome の拡張機能アプリケーションに入力します。

edge-inspect-4

edge-inspect-5

入力後、チェックマークをクリックすると認証が始まります。成功するとスマートフォンに、PCで開いているサイトが表示されます。

edge-inspect-6

うまく設定できましたでしょうか。同じネットワーク上にPCとスマホが接続されている必要があったり、adobeにログインしなくてはいけなかったり、多少の準備は必要ですが、edge inspectを使用することで、スマホサイトの作成がより快適になるはずです。 また、同じadobeが提供しているedgeの開発ツールである「Edge Animate」で作業する際にも重宝します。 edge inspectを使用して、より快適な開発環境を構築してください。

edge-animate

google広告

google広告

この記事を書いた人:

おすすめ記事

bakuDESIGN+_ipad_pro1

【開封レビュー】iPad Pro11インチ、Apple Pencil 、Smart Keyboardに大満足

・iPad Pro11のインチ ・ApplePencil第二世代 ・SmartKeyboard   のiPadPro3点セット 総額¥176,120(ヨドバシカ …

iMac(Retina 5K 27インチ)にアマゾンで購入したメモリを増設する方法

マイベストパートナーとしてすっかり馴染んできたiMac(Retina 5K 27インチ)。最近は動画を作成する機会が増えてきて、メモリが足らないと感じることが増 …

LINEクリエイターズスタンプ「ツンデレラ」を販売しています。

2014年5月にサービスを開始して、なにかと話題になったLINEクリエイターズスタンプ。bakuからも「ツンデレラ」という名でちゃっかり販売しちゃってます!その …