ブックマークレットを使うとスマホでもHTMLソースを表示できます

スマホをいじっていると「このページのソースコードが見たい！！」となることがありますよね。しかし、iPhoneのSafariには標準ではHTMLのソースコードを見る機能がありません。そこで、HTMLソースを表示できるめちゃくちゃ便利なブックマークレットを紹介します。

ブックマークレットとは？

ブックマークレット とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。Wikipedia

JavaScriptで記述し、コードの先頭にjavascript:と付けてブックマークのURL欄に追加することで利用できます。

利用方法

javascript:var d=document;var o=d.documentElement;d.write("<pre class=\"prettyprint\">"+(o.outerHTML||o.innerHTML).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")+"</pre>");var style = d.createElement("style");style.type = "text/css";var head = d.head;head.appendChild(style);style.sheet.insertRule("*{font-family:'Menlo',monospace;font-size:7px}")

これをブックマークのURLに登録します。
（iPhoneではブックマークを登録する際に任意のURLを指定することができないので、まず仮のページを登録してから「ブックマーク」→「編集」でURLをコードに置き換えてください）
そして、ソースコードの見たいページでブックマークを開きます。

ブックマークレットを実行すると

こんなかんじ。

コードの説明

文字をエスケープ

var d=document;
var o=d.documentElement;
d.write("<pre class=\"prettyprint\">"+(o.outerHTML||o.innerHTML).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")+"</pre>");

フォントや文字サイズを調整
この部分は自由にカスタマイズしてください。

var style = d.createElement("style");
style.type = "text/css";
var head = d.head;
head.appendChild(style);
style.sheet.insertRule("*{font-family:'Menlo',monospace;font-size:7px}")