*Adobe Edge Inspect CCのスマホでライブプレビュー

Adobe Edge Inspect CCのスマホでライブプレビュー

Adobe Edge Inspect CCを使うと簡単にiOS、Androidでの端末で確認ができます。
iOS、Androidをそれぞれ別々にしかも同時にライブプレビューをしてくれます。
すごい便利ですねー。

まずはこのイメージをみてくれると簡単に説明ができます。(画像が荒いですがご勘弁。。)


左下はiPhone5(6sほしいよ)と右がAndroid(格安gooスマホ)です。Adobe Edge Reflow CCで編集するとこんな感じ。ライブプレビューが簡単にできます。
正確にはChromeで表示しているページをスマホにライブビューします。なのでBracketsのライブビュー機能が同じChromeなのでBracketsでも使用できます。

方法は超簡単です。Adobe Edge Reflowに関してはこの後詳しく説明しますので、まずは以下のようにインストールだけ済ませてください。

重要なこと!

Adobe Edge Inspect CCのライブプレビューを利用するにはスマホで同じルータから無線接続していることが大前提です。
そしてGoogle Chromeが必要です。

まずはインストールから

Adobe Edge Reflow CCとAdobe Edge Inspect CCをインストールします。
Adobe Edge Reflow
Adobe Edge Inspect CC

1.最初にChrome(Chromeでしか今のところできないようです。)にアプリをインストールしてください。
https://chrome.google.com/webstore/category/apps?hl=ja

そうすると「In」というアイコンがブラウザの右側につきます。そのままでオッケーです。
アイコン

そしてそのアイコンをクリックしてみると、こんな感じでIPアドレスが表示されます。
IPが表示されます。

2.次にiOS、Androidでアプリを検索してインストールします。
iOS Adobe Edge Inspect CC
Android Adobe Edge Inspect

Adobe Edge Reflowを起動する。

Adobe Edge Reflowを起動をしてください。初めて起動する人は最初にサンプルが表示されているはずなのでそのままで結構です。すでに利用している方は新規でプロジェクトを作成してください。

起動すると自動的に接続するパソコンの名前が表示されるはずです。もしも表示されない場合は右上の「+」プラスボタンを押して、先ほどのChromeにインストールした「In」のアイコンをクリックしてIPアドレスを入力してください。
macの名前

次にスマホ側にパスコードが表示されます。
パスコード

そうするとChrome側にスマホの名称が表示されますのでこのパスコードを入力してください。
パスコードを入力

Adobe Edge Reflowのプレビューボタンで表示

あとはAdobe Edge Reflowの画面の右側にある目のマークをクリックすると終わり。これだけで同時にライブプレビューができます。
プレビューボタンで表示<