どうも。

最近、
「スマホサイトにタグを入れたんスけど、ソース確認PCからじゃできないっスよね？どうすんスか？」
みたいな質問を続けて何度かいただきましたので、ブログにメモ的に記しておきます。 

スマホサイトは、
スマホから見るとスマホサイト・PCから見るとPCサイトを表示、
というように出しわけをしている事がよくあり、 
PCからスマホサイトのURLを直打ちしても見れない事が多々あります。

じゃあどうするのか、というと、スマホからHTMLソースを見ちゃえば解決です。
もちろんスマホのブラウザにソースを見る機能はiOS/Androidともに無いのですが、
下記の通りに「ネタ」 を仕込んでおけばいつでも確認が可能です。

今回は、iPhone（iOS）でオススメのやり方から紹介します。
（※Androidでの確認方法は、後日アップします。）

◆参考：
Snoopy | View-source bookmarklet for iPad, iPhone and other mobile devices

①まず、どこでもいいのでブックマークする

とりあえずなんでもいいのでSafariでWebサイトを開き、ブックマークに登録します。
（※キャプチャはなんでもよくないページです）

②ブックマークのタイトルをあらかじめ変えておく

ブックマークしたなんでもいいページのタイトルをあらかじめ変えておきます。
あとでわかりやすく・使いやすいモノに変えておいた方が便利です。

③「ブックマークレット」をコピーする

下記URLのページにアクセスして、
真ん中部分の「2：Copy all of the code in the following textarea to the clipboard: 」の
テキストエリアの内容をコピーします。
Snoopy | View-source bookmarklet for iPad, iPhone and other mobile devices

もしくは、PCで見てコピーして、iPhoneにメールで送るやり方でもOKです。
スマホからコピーは面倒臭いので、コッチの方が早いかも。

ちなみに「ブックマークレット」とは、簡単に言うとウェブブラウザで作動するJavaScriptプログラムの一種です。

④ブックマークの編集画面を開く

下記写真の赤丸部分のアイコンをクリックして、ブックマークの編集画面を開く。

⑤「ブックマークレット」を保存する

編集したいブックマークの右側部分をクリックし、タイトルとURLの編集画面へ。
編集画面に、先ほどコピーした長いjavascriptの記述をペーストし、保存。

これで一通りの準備は完了です。

⑥iPhoneからHTMLソースを確認してみる

HTMLソースを見たいページを開き、先ほど保存したブックマークレットを選ぶと
下記のようなイメージで、開いているページのHTMLソースを確認できるようになります。
開いているページに、ソース表示がオーバーレイ表示するような形でとても見やすいです。

注意点

ソースは簡単に、イケてる表示をしてくれますが、
CSSやjsのソースを辿って行くのは難しそうです。

また、冒頭にも書いておりますがAndroid端末では動作しませんでした。
（Snoopyのサイトにも書いておりますが…）
Android 4.0搭載のGalaxy SⅢでもダメだったので、今市場に出ている端末では厳しいかと…。

AndroidのブラウザからでもHTMLソースを確認できる手法もありますので、
そちらは次回以降お伝えさせていただきます。