8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-07-23

スマホをいじっていると「このページのソースコードが見たい!!」となることがありますよね。しかし、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をコードに置き換えてください)
そして、ソースコードの見たいページでブックマークを開きます。
DEF1C600-44B9-49AC-A4E1-8A53059980D4.png
ブックマークレットを実行すると
F05735C2-DAB0-4BB3-AA8B-37479C443B88.png
こんなかんじ。

#コードの説明
文字をエスケープ

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}")
8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?