【iPhone】スマホサイト制作で役立つ!簡単なデバッグ方法【Android】

ヒロさん


【iPhone】スマホサイト制作で役立つ!簡単なデバッグ方法【Android】

こんにちは、デザイナーチームマネージャーのひろです。

3月になりました。花粉症の方は、つらい季節ですねぇ〜。

かくいう私は、花粉症をまだ発症しておらず、いつになるのか毎日不安な日々を送っております。年齢的にもそろそろ発症するのかなとビクビクしているところです。

さて、みなさんに質問です。現在お使いの携帯は、スマートフォンですか?それともフィーチャーフォンですか?

昨年の世界のスマートフォンの出荷台数はついに10億台を突破したようですね。

前年と比べると約38.4%も伸びており、かつ携帯電話全体のシェアの55.1%を占めているとかいないとか。日本全国でも55.2%の普及率と、凄い数字になっています。

参照記事:マイナビニュース

http://news.mynavi.jp/news/2014/02/02/011/

今後もますます伸びていきそうなスマートフォン市場。弊社でもスマートフォンサイトを制作する案件がドンドン増えてきています。

そこで、スマートフォンサイトを制作する上で、とても便利なデバッグ手法を2つご紹介したいと思います。

前半はMac PCを使ってiPhoneをデバックする方法、後半は「Adobe Creative Cloud」を使ってiPhoneとAndroidのスマホをデバックする方法です。

長い記事なので、時間がない方は、とりあえずブックマークしておくことをオススメします!

目次

Macユーザー必見!5分でできるiPhoneのデバッグ方法

iPhoneの確認なら、簡単で導入も早いこの手法がオススメです。

Macユーザーでこの手法を知らない方は、かなり損をしています。この記事を読んだら早速実行してみてください!

Step1. iPhoneをコネクタでMac PCに接続

まず、iPhoneをコネクタでMac PCに接続します。

Step2. Mac PCのSafariを起動

次に、Mac PCのSafariを起動します。特に難しいことはありませんね。

ちなみに、今回ご紹介するデバック方法を利用するにはSafari6以上が必要です。

Step3. iPhoneのWebインスペクターを設定

ここからがポイントで、iPhoneのWebインスペクターを設定します。

手順は以下の通りです。

手順

1.「設定」をタップ

「設定」をタップ

 

2.「Safari」をタップ

「Safari」をタップ

 

3.「詳細」をタップ

「詳細」をタップ

 

4.「Webインスペクタ」をONにする

「Webインスペクタ」をONにする

Step4. ブラウザの「開発」メニューを表示

ブラウザの「開発」メニューを表示します。

手順

1.「Safari」「環境設定」をクリック

「Safari」→「環境設定」をクリック

 

2.「詳細」タブをクリック→「メニューバーに”開発”メニューを表示」にチェックを入れる

「詳細」タブの「メニューバーに”開発”メニューを表示」にチェックを入れる

Step5. 「開発」メニューからデバイスを選択

「開発」メニューをクリックして、デバイス名を選択

「開発」メニューをクリックし、接続しているデバイス名を選択します。

Step6. Webインスペクターでデバッグ

これでWebインスペクターが起動するので、PCのブラウザでデバッグするようにコードを調査する事ができます。エレメントもコンソールも表示できるので、とても便利です。

Webインスペクターを起動

Webインスペクターを起動すると、

Webインスペクターで選択した箇所がハイライトされます

選択した箇所がハイライトされます。

いかがでしたか? これで、iPhoneのデバッグは、かなり効率的に行う事ができるようになると思います。

続いて、「Adobe Edge Inspect」を使ったデバッグ方法です!

「Adobe Creative Cloud」ユーザーにオススメ!「Adobe Edge Inspect」を使うデバッグ方法

Chromeでエミュレートしている方、そのやり方はもう古い!

この方法を使って、もっと効率的にデバッグしましょう。

Step1. スマートフォンをコネクタでPCに接続

こちらも同じで、とりあえずスマホをコネクタでPCに接続します。

Step2. PCに「Adobe Edge Inspect」をインストール

接続後、「Adobe Edge Inspect」をインストールします。

Adobe Edge Inspect

Adobe Edge Inspect
http://html.adobe.com/jp/edge/inspect/

Step3. Chrome エクステンションをインストール

