WordPress Tips : モバイルサイトのデバッグってどうしてますか？ Adobe Edge Inspect CC のご紹介

WordPress でスマートフォンサイトも一緒に作るのも、だいぶ簡単になってきましたね。

テーマによってはレスポンシブデザインになっていたり、先に紹介したように Jetpack のモバイル用テーマを使うなど、特に意識しなくてもすぐに構築できるようになってきました。

ご承知とは思いますが、レスポンシブデザインとは、ページを参照する端末にかかわらず、一つのファイルで処理を行う事が出来るデザインで作られている事をいいます。
ですから、どちらかというとレスポンシブデザインは、例えばスマートフォンサイトと PC 用のサイトを一つのテーマで処理を行う事になります。
そのまま普通に使っているのであれば、問題は起きる事もなく、おそらくちゃんと動くだろうとは思います。
ただ、手を入れる（カスタマイズする）となると、一つのファイルで二つのサイトを運営するのですから、この場合はこの処理、こっちの場合はこの処理などと記述を行う必要が生じるので難しい場合も出てきます。
その点 Jetpack のモバイル用テーマはテーマファイル自体は PC 版の物とは全く別のテーマで運用されているので、手も入れやすいです。

今やスマートフォンを無視するわけにもいかず、どちらもそれに対応するためのアプローチではありますが、カスタマイズのしやすさという点では、レスポンシブテーマはカスタマイズしにくいかなぁと思います。はやりとしてはみんなレスポンシブにすすんでいますけれど・・

前置きはともかく、Wordpress でスマートフォン用のテーマをのデバッグを行う際に便利な方法を紹介します。

ツールを使い、ターゲットを遠隔操作し表示されているソースコード等を確認する事を可能とするソフトウエアです。

一応 WordPress Tips と題名は付けましたけれど、今回の紹介は WordPress そのものによる方法ではありません。

実は問題に直面し、スマートフォンで表示されるページのソースコードを確認し、状況を調べる必要があったために使っている方法です。

すべて無償で構築できますので、その点でもお勧めです。

いくつかの条件がありますが、ハードルは低いので、安心してください。
その条件とは、同じ Wifi ネットワーク上にターゲットとするスマートフォンが接続されている必要がある事です。
いつも使っている PC と同じネットワークにスマートフォンが接続されていればよいので、簡単でしょう。

次にアプリケーションですが、Google Chrome を使います。

Edge Inspect CC

アプリケーションは Adobe 社が無償で提供している Edge Inspect CC を使います。
PC 上で動作するアプリケーションが1つ、Google Chrome 上で動くプラグインソフトウエアが1つ、そしてスマートフォン上で動かすアプリケーションの合計3つのソフトウエアを使用します。

まず最初に Adobe Edge Inspect CC をこちらのサイトからダウンロードします。
ダウンロードするには Adobe 社への登録が必要ですので、あらかじめ ID を取得しておきます。
サイトはこちらですが、Adobe サイトへのログイン後でないと表示できないと思います。
ダウンロード後は、実行ファイルを実行し、インストールを行います。

次に Google Chrome 上で実行する拡張機能をインストールします。

Chrome 拡張機能

サイトはこちらです。
実はこちら、エラーが出てなかなかインストール出来ませんでした。ネットワークエラーと表示されていましたが、原因は不明です。何度かアクセスして無事にインストール出来ました。

スマートフォン用には Android 用途 iPhone 用のアプリケーションがそれぞれ用意されていますので、ターゲットに合わせて Google Play や App Store からインストールします。

• Google Play（Android）
• App Store（iOS）

アプリケーションの起動

まずは、PC 上で Adobe Edge Inspect を起動します。最初の起動では、先にダウンロードする際に使用した Adobe ID の入力が必要です。以降はこのアプリは何も表示しません。

次にスマートフォンにインストールしたアプリケーションを起動します。
最初に接続する PC の IP アドレスを入力します。
PC 側で使用している IP アドレスを調べて入力します。

次に Chrome を起動し、右上にある

In ICON

のアイコンをクリックします。

接続可能なデバイスが見つかると（おそらくこれには Bonjour サービスを使っていると思われる）それが表示され、パスコードの入力画面が現れると思います。

スマートフォン側ではパスコードが表示されますので、そのパスコードを Chrome の拡張機能のウィンドウに入力すれば接続は完了します。

その後は、とかい方次第ではありますが、Chrome のデベロッパーズツールをそのまま使って、いつものとおりデバッグなどが出来ますので、非常に有効な方法と思います。

かなりはしょって説明をしていますけれど、簡単で効率的なデバッグ環境が構築できますので、便利です。

minorus

電子機器が大好きです。
プログラムを書くのをお仕事としていたこともあるので、両方できる PIC や Arduino を使って、いろいろな（役にあんまり立たない）ものを作っています。
実は UNIX 関連のお仕事も長かったので、Raspberry Pi もお手の物なのですけれど、これから触る機会が多くなるのかなぁ。
ボチボチ行きますが、お付き合いください。
若いころの写真なので、現時点では、まだ髪の毛は黒くてありますが、お髭は真っ白になりました。
愛車の国鉄特急カラーのカスタムしたリトルカブで、時々、秋月電子通商の八潮店に出没します。