たまたま、ある競合サイトのスマホの調査をする時にソースコードを調べるためにiphoneを使ったんだけど、iphoneのsafariのブラウザ使っても見れないんですよね。でもなんかあるだろーと思って見つけたのでメモしておきます。まぁ割と有名な方法ぽいですね。
safariのブックマークを使った方法
さっそく結論から言ってしまうとですね、iphoneの標準ブラウザであるsafariでブックマークをするとブックマーク名とそのURLが登録されるんですが、ブックマークの編集画面でそのURLの部分にソースコードを表示させるjavascriptに変更します。で、ソースコードが見たいページでそのブックマークを選択するとjavascriptが実行されて見たいページのソースコードが表示されるようになります。
とりあえず後ほど、画像付きで説明します。
ソースコードを表示するJavaScript
とりあえずは、ソースコードをiphoneで表示させるJavaScriptが必要なので、下記に載せておくのでコピーしてください。
javascript:(function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getElementById('snpy')%3Bif(typeof%20Snoopy!%3D'undefined')%7BSnoopy.toggle()%3Breturn%7Delse%20if(el)%7Bel.className%3D%2Fclosed%2F.test(el.className)%3Fel.className.replace('closed'%2C'')%3Ael.className%2B'%20closed'%3Breturn%7Ds%3Dd.createElement('link')%3Bs.setAttribute('href'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.css')%3Bs.setAttribute('rel'%2C'stylesheet')%3Bs.setAttribute('type'%2C'text%2Fcss')%3Bd.getElementsByTagName('head')%5B0%5D.appendChild(s)%3Be%3Dd.createElement('script')%3Be.setAttribute('src'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.js')%3Bd.getElementsByTagName('body')%5B0%5D.appendChild(e)%7D)()%3B
ソースコードを表示する流れ
ここからは、自分のiphoneを使って流れを説明しようかと思っています。
ブックマークを編集する
とりえあえず、適当なページをブックマークします。その後にブックマークの編集画面で先ほどブックマークしたページを選択します。
編集画面を開いたら、ブックマーク名を今回は分かりやすく「ソースコード表示」としてその下のURLに先に説明したJavaScriptのコードを貼り付けて完了し編集画面を終了ます。
ソースコードを表示させる
その後は、ソースコードを見たいページを開きます。
ページを開いたらブックマークから先ほど登録した「ソースコード表示」というブックマークを選択すると下記のような画面が表示されると思います。今回は自分のブログで試してみました。
最初は、overviewというタブでページ概要が表示されていますが、viewsourceタブを選択するとhtmlソースが確認することができます。
コメントを投稿するにはログインしてください。