Adobe Edge Inspectのインストール後、Chrome エクステンションをインストールします。

ここでまだGoogle Chromeをインストールしていない方は、エクステンションをインストールする前に、下記からダウンロードしてインストールしてください。

インストール後、Google Chromeを起動してください。

Google Chrome
http://www.google.co.jp/intl/ja/chrome/browser/

Google Chromeの起動後に、Adobe Edge Inspectのエクステンションをインストールしてください。

Adobe Edge Inspect エクステンション
https://chrome.google.com/webstore/detail/adobe-edge-inspect-cc/ijoeapleklopieoejahbpdnhkjjgddem

Step4. 「Adobe Edge Inspect アプリ」をインストール

お持ちのスマートフォンに、「Adobe Edge Inspect アプリ」をインストールしましょう。

App Store
https://itunes.apple.com/jp/app/adobe-edge-inspect-cc/id498621426

Google Play
https://play.google.com/store/apps/details?id=com.adobe.shadow.android&hl=ja

Step5. 同一ネットワークで接続

デバッグするPCとスマートフォンを同一ネットワークで接続してください。

スマートフォンをWi-Fiで接続している場合は、PCを同様にWi-Fiで接続します。

ここで、ネットワークの自動検出にはBonjourというサービスを使っていますが、Mac OS Xには最初からインストールされています。

Windowsの場合も、アプリケーションをインストールした際に同時に行われているので気にする必要はありません。

Step6. PCの「Adobe Edge Inspect アプリケーション」を起動

“Step2.”でPCにインストールした「Adobe Edge Inspect アプリケーション」を起動します。

Step7. PCのIPアドレスを調査

“Step3.”でChromeブラウザにインストールした「Adobe Edge Inspect エクステンション」をクリックして、PCのIPアドレスを調べます。

手順

1.「Adobe Edge Inspect エクステンション」をクリック

「Adobe Edge Inspect エクステンション」をクリック

 

2.IPアドレスを調べる

IPアドレスを調べる

Step8. スマートフォンの「Adobe Edge Inspect アプリ」を起動

手順

“Step4.”インストールした「Adobe Edge Inspect アプリ」を起動します。

「Adobe Edge Inspect アプリ」を起動

 

“Step7.”で調べたIPアドレスをスマートフォン側に入力します。

IPアドレスをスマートフォン側に入力

Step9. Chromeブラウザでサイトを開いて確認

デバッグしたいサイトのURLをChromeブラウザで開きます。

すると、スマートフォンにリアルタイムでデバッグしたいサイトが反映されるではありませんか!

素晴らしい! なんて素晴らしい機能なのでしょう!!

スマートフォンとPCのChromeブラウザがリアルタイムに連動

Chromeブラウザでサイトを開いて確認。リアルタイムでスマートフォンにも反映される

Step10. コードインスペクターでデバッグ

ココまできたら、デバッグまであともう少しです。

Chromeブラウザの「Adobe Edge Inspect エクステンション」を再度クリックしていただき下記をクリックして、コードインスペクターを起動します。

「Adobe Edge Inspect エクステンション」を再度クリック

起動したら、調査したい箇所を選びます。

すると、コードインスペクターと連動して、スマートフォン側もハイライトされるではないですか!

これは便利!!さらに、すぐにスマートフォンで確認出来るのでデバッグがスムーズに行く!!

起動したら、調査したい箇所選ぶとハイライトされます

素晴らしい!本当に素晴らしい!!

従来だと…

    1. PCブラウザでエミュレート
    2. スマートフォンで確認

という確認手順が、「Adobe Edge Inspect」を利用する事で、すぐにスマートフォンで確認できます!

PCブラウザでエミュレートの必要がなくなった! これは、使わない手はないですね!!

おまけ. さらにスクリーンショットも!

今まで煩わしかったスクリーンショットの撮影も、「Adobe Edge Inspect」を使うと簡単に出来ます!

これも便利!超絶便利なんです!!

まとめ

これまで色々なデバッグ方法がありましたが、直接そのデバイスをPCからデバッグするものはなかったと思います。

これであなたのスマホサイト制作も相当快適になるのではないでしょうか。この記事を読んだ方は、今からでもすぐに試してみてくださいね。

それでは、また次回!

ヒロさん
この記事を書いた人
ヒロさん

アートディレクター

関連記事