F@N Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・nex8のエンジニア・技術ブログ

iPhoneを使ったWebページの解析

はじめに

はじめまして。スマフォ向けアドネットワーク『nend』の開発を担当させて頂いている@kou_hoshと申します。 今年はnend開発陣一同、お互いの知見をより高めていくことを目標に、 定期的にブログ記事を書いていこうと思います。 つっこみどころも多々あるとは思いますがどうぞよろしくお願いいたします。

スマフォで見ているWebページをMacで解析したい!

って思うことありませんか?実は簡単にできちゃいます。そう、iPhoneならね。 (※注 Androidでも他のやり方でできるようです)

iPhone側設定

設定 -> Safari -> 詳細 に行ってWebインスペクタをオンにする

f:id:fan_k_hoshino:20160420120201j:plain

Mac(Safari)側設定

メニューバーのSafari -> 環境設定 内の詳細タブを開き、開発メニューの表示をオンにする

f:id:fan_k_hoshino:20160420120222p:plain

設定は以上です。

あとは、iPhoneとMacを接続して、iPhoneのSafariで対象のWebページを表示させます。 すると、繋いだiPhone名と開いたWebページのドメインが開発メニューに表示されます。

f:id:fan_k_hoshino:20160420120217p:plain

上記を選択すると対象WebページのWebインスペクタが表示されます。

あとはFirebugのように色々調べてみてください。

f:id:fan_k_hoshino:20160420120211p:plain

HTML上のタグにカーソルを合わせると下記のようにiPhone内で対象がきちんと選択されたりします

f:id:fan_k_hoshino:20160420120201j:plain

ネットワーク読み込みの様子も見れます

f:id:fan_k_hoshino:20160420120206p:plain

これでどの広告がどの企業のものか判別させやすいですね。